/* =========================================
   Amaryllis — BLOG
   -----------------------------------------
   Covers the single article and the blog index. style.css stays the
   base: tokens, reset, header/footer and the .reveal / .stagger
   motion system.

   Figma: cards are 464 x 512 with a 464 x 329 image and a 24px
   radius, three across.
========================================= */

.blog-page {
    /* --- Widths ------------------------------------------------
     * These are FRAME widths, not content widths. The theme sets
     * box-sizing: border-box, so a max-width of 1284 with 78px of
     * padding yields a 1128 column — the inset gets counted twice.
     * The cap is therefore the full 1440 frame and the padding alone
     * defines the column:
     *     1440 - 2x78 = 1284   (article, Figma x=78)
     *     1440 - 2x16 = 1408   (related row, Figma 1408 wide)
     * ----------------------------------------------------------- */
    --blog-frame: none;
    --blog-inset: max(18px, 5.42vw);
    --card-inset: max(10px, 1.11vw);

    --blog-ink: var(--c-ink);
    --blog-body: var(--c-ink);
    --blog-muted: #8a8a8a;
    --blog-accent: var(--c-brand);

    padding-bottom: clamp(40px, 5vw, 80px);
}

/* =========================================
   1. BANNER
========================================= */
/* FULL BLEED. Figma's Rectangle 34 is x=0, 1440 x 546 — it runs edge
   to edge like the nav above it. Capping this at 1408 and centring it
   is what put a margin down both sides. */
.blog-banner {
    position: relative;
    display: flex;
    align-items: center;
    max-width: none;
    margin: 0;
    /* The shared banner height, the same as every other page's.

       The artwork is a 2.4:1 strip and this frame is nearer 1.75:1, so
       about a quarter of its width is cropped. That is deliberate: the
       page's banners match each other. What the crop takes is decided
       per picture by amaryllis_banner_focus() in functions.php, which
       anchors these to the right so the products stay in frame and the
       empty wall on the left is what goes. */
    height: var(--hero-h);
    overflow: hidden;
    /* No radius — it runs edge to edge, so rounded corners would show
       the page through them. */
    border-radius: 0;
    background: #eef0ef;
}

/* The <picture> around it is not a box of its own — the image is what
   fills the banner. */
.blog-banner picture {
    display: contents;
}

.blog-banner-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Set per post by single.php: where the wide strip holds on. */
    object-position: var(--focus-wide, 50% 50%);
}

/* The wash under the copy.
 *
 * The artwork is a wide strip with its products to the right and the
 * left kept clear for the headline — but this frame is as tall as the
 * window, so on a narrower screen it crops that clear side away and the
 * products arrive under the text. The wash therefore has to carry the
 * copy across the whole block it occupies, not just the left third:
 * it holds more light back and reaches to 68%, and is clear of the
 * picture's right half where the products are read. */
.blog-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.56) 38%,
        rgba(255, 255, 255, 0) 68%
    );
    pointer-events: none;
}

/* Figma: the banner copy block is 765 wide at x=78 — 53% of the 1440
   frame. Held as a share rather than a fixed width, the block keeps
   that proportion on a narrower screen instead of reaching further and
   further across the artwork. */
.blog-banner-copy {
    position: relative;
    z-index: 2;
    max-width: min(765px, 53%);
    padding: 0 clamp(20px, 5.42vw, 78px);
}

/* Figma: Source Sans Pro w700 64 / lh 74 / #1f1f1f, uppercase — the
   same banner headline as Career and Products. Was capped at 39. */
.blog-banner-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 4.44vw, 62px);
    font-weight: 700;
    line-height: 1.16;
    text-transform: uppercase;
}

/* Two lines, two colours — each span is a block so they stack
   without needing a <br> in the field. */
.blog-kicker,
.blog-heading {
    display: block;
}

.blog-kicker { color: var(--blog-accent); }
.blog-heading { color: var(--blog-ink); }

