/* ════════════════════════════════════════════════════════════════
   USA TIMES — News-surface polish (STYLEBOOK-governed)
   v1.0 · 2026-06-13 · loads on: front, home, archive, search, single post
   Tokens from usat-brand.css. Product pages and /book: untouched.
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   SECTION FRONTS (category / archive / search)
   NYT pattern: section name over a dark double rule, then a flat
   story LIST — headline + meta left, art right, hairline between
   stories. No floating mega-heroes per story.
   ──────────────────────────────────────────────────────────────── */

/* Section name: "Politics", not "Category: Politics" (prefix removed
   server-side). Confident serif over the double rule. */
body.archive h1.wp-block-query-title,
body.search h1.wp-block-query-title {
    font-family: var(--ut-font-headline, "Playfair Display", Georgia, serif);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.05;
    margin: .2em 0 .45em;
    padding-bottom: .35em;
    border-bottom: 3px double var(--ut-rule-dark, #121212);
}

/* Story rows: kill the theme's giant per-story padding, draw the list */
body.archive .wp-block-query li.wp-block-post,
body.search  .wp-block-query li.wp-block-post {
    border-top: 1px solid var(--ut-hairline, #E2E2E2);
    padding: 26px 0;
    margin: 0;
}
body.archive .wp-block-query li.wp-block-post:first-child,
body.search  .wp-block-query li.wp-block-post:first-child {
    border-top: none;
    padding-top: 6px;
}

/* The inner group becomes the row grid: text left, art right */
body.archive .wp-block-query li.wp-block-post > .wp-block-group,
body.search  .wp-block-query li.wp-block-post > .wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    column-gap: 28px;
    align-items: start;
}
body.archive .wp-block-query li.wp-block-post .wp-block-post-featured-image,
body.search  .wp-block-query li.wp-block-post .wp-block-post-featured-image {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin: 0;
    aspect-ratio: 3 / 2 !important;
}
body.archive .wp-block-query li.wp-block-post .wp-block-post-title,
body.search  .wp-block-query li.wp-block-post .wp-block-post-title {
    grid-column: 1;
    font-size: 25px !important;
    line-height: 1.18 !important;
    letter-spacing: -.008em;
    margin: 0 0 .35rem;
}
body.archive .wp-block-query li.wp-block-post .wp-block-post-title a,
body.search  .wp-block-query li.wp-block-post .wp-block-post-title a {
    color: var(--ut-ink, #121212);
    text-decoration: none;
}
body.archive .wp-block-query li.wp-block-post .wp-block-post-title a:hover,
body.search  .wp-block-query li.wp-block-post .wp-block-post-title a:hover {
    color: var(--ut-navy, #0A3F93);
}
body.archive .wp-block-query li.wp-block-post .wp-block-post-excerpt,
body.search  .wp-block-query li.wp-block-post .wp-block-post-excerpt {
    grid-column: 1;
    font-family: var(--ut-font-serif, "Source Serif 4", Georgia, serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ut-text-2, #4A5160);
    margin: 0 0 .4rem;
}
body.archive .wp-block-query li.wp-block-post .wp-block-post-date,
body.search  .wp-block-query li.wp-block-post .wp-block-post-date {
    grid-column: 1;
    font-family: var(--ut-font-ui, Inter, sans-serif);
    font-size: 12px !important;
    color: var(--ut-faint, #9CA3AF);
    margin: 0;
}
@media (max-width: 680px) {
    body.archive .wp-block-query li.wp-block-post > .wp-block-group,
    body.search  .wp-block-query li.wp-block-post > .wp-block-group {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    body.archive .wp-block-query li.wp-block-post .wp-block-post-featured-image,
    body.search  .wp-block-query li.wp-block-post .wp-block-post-featured-image {
        grid-column: 1;
        grid-row: 1;
    }
}

/* Pagination: quiet, UI face */
body.archive .wp-block-query-pagination,
body.search  .wp-block-query-pagination {
    border-top: 2px solid var(--ut-rule-dark, #121212);
    padding-top: 14px;
    margin-top: 4px;
    font-family: var(--ut-font-ui, Inter, sans-serif);
    font-size: 13px;
}

/* ────────────────────────────────────────────────────────────────
   ARTICLE PAGES — measure + art discipline
   ──────────────────────────────────────────────────────────────── */

/* Byline block sits between two rules (NYT byline bar) */
body.single-post .usat-byline-wrap,
body.single-post .usat-byline {
    border-top: 1px solid var(--ut-hairline, #E2E2E2);
    border-bottom: 1px solid var(--ut-hairline, #E2E2E2);
    padding: 10px 0;
}
body.single-post .usat-byline .usat-byline,
body.single-post .usat-byline-wrap .usat-byline {
    border: none; padding: 0;   /* guard against double-wrap */
}

/* Lead art: never taller than 60vh, caption styled as caption */
body.single-post .wp-block-post-featured-image img {
    max-height: 60vh;
    object-fit: cover;
}
body.single-post figcaption {
    font-family: var(--ut-font-ui, Inter, sans-serif);
    font-size: 12.5px;
    color: var(--ut-muted, #6B7280);
    line-height: 1.45;
    padding-top: 6px;
}

/* End-of-article: dark rule before related/newsletter modules */
body.single-post .usat-related,
body.single-post .usat-newsletter {
    border-top: 2px solid var(--ut-rule-dark, #121212);
    padding-top: 16px;
    margin-top: 36px;
}
body.single-post .usat-newsletter + .usat-related,
body.single-post .usat-related + .usat-newsletter {
    border-top: 1px solid var(--ut-hairline, #E2E2E2);
}

/* ────────────────────────────────────────────────────────────────
   HOMEPAGE — grid discipline for "More news"
   ──────────────────────────────────────────────────────────────── */

/* Each card: hairline top, headline + date rhythm */
body.home main .wp-block-query.alignwide li.wp-block-post {
    border-top: 1px solid var(--ut-hairline, #E2E2E2);
    padding-top: 14px;
}
body.home main .wp-block-query.alignwide li.wp-block-post .wp-block-post-title {
    font-size: 20px !important;
    line-height: 1.22 !important;
    margin-top: .55rem;
}
body.home main .wp-block-query.alignwide li.wp-block-post .wp-block-post-date {
    font-family: var(--ut-font-ui, Inter, sans-serif);
    font-size: 12px !important;
    color: var(--ut-faint, #9CA3AF);
}

/* Rail rows breathe evenly; last row closes with a hairline */
body.home .secondary-stack li.wp-block-post { padding: 2px 0 10px; }

/* ────────────────────────────────────────────────────────────────
   FOOTER — newspaper colophon
   ──────────────────────────────────────────────────────────────── */
footer.wp-block-template-part {
    border-top: 2px solid var(--ut-rule-dark, #121212);
}
footer.wp-block-template-part a { text-decoration: none; }
footer.wp-block-template-part a:hover { text-decoration: underline; }

/* ── Round 2 (QA findings, same day) ───────────────────────────── */
/* Dates were centered by theme alignment classes; left-align list meta */
body.archive .wp-block-query li.wp-block-post .wp-block-post-date,
body.search  .wp-block-query li.wp-block-post .wp-block-post-date {
    text-align: left !important;
}
/* Title indent: kill stray padding/margins from constrained layout */
body.archive .wp-block-query li.wp-block-post .wp-block-post-title,
body.search  .wp-block-query li.wp-block-post .wp-block-post-title {
    padding-left: 0 !important;
    text-align: left !important;
}
/* Trim the dead space between the last story and the footer rule */
body.archive main, body.search main { padding-bottom: 12px !important; }
body.archive .wp-block-query, body.search .wp-block-query { margin-bottom: 0 !important; }

/* ── Round 3: grid children stretch to the column so headlines, deks
   and dates all share one left edge (dates were shrink-to-fit and
   floated center) ─────────────────────────────────────────────── */
body.archive .wp-block-query li.wp-block-post > .wp-block-group > *,
body.search  .wp-block-query li.wp-block-post > .wp-block-group > * {
    justify-self: stretch;
    width: 100%;
    text-align: left;
}