/*
TDN Publication Polish v3.3.2
Purpose: final publication-level spacing, typography, card rhythm, mobile readability,
and reduced visual noise while preserving the Trevor Decker News red and gold identity.
*/

:root {
    --tdn-pub-container: 1180px;
    --tdn-pub-gutter: clamp(16px, 4vw, 28px);
    --tdn-pub-section-gap: clamp(34px, 5vw, 58px);
    --tdn-pub-card-gap: clamp(16px, 2vw, 24px);
    --tdn-pub-card-radius: 12px;
    --tdn-pub-card-border: color-mix(in srgb, var(--color-border, #e2e2e6) 84%, transparent);
    --tdn-pub-card-shadow: 0 1px 2px rgba(12, 12, 12, .05), 0 14px 36px rgba(12, 12, 12, .055);
    --tdn-pub-card-shadow-hover: 0 2px 5px rgba(12, 12, 12, .08), 0 18px 46px rgba(12, 12, 12, .09);
    --tdn-pub-muted: var(--color-fg-muted, #5a5a5a);
    --tdn-pub-soft: var(--color-bg-alt, #fafafa);
}

html[data-theme="dark"] {
    --tdn-pub-card-border: rgba(255, 255, 255, .11);
    --tdn-pub-card-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 14px 34px rgba(0, 0, 0, .22);
    --tdn-pub-card-shadow-hover: 0 2px 5px rgba(0, 0, 0, .36), 0 18px 46px rgba(0, 0, 0, .32);
}

/* Overall page rhythm */
body {
    background:
        linear-gradient(180deg, var(--color-bg, #fff) 0%, var(--color-bg, #fff) 210px, var(--color-bg-alt, #fafafa) 100%) !important;
}

.tdn-main,
.hp-hero,
.tdn-mag-container,
.tdn-homepage-widgets {
    max-width: var(--tdn-pub-container) !important;
    margin-inline: auto !important;
    padding-inline: var(--tdn-pub-gutter) !important;
}

.hp-hero {
    margin-top: clamp(18px, 2.6vw, 30px) !important;
}

.tdn-mag-container {
    padding-top: clamp(26px, 4vw, 44px) !important;
    padding-bottom: clamp(38px, 5vw, 62px) !important;
}

.tdn-mag-section {
    margin-block: 0 var(--tdn-pub-section-gap) !important;
}

.tdn-mag-section + .tdn-mag-section {
    margin-top: 0 !important;
}

/* Cleaner editorial section headers */
.tdn-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: clamp(14px, 2vw, 20px) !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--tdn-pub-card-border) !important;
}

.tdn-section-title {
    margin: 0 !important;
    color: var(--color-fg, #0c0c0c) !important;
    font-family: var(--font-headline, 'Barlow Condensed', sans-serif) !important;
    font-size: clamp(1.35rem, 1.08rem + 1.1vw, 2rem) !important;
    font-weight: 900 !important;
    letter-spacing: .012em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.tdn-section-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: .74em;
    margin-right: 9px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--tdn-red), var(--tdn-gold));
    vertical-align: -.06em;
}

.tdn-section-rule {
    flex: 1 1 auto !important;
    height: 1px !important;
    min-width: 30px !important;
    background: linear-gradient(90deg, rgba(229, 26, 62, .28), transparent) !important;
    opacity: .72 !important;
}

.tdn-section-more {
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid var(--tdn-pub-card-border) !important;
    border-radius: 999px !important;
    background: var(--color-surface, #fff) !important;
    color: var(--color-fg-soft, #2d2d2d) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.tdn-section-more:hover,
.tdn-section-more:focus-visible {
    border-color: color-mix(in srgb, var(--tdn-red) 42%, var(--tdn-pub-card-border)) !important;
    color: var(--tdn-red) !important;
}

/* Established publication card system */
.hp-hero__center,
.hp-hero__side-card,
.tdn-spotlight-card,
.tdn-river-item,
.tdn-trending-card,
.tdn-cat-lead,
.tdn-cat-sub,
.tdn-article-card,
.tdn-search-card,
.tdn-related-card,
.tdn-homepage-widget {
    border: 1px solid var(--tdn-pub-card-border) !important;
    border-radius: var(--tdn-pub-card-radius) !important;
    background: var(--color-surface, #fff) !important;
    box-shadow: var(--tdn-pub-card-shadow) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.hp-hero__center:hover,
.hp-hero__side-card:hover,
.tdn-spotlight-card:hover,
.tdn-river-item:hover,
.tdn-trending-card:hover,
.tdn-cat-lead:hover,
.tdn-cat-sub:hover,
.tdn-article-card:hover,
.tdn-search-card:hover,
.tdn-related-card:hover {
    border-color: color-mix(in srgb, var(--tdn-red) 34%, var(--tdn-pub-card-border)) !important;
    box-shadow: var(--tdn-pub-card-shadow-hover) !important;
    transform: translateY(-1px) !important;
}

@media (prefers-reduced-motion: reduce) {
    .hp-hero__center:hover,
    .hp-hero__side-card:hover,
    .tdn-spotlight-card:hover,
    .tdn-river-item:hover,
    .tdn-trending-card:hover,
    .tdn-cat-lead:hover,
    .tdn-cat-sub:hover {
        transform: none !important;
    }
}

.hp-hero__center-text,
.hp-hero__side-text,
.tdn-spotlight-body,
.tdn-river-body,
.tdn-trending-body,
.tdn-cat-lead-body,
.tdn-cat-sub-body {
    padding: clamp(14px, 1.8vw, 20px) !important;
}

/* Image consistency */
.hp-hero__center-img-wrap,
.hp-hero__side-img-wrap,
.tdn-spotlight-thumb,
.tdn-trending-thumb,
.tdn-cat-lead-thumb,
.tdn-river-thumb,
.tdn-cat-sub-thumb {
    overflow: hidden !important;
    background: var(--color-bg-soft, #f5f5f7) !important;
    border-radius: calc(var(--tdn-pub-card-radius) - 1px) calc(var(--tdn-pub-card-radius) - 1px) 0 0 !important;
}

.hp-hero__center-img-wrap,
.hp-hero__side-img-wrap,
.tdn-spotlight-thumb,
.tdn-trending-thumb,
.tdn-cat-lead-thumb {
    aspect-ratio: 16 / 9 !important;
}

.tdn-river-thumb,
.tdn-cat-sub-thumb {
    aspect-ratio: 3 / 2 !important;
}

.hp-hero__center-img,
.hp-hero__side-img,
.tdn-spotlight-thumb img,
.tdn-trending-thumb img,
.tdn-cat-lead-thumb img,
.tdn-river-thumb img,
.tdn-cat-sub-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* In compact homepage cards, consistency beats portrait letterboxing. */
.hp-hero__side-img-wrap.is-portrait::before,
.tdn-river-thumb.is-portrait::before,
.tdn-trending-thumb.is-portrait::before,
.tdn-cat-sub-thumb.is-portrait::before,
.tdn-spotlight-thumb.is-portrait::before {
    display: none !important;
}

.hp-hero__side-img-wrap.is-portrait img,
.tdn-river-thumb.is-portrait img,
.tdn-trending-thumb.is-portrait img,
.tdn-cat-sub-thumb.is-portrait img,
.tdn-spotlight-thumb.is-portrait img {
    object-fit: cover !important;
    background: transparent !important;
}

/* Typography hierarchy */
.hp-hero__center-title,
.hp-hero__side-title,
.tdn-spotlight-headline,
.tdn-river-headline,
.tdn-trending-headline,
.tdn-cat-lead-headline,
.tdn-cat-sub-headline,
.tdn-article-card-title,
.tdn-search-card-title,
.tdn-related-card-title {
    margin-top: 0 !important;
    color: var(--color-fg, #0c0c0c) !important;
    line-height: 1.12 !important;
    letter-spacing: -.012em !important;
    text-wrap: pretty;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
}

.hp-hero__center-title {
    font-size: clamp(2rem, 1.35rem + 2.4vw, 3.18rem) !important;
    line-height: 1.04 !important;
    margin-bottom: .42em !important;
}

.hp-hero__side-title {
    font-size: clamp(1.08rem, .94rem + .55vw, 1.34rem) !important;
    line-height: 1.16 !important;
}

.tdn-spotlight-headline,
.tdn-trending-headline {
    font-size: clamp(1.12rem, 1rem + .46vw, 1.34rem) !important;
    line-height: 1.16 !important;
}

.tdn-river-headline,
.tdn-cat-sub-headline {
    font-size: clamp(1.02rem, .96rem + .25vw, 1.16rem) !important;
    line-height: 1.2 !important;
}

.tdn-cat-lead-headline {
    font-size: clamp(1.5rem, 1.08rem + 1.55vw, 2.12rem) !important;
    line-height: 1.08 !important;
}

.hp-hero__center-excerpt,
.tdn-spotlight-excerpt,
.tdn-river-excerpt,
.tdn-cat-lead-excerpt {
    color: var(--color-fg-soft, #2d2d2d) !important;
    font-size: clamp(.95rem, .91rem + .18vw, 1.04rem) !important;
    line-height: 1.58 !important;
}

.tdn-meta,
.tdn-byline,
.hp-hero__byline,
.tdn-author {
    color: var(--tdn-pub-muted) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: .08em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.tdn-author:hover,
.tdn-author:focus-visible {
    color: var(--tdn-red) !important;
}

/* Badges should feel branded, not loud. */
.tdn-badge,
.tdn-cat-badge,
.hp-hero__cat,
.tdn-widget-trailer-cat,
.tdn-widget-upcoming-cat,
.tdn-widget-this-week-cat {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 1px solid color-mix(in srgb, var(--tdn-red) 24%, var(--tdn-pub-card-border)) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--tdn-red) 7%, var(--color-surface, #fff)) !important;
    color: var(--tdn-red) !important;
    font-family: var(--font-ui, system-ui, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .085em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.tdn-badge:hover,
.tdn-cat-badge:hover,
.hp-hero__cat:hover {
    background: var(--tdn-red) !important;
    border-color: var(--tdn-red) !important;
    color: #fff !important;
}

/* Grid rhythm */
.hp-hero__inner,
.tdn-spotlight-grid,
.tdn-river-grid,
.tdn-trending-grid,
.tdn-cat-layout {
    gap: var(--tdn-pub-card-gap) !important;
}

.tdn-spotlight-grid,
.tdn-trending-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.tdn-river-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.tdn-cat-layout {
    grid-template-columns: minmax(0, 1.24fr) minmax(300px, .86fr) !important;
}

.tdn-cat-sidebar {
    gap: var(--tdn-pub-card-gap) !important;
}

.tdn-trending-rank {
    background: color-mix(in srgb, var(--tdn-red) 92%, #000 8%) !important;
    box-shadow: 0 6px 18px rgba(229, 26, 62, .18) !important;
}

/* Header noise reduction */
.tdn-hdr-top {
    background: var(--color-surface, #fff) !important;
}

.tdn-hdr-nav-links a,
#tdn-header .tdn-hdr-nav-links a {
    letter-spacing: .065em !important;
}

.tdn-hdr-nav-links a:hover,
.tdn-hdr-nav-links a:focus-visible,
#tdn-header .tdn-hdr-nav-links a:hover,
#tdn-header .tdn-hdr-nav-links a:focus-visible {
    background: color-mix(in srgb, var(--tdn-red) 12%, transparent) !important;
    color: var(--tdn-red) !important;
    transform: none !important;
}

.tdn-hdr-nav-links a.current,
#tdn-header .tdn-hdr-nav-links a.current {
    background: var(--tdn-red) !important;
    color: #fff !important;
}

/* Mobile publication polish */
@media (max-width: 1080px) {
    .hp-hero__inner {
        grid-template-areas:
            "lead lead"
            "left right" !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tdn-spotlight-grid,
    .tdn-trending-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tdn-cat-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .tdn-main,
    .hp-hero,
    .tdn-mag-container,
    .tdn-homepage-widgets {
        padding-inline: clamp(13px, 4vw, 18px) !important;
    }

    .tdn-mag-container {
        padding-top: 24px !important;
    }

    .tdn-mag-section {
        margin-bottom: 38px !important;
    }

    .tdn-section-header {
        align-items: flex-end !important;
        gap: 10px !important;
    }

    .tdn-section-title {
        font-size: clamp(1.22rem, 6vw, 1.58rem) !important;
    }

    .tdn-section-more {
        display: none !important;
    }

    .hp-hero__inner,
    .tdn-spotlight-grid,
    .tdn-river-grid,
    .tdn-trending-grid,
    .tdn-cat-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
    }

    .hp-hero__side--left,
    .hp-hero__center,
    .hp-hero__side--right {
        grid-area: auto !important;
    }

    .hp-hero__side {
        gap: var(--tdn-pub-card-gap) !important;
    }

    .hp-hero__center-title {
        font-size: clamp(1.78rem, 9vw, 2.36rem) !important;
    }

    .hp-hero__side-title,
    .tdn-spotlight-headline,
    .tdn-trending-headline,
    .tdn-river-headline,
    .tdn-cat-sub-headline {
        font-size: clamp(1.08rem, 5.2vw, 1.34rem) !important;
        line-height: 1.16 !important;
    }

    .tdn-cat-lead-headline {
        font-size: clamp(1.46rem, 7vw, 1.92rem) !important;
    }

    .tdn-river-item,
    .tdn-cat-sub {
        grid-template-columns: 1fr !important;
    }

    .tdn-river-thumb,
    .tdn-cat-sub-thumb {
        aspect-ratio: 16 / 9 !important;
    }

    .tdn-spotlight-excerpt,
    .tdn-river-excerpt,
    .tdn-cat-lead-excerpt {
        display: none !important;
    }
}

@media (max-width: 430px) {
    :root {
        --tdn-pub-card-radius: 10px;
    }

    .hp-hero__center-text,
    .hp-hero__side-text,
    .tdn-spotlight-body,
    .tdn-river-body,
    .tdn-trending-body,
    .tdn-cat-lead-body,
    .tdn-cat-sub-body {
        padding: 13px !important;
    }

    .tdn-meta,
    .tdn-byline,
    .hp-hero__byline,
    .tdn-author {
        font-size: 10px !important;
        letter-spacing: .065em !important;
    }

    .tdn-badge,
    .tdn-cat-badge,
    .hp-hero__cat {
        min-height: 20px !important;
        font-size: 9px !important;
        letter-spacing: .075em !important;
    }
}


/* v3.3.2 mobile hero ordering fix
   Keep the lead/latest story first on phones. The v3.3.1 publication polish
   layer flattened grid areas on small screens, which let the DOM order place
   the left side-story group above the lead story. */
@media (max-width: 760px) {
    .hp-hero__inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "lead"
            "left"
            "right" !important;
        align-items: stretch !important;
    }

    .hp-hero__center {
        grid-area: lead !important;
        order: 1 !important;
    }

    .hp-hero__side--left {
        grid-area: left !important;
        order: 2 !important;
    }

    .hp-hero__side--right {
        grid-area: right !important;
        order: 3 !important;
    }

    .hp-hero__side {
        width: 100% !important;
        min-width: 0 !important;
    }
}