/*
 * Blog — index card list + long-form article typography (headings, tables,
 * blockquotes, callouts, spec lists, FAQ) layered on top of .lfs-prose.
 * Loaded only on /blog/ pages.
 */

/* Colour and type follow BRAND.md (frozen 2026-08-01): one accent, reached
   only through the brand tokens, and headings on the §2 scale. Every
   surface here sits on a light background, so --brand is correct; a dark
   section would need the light variant instead. Never a raw hex. */

/* ================================================================
   BLOG INDEX — card list
   ================================================================ */
.lfs-blog-list {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.lfs-blog-card {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--surface);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 48rem) {
    .lfs-blog-card {
        grid-template-columns: 18rem 1fr;
    }
}

.lfs-blog-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: var(--shadow-lg);
}

.lfs-blog-card__media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--surface-raised);
    overflow: hidden;
}

.lfs-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lfs-blog-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.lfs-blog-card__meta {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand);
}

.lfs-blog-card__title {
    margin: 0 0 0.6rem;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.lfs-blog-card__title a {
    color: var(--text);
    text-decoration: none;
}

.lfs-blog-card__title a:hover {
    color: var(--brand-hover);
}

.lfs-blog-card__excerpt {
    margin: 0 0 1.1rem;
    color: var(--body);
    line-height: 1.6;
    font-size: 0.9375rem;
    flex: 1;
}

.lfs-blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.lfs-blog-card__cta::after {
    content: "\2192";
    font-weight: 700;
    transition: transform 0.2s ease;
}

.lfs-blog-card:hover .lfs-blog-card__cta::after {
    transform: translateX(3px);
}

/* ================================================================
   ARTICLE — header meta + figure
   ================================================================ */
.lfs-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: center;
    margin: 0.9rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.lfs-article-figure {
    margin: 0 0 2rem;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.lfs-article-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================================================================
   ARTICLE BODY — long-form typography
   ================================================================ */
.lfs-article-body {
    max-width: 46rem;
    margin: 0 auto;
    color: var(--text);
}

.lfs-article-body h2 {
    margin: 2.75rem 0 1.1rem;
    padding-top: 1.85rem;
    border-top: 1px solid var(--border);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
}

.lfs-article-body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.lfs-article-body h3 {
    margin: 1.85rem 0 0.85rem;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text);
}

.lfs-article-body p {
    margin: 0 0 1.15rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--body);
}

.lfs-article-body ul,
.lfs-article-body ol {
    margin: 0 0 1.35rem;
    padding-left: 1.35rem;
    color: var(--body);
    line-height: 1.65;
}

.lfs-article-body li {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

.lfs-article-body ul > li::marker {
    color: var(--brand);
}

.lfs-article-body strong {
    color: var(--text);
    font-weight: 700;
}

.lfs-article-body em {
    font-style: italic;
}

.lfs-article-body a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color 0.15s ease;
}

.lfs-article-body a:hover {
    color: var(--brand-hover);
}

/* ================================================================
   TABLES — always horizontally scrollable, never overflow the page
   ================================================================ */
.lfs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.lfs-article-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 0.9375rem;
}

.lfs-article-table--wide {
    min-width: 54rem;
}

.lfs-article-table th,
.lfs-article-table td {
    padding: 0.75rem 0.95rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.lfs-article-table thead th {
    background: var(--surface-alt);
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.lfs-article-table tbody tr:nth-child(even) {
    background: var(--surface-alt);
}

.lfs-article-table tbody tr:last-child td {
    border-bottom: none;
}

.lfs-article-table td strong {
    color: var(--text);
}

/* ================================================================
   BLOCKQUOTES — merchant testimonials + quoted app-listing copy
   ================================================================ */
.lfs-article-body blockquote {
    margin: 0 0 1.35rem;
    padding: 1.1rem 1.35rem;
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--surface-alt);
    box-shadow: var(--shadow-sm);
}

.lfs-article-body blockquote p {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--text);
}

.lfs-article-body blockquote p:last-of-type {
    margin-bottom: 0;
}

.lfs-article-body blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    color: var(--muted);
}

/* ================================================================
   CALLOUTS — "watch out for" / honest-downside call-outs
   ================================================================ */
.lfs-article-body .lfs-callout--watch {
    max-width: none;
    margin: 0 0 1.35rem;
    border-left-color: var(--amber);
    background: var(--amber-soft);
}

.lfs-article-body .lfs-callout--watch p {
    color: var(--ink-light);
}

.lfs-article-body .lfs-callout--watch p:last-child {
    margin-bottom: 0;
}

