/*
 * Homepage prototype parity.
 *
 * The base refresh stylesheet contains the approved prototype dimensions and
 * responsive composition. These rules are limited to homepage-specific
 * production components. Browser zoom must not be reproduced with a second
 * container/type scale here: Chrome already scales the complete composition.
 */

body.home-template .post-feed.story-grid,
body.home-template .story-grid {
    width: auto;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

/* Stories 15–25 switch to a faster, headline-led reading rhythm. */
body.home-template .more-latest {
    margin-top: 34px;
    overflow: hidden;
    background: var(--refresh-paper);
    border-top: 4px solid var(--refresh-red);
    box-shadow: var(--refresh-shadow);
}

body.home-template .more-latest-heading {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(320px, 1.28fr);
    align-items: end;
    gap: 36px;
    padding: 27px 30px 24px;
    color: #fff;
    background: #17272e;
    border-bottom: 3px solid var(--refresh-gold);
}

body.home-template .more-latest-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--refresh-gold-light);
    font: 850 10px/1 var(--refresh-display);
    letter-spacing: .13em;
    text-transform: uppercase;
}

body.home-template .more-latest-heading h2 {
    margin: 0;
    color: #fff;
    font: 850 31px/.98 var(--refresh-display);
    letter-spacing: -.025em;
}

body.home-template .more-latest-heading p {
    max-width: 580px;
    margin: 0 0 2px auto;
    color: #bdcbd1;
    font: 400 15.5px/1.45 var(--refresh-article-font);
}

body.home-template .more-latest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    padding: 8px 30px 18px;
}

body.home-template .more-latest-story {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    padding: 18px 0;
    color: inherit;
    border-bottom: 1px solid var(--refresh-line);
    text-decoration: none;
}

body.home-template .more-latest-story:nth-child(odd) { padding-right: 15px; }
body.home-template .more-latest-story:nth-child(even) {
    padding-left: 15px;
    border-left: 1px solid var(--refresh-line);
}

body.home-template .more-latest-story img {
    width: 132px;
    height: 88px;
    object-fit: cover;
    background: #dce5e8;
    transition: filter .18s ease, transform .18s ease;
}

body.home-template .more-latest-copy { display: flex; min-width: 0; flex-direction: column; }

body.home-template .more-latest-kicker {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--refresh-muted);
    font: 800 11px/1.25 var(--refresh-display);
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.home-template .more-latest-kicker > span { color: var(--refresh-red-dark); }

body.home-template .more-latest-story h3 {
    margin: 7px 0 0;
    color: var(--refresh-ink);
    font: 800 17px/1.1 var(--refresh-display);
    letter-spacing: -.018em;
}

body.home-template .more-latest-byline {
    margin-top: auto;
    padding-top: 8px;
    color: var(--refresh-muted);
    font: 700 10.75px/1.3 var(--refresh-display);
}

body.home-template .more-latest-story:hover h3 { color: var(--refresh-red-dark); }
body.home-template .more-latest-story:hover img { filter: saturate(1.12) contrast(1.04); transform: translateY(-2px); }

body.home-template .more-latest-directory {
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 20px 24px;
    color: var(--refresh-ink);
    background: color-mix(in srgb, var(--refresh-page) 72%, var(--refresh-paper));
    border-bottom: 1px solid var(--refresh-line);
}

body.home-template .more-latest-directory > span {
    color: var(--refresh-red-dark);
    font: 850 9.5px/1 var(--refresh-display);
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.home-template .more-latest-directory h3 {
    max-width: 290px;
    margin: 7px 0 13px;
    color: inherit;
    font: 800 18px/1.08 var(--refresh-display);
    letter-spacing: -.02em;
}

body.home-template .more-latest-directory div { display: flex; flex-wrap: wrap; gap: 0 14px; }

body.home-template .more-latest-directory a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--refresh-copy);
    font: 800 9.5px/1.2 var(--refresh-display);
    letter-spacing: .035em;
    text-decoration: none;
    text-transform: uppercase;
}

body.home-template .more-latest-directory a::after { color: var(--refresh-red); content: " \2192"; }
body.home-template .more-latest-directory a:hover { color: var(--refresh-red-dark); }
body.home-template .refresh-loaded-feed:empty { display: none; }
body.home-template .refresh-loaded-feed:not(:empty) { margin-top: 34px; }

html[data-theme="dark"] body.home-template .more-latest-story:nth-child(even) { border-left-color: #34464e; }

/* Keep the editorial feature dark in both color modes. */
body.home-template .wide-story,
body.home-template .wide-copy {
    background: #17272e;
    color: #fff;
}

body.home-template .wide-copy h3 { color: #fff; }
body.home-template .wide-copy p { color: #c4d0d5; }

/* The page number remains available to assistive technology and JS. */
body.home-template .refresh-page-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body.home-template .refresh-pagination { margin: 42px 0 0; }

body.home-template .refresh-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 58px;
    padding: 18px 28px;
    font-size: 13px;
}

body.home-template .newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    margin-top: 52px;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--refresh-red) 0 33%, var(--refresh-gold) 33% 66%, transparent 66%) 1;
    background: var(--refresh-paper);
    box-shadow: var(--refresh-shadow);
}