/* Figma: Line 2 runs 226px at y=411, with the headline block ending
   at 391 and the standfirst starting at 431 — 20px either side. */
.blog-rule {
    display: block;
    width: clamp(80px, 15.7vw, 226px);
    height: 3px;
    margin: 20px 0 20px;
    background: var(--blog-accent);
}

/* Figma: Open Sans w600 24 / lh 24 / #1f1f1f, block 540 wide,
   starting 20px under the rule. */
/* Figma I384:4172: Open Sans w600 24 / lineHeightPx 24 / #1f1f1f in a
   540 box — so line-height is 1, not the 1.2 this carried. */
.blog-banner-copy p {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.67vw, 22px);
    font-weight: 400;
    line-height: 1;
    color: var(--blog-body);
    /* 540 of the 1440 frame is 37.5vw, so the sentence wraps at the
       same point in the picture whatever the screen. It was a fixed
       540, and on a narrower screen ran on into the products.
       (vw rather than %: a percentage here would be a share of the
       copy block, which is already capped.) */
    max-width: min(540px, 37.5vw);
}

.has-js .blog-banner-copy > * {
    opacity: 0;
    animation: amaryllis-rise 0.9s var(--ease) forwards;
}

.has-js .blog-banner-copy > *:nth-child(1) { animation-delay: 0.15s; }
.has-js .blog-banner-copy > *:nth-child(2) { animation-delay: 0.28s; }
.has-js .blog-banner-copy > *:nth-child(3) { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .has-js .blog-banner-copy > * { opacity: 1; animation: none; }
}

/* =========================================
   2. ARTICLE BODY
   -----------------------------------------
   Everything here is written in the editor, so the styling has to
   cover whatever the author reaches for — not a fixed set of
   classes. Element selectors, scoped to .blog-content.
========================================= */
/* Figma: the banner ends at 646 and the first content block starts
   at 694 → 48px. The column itself is 1284, which the 78px padding
   inside a 1440 frame produces. */
.blog-article {
    max-width: var(--blog-frame);
    margin: 0 auto;
    padding: clamp(26px, 3.33vw, 48px) var(--blog-inset) 0;
}

/* The post's full title at the head of the article (client request) -
   the banner above carries only the short two-line headline. Source
   Sans Pro w700 in the article ink, a step above the 30px section
   headings so it reads as the title of the page. */
.blog-title {
    max-width: 1600px;
    margin: 0 0 clamp(18px, 2.2vw, 30px);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.78vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--blog-ink);
}

/* --- Reading measure ---------------------------------------------
 * The section around it scales with the viewport so the page never
 * strands white space — but the ARTICLE TEXT stops at its Figma
 * width. At 24px body copy, 1284 is already about 70 characters a
 * line; letting it grow to 2300 on a wide monitor would make it
 * genuinely hard to read.
 *
 * The cap belongs on the TEXT, not on the layout around it. That
 * distinction is the whole point: capping the section was what put
 * the big margins on the page in the first place.
 * ------------------------------------------------------------- */
.blog-content {
    /* Same trade-off as Aircare's --article-max: 1284 is what the
       5.42vw inset already yields at 1440, so this only engages on a
       large display. 1600 is ~85 characters at 24px. */
    max-width: 1600px;
}

/* Figma: every section heading in the article is Source Sans Pro
   w700 32 / lh 40 / #1f1f1f, with a uniform 28px above and below.
   Was capped at 21px. */
.blog-content h2 {
    font-family: var(--font-display);
    font-size: clamp(16px, 2.22vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--blog-ink);
    margin: 28px 0 28px;
}

.blog-content h2:first-child { margin-top: 0; }

/* The FAQ questions inside the article use the same 32/40 as the
   section headings — Figma does not step down for them. */
.blog-content h3 {
    font-family: var(--font-display);
    font-size: clamp(15px, 2.22vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--blog-ink);
    margin: 28px 0 28px;
}

