/* News section
   Inherits the .kb-card / .kb-body / typography vocabulary from knowledgebase.css.
   This file only carries the News-specific bits: hero thumb on index cards,
   full-width hero on post pages, and the date + reading-time meta row. */

.news-page {
    padding: 0;
}

/* Full-width light-grey banner at the top of the News index — visually distinguishes the
   page from the rest of the site (which is white-on-white) and matches the .section-alt
   vocabulary used on the homepage. The bottom edge curves downward into the white content
   below via .news-page-banner-curve (an absolutely-positioned SVG). */
.news-page-banner {
    position: relative;
    background: var(--neutral-100);
    padding: 0.75rem 0 5rem;
}
.news-page-banner-curve {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 70px;
    color: var(--neutral-100);
    display: block;
    pointer-events: none;
}
.news-page-body {
    position: relative;
    z-index: 1;
    margin-top: -4rem;
    padding-top: 0;
    padding-bottom: 5rem;
}

/* Post-page scoping — on the index the body's first item is the card grid which looks good
   pulled 4rem into the banner. On the post page the body's first item is the hero image,
   and pulling it that high overlaps the summary above. Scope tighter values so the hero
   sits just below the summary. */
.news-page--post .news-page-banner {
    padding-bottom: 0;
}
.news-page--post .news-page-body {
    margin-top: -5rem;
}

.news-header {
    text-align: center;
    margin: 0;
}
/* News index header — mirrors the KB-index header pattern (kb-eyebrow / kb-title in
   public/css/knowledgebase.css:24–40) for top-of-page consistency. The intro paragraph
   borrows the homepage's .section-subtitle typography so descriptive paragraphs read the
   same across pages. */
.news-eyebrow {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-muted);
    margin: 0 0 .5rem;
}
.news-title {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.1;
    color: var(--primary);
    margin: 0 0 .75rem;
}
.news-intro {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--neutral-500);
    margin: 0 auto;
    max-width: 640px;
}

/* --- News index card grid — 3-up always above mobile, 1-up on mobile.
   Skip the 2-up tablet breakpoint so the News grid stays visually distinct
   from the KB grid (which is 2-up). --- */
.news-page .kb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 600px) {
    .news-page .kb-grid {
        grid-template-columns: 1fr;
    }
}

/* --- News index card layout — vertical stack: image on top, then body --- */
.news-card {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    gap: 0;
}
.news-card .kb-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    gap: .35rem;
}
.news-card-thumb {
    width: 100%;
    height: 200px;
    background: var(--neutral-100);
    overflow: hidden;
}
.news-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-card-date {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: .8rem;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-muted);
    margin: 0 0 .25rem;
}
.news-card-reading-time {
    margin-left: auto;
}

/* News-variant CTA — "Read more →" at the bottom of the body column, left-aligned,
   instead of the right-edge bare-arrow pattern .kb-card uses by default. */
.news-card-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    color: var(--accent-muted);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: .9rem;
    line-height: 1;
    transition: color .2s ease;
}
.news-card-cta-label {
    color: inherit;
}
.news-card-arrow {
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform .2s ease;
}
.news-card:hover .news-card-cta {
    color: var(--primary);
}
.news-card:hover .news-card-arrow {
    transform: translateX(4px);
}

/* --- Post page --- */
.news-post {
    max-width: 760px;
    margin: 0 auto;
}
.news-back-link {
    display: inline-block;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: .9rem;
    color: var(--accent-muted);
    text-decoration: none;
    margin: 0 0 1.5rem;
}
.news-back-link:hover {
    color: var(--primary);
    text-decoration: underline;
}
.news-hero-image {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 0 2rem;
    display: block;
}
.news-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: .85rem;
    color: var(--accent-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.news-post-meta-sep {
    color: var(--neutral-300);
}
.news-post-title {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--primary);
    margin: 0 0 1rem;
}
.news-post-summary {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--neutral-500);
    margin: 0 0 2rem;
}
.news-post-fallback-notice {
    background: var(--neutral-100);
    border-left: 3px solid var(--accent-muted);
    padding: .75rem 1rem;
    margin: 0 0 1.5rem;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: .9rem;
    color: var(--neutral-600);
    border-radius: 4px;
}

