/* ============================================================
   LawnBeast V2 — ARTICLE SKIN: announcement  (/news?id=<slug>)
   Layout 1a in the "SaaS feature content layouts" design doc.

   Punchy "what's new". Big headline, one hero, a three-up Gist,
   short prose, an optional before/after strip, one CTA.
   Dated and frozen — a news post never contains instructions.

   Loads after css/v2/article/base.css. MOBILE-FIRST.
   ============================================================ */

/* ---------- Page card ----------
   The announcement is the only skin that floats: a white sheet on a warm
   grey page, not a white page. Only the breadcrumb bar
   (blocks/article/_crumbs.html) sits inside .art--announcement but OUTSIDE
   this .pub-container, so it alone stays on the tint by construction.

   The Related row (blocks/article/_related.html) and the Previous/Next
   strip (blocks/article/_prevnext.html) both moved INSIDE this
   .pub-container as of the layout foot rework — see tools/news_article.html,
   which now includes both as the sheet's last two children, in that order.
   They land on the white sheet with the rest of the article, per the design
   mock; the rules just below (.art-related border-top, and .art-prevnext
   further down this file) exist BECAUSE of that move, not despite it.

   The tint has no token: --bg (#f4f6f4) is the app canvas and reads cooler
   and lighter than the design's page. Literal, scoped to this skin only —
   .art and .art-crumbs are unprefixed in base.css and are shared with
   /guides and /features, which stay white.

   Phone: no card. A 16px radius inside a 16px gutter reads as a mistake at
   360px, so the sheet just runs edge to edge and only the crumb bar shows
   the tint — the Related row and the Previous/Next strip are on white at
   every width now. The card proper starts at 768px. */
.art--announcement {
    background: #eef0ee;
}
/* Child combinator on purpose: _crumbs wraps its own .pub-container and
   isn't the sheet, so a bare .pub-container selector would paint it white
   too. (_related no longer wraps one at all — the including shell owns the
   container now, which is what keeps its cards on the article's own edge
   instead of one gutter further in.) */
.art--announcement > .pub-container {
    background: var(--surface);
}
/* On a tinted page this hairline would read as a seam rather than a
   divider — the colour change already does the separating. */
.art--announcement .art-crumbs {
    background: transparent;
    border-bottom: 0;
}
/* The reason changed, the rule didn't. Before the move this zeroed the
   hairline because .art-related sat on the tint, where a rule above it
   would have doubled up with the colour change already marking the
   boundary. Now it sits on the white sheet like the rest of the article,
   but the mock still draws nothing above "Related Resources" — the section
   break is carried entirely by .art-related's own 26px top margin
   (base.css), not a rule — so this still zeroes it out. */
.art--announcement .art-related {
    border-top: 0;
}

/* ---------- Head ---------- */
.art--announcement .art-head {
    padding-bottom: 6px;
}
/* The head pill and its status dot are gone — see the note in
   tools/news_article.html. .art-pill-dot existed only for that pill and had no
   other user, so it goes with it; .art-pill itself stays, since a guide uses it
   as an inline "Coming Soon" chip. .art-head-top keeps its flex rules: it is
   down to a single child now, and with no justify-content the date sits flush
   left on its own. */
.art--announcement .art-head-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.art--announcement .art-title {
    font-size: 32px;
    line-height: 1.06;
    letter-spacing: -.03em;
}
.art--announcement .art-lede {
    max-width: 660px;
}

/* ---------- Hero ---------- */
/* The announcement hero is presented on the dark brand card from the
   design doc: a label row (context + status) above the image itself. */
.art-hero {
    margin: 20px 0 6px;
    /* full-bleed on the phone */
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}
.art-hero-card {
    background: var(--art-featured-grad);
    padding: 16px;
}
.art-hero-media {
    background: #eef6ee;
    border-radius: 8px;
    overflow: hidden;
}
.art-hero-media img,
.art-hero-media svg {
    display: block;
    width: 100%;
    height: auto;
}
.art-hero figcaption {
    padding: 9px var(--gutter) 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- Block label ("The Gist") ---------- */
.art-blocklabel {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 22px 0 12px;
}

/* ---------- Foot: CTA row + tags ---------- */
/* An announcement closes with one action, one link and its tags —
   flatter than the feature page's full CTA band. */
.art--announcement .art-cta {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* The band already sits inside .pub-container's gutter; the base rule's
       second gutter indented the rule and the button away from the body
       column they are supposed to close off. */
    padding-left: 0;
    padding-right: 0;
}
.art--announcement .art-cta-actions {
    align-items: stretch;
}
.art--announcement .art-cta .art-tags { margin-top: 2px; }

/* The secondary action is a plain text link, not a ghost button. The long
   selector is deliberate: .art-body a:not(.art-btn)… in base.css underlines
   every body link and outweighs anything shorter. Two shapes are covered
   because the link may sit in the actions row or straight in the foot —
   links inside .art-cta-sub are excluded and keep their underline. */
.art--announcement .art-body .art-cta .art-cta-actions a:not(.art-btn),
.art--announcement .art-body .art-cta > a:not(.art-btn):not(.art-card) {
    align-self: center;
    flex: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-dark);
    text-decoration: none;
}

