/* ==========================================================================
   markXpand — Blog (/Blog and /Blog/{slug})
   --------------------------------------------------------------------------
   Laid out on the reference shot: a left-aligned title over a row of category
   chips, one featured post as an image/text split, then a tinted band holding a
   three-up card grid. The reference's own skin does NOT come with it — its dark
   pills, its stock photography of people in meetings and its "News" tag on every
   card are all replaced:

     buttons  → .lp-btn-cta from landing-page.css, like the rest of the site
     type     → .pr-display / .pr-kicker / .pr-lede, i.e. the landing page's voice
     tags     → the real category, in the Space Mono micro-label idiom
     images   → real product screens (see the note in Core/Consts/BlogCatalog.cs)

   LOAD ORDER: landing-page.css (tokens, nav, buttons, footer) → product-page.css
   (.pr-shell, type scale, page ground) → this file. Everything here is .bl-*.
   Section 9 (responsive) is LAST — a media query adds no specificity, so an
   unmediated rule written after one would silently beat it.
   ========================================================================== */


/* ==========================================================================
   0. PAGE GROUND
   ========================================================================== */
.bl-page {
    /* The reference runs white behind the head and the featured split, then a
       warm off-white behind the grid. Ours uses the site's own two grounds so
       the band change reads as the same device the home page uses. */
    background: #fff;
    --bl-ease: cubic-bezier(.16, 1, .3, 1);
    --bl-line: #e6eef5;
}

/* Anchor jumps and :target land below the fixed bar (product-page.js measures it). */
.bl-page [id] { scroll-margin-top: var(--pr-navh, 88px); }


/* ==========================================================================
   1. HEAD — title, one line, and the filter chips
   ========================================================================== */
.bl-head { padding: clamp(128px, 14vw, 180px) 0 clamp(26px, 3vw, 40px); }

.bl-title { margin: 0 0 16px; }

.bl-lede { max-width: 58ch; }

.bl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(26px, 3vw, 38px);
}

/* Real links carrying ?category, so the filter works with JS off and each view
   has its own URL. Styled as chips, not as buttons — they navigate. */
.bl-chip {
    display: inline-flex;
    align-items: center;
    /* 40px min plus the padding clears the 44px touch target on a phone. */
    min-height: 40px;
    padding: 8px 18px;
    border: 1.5px solid var(--bl-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: var(--font-b);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--text-body);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s var(--bl-ease), color .2s var(--bl-ease), background .2s var(--bl-ease);
}

.bl-chip:hover { border-color: var(--brand); color: var(--brand-dark); }

.bl-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The reference fills the active chip with its near-black. Ours takes the brand
   gradient the site's primary button already uses, so "selected" reads the same
   here as it does everywhere else. */
.bl-chip.is-on {
    border-color: transparent;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(46, 123, 168, .22), 0 8px 20px -8px rgba(67, 163, 221, .5);
}


/* ==========================================================================
   2. SHARED — the category tag and the read-time line
   ========================================================================== */

/* The reference stamps a grey "News" on every card, which says nothing. This is
   the post's real category, in the Space Mono micro-label idiom the rest of the
   site uses for eyebrows. */
.bl-tag {
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--radius-xs);
    background: rgba(67, 163, 221, .11);
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-dark);
}

.bl-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bl-meta i { font-size: .66rem; color: var(--brand-dark); }


/* ==========================================================================
   3. FEATURED — the image/text split the page leads with
   ========================================================================== */
.bl-featured { padding: 0 0 var(--space-section); }

.bl-feat {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 56px);
    align-items: center;
}

/* aspect-ratio holds the box before the screenshot decodes, so the split never
   reflows on load. The link is aria-hidden and out of the tab order: the title
   below it already goes to the same place, and two tab stops to one article is
   noise for anyone using a keyboard or a screen reader. */
.bl-feat-media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    aspect-ratio: 16 / 10;
}

.bl-feat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* These are wide product screens in a narrower box, so cover has to drop
       something. Anchoring top-LEFT keeps the corner a UI screenshot actually
       carries its meaning in — the heading, the nav, the first column — instead
       of centring and shaving both edges. The uncropped image is on the post
       page, where it runs full width with height:auto. */
    object-position: top left;
    transition: transform .5s var(--bl-ease);
}

.bl-feat-media:hover img { transform: scale(1.03); }

.bl-feat-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.bl-feat-h {
    margin: 0;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -.025em;
    color: var(--ink);
    text-wrap: balance;
}

.bl-feat-h a { color: inherit; text-decoration: none; transition: color .2s var(--bl-ease); }
.bl-feat-h a:hover { color: var(--brand-dark); }
.bl-feat-h a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

.bl-feat-p {
    margin: 0;
    font-family: var(--font-b);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-body);
    text-wrap: pretty;
}

.bl-feat-cta { margin-top: 6px; }


/* ==========================================================================
   4. THE RUN — tinted band, three-up grid
   ========================================================================== */
.bl-latest {
    padding: var(--space-section) 0;
    background: var(--bg);
    border-top: 1px solid var(--bl-line);
}

.bl-latest-h { margin: 0 0 clamp(30px, 3.6vw, 48px); }

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 34px);
}

.bl-card {
    display: flex;
    flex-direction: column;
    /* No card chrome in the reference — the image IS the card, with the text
       sitting on the band underneath it. Kept, because a border around every
       tile would fight the screenshots' own frames. */
    background: none;
}

.bl-card-media {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-alt);
    aspect-ratio: 4 / 3;
    border: 1px solid var(--bl-line);
}

.bl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    transition: transform .5s var(--bl-ease);
}