.blog-content h4 {
    font-family: var(--font-display);
    font-size: clamp(13px, 1.11vw, 14px);
    font-weight: 700;
    color: var(--blog-ink);
    margin: 20px 0 8px;
}

/* Figma: Open Sans w400 24 / lh 40 / #1f1f1f, in the 1284 column.
   Was capped at 16px. */
/* Figma 371:3739 etc: Open Sans w400 24 / lineHeightPx 40 / #1f1f1f in
   the 1284 column — so lh 1.67 is exact and stays.

   The SIZE is deliberately 22, not Figma's 24, matching the ceiling now
   used for body copy on Aircare and About. 24 reads oversized on a
   desktop screen, and the three pages should agree with each other
   rather than each being separately almost-right. Floor and slope are
   untouched, so phone and tablet are unaffected. */
.blog-content p {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.67vw, 20px);
    font-weight: 400;
    line-height: 1.67;
    color: var(--blog-body);
    margin-bottom: 28px;
}

.blog-content strong { color: var(--blog-ink); font-weight: 700; }

/* --- Product calls to action -------------------------------------
 * The "View Sigma" line at the end of a section. The markup comes from
 * amaryllis_blog_product_ctas() in inc/blog-meta.php, which promotes any
 * paragraph that is just a link to a product or a category — so this
 * styles intent, not a class an editor has to remember.
 *
 * A line of text and an arrow, no box: it sits inside running prose
 * and a bordered button there reads as an advert interrupting the
 * article. The arrow is what says it goes somewhere, and it slides on
 * hover — movement rather than a colour change, which is what keeps it
 * feeling live without a filled state.
 * ------------------------------------------------------------- */
.blog-cta-row {
    margin: clamp(14px, 1.4vw, 20px) 0 clamp(22px, 2.2vw, 32px);
}

/* Scoped to .blog-content so it outranks the prose-link rule below,
   which puts a 1px underline under every link in an article. A call to
   action is not a reference in the middle of a sentence and does not
   want one. */
.blog-content .blog-cta,
.blog-content .blog-cta:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #343434;
    font-family: var(--font-display);
    /* 2px up on both ends — 16 on a phone, 18 on a desktop. Without a
       box around it the label was reading as smaller than it is. */
    font-size: clamp(16px, 1.35vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.blog-cta .series-arrow {
    width: 22px;
    height: auto;
    flex: none;
    transition: transform 0.3s var(--ease);
}

.blog-cta:hover .series-arrow,
.blog-cta:focus-visible .series-arrow {
    transform: translateX(4px);
}

/* Keyboard users still need to see where they are. */
.blog-cta:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
}

/* The theme resets list-style globally, so it has to be switched
   back on for authored content. */
.blog-content ul,
.blog-content ol {
    margin: 0 0 18px 22px;
    list-style: disc;
}

.blog-content ol { list-style: decimal; }

/* --- Lists were badly undersized -------------------------------
 * These were capped at 16px against a 22px paragraph, so a bulleted
 * run read as a footnote rather than as body copy.
 *
 * In Figma there is no separate list style at all: node 371:3741 is a
 * SINGLE text block — "Effective ventilation helps:" and its bullets
 * together — at Open Sans w400 24 / lh 40. So the design sets list
 * items at exactly the same size as the paragraphs around them.
 * Matched to the paragraph ceiling above.
 * ------------------------------------------------------------- */
.blog-content li {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.67vw, 20px);
    line-height: 1.67;
    color: var(--blog-body);
    margin-bottom: 7px;
    padding-left: 4px;
}

.blog-content li:last-child { margin-bottom: 0; }

.blog-content a {
    color: var(--blog-ink);
    font-weight: 400;
    box-shadow: inset 0 -1px 0 currentColor;
}

.blog-content a:hover { color: var(--blog-accent); box-shadow: inset 0 -1px 0 currentColor; }

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 18px 0;
}

