/* UHN Plus Editorial V8 — final integration layer
   Loaded after screen.css to stabilise the responsive newsroom system. */

:root {
    --v8-ink: #252525;
    --v8-charcoal: #2f2f2f;
    --v8-soft: #f3f3f2;
    --v8-line: #d6d6d4;
    --v8-serif: Georgia, 'Times New Roman', Times, serif;
    --v8-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --v8-shell: 1280px;
}

html { overflow-x: clip; }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-red) 68%, #fff); outline-offset: 3px; }

/* ---------- Header: one stable geometry on every viewport ---------- */
.site-header { background: rgba(255,255,255,.98); }
.header-primary {
    width: min(calc(100% - 40px), var(--v8-shell));
    min-height: 80px;
    height: 80px;
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
}
.masthead,
.masthead.masthead--clean {
    width: auto;
    min-width: 0;
    height: 64px;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--v8-ink);
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.masthead .brand-logo { width: auto; max-width: 220px; max-height: 58px; object-fit: contain; }
.masthead .brand-text { font: 800 clamp(23px,2vw,32px)/1 var(--v8-sans); letter-spacing: -.04em; }
.header-actions { min-width: 0; }
.header-actions-desktop { display: flex; align-items: center; gap: 18px; }
.header-actions-mobile { display: none; }
.header-secondary { background: #fff; }
.secondary-inner { width: min(calc(100% - 40px), var(--v8-shell)); margin-inline: auto; }
.section-nav a { font-family: var(--v8-sans); font-weight: 650; }

/* ---------- Homepage polish ---------- */
.homepage-v7 { color: var(--v8-ink); }
.homepage-v7 .hero-v7,
.homepage-v7 .news-section,
.homepage-v7 .opinion-showcase { max-width: var(--v8-shell); }
.homepage-v7 .section-heading--refined { border-top-color: var(--brand-red); }
.homepage-v7 .section-heading--refined h2 { font-family: var(--v8-sans); font-weight: 760; letter-spacing: -.035em; }
.homepage-v7 .section-card h3,
.homepage-v7 .feature-package h3,
.homepage-v7 .split-package h3,
.homepage-v7 .magazine-card h3,
.homepage-v7 .list-story h3,
.homepage-v7 .opinion-card h3,
.homepage-v7 .hero-v7 h1,
.homepage-v7 .hero-v7 h2 { font-family: var(--v8-serif); text-wrap: balance; }

/* Prevent empty/failed media from stretching modules. */
.homepage-v7 .hero-image:empty,
.homepage-v7 .hero-ranked-thumb:empty,
.homepage-v7 .section-card-media:empty,
.homepage-v7 .magazine-media:empty,
.homepage-v7 .feature-package-media:empty,
.homepage-v7 .split-lead-media:empty,
.homepage-v7 .split-side-media:empty { background: linear-gradient(135deg,#ededeb,#d9d9d6); }

/* Better desktop newsroom rhythm. */
@media (min-width: 1101px) {
    .homepage-v7 .hero.hero-v7 { margin-top: 54px; margin-bottom: 74px; }
    .homepage-v7 .news-section,
    .homepage-v7 .opinion-showcase { margin-top: 72px; margin-bottom: 84px; }
    .homepage-v7 .section-heading.section-heading--refined { padding: 18px 0 21px; }
    .homepage-v7 .section-heading--refined h2 { font-size: clamp(34px,3vw,48px); }
    .homepage-v7 .section-card,
    .homepage-v7 .magazine-card,
    .homepage-v7 .feature-package,
    .homepage-v7 .split-package,
    .homepage-v7 .list-package { min-width: 0; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    .header-primary { width: calc(100% - 32px); grid-template-columns: 48px 1fr auto; gap: 12px; }
    .masthead, .masthead.masthead--clean { justify-self: start; }
    .masthead .brand-logo { max-width: 180px; }
    .header-actions-desktop { display: none; }
    .header-actions-mobile { display: flex; align-items: center; gap: 9px; }
    .secondary-inner { width: 100%; padding-left: 16px; }
}

/* ---------- Mobile: recreate the refined two-row newsroom header ---------- */
@media (max-width: 700px) {
    .site-header { border-bottom: 0; }
    .header-primary {
        width: 100%;
        height: 59px;
        min-height: 59px;
        padding: 0 15px;
        display: grid;
        grid-template-columns: 40px minmax(102px, 1fr) auto;
        gap: 10px;
        border-bottom: 1px solid #242424;
    }
    .header-left { width: 40px; min-width: 40px; }
    .menu-toggle { width: 40px; height: 46px; padding: 5px 0; justify-content: start; }
    .menu-toggle span { width: 25px; height: 2.5px; border-radius: 2px; }
    .masthead,
    .masthead.masthead--clean {
        width: min(154px, 39vw) !important;
        min-width: 0;
        height: 47px;
        justify-self: start;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }
    .masthead .brand-logo { width: auto; max-width: 100%; max-height: 41px; }
    .masthead .brand-text { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(19px,5.5vw,25px); }
    .header-actions { justify-self: end; min-width: 0; }
    .header-actions-mobile { display: flex; min-width: 0; gap: 7px !important; }
    .subscribe-button--mobile {
        width: auto;
        max-width: min(134px, 33vw);
        height: 34px;
        min-height: 34px;
        padding: 0 10px;
        border-radius: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(10.5px,2.9vw,12px);
        line-height: 1;
    }
    .header-account-mobile { width: 29px; min-width: 29px; height: 34px; }
    .header-account-mobile svg { width: 27px; height: 27px; }

    .header-secondary { border-top: 0; border-bottom: 1px solid #242424; }
    .secondary-inner { width: 100%; height: 47px; padding-left: 16px; gap: 0; }
    .section-nav, .section-nav ul { height: 47px; }
    .section-nav a {
        height: 47px;
        padding: 0;
        margin-right: 30px;
        font: 700 14px/1 var(--v8-sans);
    }
    .section-nav li.nav-current a::after { height: 4px; }
    .search-button--nav {
        position: sticky;
        right: 0;
        width: 48px;
        min-width: 48px;
        height: 46px;
        padding: 0;
        justify-content: center;
        background: linear-gradient(90deg,rgba(255,255,255,.72),#fff 38%);
        border-left: 0;
    }
    .search-button--nav span { display: none; }
    .site-header.is-condensed .header-primary { display: none !important; }

    /* Top ad must not create fake desktop whitespace. */
    .homepage-ad-wrap--top { padding: 24px 0 24px; }
    .homepage-ad-wrap--top .shell { width: 100%; }
    .homepage-ad-wrap--top .ad-slot__inner { min-height: 128px; padding: 12px 16px; }
    .homepage-ad-wrap--top .ad-creative { width: 100%; }
    .homepage-ad-wrap--top .ad-creative img { width: 100%; height: auto; object-fit: contain; }

    /* Al Día: predictable one-card-plus-peek viewport. */
    .al-dia-v7 .al-dia-inner { width: 100%; padding: 27px 0 30px; }
    .al-dia-v7 .al-dia-heading { margin-inline: 16px; min-height: 70px; }
    .al-dia-v7 .al-dia-heading h2 { max-width: 270px; font: 400 27px/1.16 var(--v8-sans); letter-spacing: -.025em; }
    .al-dia-v7 .al-dia-prefix { color: #ff344d; }
    .al-dia-v7 .al-dia-track { padding: 0 16px 3px; gap: 0; }
    .al-dia-v7 .al-dia-card {
        flex: 0 0 min(310px, 82vw);
        width: min(310px, 82vw);
        grid-template-columns: 88px 5px minmax(0,1fr);
        gap: 14px;
        padding-right: 17px;
        min-height: 149px;
    }
    .al-dia-v7 .al-dia-card:not(:first-child) { padding-left: 17px; }
    .al-dia-v7 .al-dia-card h3 { font: 700 19px/1.08 var(--v8-serif); }

    /* Main ranked package: no desktop geometry can leak into mobile. */
    .homepage-v7 .hero.hero-v7 {
        width: calc(100% - 32px);
        margin: 42px 16px 62px;
    }
    .hero-v7 .hero-rank-layout { display: block !important; width: 100%; background: var(--v8-charcoal); overflow: hidden; }
    .hero-v7 .hero-lead { display: block !important; min-height: 0 !important; background: var(--v8-charcoal); }
    .hero-v7 .hero-image { position: relative !important; inset: auto !important; display: block; width: 100%; min-height: 0; aspect-ratio: 1 / 1.03; overflow: hidden; }
    .hero-v7 .hero-image img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
    .hero-v7 .hero-lead-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0) 26%,rgba(12,12,12,.16) 48%,rgba(47,47,47,.94) 84%,var(--v8-charcoal) 100%); }
    .hero-v7 .hero-number { left: 16px; top: 15px; width: 52px; height: 52px; border-radius: 0; border: 0; background: var(--v8-charcoal); color: #fff; font-size: 29px; }
    .hero-v7 .hero-lead-title { left: 17px; right: 17px; bottom: 26px; font: 700 clamp(31px,9.2vw,39px)/1 var(--v8-serif); letter-spacing: -.02em; }
    .hero-v7 .hero-ranked-item {
        display: grid !important;
        grid-template-columns: 30px minmax(0,1fr) 82px !important;
        gap: 12px;
        min-height: 158px;
        padding: 22px 16px 23px;
        border-top: 1px solid rgba(255,255,255,.34);
    }
    .hero-v7 .hero-ranked-number { padding-top: 27px; font: 700 29px/1 var(--v8-serif); }
    .hero-v7 .hero-ranked-item h2 { margin: 7px 0 14px; font: 700 23px/1.07 var(--v8-serif); }
    .hero-v7 .hero-ranked-thumb { width: 82px; height: 82px; aspect-ratio: 1; align-self: center; overflow: hidden; }
    .hero-v7 .hero-ranked-thumb img { width: 100%; height: 100%; object-fit: cover; }

    /* Section geometry from the reference: strong red rule + generous heading. */
    .homepage-v7 .news-section,
    .homepage-v7 .opinion-showcase { width: calc(100% - 32px); margin: 58px 16px 68px; }
    .homepage-v7 .section-heading.section-heading--refined { min-height: 79px; padding: 22px 0 17px; border-top: 4px solid var(--brand-red); align-items: center; }
    .homepage-v7 .section-heading--refined h2 { font: 760 30px/1.03 var(--v8-sans); letter-spacing: -.04em; }
    .homepage-v7 .section-scroll-controls button { border: 0; background: transparent; }

    /* Horizontal rails: a complete card + a deliberate peek at the next. */
    .news-section--rail .section-rail--light {
        display: flex !important;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        margin-right: -16px;
        padding-right: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .news-section--rail .section-rail--light::-webkit-scrollbar { display: none; }
    .news-section--rail .section-card {
        flex: 0 0 min(72vw, 305px) !important;
        width: min(72vw, 305px);
        scroll-snap-align: start;
        background: #f1f1f0;
        padding: 15px 13px 22px;
    }
    .news-section--rail .section-card-meta { min-height: 57px; margin-bottom: 12px; }
    .news-section--rail .section-card-media { aspect-ratio: 16/10; margin-bottom: 15px; }
    .news-section--rail .section-card h3 { font: 700 clamp(23px,6.6vw,28px)/1.08 var(--v8-serif); }

    .homepage-v7 .opinion-rail { overflow-x: auto; scrollbar-width: none; }
    .homepage-v7 .opinion-rail::-webkit-scrollbar { display: none; }
    .homepage-v7 .opinion-card--v7 { flex: 0 0 min(82vw, 320px); width: min(82vw, 320px); }
}

@media (max-width: 390px) {
    .header-primary { padding-inline: 12px; grid-template-columns: 36px minmax(94px,1fr) auto; gap: 7px; }
    .header-left, .menu-toggle { width: 36px; min-width: 36px; }
    .masthead, .masthead.masthead--clean { width: min(132px, 36vw) !important; }
    .subscribe-button--mobile { max-width: 112px; padding-inline: 8px; }
    .header-actions-mobile { gap: 5px !important; }
    .section-nav a { margin-right: 25px; }
    .al-dia-v7 .al-dia-card { flex-basis: 77vw; width: 77vw; }
}

@media (max-width: 350px) {
    .masthead, .masthead.masthead--clean { width: min(112px, 35vw) !important; }
    .subscribe-button--mobile { max-width: 92px; font-size: 10px; padding-inline: 6px; }
    .header-account-mobile { width: 26px; min-width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Saved articles library ---------- */
.saved-page { padding: 64px 0 88px; }
.saved-page-head { max-width: 850px; padding-bottom: 26px; border-bottom: 5px solid var(--brand-red); }
.saved-page-head h1 { margin: 4px 0 12px; font: 700 clamp(48px,6vw,76px)/.98 var(--v8-serif); letter-spacing: -.035em; }
.saved-page-head p { max-width: 690px; margin: 0; color: #555; font: 400 18px/1.5 var(--v8-sans); }
.saved-page-actions { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--v8-line); font: 700 12px/1 var(--v8-sans); }
.saved-page-actions button { min-height: 36px; padding: 7px 11px; border: 1px solid #aaa; background: #fff; cursor: pointer; font-weight: 750; }
.saved-empty { max-width: 650px; margin: 56px 0; padding: 28px 0; }
.saved-empty strong { display: block; margin-bottom: 8px; font: 700 28px/1.08 var(--v8-serif); }
.saved-empty p { color: #666; line-height: 1.5; }
.saved-empty a { color: var(--brand-red); font-weight: 800; }
.saved-list { border-bottom: 1px solid var(--v8-line); }
.saved-item { min-height: 122px; padding: 22px 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; border-top: 1px solid var(--v8-line); }
.saved-item-meta { display: block; margin-bottom: 7px; color: #757573; font: 700 10.5px/1 var(--v8-sans); text-transform: uppercase; letter-spacing: .04em; }
.saved-item h2 { max-width: 850px; margin: 0; font: 700 clamp(23px,2.5vw,34px)/1.06 var(--v8-serif); letter-spacing: -.018em; }
.saved-item-actions { display: flex; gap: 7px; }
.saved-item-actions a,
.saved-item-actions button { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; border: 1px solid #999; background: #fff; color: #222; cursor: pointer; font: 750 11px/1 var(--v8-sans); }
.saved-item-actions a { background: #222; color: #fff; border-color: #222; }

@media (max-width: 700px) {
    .saved-page { width: 100%; padding: 38px 17px 74px; }
    .saved-page-head h1 { font-size: 43px; }
    .saved-page-head p { font-size: 16px; }
    .saved-item { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
    .saved-item h2 { font-size: 27px; }
    .saved-item-actions { justify-content: flex-start; }
}

/* ---------- V8.3 richer saved library ---------- */
.saved-item { grid-template-columns: 150px minmax(0,1fr) auto; }
.saved-item-media {
    display: block;
    width: 150px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e7e7e4;
}
.saved-item-media img,
.saved-item-media-fallback { display: block; width: 100%; height: 100%; object-fit: cover; }
.saved-item-media-fallback { background: linear-gradient(135deg,#ececea,#d6d6d2); }

@media (max-width: 700px) {
    .saved-item { grid-template-columns: 104px minmax(0,1fr); gap: 13px; align-items: start; }
    .saved-item-media { width: 104px; }
    .saved-item h2 { font-size: 23px; }
    .saved-item-actions { grid-column: 1 / -1; }
}