/* ===================================================
   LawnBeast V2 — News Article "Split Hero" layout
   Shell: tools/news_article_split_hero.html
   Single-column, hero-led article card (no TOC / share).
   Design imported from claude.ai/design "News Article - Split Hero".
   Tokens come from css/v2/base.css; a few design tokens are mapped
   to real ones and namespaced locally on .nsh below.
   =================================================== */

.nsh {
    /* design-token -> base.css mapping, scoped to this layout */
    --nsh-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --nsh-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    --nsh-callout-bg: #eff6ff;               /* section 01 callout, tinted to the setup-guide blue */
    --nsh-callout-border: #bfdbfe;
    --nsh-green-deep: #2d5a2e;               /* == --sidebar-active */
    --nsh-link-blue: #2563eb;                /* setup-guide link (matches design) */
    --nsh-link-blue-hover: #1d4ed8;
    --nsh-phone-grad: linear-gradient(155deg, var(--accent), var(--nsh-green-deep));
    --nsh-pad: 52px;                          /* card horizontal padding (drives bleed) */

    display: flex;
    justify-content: center;
    padding: 40px 24px;
    font-family: var(--nsh-sans);
    color: var(--text);
}

/* Zero-specificity link reset (:where) so component button/link colors below
   win without needing to out-specify a blanket `.nsh a` rule. */
.nsh :where(a) { color: var(--accent); text-decoration: none; }
.nsh :where(a:hover) { color: var(--accent-dark); }

/* ---- breadcrumb (above the card) --------------------------------------- */
.nsh-inner { width: 100%; max-width: 920px; }

.nsh-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    font: 400 12.5px var(--nsh-sans);
    color: var(--text-muted);
}
.nsh-breadcrumb a { color: var(--text-muted); }
.nsh-breadcrumb a:hover { color: var(--accent-dark); }
.nsh-breadcrumb .sep { font-size: 10px; color: var(--border); }
.nsh-breadcrumb .current { color: var(--text-secondary); font-weight: 600; }

/* ---- card shell -------------------------------------------------------- */
.nsh-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* ---- split hero -------------------------------------------------------- */
.nsh-hero {
    padding: 48px var(--nsh-pad);
    background: var(--bg);
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 48px;
    align-items: center;
}

.nsh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent-bg);
    color: var(--accent-dark);
    border: 1px solid var(--positive-bg);
    padding: 5px 13px;
    border-radius: 999px;
    font: 700 11px var(--nsh-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.nsh-headline {
    margin: 16px 0 0;
    font: 700 40px/1.1 var(--nsh-sans);
    letter-spacing: -.03em;
    color: var(--text);
}

.nsh-dek {
    margin: 16px 0 0;
    font: 400 18px/1.55 var(--nsh-sans);
    color: var(--text-muted);
}

.nsh-meta {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    font: 400 13px var(--nsh-sans);
    color: var(--text-muted);
}
.nsh-meta .nsh-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border);
}
.nsh-meta .nsh-date { font-family: var(--nsh-mono); }

/* hero visual (thumbnail or gradient phone placeholder) */
.nsh-hero-visual { display: flex; justify-content: center; }
.nsh-phone {
    width: 220px;
    aspect-ratio: 9 / 19;
    border-radius: 26px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: var(--nsh-phone-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
}
.nsh-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nsh-phone .nsh-phone-icon { font-size: 26px; }

/* Hero phone sits on the pale hero bg, where --shadow-lg barely reads and the
   device looks pasted-on flat. Lift it with a deeper, layered drop shadow. */
.nsh-hero-visual .nsh-phone {
    box-shadow:
        0 24px 48px -14px rgba(20, 40, 22, .35),
        0 8px 18px -10px rgba(20, 40, 22, .22);
}

/* ---- article body ------------------------------------------------------ */
.nsh-body { padding: 48px var(--nsh-pad) 56px; background: var(--surface); }

/* the shell injects the fragment here; fragment sections use .nsh-section */
.nsh-section { margin-bottom: 44px; }
.nsh-section:last-child { margin-bottom: 0; }

/* full-bleed alt-background band that breaks out of the card padding */
.nsh-section--bleed {
    margin-inline: calc(var(--nsh-pad) * -1);
    padding: 40px var(--nsh-pad);
    background: var(--bg);
}

.nsh-eyebrow {
    display: block;
    margin-bottom: 10px;
    font: 600 11.5px var(--nsh-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-dark);
}

.nsh-h2 {
    margin: 0 0 18px;
    font: 700 27px var(--nsh-sans);
    letter-spacing: -.025em;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.nsh-h2 .nsh-num { font-family: var(--nsh-mono); color: var(--accent-dark); }

.nsh-p {
    margin: 0;
    font: 400 16px/1.65 var(--nsh-sans);
    color: var(--text-secondary);
}
.nsh-p + .nsh-p { margin-top: 14px; }

/* hero action row (lives in the hero, below the meta) */
.nsh-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.nsh-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--accent);
    color: #fff;
    font: 700 15px var(--nsh-sans);
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -4px rgba(78,150,79,.5);
}
.nsh-btn:hover { background: var(--accent-dark); color: #fff; }
.nsh-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent-dark);
    font: 600 14px var(--nsh-sans);
    transition: color var(--transition-fast);
}
/* hover: nudge the trailing arrow to the right */
.nsh-link-cta i { transition: transform var(--transition-fast); }
.nsh-link-cta:hover i { transform: translateX(3px); }
.nsh-link-cta--blue { color: var(--nsh-link-blue); }
.nsh-link-cta--blue:hover { color: var(--nsh-link-blue-hover); }