.blog-content blockquote {
    margin: 20px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--blog-accent);
    color: var(--blog-ink);
}

/* =========================================
   3. CARDS — used on the article foot and the index
========================================= */
.blog-related {
    /* The related row is 1408 wide, not 1284 — a narrower inset than
       the article column above it. */
    max-width: var(--blog-frame);
    margin: clamp(34px, 4.4vw, 60px) auto 0;
    padding: 0 var(--card-inset);
    overflow-x: clip;
}

/* Figma: "Popular Blogs" is Source Sans Pro w600 32 / lh 48, sitting
   48px above the card row (title ends 6345, row starts 6393). */
.blog-related-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(18px, 2.22vw, 30px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--blog-ink);
    margin-bottom: clamp(28px, 3.33vw, 48px);
}

/* Figma: three 464-wide cards at x = 32 / 512 / 992 in a 1408 row →
   16px apart. Was 15. */
.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 16px;
}

/* Popular Blogs at the foot of a post: every other post in ONE row that
   scrolls sideways (client request), three in view on desktop, each card
   exactly as wide as the three-column grid made it. The index page keeps
   the plain grid above - it has no .blog-scroll around it. */
.blog-scroll {
    position: relative;
    --per-view: 3;
    --blog-gap: 16px;
}

.blog-scroll .blog-card-grid {
    display: flex;
    gap: var(--blog-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Room for the card shadow and hover lift, given back by the negative
       margins so each card's width is unchanged. */
    padding: 8px 14px 30px;
    margin: -8px -14px -30px;
    scroll-padding-inline: 14px;
}

.blog-scroll .blog-card-grid::-webkit-scrollbar {
    display: none;
}

.blog-scroll .blog-card-grid > .blog-card {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--blog-gap)) / var(--per-view));
    scroll-snap-align: start;
}

/* Figma: DROP_SHADOW y12 blur12 #000000 at 20%. That is a FOURTH
   distinct card shadow in this file — y4/blur4 on the homepage FAQ,
   y10/blur10 on About, y12/blur12 here, y14/blur25 on Career and
   Contact. All at 20% black. Reproduced as-is rather than unified. */
.blog-card {
    background: var(--c-page);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* The whole card is one link, so the anchor is the flex column
   rather than the title alone — the entire tile is a target. */
.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card-media {
    display: block;
    /* Figma inspect: 464 x 329 */
    aspect-ratio: 464 / 329;
    overflow: hidden;
    background: #f1f1f1;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out);
}

.blog-card:hover .blog-card-media img { transform: scale(1.04); }

.blog-card-body {
    display: block;
    padding: 18px 20px 22px;
}

/* Figma: Open Sans w700 24 / lh 40 / #1f1f1f — the body font, and
   NOT uppercase. Was Source Sans Pro 17 with text-transform. */
/* Figma I384:4131;202:3934: Open Sans w700 24 / lh 40 / #1f1f1f and
   textCase UPPER. The uppercase was missing — card titles rendered in
   sentence case against a design that sets them in caps. */
.blog-card-title {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.67vw, 22px);
    font-weight: 700;
    line-height: 1.67;
    text-transform: uppercase;
    color: var(--blog-ink);
    margin-bottom: 9px;
}

/* Figma: Open Sans w600 16 / lh 24 / #1f1f1f. */
.blog-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: clamp(11px, 1.11vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--blog-body);
}

/* Cards arrive left to right, each from its own side */
.has-js .blog-card-grid.stagger > *:nth-child(3n + 1) { --reveal-delay: 0ms;   --reveal-x: -24px; }
.has-js .blog-card-grid.stagger > *:nth-child(3n + 2) { --reveal-delay: 80ms;  --reveal-x: 0px; }
.has-js .blog-card-grid.stagger > *:nth-child(3n + 3) { --reveal-delay: 160ms; --reveal-x: 24px; }

