/* ---------------------------------------------------------------------------
   Blog styles.

   Values below are taken from the Figma spec (article template). Comments name
   the design's own token names ("H4 32/Medium", "Text Grey") so a future edit
   can be traced back to the design system.

   Everything is scoped to .blog-* so it cannot leak into the marketing pages.
   Do NOT use the class names .title / .subtitle / .toptitle / .animated-text
   here — script.js attaches GSAP animations to them, and .subtitle starts at
   opacity:0, which would render text invisible.
   --------------------------------------------------------------------------- */

:root {
    /* -- font -------------------------------------------------------------
       The design specifies Poppins, but the current brand (and the only font
       shipped in this repo) is Inter, and the header/footer on every blog page
       render in Inter. Mixing the two on one page reads as a bug, so the blog
       uses Inter with the design's type scale. To switch to Poppins: add the
       Poppins woff2 files to src/pages/ultrabotim/fonts/, declare @font-face,
       and change this one value. */
    --blog-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* -- colour (design token names in comments) -------------------------- */
    --blog-black: #000000;              /* Black */
    --blog-text-grey: #5D7172;          /* Text Grey — article byline */
    --blog-text-grey-dark: #4A5758;     /* Text Grey Darker — article subtitle */
    --blog-cool-grey: #8F979D;          /* Cool Grey — card meta */
    --blog-light-grey: #F4F4F4;         /* Lite Grey — image placeholder, share buttons */
    --blog-stroke-grey: #EDEDED;        /* Stroke Grey — dividers */
    --blog-tech-blue: #1E53DB;          /* Tech Blue — image caption rule */
    --blog-card-bg: #ECF8FE;            /* card background */
    --blog-accent: #1E53DB;

    /* -- geometry ---------------------------------------------------------
       The design is drawn on a 1440px frame, which fixes the content at
       1152px (1440 - 144 each side) and the outer band at 1296px. Held
       literally, those numbers leave most of a 2560px or 3008px monitor
       empty, so each width grows with the viewport instead:

         - below ~1700px  the design's exact numbers apply (vw term is
                          smaller than the floor, so the floor wins)
         - above that     the width tracks the viewport
         - at the cap     growth stops, so text never sprawls

       Only the caps and the vw terms are ours; the floors are the design's.
       Editing a floor changes the layout at the design's own frame size.

       Landing page only: --blog-maxw and --blog-widew. The article page has
       its own pair below, because the two pages have different constraints. */
    --blog-maxw:  clamp(1152px, 68vw, 1800px);   /* content column  */
    --blog-widew: clamp(1296px, 76vw, 2000px);   /* collection band */

    /* -- article geometry -------------------------------------------------
       An article is governed by line length, not by available width. The
       design's 713px column at 16px is already ~45em (≈85 characters), which
       is the top of the comfortable range — so widening the column alone makes
       the text WORSE, not fuller. The column and the type therefore scale
       together, which keeps the measure at a constant ~45em while letting the
       article occupy more of a large screen:

         --blog-readw / --blog-body-size stays 713/16 = 44.6em at every size

       Everything else on the page is derived from the column. --blog-article-w
       is the text column PLUS the 96px gap and the 36px share rail, i.e. the
       full width of the visible content group — so the cover, the download
       prompt and Related Articles all sit flush with the text on the left and
       the share rail on the right.

       The design draws the cover at 1152 against a 713 column (1.616x). That
       was rejected on two counts: it read as oversized against the body copy,
       and because the share rail only occupies the right-hand side it overhung
       the text by 154px left but 286px right — visibly lopsided. Matching the
       content group instead gives 1.19x, which "just edges over" the text and
       is symmetric by construction, with no offset to maintain.

       To widen the cover again, add to the 132px below (it must stay >= 132 or
       the share rail is pushed outside the cover).

       The vw terms and the caps are the dial for "how much of a wide screen
       does an article fill". They must be changed TOGETHER and in proportion
       (cap / vw = 1200 / 0.40 = 3000, and 26.9 / 0.898 = 3000) or the measure
       drifts off 45em and the text gets harder to read as the screen grows. */
    --blog-readw: clamp(713px, 40vw, 1200px);
    --blog-body-size: clamp(16px, 0.898vw, 26.9px);
    --blog-article-w: calc(var(--blog-readw) + 132px);
    --blog-tocw: 240px;   /* contents rail — off by default, see build-blog.js */

    --blog-radius: 16px;
    --blog-radius-sm: 8px;
}