/* top-left is a SCREENSHOT rule (see .bl-feat-media img). Artwork carries its
   subject in the middle, so anchoring the same way would shave the composition
   off one side and leave the other in dead space. Qualified by the container so
   it outranks those two rules on specificity rather than on source order — a
   plain .bl-art would tie with them and quietly depend on staying below. */
.bl-feat-media img.bl-art,
.bl-card-media img.bl-art { object-position: center; }

.bl-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 16px 2px 0;
}

.bl-card-h {
    margin: 0;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--ink);
    text-wrap: pretty;
}

/* The whole tile is one target: this ::after covers the card so the image and
   the excerpt are clickable, without nesting a second <a> inside the first
   (invalid markup, and two stops per article for a keyboard). */
.bl-card { position: relative; }

.bl-card-h a { color: inherit; text-decoration: none; transition: color .2s var(--bl-ease); }
.bl-card-h a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-md); }
.bl-card:hover .bl-card-h a { color: var(--brand-dark); }
.bl-card:hover .bl-card-media img { transform: scale(1.04); }

.bl-card-h a:focus-visible { outline: none; }
.bl-card:focus-within .bl-card-media { box-shadow: var(--focus-ring); border-color: var(--brand); }

.bl-card-p {
    margin: 0;
    font-family: var(--font-b);
    font-size: .9rem;
    line-height: 1.62;
    color: var(--text-muted);
    text-wrap: pretty;
}

.bl-empty {
    margin: 0;
    font-family: var(--font-b);
    font-size: 1rem;
    color: var(--text-muted);
}

.bl-empty a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   5. THE POST PAGE
   ========================================================================== */
.bl-post { padding: clamp(122px, 13vw, 172px) 0 clamp(40px, 5vw, 68px); }

.bl-post-inner { max-width: 44rem; margin-inline: auto; }

.bl-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-dark);
    text-decoration: none;
    transition: gap .2s var(--bl-ease);
}

.bl-back:hover { gap: 12px; color: var(--brand-dark); }
.bl-back:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

.bl-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }

.bl-post-h {
    margin: 0 0 18px;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.85rem, 3.6vw, 2.9rem);
    line-height: 1.14;
    letter-spacing: -.028em;
    color: var(--ink);
    text-wrap: balance;
}

.bl-post-lede {
    margin: 0;
    font-family: var(--font-b);
    font-size: 1.14rem;
    line-height: 1.68;
    color: var(--text-body);
    text-wrap: pretty;
}

.bl-post-media {
    overflow: hidden;
    margin: clamp(30px, 3.6vw, 48px) 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--bl-line);
    background: var(--bg-alt);
}

.bl-post-media img { display: block; width: 100%; height: auto; }

.bl-post-media figcaption {
    padding: 12px 18px;
    border-top: 1px solid var(--bl-line);
    background: #fff;
    font-family: var(--font-b);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* One measure for the prose, set on the paragraph rather than the container so
   the screenshot above can run wider than the text. */
.bl-post-p {
    margin: 0 0 1.35em;
    font-family: var(--font-b);
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--text-body);
    text-wrap: pretty;
}

.bl-post-p:last-child { margin-bottom: 0; }

/* ---- the close: one CTA, then what to read next ---- */
.bl-post-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: clamp(36px, 4vw, 56px);
    padding: clamp(22px, 2.6vw, 32px);
    border: 2px solid var(--bl-line);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.bl-post-cta p {
    margin: 0;
    max-width: 40ch;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--ink);
}

.bl-more { padding: 0 0 clamp(72px, 8vw, 120px); }

.bl-more-h {
    margin: 0 0 clamp(22px, 2.6vw, 34px);
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    letter-spacing: -.02em;
    color: var(--ink);
}


/* ==========================================================================
   9. RESPONSIVE — LAST in the file (see the header note)
   ========================================================================== */
@media (max-width:991.98px) {
    .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Stacked, the screenshot leads and the copy follows. */
    .bl-feat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .bl-feat-media { aspect-ratio: 16 / 9; }
}

@media (max-width:767.98px) {
    .bl-head { padding-top: clamp(104px, 22vw, 140px); }

    .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }

    /* A single column of 4:3 tiles is a lot of scrolling for a phone; a wider
       crop keeps the run readable without dropping the image. */
    .bl-card-media { aspect-ratio: 16 / 10; }

    .bl-post-cta { flex-direction: column; align-items: stretch; }
    .bl-post-cta .lp-btn-cta { width: 100%; }
}

/* --- touch: the chips are the one control on this page --- */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    /* 44px is the WCAG 2.5.5 / HIG floor. */
    .bl-chip { min-height: 44px; padding: 10px 18px; font-size: .9rem; }

    /* Body copy sized for a desktop measure lands under 15px on a phone. */
    .bl-card-p { font-size: .95rem; }
    .bl-post-p { font-size: 1.05rem; }

    /* Hover-only affordances have no trigger on a touch screen and their
       transitions are dead weight. */
    .bl-feat-media img,
    .bl-card-media img { transition: none; }
}


/* ==========================================================================
   10. MOTION + PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .bl-chip,
    .bl-back,
    .bl-feat-media img,
    .bl-card-media img,
    .bl-card-h a,
    .bl-feat-h a { transition: none !important; }

    .bl-feat-media:hover img,
    .bl-card:hover .bl-card-media img { transform: none; }

    .bl-back:hover { gap: 8px; }
}

@media print {
    .lp-nav, .bl-filters, .bl-post-cta, .bl-more { display: none !important; }
    .bl-page { background: #fff; }
    .bl-card, .bl-feat { break-inside: avoid; }
}