body.home-template .newsletter-copy {
    padding: 34px 40px;
    background: #17272e;
    color: #fff;
}

body.home-template .newsletter-kicker {
    color: var(--refresh-gold-light);
    font: 850 11px/1 var(--refresh-display);
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.home-template .newsletter h2 {
    margin: 9px 0 5px;
    color: #fff;
    font: 800 31px/1.05 var(--refresh-display);
}

body.home-template .newsletter-copy p {
    margin: 0;
    color: #c4d0d5;
    font: 16px/1.45 var(--refresh-article-font);
}

body.home-template .newsletter-action {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 28px 36px;
}

body.home-template .newsletter-action > p:first-child {
    margin: 0 0 14px;
    color: var(--refresh-copy);
    font: 16px/1.42 var(--refresh-article-font);
}

body.home-template .newsletter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 50px;
    padding: 15px 20px;
    border: 0;
    background: var(--refresh-red);
    color: #fff;
    font: 850 12px/1 var(--refresh-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

body.home-template .newsletter-button:hover { background: var(--refresh-red-dark); }

body.home-template .newsletter-note {
    margin: 10px 0 0;
    color: var(--refresh-muted);
    font: 11px/1.35 var(--refresh-display);
}

@media (max-width: 640px) {
    body.home-template .home {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-bottom: 64px;
    }

    body.home-template .newsletter {
        grid-template-columns: 1fr;
        margin-top: 38px;
        border-right: 0;
        border-left: 0;
    }

    body.home-template .newsletter-copy { padding: 28px 22px; }
    body.home-template .newsletter h2 { font-size: 27px; }
    body.home-template .newsletter-action { padding: 24px 22px 28px; }

    body.home-template .newsletter-button {
        width: 100%;
        justify-content: center;
    }

    body.home-template .refresh-pagination { margin-top: 34px; }
    body.home-template .refresh-load-more { min-width: 210px; }

    body.home-template .more-latest {
        margin-top: 28px;
        border-right: 0;
        border-left: 0;
        box-shadow: none;
    }

    body.home-template .more-latest-heading {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 25px 20px 22px;
    }

    body.home-template .more-latest-heading h2 { font-size: 28px; }
    body.home-template .more-latest-heading p { margin: 0; font-size: 14px; }
    body.home-template .more-latest-grid { grid-template-columns: 1fr; padding: 6px 18px 14px; }

    body.home-template .more-latest-story,
    body.home-template .more-latest-story:nth-child(odd),
    body.home-template .more-latest-story:nth-child(even) {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 14px;
        padding: 15px 0;
        border-left: 0;
    }

    body.home-template .more-latest-story img { width: 104px; height: 74px; }
    body.home-template .more-latest-story h3 { font-size: 16.5px; }
    body.home-template .more-latest-byline { display: block; padding-top: 9px; font-size: 10.5px; }
    body.home-template .more-latest-directory { min-height: 176px; padding: 24px 20px; }
}

@media (min-width: 1400px) {
    body.home-template .more-latest { margin-top: 42px; }
    body.home-template .more-latest-heading { padding: 32px 36px 28px; }
    body.home-template .more-latest-heading h2 { font-size: 36px; }
    body.home-template .more-latest-heading p { font-size: 17px; }
    body.home-template .more-latest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; padding: 8px 28px 20px; }

    body.home-template .more-latest-story,
    body.home-template .more-latest-story:nth-child(odd),
    body.home-template .more-latest-story:nth-child(even) {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 16px;
        border-left: 0;
    }

    body.home-template .more-latest-story:not(:nth-child(3n + 1)) { border-left: 1px solid var(--refresh-line); }
    body.home-template .more-latest-directory { border-left: 1px solid var(--refresh-line); }
    body.home-template .more-latest-story img { width: 118px; height: 82px; }
    body.home-template .more-latest-story h3 { font-size: 17.5px; }
    body.home-template .more-latest-kicker { font-size: 11.5px; }
    body.home-template .more-latest-byline { font-size: 11px; }
}

@media (min-width: 1900px) {
    body.home-template .more-latest { margin-top: 48px; }
    body.home-template .more-latest-heading { padding: 38px 42px 34px; }
    body.home-template .more-latest-heading h2 { font-size: 40px; }
    body.home-template .more-latest-heading p { font-size: 18.5px; }
    body.home-template .more-latest-grid { padding: 10px 32px 24px; }

    body.home-template .more-latest-story,
    body.home-template .more-latest-story:nth-child(odd),
    body.home-template .more-latest-story:nth-child(even) {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 18px;
        padding: 23px 19px;
    }

    body.home-template .more-latest-story img { width: 132px; height: 90px; }
    body.home-template .more-latest-story h3 { font-size: 19px; }
    body.home-template .more-latest-kicker { font-size: 12px; }
    body.home-template .more-latest-byline { font-size: 11.75px; }
    body.home-template .more-latest-directory { padding: 24px 28px; }
    body.home-template .more-latest-directory h3 { font-size: 20px; }
}