.blog-body {
    color: var(--blog-black);
    background: #FFFFFF;
    font-family: var(--blog-font);
}

/* ------------------------------------------------- fixed header occlusion

   The shared site header is `position: fixed` with `margin-top: 1.5rem`, and
   its backdrop (.navbar::before) is only `rgba(0,0,0,0.6)` plus a blur. Over
   the marketing pages' dark hero imagery that reads fine, but on a white blog
   page the 24px strip above the bar is fully transparent and article text
   bleeds through the 60%-opaque bar itself as it scrolls past.

   Making the header opaque on blog pages only fixes that. Scoped under
   .blog-body so the marketing pages keep their translucent treatment.

   NB this is NOT what made the article title look pinned to the header — that
   was post.ejs using a <header> element, which style.css pins to the viewport.
   See the note in post.ejs. */
.blog-body header {
    background: #FFFFFF;
    margin-top: 0;
    padding-top: 1.5rem;   /* preserves the header's inset look */
}
.blog-body .navbar::before {
    background-color: #000000;
    backdrop-filter: none;
}

/* Bootstrap's .container is deliberately not used on blog pages — it caps at
   1140px and would fight the design's 1152px content width — so these carry
   their own gutter. */
.blog-wrap,
.blog-post__head,
.blog-post__cover,
.blog-post__layout,
.blog-cta,
.blog-related {
    padding-inline: 16px;
}

.blog-wrap {
    /* the featured block and recent grid sit at --blog-maxw inside this, and
       the collection bands use the full --blog-widew. */
    max-width: calc(var(--blog-widew) + 32px);
    margin-inline: auto;
    padding-block: 96px 64px; /* clears the fixed site header */
}

/* H2 48/Semibold */
.blog-section-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 120%;
    text-align: center;
    margin: 0 0 40px;
}

/* Body 1 16/Semibold */
.blog-eyebrow {
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--blog-cool-grey);
    margin: 0 0 8px;
}

/* 48px top matches the article header's rhythm and, added to .blog-wrap's
   96px, keeps this clear of the ~104px fixed header. Without it the heading
   sits underneath the nav bar. */
.blog-page-head { text-align: center; padding-top: 48px; margin-bottom: 40px; }
.blog-page-title { font-size: 48px; font-weight: 600; line-height: 120%; margin: 0; }
.blog-page-desc {
    font-size: 20px; font-weight: 400; line-height: 150%;
    color: var(--blog-text-grey-dark);
    max-width: 853px; margin: 16px auto 0;
}
.blog-empty { text-align: center; color: var(--blog-text-grey); padding: 64px 0; }

/* ------------------------------------------------------------------ cards */

/* Card padding is 24px on all sides for both layouts; the image sits inside
   that padding with its own 8px radius. */
.blog-card {
    background: var(--blog-card-bg);
    border-radius: var(--blog-radius-sm);
    padding: 24px;
    height: 100%;
}

.blog-card__media { display: block; overflow: hidden; background: #FFFFFF; border-radius: var(--blog-radius-sm); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 0; }

/* Body 2 18/Bold — thumbnail-beside-text cards */
.blog-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    margin: 0 0 16px;
    color: var(--blog-black);
}
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { text-decoration: underline; }

/* B4 14/Regular */
.blog-card__excerpt {
    font-size: 14px; font-weight: 400; line-height: 150%;
    color: var(--blog-black);
    margin: 0 0 16px;
}

/* byline is B4 14/Regular, date + category are B4 14/Bold */
.blog-card__byline,
.blog-card__meta {
    font-size: 14px;
    line-height: 150%;
    color: var(--blog-cool-grey);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: center;
}
.blog-card__byline { font-weight: 400; }
.blog-card__meta { font-weight: 700; margin-top: 16px; text-transform: uppercase; }
.blog-card__category { color: inherit; text-decoration: none; }
.blog-card__category:hover { text-decoration: underline; }