/* section 01 — callout (blue-tinted to match the setup-guide link) */
.nsh-callout {
    background: var(--nsh-callout-bg);
    border: 1px solid var(--nsh-callout-border);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--shadow-xs);
}

/* section 02 — feature card grid */
.nsh-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.nsh-feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--shadow-xs);
}
.nsh-feature-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent-dark);
    font-size: 17px;
    margin-bottom: 12px;
}
.nsh-feature-title {
    font: 600 15px var(--nsh-sans);
    color: var(--text);
    margin-bottom: 4px;
}
.nsh-feature-desc {
    font: 400 13.5px/1.5 var(--nsh-sans);
    color: var(--text-secondary);
}

/* section 03 — screenshot gallery */
.nsh-shots {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
}
.nsh-shot {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: none;
}
.nsh-shot .nsh-phone { width: 180px; }
.nsh-shot figcaption {
    font: 400 13px/1.5 var(--nsh-sans);
    color: var(--text-muted);
    text-align: center;
    max-width: 220px;
}
.nsh-shot figcaption b { color: var(--text); font-weight: 600; }

/* section 04 — numbered steps */
.nsh-steps { display: grid; grid-template-columns: 1fr; gap: 10px; }
.nsh-step {
    position: relative;
    padding: 15px 16px 15px 52px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font: 400 14px/1.5 var(--nsh-sans);
    color: var(--text-secondary);
}
.nsh-step b { color: var(--text); }
.nsh-step .nsh-step-n {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font: 600 12px var(--nsh-mono);
    display: grid;
    place-items: center;
}