.lfs-article-body .lfs-callout--watch strong {
    color: var(--ink);
}

/* ================================================================
   APP SPEC LIST — Type / Developer / Rating / Pricing / Built for Shopify
   ================================================================ */
.lfs-app-specs {
    list-style: none;
    margin: 0 0 1.35rem;
    padding: 1rem 1.25rem;
    display: grid;
    gap: 0.4rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r);
}

.lfs-app-specs li {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--body);
}

.lfs-app-specs li strong {
    margin-right: 0.3em;
    color: var(--text);
}

.lfs-app-specs__link {
    margin-top: 0.15rem;
}

.lfs-app-specs__link a {
    font-weight: 600;
}

/* ================================================================
   FAQ
   ================================================================ */
.lfs-faq-item {
    padding-bottom: 1.35rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--border);
}

.lfs-faq-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.lfs-faq-item h3 {
    margin: 0 0 0.5rem;
}

.lfs-faq-item p {
    margin: 0;
}

/* ================================================================
   BLOG POST COMPONENTS — TOC, takeaways, diagrams, captions, check
   cards, inline CTA. Emitted by blog/_render_preview*.py. Until
   2026-08-30 the first four lived only in the preview's draft <style>,
   which the builder never copies, so they shipped unstyled.
   ================================================================ */
.lfs-toc {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r);
}

#content .lfs-toc h2 {
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand);
}

.lfs-toc ol {
    margin: 0;
    padding-left: 1.1rem;
}

.lfs-toc li {
    margin: 0 0 0.4rem;
    font-size: 0.9375rem;
}

.lfs-toc a {
    color: var(--body);
    text-decoration: none;
    font-weight: 500;
}

.lfs-toc a:hover {
    color: var(--brand);
    text-decoration: underline;
}

.lfs-takeaways {
    margin: 0 0 2rem;
    padding: 1.5rem 1.75rem;
    background: var(--brand-soft);
    border: 1px solid var(--brand);
    border-radius: var(--r-lg);
}

#content .lfs-takeaways h2 {
    margin: 0 0 0.9rem;
    padding: 0;
    border: 0;
    font-size: 1.1875rem;
    color: var(--text);
}

.lfs-takeaways ul {
    margin: 0;
    padding-left: 1.15rem;
}

.lfs-takeaways li {
    margin: 0 0 0.55rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--body);
}

.lfs-takeaways li:last-child {
    margin-bottom: 0;
}

.lfs-takeaways li::marker {
    color: var(--brand);
}

.lfs-article-body p.app-kicker {
    margin: -0.35rem 0 1.15rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand);
}

.lfs-figure--diagram {
    box-shadow: none;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 0.75rem;
}

.lfs-figure--diagram svg {
    width: 100%;
    height: auto;
    display: block;
}

.lfs-figure--shot {
    background: var(--surface);
    border: 1px solid var(--border);
}

.lfs-article-figure figcaption {
    padding: 0.65rem 1rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
}

/* Narrow tables (three columns or fewer) wrap inside the measure instead of
   scrolling. The roundups keep --wide for their nine-column comparisons. */
.lfs-article-table--fit {
    min-width: 0;
}

.lfs-article-table--fit thead th {
    white-space: normal;
}

@media (max-width: 40rem) {
    .lfs-article-table--fit th,
    .lfs-article-table--fit td {
        padding: 0.6rem 0.6rem;
        font-size: 0.875rem;
    }
}

.lfs-check-list {
    display: grid;
    gap: 0.85rem;
    margin: 0 0 1.5rem;
}

.lfs-check {
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.lfs-check__label {
    display: block;
    margin-bottom: 0.3rem;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.lfs-article-body .lfs-check p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--body);
}

.lfs-inline-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 1.4rem 1.5rem;
    background: var(--brand-soft);
    border: 1px solid var(--brand-light);
    border-radius: var(--r-lg);
}

#content .lfs-inline-cta h3 {
    margin: 0 0 0.35rem;
    font-size: 1.1875rem;
    color: var(--text);
}

.lfs-article-body .lfs-inline-cta p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--body);
}

.lfs-inline-cta .lfs-cta-primary {
    align-self: flex-start;
    white-space: nowrap;
}

@media (min-width: 48rem) {
    .lfs-inline-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .lfs-inline-cta__text {
        flex: 1 1 auto;
        padding-right: 1rem;
    }

    .lfs-inline-cta .lfs-cta-primary {
        align-self: center;
    }
}