/* -- image above text (featured large + recent grid) ---------------------
   Both use a 501x280 image and an H4 32/Bold title; 26px separates the
   image from the text block. */
.blog-card--stacked .blog-card__media { aspect-ratio: 501 / 280; }
.blog-card--stacked .blog-card__body { margin-top: 26px; }
.blog-card--stacked .blog-card__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 130%;
}

/* -- thumbnail beside text (featured side, collections, related) ---------
   The design draws a fixed 147x146 thumbnail, which is 147/549 ≈ 27% of the
   card it sits in. Held as a fixed pixel value it shrinks to a stamp once the
   card grows on a wide screen, so it is expressed as a floor plus a
   percentage: at the design's own card width 22% resolves below 147px, so the
   floor wins and the layout is pixel-identical to the spec. */
.blog-card--inline {
    display: grid;
    grid-template-columns: minmax(147px, 22%) 1fr;
    gap: 24px;
    align-items: center;
}
.blog-card--inline .blog-card__media { width: 100%; aspect-ratio: 147 / 146; }

/* --------------------------------------------------------------- featured */

/* 1148px block, 80px top padding, large card + stack of three */
.blog-featured {
    max-width: var(--blog-maxw);
    margin-inline: auto;
    padding-block: 80px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.blog-featured__side { display: grid; gap: 24px; align-content: start; }

/* ------------------------------------------------------------------- grid */

/* Recent Articles: 1152px, 6 cards in a 2-column grid at 24px */
.blog-recent {
    max-width: var(--blog-maxw);
    margin-inline: auto;
    padding-block: 48px;
}
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ----------------------------------------------------------- collections */

/* Bands run wider than the rest of the page (1296px vs 1152px) and step
   through one blue at increasing opacity. */
.blog-collection {
    max-width: var(--blog-widew);
    margin: 48px auto 0;
    padding: 24px;
    border-radius: 24px;
}
.blog-collection--1 { background: rgba(63, 117, 255, 0.2); }
.blog-collection--2 { background: rgba(63, 117, 255, 0.4); }
.blog-collection--3 { background: rgba(63, 117, 255, 0.6); }

.blog-collection__inner {
    padding: 40px 16px 24px;
    border-radius: var(--blog-radius);
    text-align: center;
}
/* Body 1 16/Semibold, black — not grey, unlike the collection-page eyebrow */
.blog-collection .blog-eyebrow { color: var(--blog-black); margin: 0 0 16px; }
.blog-collection__title { font-size: 48px; font-weight: 600; line-height: 120%; margin: 0 0 40px; }
.blog-collection__title a { color: inherit; text-decoration: none; }
.blog-collection__title a:hover { text-decoration: underline; }
.blog-collection__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    text-align: left;
}
/* cards go white inside a band, and their thumbnail picks up the band tint */
.blog-collection__grid .blog-card { background: #FFFFFF; }
.blog-collection--1 .blog-card__media { background: rgba(63, 117, 255, 0.2); }
.blog-collection--2 .blog-card__media { background: rgba(63, 117, 255, 0.4); }
.blog-collection--3 .blog-card__media { background: rgba(63, 117, 255, 0.6); }
.blog-collection__more { margin: 24px 0 0; font-size: 16px; }

/* ---------------------------------------------------------------- pager */

.blog-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 48px 0 0; }
.blog-pager__pages { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.blog-pager__page {
    min-width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 72px;
    font-size: 14px; font-weight: 500;
}
.blog-pager__page a { color: inherit; text-decoration: none; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 72px; }
.blog-pager__page a:hover { background: var(--blog-light-grey); }
.blog-pager__page.is-current { background: var(--blog-black); color: #FFFFFF; font-weight: 700; }
.blog-pager__prev, .blog-pager__next {
    color: var(--blog-black); text-decoration: none;
    font-size: 14px; font-weight: 500;
}
.blog-pager__prev:hover, .blog-pager__next:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ post */

.blog-post { padding-block: 96px 0; }

/* header block: 837px, centred, 48px vertical padding, 16px gap.
   Tracks the text column so the title stays proportional to the body on wide
   screens; the +156 reproduces the design's 837+32 exactly at --blog-readw's
   713px floor. */
.blog-post__head {
    max-width: calc(var(--blog-readw) + 156px);
    margin-inline: auto;
    text-align: center;
    padding-block: 48px 0;
}
/* Article type is expressed as multiples of --blog-body-size so the whole page
   scales as one system. The multiplier IS the design's px value divided by 16,
   so at the 16px floor every size below is exactly what Figma specifies. */

/* H2 48/Semibold */
.blog-post__title { font-size: calc(var(--blog-body-size) * 3); font-weight: 600; line-height: 120%; margin: 0; }
/* 20/Regular, Text Grey Darker */
.blog-post__subtitle {
    font-size: calc(var(--blog-body-size) * 1.25); font-weight: 400; line-height: 150%;
    color: var(--blog-text-grey-dark);
    max-width: 853px;
    margin: 16px auto 0;
}

/* cover: 1152x456, radius 16, Lite Grey placeholder */
.blog-post__cover { max-width: calc(var(--blog-article-w) + 32px); margin: 16px auto 0; }
.blog-post__cover img {
    width: 100%; aspect-ratio: 1152 / 456;
    object-fit: cover;
    border-radius: var(--blog-radius);
    background: var(--blog-light-grey);
    display: block;
}

/* content row: text column + 96px gap + 36px share rail */
.blog-post__layout {
    max-width: calc(var(--blog-article-w) + 32px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, var(--blog-readw)) 36px;
    justify-content: center;
    column-gap: 96px;
    padding-block: 48px;
}

/* B4 14 — Medium for values, Regular for the pipes */
.blog-post__byline {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: center;
    font-size: calc(var(--blog-body-size) * 0.875);
    font-weight: 500;
    line-height: 150%;
    color: var(--blog-text-grey);
    margin: 0 0 24px;
}
.blog-post__sep { font-weight: 400; }
.blog-post__category { color: inherit; font-weight: 500; text-decoration: none; }
.blog-post__category:hover { text-decoration: underline; }

/* share rail: 36px column, 24px gap, round 36px buttons on Lite Grey */
.blog-share {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 36px;
}
.blog-share a, .blog-share__link {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 72px;
    background: var(--blog-light-grey);
    color: var(--blog-black);
    border: 0;
    padding: 0;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}
.blog-share a:hover, .blog-share__link:hover { background: #E4E4E4; }
.blog-share__link.is-copied { background: var(--blog-tech-blue); color: #FFFFFF; }

.blog-post__content { grid-column: 1; }

/* ------------------------------------------------------- contents rail

   An article is capped by line length, so on a very wide screen the text
   column can only ever be about a third of the window — the rest is margin no
   matter how the widths are tuned. Rather than stretch the text past what is
   readable, the left margin carries the "On this page" rail from the design.

   Hidden below 1920px: under that it does not fit beside a text column at the
   design's proportions, and it is only navigation — every heading it links to
   is still in the page, so nothing is lost for search or for readers on
   narrower screens.

   Grid cannot set different column gaps, so the single 56px gap is the rail's,
   and the share rail adds 40px of its own to reach the design's 96px. */
.blog-toc { display: none; }

@media (min-width: 1920px) {
    .blog-post__layout--toc {
        grid-template-columns: var(--blog-tocw) minmax(0, var(--blog-readw)) 36px;
        column-gap: 56px;
    }
    .blog-post__layout--toc .blog-post__byline,
    .blog-post__layout--toc .blog-post__content { grid-column: 2; }
    .blog-post__layout--toc .blog-share { grid-column: 3; margin-left: 40px; }

    .blog-toc {
        display: block;
        grid-column: 1;
        grid-row: 1 / span 2;
        position: sticky;
        top: 128px;   /* clears the ~104px fixed site header */
        align-self: start;
        max-height: calc(100vh - 176px);
        overflow-y: auto;
        border-left: 2px solid var(--blog-stroke-grey);
        padding-left: 20px;
    }
    .blog-toc__title {
        font-size: calc(var(--blog-body-size) * 0.875);
        font-weight: 700;
        line-height: 150%;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--blog-cool-grey);
        margin: 0 0 16px;
    }
    .blog-toc__list {
        list-style: none;
        margin: 0;
        padding: 0;
        counter-reset: blog-toc;
    }
    .blog-toc__list li { margin-bottom: 12px; counter-increment: blog-toc; }
    .blog-toc__list li:last-child { margin-bottom: 0; }
    .blog-toc__list a {
        font-size: calc(var(--blog-body-size) * 0.875);
        font-weight: 400;
        line-height: 140%;
        color: var(--blog-text-grey);
        text-decoration: none;
        display: block;
    }
    .blog-toc__list a::before {
        content: counter(blog-toc) ".";
        color: var(--blog-cool-grey);
        margin-right: 8px;
    }
    .blog-toc__list a:hover { color: var(--blog-black); text-decoration: underline; }
}

/* ------------------------------------------------------- post body typography */

/* Summary heading matches H4 32/Medium; bullets are 20/Semibold at 120% */
.blog-summary { padding-block: 24px 16px; }
.blog-summary__title {
    font-size: calc(var(--blog-body-size) * 2); font-weight: 500; line-height: 130%;
    margin: 0 0 24px;
}
.blog-summary__list { margin: 0; padding-left: 24px; }
.blog-summary__list li {
    font-size: calc(var(--blog-body-size) * 1.25); font-weight: 600; line-height: 120%;
    margin-bottom: 16px;
}
.blog-summary__list li:last-child { margin-bottom: 0; }

/* H4 32/Medium — the "##" headings (Introduction, Conclusion, ...) */
.blog-post__content .blog-h2 {
    font-size: calc(var(--blog-body-size) * 2); font-weight: 500; line-height: 130%;
    margin: 24px 0;
}
/* H5 24/Medium — the "###" headings (1. Saves money, ...) */
.blog-post__content .blog-h3 {
    font-size: calc(var(--blog-body-size) * 1.5); font-weight: 500; line-height: 120%;
    margin: 40px 0 24px;
}
/* H6 20/Bold */
.blog-post__content .blog-h4 {
    font-size: calc(var(--blog-body-size) * 1.25); font-weight: 700; line-height: 140%;
    margin: 24px 0 16px;
}
/* Body 1 16/Regular — the base the rest of the article is measured against */
.blog-post__content p {
    font-size: var(--blog-body-size); font-weight: 400; line-height: 150%;
    margin: 0 0 16px;
}
.blog-post__content ul, .blog-post__content ol {
    font-size: var(--blog-body-size); font-weight: 400; line-height: 150%;
    margin: 0 0 16px; padding-left: 24px;
}
.blog-post__content li { margin-bottom: 8px; }
.blog-post__content a { color: var(--blog-black); text-decoration: underline; }
.blog-post__content a:hover { color: var(--blog-tech-blue); }
.blog-post__content strong { font-weight: 600; }
.blog-post__content blockquote {
    margin: 24px 0; padding: 16px 24px;
    border-left: 2px solid var(--blog-tech-blue);
    background: var(--blog-light-grey);
    border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
}
.blog-post__content hr { margin: 48px 0; border: 0; border-top: 1px solid var(--blog-stroke-grey); }

/* figure: 48px vertical padding, 16px gap, 713x450 image, 2px Tech Blue caption rule */
.blog-figure { margin: 0; padding-block: 48px; }
.blog-figure img {
    width: 100%; aspect-ratio: 713 / 450;
    object-fit: cover;
    border-radius: var(--blog-radius);
    background: var(--blog-light-grey);
    display: block;
}
.blog-figcaption {
    font-size: calc(var(--blog-body-size) * 0.875); font-weight: 400; line-height: 150%;
    color: var(--blog-black);
    margin-top: 16px;
    padding-left: 8px;
    border-left: 2px solid var(--blog-tech-blue);
}

/* -------------------------------------------------------------- post CTA */

/* Two columns: copy + round image, 96px apart, 48px vertical padding.
   The design's 401 / 96 / 480 across a 977px block is held as percentages
   (41.04 + 9.83 + 49.13 = 100) so the block scales with the article. Matched to
   the article width so it lines up with the cover above it. */
.blog-cta {
    max-width: calc(var(--blog-article-w) + 32px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 41.04% 49.13%;
    column-gap: 9.83%;
    align-items: center;
    padding-block: 48px;
}
.blog-cta__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.blog-cta__title { font-size: calc(var(--blog-body-size) * 3); font-weight: 600; line-height: 150%; margin: 0; }
.blog-cta__btn {
    display: inline-flex; align-items: center;
    background: var(--blog-black);
    color: #FFFFFF;
    text-decoration: none;
    font-size: calc(var(--blog-body-size) * 1.25); font-weight: 700; line-height: 150%;
    padding: 16px 32px;
    border-radius: 156px;
}
.blog-cta__btn:hover { color: #FFFFFF; opacity: .85; }
.blog-cta__media { width: 100%; aspect-ratio: 1; }
.blog-cta__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #D9D9D9;
    display: block;
}

/* related: 40px inner padding, 40px gap, 2-col grid at 24px.
   Matched to the cover, not the landing page's width, so the article reads as
   one column of consistent width top to bottom. */
.blog-related { max-width: calc(var(--blog-article-w) + 32px); margin-inline: auto; padding-block: 48px; }
.blog-related__inner { padding: 40px 16px; border-radius: var(--blog-radius); }
.blog-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ------------------------------------------------------------ wide screens

   Past roughly 2400px the content column is wide enough that two cards per row
   makes each card ~820px — far wider than the 549px the design draws, so the
   32px titles and 14px excerpts float in a mostly empty box. Three per row
   brings the card back to ~545px, i.e. the design's own proportions, and 6
   posts per page still divides evenly (two rows of three).

   Deliberately applied to the recent grid only: the collection bands and
   Related Articles show 4 posts, which tiles cleanly as 2x2 but leaves an
   orphan at three columns. */
@media (min-width: 2400px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 1199.98px) {
    .blog-cta { grid-template-columns: 1fr; gap: 40px; justify-items: center; text-align: center; }
    .blog-cta__copy { align-items: center; }
    .blog-cta__media { width: 320px; }
}

@media (max-width: 991.98px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-post__layout { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .blog-post__byline, .blog-post__content { grid-column: 1; }
    .blog-share {
        grid-column: 1;
        grid-row: auto;
        position: static;
        flex-direction: row;
        width: auto;
        padding-bottom: 24px;
    }
    .blog-section-title, .blog-page-title, .blog-collection__title, .blog-post__title { font-size: 36px; }
    .blog-cta__title { font-size: 36px; }
    .blog-featured { padding-block: 48px 0; }
    .blog-card--stacked .blog-card__title { font-size: 26px; }
}

@media (max-width: 767.98px) {
    .blog-wrap { padding-block: 80px 48px; }
    .blog-grid,
    .blog-collection__grid,
    .blog-related__grid { grid-template-columns: 1fr; }
    .blog-collection { padding: 16px; margin-top: 32px; }
    .blog-collection__inner { padding: 24px 0 8px; }
    .blog-card { padding: 16px; }
    .blog-card--stacked .blog-card__title { font-size: 22px; }
    .blog-card--stacked .blog-card__body { margin-top: 16px; }
    .blog-card--inline { grid-template-columns: minmax(96px, 28%) 1fr; gap: 16px; }
    .blog-section-title, .blog-page-title, .blog-collection__title, .blog-post__title { font-size: 28px; }
    .blog-post__subtitle { font-size: 18px; }
    .blog-summary__title, .blog-post__content .blog-h2 { font-size: 24px; }
    .blog-post__content .blog-h3 { font-size: 20px; }
    .blog-summary__list li { font-size: 18px; }
    .blog-cta__title { font-size: 28px; }
    .blog-cta__media { width: 240px; }
    .blog-figure { padding-block: 32px; }
}