/* closing CTA band */
.nsh-cta {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--nsh-green-deep), var(--accent-dark));
    color: #fff;
    padding: 38px 30px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.nsh-cta h2 {
    margin: 0;
    font: 700 26px var(--nsh-sans);
    letter-spacing: -.02em;
    color: #fff;
}
.nsh-cta .nsh-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: var(--accent-dark);
    font: 700 15px var(--nsh-sans);
    padding: 12px 24px;
    border-radius: 999px;
    margin-top: 20px;
}
.nsh-cta .nsh-cta-btn:hover { color: var(--accent-dark); background: #f0f2f5; }
.nsh-cta .nsh-cta-sub {
    margin: 14px 0 0;
    font: 400 13.5px var(--nsh-sans);
    color: rgba(255,255,255,.82);
}

/* ---- article foot: Related ---------------------------------------------
   The .art-related row's twin, redrawn in this shell's vocabulary. It cannot
   be the shared blocks/article/_related.html include: every .art-related-*
   rule lives in css/v2/article/base.css, which this layout does not load, and
   the kind labels there colour off --art-info-deep / --art-warn-deep, tokens
   defined in that same file. Both are re-declared locally below, mapped to the
   values article/base.css uses so the two feet read identically.

   Sibling of .nsh-body inside .nsh-card, so it carries the card's own
   horizontal padding rather than inheriting the body's. */
.nsh-related {
    --nsh-related-guide: #1d4ed8;             /* == --art-info-deep */
    --nsh-related-feature: #b45309;           /* == --art-warn-deep */

    margin: 0 var(--nsh-pad);
    padding: 26px 0 48px;
    border-top: 1px solid var(--border-light);
    background: var(--surface);
}
/* .nsh-body carries a 56px bottom pad for the no-foot case; with a Related row
   under it that stacks with this block's own 26px and pushes the hairline rule
   far below the copy it divides. Trim the body's pad when the row is actually
   there, rather than moving the space onto a block that may not render. */
.nsh-body:has(+ .nsh-related) { padding-bottom: 22px; }

.nsh-related-head {
    font: 700 10px var(--nsh-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.nsh-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.nsh-related-card {
    display: block;
    position: relative;   /* anchors .nsh-related-flag to this card, not the grid */
    overflow: hidden;     /* clips the flag's square corner to the 10px radius */
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px 16px;
    background: var(--surface);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.nsh-related-card:hover {
    border-color: var(--accent-border);
    background: var(--accent-subtle);
}
/* Folded-corner flag: a zero-size box with two border sides painted is already
   exactly the triangle that fills the corner, so the card's overflow:hidden
   rounds it to the 10px radius for free — no transform, no extra clipping. */
.nsh-related-flag {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 26px 26px 0;
    border-color: transparent var(--accent) transparent transparent;
}
.nsh-related-kind {
    font: 700 9.5px var(--nsh-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 7px;
    /* The flag reaches 26px in from the right edge but the card's padding only
       insets content by 16px, so a long label ("ANNOUNCEMENT") would run under
       the triangle. Clear its full reach plus a few px. */
    padding-right: 30px;
}
.nsh-related-kind--announcement { color: var(--accent-dark); }
.nsh-related-kind--guide        { color: var(--nsh-related-guide); }
.nsh-related-kind--feature      { color: var(--nsh-related-feature); }
.nsh-related-title {
    font: 600 14px/1.35 var(--nsh-sans);
    color: var(--text);
}

/* ---- article foot: Previous / Next --------------------------------------
   One step past Related: not "more like this" but "the post immediately
   before/after this one in the announcement stream".

   Always exactly two direct children — a real link, or a .nsh-prevnext-empty
   placeholder standing in for a missing side. That fixed arity is what lets
   the grid stay two-up at every width using plain structural selectors, and
   is why a lone Next stays right-aligned in its own half instead of sliding
   into column 1 on the oldest post.

   Two columns on the phone too: the pair is a single "where am I in the
   stream" control, and stacking it splits one glance into two. What gives
   below 760px is the padding and the type size, not the layout.

   As .nsh-card's last child its bottom edge IS the card's bottom edge; the
   card's overflow:hidden already clips the hover fill to the 12px radius. */
.nsh-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border-light);
    background: var(--surface);
}
.nsh-prevnext > * + * { border-left: 1px solid var(--border-light); }
.nsh-prevnext-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px;
    color: var(--text);
    min-width: 0;
    transition: background var(--transition-fast);
}
.nsh-prevnext-link:hover { background: var(--accent-subtle); color: var(--text); }
.nsh-prevnext-link i {
    flex: none;
    font-size: 15px;
    color: var(--text-muted);
}
/* The two OUTER edges are the card's edges, so they take the card gutter and
   the copy lines up with the body above; only the inner edges, the ones facing
   the divider, run at the tighter 20px. */
.nsh-prevnext-link--prev { padding-left: var(--nsh-pad); }
/* Next reads right-to-left off the card edge — arrow trailing, copy
   right-aligned — so the two sides mirror around the centre divider instead
   of both hugging the left. */
.nsh-prevnext-link--next {
    padding-right: var(--nsh-pad);
    justify-content: flex-end;
    text-align: right;
}
.nsh-prevnext-text { min-width: 0; }
.nsh-prevnext-label {
    display: block;
    font: 700 9.5px var(--nsh-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.nsh-prevnext-title {
    display: block;
    font: 600 14px/1.35 var(--nsh-sans);
    overflow-wrap: break-word;   /* an unspaced token longer than the column */
}
/* Holds its track open when there is no post on that side. Without it the one
   real link stretches across both columns. */
.nsh-prevnext-empty { display: block; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 760px) {
    .nsh { --nsh-pad: 22px; padding: 20px 14px; }
    .nsh-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px var(--nsh-pad);
    }
    .nsh-hero-visual { order: -1; }
    .nsh-phone { width: 180px; }
    .nsh-headline { font-size: 30px; }
    .nsh-dek { font-size: 16px; }
    .nsh-body { padding: 32px var(--nsh-pad) 40px; }
    .nsh-section--bleed { padding: 28px var(--nsh-pad); }
    .nsh-h2 { font-size: 22px; }
    .nsh-feature-grid { grid-template-columns: 1fr; }

    /* Related drops to one column here for the same reason .nsh-feature-grid
       does; the foot's spacing comes in with the tighter --nsh-pad. */
    .nsh-related { padding-bottom: 34px; }
    .nsh-related-grid { grid-template-columns: 1fr; }

    /* Prev/Next stays two-up (see the note on .nsh-prevnext) — the padding, the
       arrow gap and the title size are what give. The title is cut to one line:
       a half-width column on a 360px screen turns a long headline into five or
       six lines, and the grid stretches BOTH cells to the tallest, so one wordy
       neighbour inflates the whole strip. 18ch is a max-width rather than a
       character count because only CSS knows the viewport; the untruncated
       title stays in the DOM for screen readers. */
    .nsh-prevnext-link { gap: 8px; padding: 16px 14px; }
    .nsh-prevnext-link i { font-size: 14px; }
    .nsh-prevnext-title {
        max-width: 18ch;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }
}