/* =========================================
   4. INDEX PAGE EXTRAS
========================================= */
.blog-index-head {
    max-width: var(--blog-frame);
    margin: 0 auto;
    padding: clamp(34px, 4.4vw, 60px) var(--blog-inset) 0;
    text-align: center;
}

.blog-index-lead {
    font-size: clamp(13px, 1.11vw, 14px);
    line-height: 1.65;
    color: var(--blog-body);
}

.blog-index .blog-related { margin-top: clamp(22px, 2.8vw, 38px); }

.blog-empty {
    text-align: center;
    font-size: 15px;
    color: var(--blog-muted);
    padding: 50px 0 60px;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    margin-top: clamp(26px, 3vw, 42px);
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    margin: 0 4px;
    padding: 0 12px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    font-size: 14px;
    color: var(--blog-body);
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.blog-pagination .page-numbers:hover { border-color: var(--blog-ink); }

.blog-pagination .page-numbers.current {
    background: var(--blog-ink);
    border-color: var(--blog-ink);
    color: var(--c-page);
}

/* =========================================
   5. RESPONSIVE
========================================= */
@media (max-width: 992px) {
    .blog-banner {
        border-radius: 8px;
    }

    .blog-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }

    .blog-scroll {
        --per-view: 2;
        --blog-gap: 15px;
    }

    .has-js .blog-card-grid.stagger > *:nth-child(3n + 1),
    .has-js .blog-card-grid.stagger > *:nth-child(3n + 2),
    .has-js .blog-card-grid.stagger > *:nth-child(3n + 3) {
        --reveal-delay: 0ms;
        --reveal-x: 0px;
    }

    .has-js .blog-card-grid.stagger > *:nth-child(2n + 1) { --reveal-x: -20px; }
    .has-js .blog-card-grid.stagger > *:nth-child(2n + 2) { --reveal-delay: 90ms; --reveal-x: 20px; }
}

@media (max-width: 576px) {
    /* --- Phone: the banner carries its HEADLINE only ---------------
     * Client request, and the same rule on every page that has a
     * banner. At 375px the frame is too shallow for a headline and a
     * standfirst both; the headline alone sits comfortably on the
     * photograph, which is where the client wants it. Everything here
     * is back from 577px up.
     * ----------------------------------------------------------- */
    .blog-banner-copy p,
    .blog-rule {
        display: none;
    }

    .blog-page { --blog-inset: 18px; }

    .blog-banner {
        border-radius: 6px;
    }

    /* The <source> above swaps in the squarer photograph at this width,
       and it is aimed differently from the wide strip. */
    .blog-banner-img {
        object-position: var(--focus-card, 50% 50%);
    }

    .blog-cta { gap: 8px; }

    .blog-cta .series-arrow { width: 19px; }

    .blog-banner-copy,
    .blog-banner-copy p { max-width: none; }

    .blog-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blog-scroll {
        --per-view: 1;
        --blog-gap: 16px;
    }

    .blog-card { border-radius: 16px; }
    .blog-card-body { padding: 15px 16px 18px; }

}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card-media img,
    .blog-pagination .page-numbers { transition: none; }

    .blog-card:hover { transform: none; }
    .blog-card:hover .blog-card-media img { transform: none; }

    .blog-scroll .blog-card-grid { scroll-behavior: auto; }
}


/* === desktop -2px === */
/* -----------------------------------------------------------------
   2px off the desktop type, as asked. These selectors set a FIXED
   size, which applies at every width -- editing the value in place
   would have shrunk the phone too, and the phone was already right.
   So the reduction is scoped to desktop and the base rule, which is
   what mobile uses, is left exactly as it was.
   ----------------------------------------------------------------- */
@media (min-width: 1025px) {
    .blog-empty { font-size: 13px; }   /* was 15px */
    .blog-pagination .page-numbers { font-size: 12px; }   /* was 14px */
}