/* --- Mobile breakpoint: tighter banner, less aggressive negative-margin pull-up,
   shallower curve, smaller typography. Covers both the news index and post pages. --- */
@media (max-width: 700px) {
    .news-title { font-size: 2rem; }
    .news-post-title { font-size: 1.75rem; }
    .news-hero-image { max-height: 280px; }
    .news-card-thumb { height: 160px; }
    .news-intro { font-size: 1rem; }

    .news-page-banner { padding: 0.5rem 0 2.5rem; }
    .news-page-banner-curve { height: 45px; }
    .news-page-body { margin-top: -2rem; padding-bottom: 3.5rem; }

    /* Post-page mobile overrides — keep the hero close to the summary the same way the
       desktop scoping does, but with scaled-down values appropriate for narrow viewports. */
    .news-page--post .news-page-banner { padding-bottom: 0; }
    .news-page--post .news-page-body { margin-top: -2.5rem; }

    .news-post { padding: 0 .25rem; }
    .news-post-summary { font-size: 1.05rem; }
    .news-related { padding-bottom: 3.5rem; }
    .news-related-title { font-size: 1.25rem; margin-bottom: 1.25rem; }
}


/* --- Homepage "Latest news" section — parallel scope to .news-page so the 3-up grid applies
   on the homepage too. The wrapping <section class="section home-news"> uses sparkify.css's
   .section padding; we only need to specify the grid columns + the CTA link styling. --- */
.home-news .kb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 600px) {
    .home-news .kb-grid {
        grid-template-columns: 1fr;
    }
}
.home-news-cta-wrap {
    margin-top: 2.5rem;
}
.home-news-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--accent-muted);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease;
}
.home-news-cta-arrow {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform .2s ease;
}
.home-news-cta:hover {
    color: var(--primary);
}
.home-news-cta:hover .home-news-cta-arrow {
    transform: translateX(4px);
}

/* --- Related-posts section at the bottom of single News post pages. Uses the compact
   horizontal card (`.news-card-compact` below) stacked one per row inside a narrow
   centred column — visually distinct from the index's 3-up grid so it reads as a
   "more reading" list rather than a duplicate grid. --- */
.news-related {
    padding: 0 0 5rem;
    margin-top: -3rem;
}
.news-related-title {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--primary);
    text-align: center;
    margin: 0 0 2rem;
}
.news-related-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 760px;
    margin: 0 auto;
}
.news-related-list .news-card-compact {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
    max-width: none;
}
@media (max-width: 600px) {
    .news-related-list .news-card-compact {
        flex-basis: 100%;
    }
}

/* Compact card — horizontal: small square thumb on the left, meta + title on the right.
   Inherits the .news-card hover pattern (subtle shadow + lift) for consistency. */
.news-card-compact {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.news-card-compact:hover {
    box-shadow: 0 6px 18px rgba(10, 26, 47, 0.08);
    transform: translateY(-2px);
    border-color: var(--neutral-300);
}
.news-card-compact-thumb {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--neutral-100);
}
.news-card-compact-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-card-compact-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    min-width: 0;
}
.news-card-compact-meta {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-muted);
}
.news-card-compact-title {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .news-card-compact {
        gap: .75rem;
        padding: .5rem;
    }
    .news-card-compact-thumb {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
    }
    .news-card-compact-title {
        font-size: 1rem;
    }
}

/* News reuses the KB "In this article" pill strip wholesale — inline row on desktop,
   single-row horizontal scroll on mobile (all defined in knowledgebase.css). We don't
   re-layout it here: an earlier column override (flex-direction:column + align-items:
   flex-start) let the links strip size to its content width on mobile, so it ran off
   the viewport instead of triggering the inherited overflow-x:auto. The only
   news-specific tweak left is bottom spacing — on KB the strip is a flex child of
   .kb-article whose parent `gap` handles that; here it sits in a plain block container. */
.news-page .kb-toc-strip {
    margin-bottom: 1.75rem;
}