/* ---------- Foot: Previous / Next ----------
   .art-prevnext (blocks/article/_prevnext.html) has no .pub-container of its
   own — unlike _related, it's a bare <nav> — so like every other block that
   inherits the shell's gutter it needs to cancel that padding to reach the
   sheet's own edges. Same full-bleed idiom base.css already uses for
   .art-figure (line 533), .art-showcase (line 852) and .art-toc (line 195):
   a negative margin equal to the gutter it's undoing. Unscoped by width on
   purpose — on the phone there's no card yet (see the Page card note above)
   but the strip still has to reach the viewport edges the same way a
   full-bleed figure does, not just at the 768px card breakpoint. */
.art--announcement .art-prevnext {
    margin-top: 26px;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 768px) {
    .art--announcement .art-title { font-size: 40px; }

    /* ---------- The page card ----------
       The sheet lifts off the tint here. 1000px is the design doc's page
       card — the same 1000px the 880px measure below is derived from, so
       the card is the outer frame and the column is the inset, not two
       competing widths. .pub-container's own --maxw (1140px) is narrowed
       rather than a wrapper being added, because a wrapper would mean a
       shell change on every news post.

       16px / --shadow-lg are literals-by-necessity: the repo tops out at
       --radius 8px and has no card-radius token. --shadow-lg is the right
       green-tinted shadow family; do not swap in a black one.

       No overflow:hidden — nothing bleeds at this width (.art-hero re-centres
       just below) and clipping would break any sticky child a later post adds. */
    .art--announcement > .pub-container {
        max-width: 1000px;
        margin: 20px auto 28px;
        border-radius: 16px;
        box-shadow: var(--shadow-lg);
    }

    /* .art-prevnext is the sheet's last child (see tools/news_article.html),
       so its own bottom edge IS the sheet's bottom edge. Below this width
       the sheet has no radius to protect, but up here a link's hover fill
       (base.css .art-prevnext-link:hover) would square off the two corners
       the sheet just rounded above. 16px is pinned to that same literal —
       the repo has no card-radius token, see the note on .pub-container
       just above — not to --radius (8px), which is a different, smaller
       shape used elsewhere. */
    .art--announcement .art-prevnext > :first-child { border-bottom-left-radius: 16px; }
    .art--announcement .art-prevnext > :last-child  { border-bottom-right-radius: 16px; }

    /* ---------- The column ----------
       Layout 1a is a single centred reading column, not a rail + body grid.
       880px is the design doc's own measure: a 1000px page card inset 60px
       each side. .pub-container still bounds the page at --maxw; this centres
       the article inside it so the head, the hero, the body and the CTA foot
       all share one edge. */
    .art--announcement .art-head,
    .art--announcement .art-hero,
    .art--announcement .art-body,
    .art--announcement .art-related {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Prose fills the column instead of stopping at --art-measure (680px).
       This is the same override the guide skin makes at guide.css:59, and for
       the same reason: once the body has a column of its own, a second cap
       200px narrower than that column just prints a ragged dead gutter down
       the right of every paragraph. It is invisible on a post built out of
       full-width cards — business-reports-suite is two paragraphs and a stack
       of .art-kpi / .art-card / .art-compare blocks — and obvious the moment a
       post is mostly text, which is what invoice-branding exposed.

       The design doc agrees: in the mock the dek is the only capped run of
       copy, and body paragraphs go edge to edge of the card.

       Trade-off, stated plainly: 880px at 16px is ~110 characters, past the
       45–90 the measure exists to hold. Reverting is one line — delete this
       rule. The dek is unaffected; .art-lede carries its own 660px cap and
       lives in .art-head, not here. */
    .art--announcement .art-body { --art-measure: 100%; }

    .art-hero { margin-left: auto; margin-right: auto; }
    .art-hero-card { border-radius: 14px; padding: 22px 24px; box-shadow: var(--art-featured-shadow); }
    .art-hero-media { border-radius: 10px; }
    .art-hero figcaption { padding-left: 0; padding-right: 0; }

    /* ---------- The foot row ----------
       The design closes on one line: actions left, tags hard right, under a
       hairline. But most posts still put an <h2> and a sub-line in the same
       .art-cta, and an earlier attempt at flex-direction:row put the heading,
       the button and the sub-line in ONE track — the heading ate the space and
       squashed the button to three wrapped lines on
       introducing-embeddable-pricing-form. So this is a WRAPPING row where
       every block of copy claims 100% of a line: the heading and the sub-line
       still get their own row exactly as before, and only the two inline
       things — the actions and the tags — can ever share a track. */
    .art--announcement .art-cta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
        row-gap: 14px;
    }
    .art--announcement .art-cta > h2,
    .art--announcement .art-cta > p,
    .art--announcement .art-cta > .art-cta-sub {
        flex: 0 0 100%;
    }
    .art--announcement .art-cta-actions {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 16px;
    }
    .art--announcement .art-body .art-cta .art-cta-actions a:not(.art-btn),
    .art--announcement .art-body .art-cta > a:not(.art-btn):not(.art-card) {
        align-self: auto;
    }
}

@media (min-width: 1000px) {
    .art--announcement .art-title { font-size: 44px; }

    .art--announcement .art-body h2 { margin-top: 46px; }
    .art--announcement .art-body > .art-lead { font-size: 19px; }

    /* Spacing only. The row itself is set at 768px — see the note there for
       why the copy blocks are forced to wrap instead of the whole band being
       flipped to flex-direction:row. */
    .art--announcement .art-cta {
        column-gap: 16px;
        row-gap: 12px;
        margin-top: 46px;
        padding-top: 28px;
    }
    .art--announcement .art-cta .art-tags { margin-top: 4px; }
}