/* ================================================================
   COPY TEMPLATE — a block the reader is meant to lift and reuse
   (a supplier email, a message to send on). Deliberately NOT
   .lfs-check: that is a checklist card, this is a document the
   reader copies. Added 2026-09-07 for the GMC GTIN errors post.
   ================================================================ */
.lfs-template {
    margin: 0 0 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.lfs-template__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.15rem;
    background: var(--brand-soft);
    border-bottom: 1px solid var(--border-strong);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--brand-active);
}

.lfs-template__head svg {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
}

/* The subject sits apart from the body, the way it does in a mail client. */
.lfs-template__subject {
    padding: 0.7rem 1.15rem;
    border-bottom: 1px dashed var(--border-strong);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text);
}

.lfs-template__subject span {
    margin-right: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.lfs-template__body {
    padding: 1rem 1.15rem 1.1rem;
    background: var(--surface-alt);
}

.lfs-article-body .lfs-template__body p {
    margin: 0 0 0.8rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--body);
}

.lfs-article-body .lfs-template__body p:last-child {
    margin-bottom: 0;
}

/* Anything the reader has to swap out before sending. */
.lfs-template mark {
    padding: 0.05em 0.4em;
    border-radius: var(--r-pill);
    background: var(--amber-soft);
    color: var(--ink-light);
    font-weight: 600;
    font-style: normal;
}

/* ================================================================
   NUMBERED STEPS — "do these two checks first" blocks. Sibling of
   .lfs-check, kept separate so the three posts already using
   .lfs-check are untouched.
   ================================================================ */
.lfs-steps {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    counter-reset: lfs-step;
}

.lfs-article-body ol.lfs-steps,
.lfs-article-body ul.lfs-steps {
    padding-left: 0;
}

.lfs-step {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 0.95rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.lfs-step::before {
    counter-increment: lfs-step;
    content: counter(lfs-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1;
}

.lfs-step__label {
    display: block;
    margin-bottom: 0.2rem;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text);
}

.lfs-article-body .lfs-step p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--body);
}

.lfs-step__where {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-active);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ================================================================
   STACKING TABLE — opt-in modifier. Below 40rem the rows become
   labelled cards instead of a horizontal scroll, so the last column
   is reachable without swiping. Scoped to --stack on purpose: the
   other posts' tables keep their current behaviour.
   `data-label` is injected by the renderer from the header row.
   ================================================================ */
@media (max-width: 40rem) {
    .lfs-table-wrap--stack {
        overflow-x: visible;
        border: 0;
        box-shadow: none;
    }

    .lfs-article-table--stack,
    .lfs-article-table--stack tbody,
    .lfs-article-table--stack tr,
    .lfs-article-table--stack td {
        display: block;
        width: 100%;
    }

    .lfs-article-table--stack thead {
        display: none;
    }

    .lfs-article-table--stack tr {
        margin: 0 0 0.85rem;
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--r);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .lfs-article-table--stack tr:last-child {
        margin-bottom: 0;
    }

    /* Label above value, not beside it. A two-column grid here would make every
       inline child of the cell its own grid item, so a link inside the cell breaks
       onto its own row in the label column. */
    .lfs-article-table--stack td {
        display: block;
        padding: 0.6rem 0.85rem;
        border: 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .lfs-article-table--stack td:last-child {
        border-bottom: 0;
    }

    .lfs-article-table--stack td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* The first cell of each row reads as the card's title. */
    .lfs-article-table--stack td:first-child {
        background: var(--surface-alt);
    }
}

/* ================================================================
   CREDITED FIGURE — a third-party screenshot we are reproducing with
   attribution. The caption makes the editorial point; the credit and
   any provenance caveat sit under it as quieter metadata, so the
   reader is told what to look at before being told where it came
   from. Scoped to --credited so uncredited figures keep the centred
   caption they shipped with. Added 2026-09-07.
   ================================================================ */
.lfs-figure--credited figcaption {
    text-align: left;
    color: var(--body);
}

.lfs-figure--credited .lfs-figcredit {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}

/* ================================================================
   INLINE CTA — refinements, 2026-09-07
   ================================================================ */

/* .lfs-article-body a underlines every link in article prose, which was also
   underlining the inline CTA's button in all five posts that carry one. A button
   is not a link; strip it back. */
.lfs-article-body .lfs-inline-cta .lfs-cta-primary {
    text-decoration: none;
}

/* Honest limits on what the app does still have to be stated, but inside the main
   paragraph they killed the momentum at the exact point the reader is asked to act.
   They read as a footnote under the pitch instead. */
.lfs-article-body .lfs-inline-cta .lfs-inline-cta__note {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}