/* ═══════════════════════════════════════════════════════════
   TDN MAGAZINE — HOMEPAGE LAYOUT
   Light theme · Brand colors: red #e51a3e · gold #c8922a
═══════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════╗
   ║  HERO GRID                                           ║
   ║  3 columns: [left 2 cards] [center lead] [right 2]  ║
   ║  Desktop only — collapses to stack on mobile         ║
   ╚═══════════════════════════════════════════════════════╝ */

.hp-hero {
    background: #fff;
    border-bottom: 3px solid var(--tdn-red);
    border-top: 1px solid var(--tdn-border-lt);
}

/* ── The 3-col row ── */
.hp-hero__inner {
    display: flex;
    align-items: stretch;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 560px;           /* explicit height — the key that makes flex children fill space */
}

/* ────────────────────────────────────────
   SIDE COLUMNS  (left & right)
──────────────────────────────────────── */
.hp-hero__side {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.hp-hero__side--left  { border-right: 1px solid var(--tdn-border-lt); }
.hp-hero__side--right { border-left:  1px solid var(--tdn-border-lt); }

/* Each side has 2 cards stacked — each gets exactly half the height */
.hp-hero__side-card {
    flex: 1;                 /* half of 560px = 280px each */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;           /* required: lets flex children shrink */
    position: relative;
    background: #fff;
    transition: background .2s ease;
}
.hp-hero__side-card:hover { background: #fafafa; }
.hp-hero__side-card + .hp-hero__side-card {
    border-top: 1px solid var(--tdn-border-lt);
}

/* Accent bar that appears on hover */
.hp-hero__side-card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 0;
    background: var(--tdn-red);
    transition: height .25s ease;
}
.hp-hero__side-card:hover::after { height: 100%; }

/* Image wrapper fills all available vertical space */
.hp-hero__side-img-wrap {
    display: block;
    flex: 1;
    overflow: hidden;
    background: var(--tdn-bg-soft);
    min-height: 0;           /* required */
}
.hp-hero__side-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.hp-hero__side-card:hover .hp-hero__side-img { transform: scale(1.05); }

/* Text block pinned to the bottom of each side card */
.hp-hero__side-text {
    flex-shrink: 0;          /* never compress — image gives up space instead */
    padding: 10px 16px 14px;
    background: #fff;
    border-top: 1px solid var(--tdn-border-lt);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.hp-hero__cat {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tdn-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hp-hero__cat::before {
    content: '';
    width: 3px;
    height: 11px;
    background: var(--tdn-red);
    border-radius: 1px;
    display: inline-block;
    flex-shrink: 0;
}
.hp-hero__cat:hover { color: var(--tdn-red-dark); }
.hp-hero__cat:hover::before { background: var(--tdn-red-dark); }

.hp-hero__side-title {
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tdn-black);
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-hero__side-title a { color: inherit; text-decoration: none; }
.hp-hero__side-title a:hover { color: var(--tdn-red); }

.hp-hero__date {
    font-size: .68rem;
    color: var(--tdn-muted-lt);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}
.hp-hero__date::before {
    content: '';
    width: 10px;
    height: 1px;
    background: var(--tdn-border-lt);
    display: inline-block;
    flex-shrink: 0;
}

/* ────────────────────────────────────────
   CENTER COLUMN  (lead story)
──────────────────────────────────────── */
.hp-hero__center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;  /* image on top, text below */
}

/* Text block — fixed at bottom, does not grow */
.hp-hero__center-text {
    flex-shrink: 0;
    padding: 18px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-top: 3px solid var(--tdn-red); /* red accent above the headline */
    background: #fff;
}

.hp-hero__center-title {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--tdn-black);
    letter-spacing: -.035em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-hero__center-title a { color: inherit; text-decoration: none; }
.hp-hero__center-title a:hover { color: var(--tdn-red); }

.hp-hero__center-excerpt {
    font-size: .875rem;
    color: var(--tdn-muted);
    line-height: 1.62;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-hero__byline {
    font-size: .73rem;
    color: var(--tdn-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}
.hp-hero__byline::before {
    content: '';
    width: 14px;
    height: 2px;
    background: var(--tdn-red);
    display: inline-block;
    flex-shrink: 0;
}
.hp-hero__byline .tdn-author {
    color: var(--tdn-black);
    font-weight: 600;
}
.hp-hero__byline .tdn-author:hover { color: var(--tdn-red); }

/* Large image fills the rest of the center column */
.hp-hero__center-img-wrap {
    display: block;
    flex: 1;                 /* takes all remaining height after text block */
    overflow: hidden;
    background: var(--tdn-bg-soft);
    min-height: 0;           /* required */
}
.hp-hero__center-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s ease;
}
.hp-hero__center-img-wrap:hover .hp-hero__center-img { transform: scale(1.03); }


/* ════════════════════════════════════════
   TABLET — 1024px and below
════════════════════════════════════════ */
/* ════════════════════════════════════════
   TABLET + MOBILE — single vertical stack
════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Kill the 3-col flex row entirely */
    .hp-hero__inner {
        display: block;   /* block = guaranteed top-to-bottom stacking, no flex quirks */
        height: auto;
        padding: 0;
    }

    /* Center story: pull it to the top via negative margin trick isn't needed —
       block order matches DOM order; center is 2nd in DOM so we use flex order on
       a wrapper — actually with display:block we control order via DOM.
       Center is the middle child, so reorder in DOM... but we can't change DOM order
       easily. Use a grid trick instead: */
    .hp-hero__inner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    /* Assign explicit grid rows: center first, then left, then right */
    .hp-hero__center        { grid-row: 1; }
    .hp-hero__side--left    { grid-row: 2; }
    .hp-hero__side--right   { grid-row: 3; }

    /* Center image */
    .hp-hero__center-img-wrap {
        display: block;
        flex: none;
        width: 100%;
        height: 52vw;
        max-height: 340px;
    }
    .hp-hero__center-text { padding: 16px 20px 20px; gap: 8px; }
    .hp-hero__center-title { font-size: 1.5rem; }

    /* Side columns: block so their cards stack naturally */
    .hp-hero__side {
        display: block;
        width: 100%;
        height: auto;
        border: none !important;
    }

    /* Each card: horizontal thumbnail-left, text-right news row */
    .hp-hero__side-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: 110px;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--tdn-border-lt) !important;
        overflow: hidden;
    }
    .hp-hero__side-card::after { display: none; }

    /* Thumbnail on the left */
    .hp-hero__side-img-wrap {
        display: block;
        flex: 0 0 130px;   /* fixed width, won't grow or shrink */
        width: 130px;
        height: 100%;
        min-height: 0;
    }

    /* Text on the right */
    .hp-hero__side-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-top: none;
        border-left: 3px solid transparent;
        padding: 10px 16px;
        gap: 5px;
        transition: border-color .2s;
    }
    .hp-hero__side-card:hover .hp-hero__side-text { border-left-color: var(--tdn-red); }

    /* Hide date & category on side cards — headline needs the space */
    .hp-hero__side-text .hp-hero__date { display: none !important; }
    .hp-hero__side-text .hp-hero__cat  { display: none !important; }

    /* Give headline up to 3 lines now that date & category are gone */
    .hp-hero__side-title {
        -webkit-line-clamp: 3;
        font-size: .95rem;
    }
}

/* ════════════════════════════════════════
   MOBILE — tighten sizes
════════════════════════════════════════ */
@media (max-width: 600px) {
    .hp-hero__center-img-wrap { height: 58vw; max-height: 260px; }
    .hp-hero__center-title { font-size: 1.2rem; }
    .hp-hero__center-text { padding: 12px 16px 16px; }
    .hp-hero__center-excerpt { display: none; }

    .hp-hero__side-card { height: 90px; }
    .hp-hero__side-img-wrap { flex: 0 0 105px; width: 105px; }
    .hp-hero__side-title { font-size: .83rem; }
    .hp-hero__cat { font-size: 8px; }
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  MAGAZINE CONTAINER & SECTIONS                       ║
   ╚═══════════════════════════════════════════════════════╝ */

.tdn-mag-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.tdn-mag-section { margin-bottom: 52px; }


/* ── Spotlight (3-col featured grid) ──────────────────── */
.tdn-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.tdn-spotlight-card { display: flex; flex-direction: column; }
.tdn-spotlight-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16/9;
    background: var(--tdn-bg-soft);
    margin-bottom: 14px;
}
.tdn-spotlight-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.tdn-spotlight-thumb:hover .tdn-spotlight-img { transform: scale(1.04); }
.tdn-spotlight-thumb .tdn-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.tdn-spotlight-body { display: flex; flex-direction: column; gap: 8px; }
.tdn-spotlight-headline {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tdn-black);
}
.tdn-spotlight-headline a { color: inherit; text-decoration: none; }
.tdn-spotlight-headline a:hover { color: var(--tdn-red); }
.tdn-spotlight-excerpt {
    font-size: .875rem;
    color: var(--tdn-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── News River ────────────────────────────────────────── */
.tdn-river-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 28px;
}
.tdn-river-item {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--tdn-border-lt);
}
.tdn-river-thumb {
    display: block;
    width: 100px;
    min-width: 100px;
    height: 70px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--tdn-bg-soft);
    flex-shrink: 0;
}
.tdn-river-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tdn-river-thumb:hover .tdn-river-img { transform: scale(1.06); }
.tdn-river-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tdn-river-top { display: flex; align-items: center; gap: 8px; }
.tdn-river-headline {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tdn-black);
}
.tdn-river-headline a { color: inherit; text-decoration: none; }
.tdn-river-headline a:hover { color: var(--tdn-red); }
.tdn-river-excerpt {
    font-size: .8rem;
    color: var(--tdn-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.55;
}


/* ── Trending ───────────────────────────────────────────── */
.tdn-section-title--trending { display: flex; align-items: center; gap: 8px; }
.tdn-trending-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--tdn-red);
    display: inline-block;
    animation: tdnPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.tdn-trending-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.tdn-trending-card { display: flex; gap: 20px; }
.tdn-trending-thumb {
    position: relative;
    display: block;
    width: 200px;
    min-width: 200px;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--tdn-bg-soft);
    flex-shrink: 0;
}
.tdn-trending-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tdn-trending-thumb:hover .tdn-trending-img { transform: scale(1.05); }
.tdn-trending-rank {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--tdn-red);
    color: var(--tdn-white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tdn-trending-body { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.tdn-cat-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tdn-red);
    text-decoration: none;
}
.tdn-cat-badge:hover { color: var(--tdn-red-dark); }
.tdn-trending-headline {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tdn-black);
}
.tdn-trending-headline a { color: inherit; text-decoration: none; }
.tdn-trending-headline a:hover { color: var(--tdn-red); }


/* ── Category sections (TV / Film / Music) ─────────────── */
.tdn-cat-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}
.tdn-cat-lead-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16/9;
    background: var(--tdn-bg-soft);
    margin-bottom: 14px;
}
.tdn-cat-lead-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tdn-cat-lead-thumb:hover .tdn-cat-lead-img { transform: scale(1.04); }
.tdn-cat-lead-thumb .tdn-badge { position: absolute; top: 10px; left: 10px; }
.tdn-cat-lead-body { display: flex; flex-direction: column; gap: 8px; }
.tdn-cat-lead-headline {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tdn-black);
}
.tdn-cat-lead-headline a { color: inherit; text-decoration: none; }
.tdn-cat-lead-headline a:hover { color: var(--tdn-red); }
.tdn-cat-lead-excerpt {
    font-size: .9rem;
    color: var(--tdn-muted);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tdn-cat-sidebar { display: flex; flex-direction: column; gap: 0; }
.tdn-cat-sub {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tdn-border-lt);
}
.tdn-cat-sub:first-child { padding-top: 0; }
.tdn-cat-sub:last-child { border-bottom: none; }
.tdn-cat-sub-thumb {
    display: block;
    width: 80px; min-width: 80px;
    height: 60px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--tdn-bg-soft);
    flex-shrink: 0;
}
.tdn-cat-sub-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.tdn-cat-sub-thumb:hover .tdn-cat-sub-img { transform: scale(1.06); }
.tdn-cat-sub-body { flex: 1; min-width: 0; }
.tdn-cat-sub-headline {
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tdn-black);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tdn-cat-sub-headline a { color: inherit; text-decoration: none; }
.tdn-cat-sub-headline a:hover { color: var(--tdn-red); }


/* ╔═══════════════════════════════════════════════════════╗
   ║  RESPONSIVE — tablet & mobile                        ║
   ╚═══════════════════════════════════════════════════════╝ */

@media (max-width: 1024px) {
    .tdn-mag-container     { padding: 0 20px; }
    .tdn-spotlight-grid    { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .tdn-river-grid        { grid-template-columns: repeat(2, 1fr); }
    .tdn-trending-grid     { gap: 20px; }
    .tdn-trending-thumb    { width: 160px; min-width: 160px; }
    .tdn-cat-layout        { grid-template-columns: 1fr; }
    .tdn-cat-sidebar       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .tdn-cat-sub           { flex-direction: column; padding: 0; }
    .tdn-cat-sub-thumb     { width: 100%; height: 120px; }
}

@media (max-width: 768px) {
    .tdn-mag-container     { padding: 0 16px; }
    .tdn-mag-section       { margin-bottom: 36px; }
    .tdn-spotlight-grid    { grid-template-columns: 1fr; gap: 24px; }
    .tdn-river-grid        { grid-template-columns: 1fr; gap: 0; }
    .tdn-river-item        { padding-bottom: 16px; margin-bottom: 0; }
    .tdn-river-thumb       { width: 90px; min-width: 90px; height: 64px; }
    .tdn-trending-grid     { grid-template-columns: 1fr; gap: 16px; }
    .tdn-trending-thumb    { width: 140px; min-width: 140px; }
    .tdn-cat-sidebar       { grid-template-columns: 1fr; gap: 0; }
    .tdn-cat-sub           { flex-direction: row; padding: 14px 0; }
    .tdn-cat-sub-thumb     { width: 80px; min-width: 80px; height: 60px; }
    /* Section header tightening */
    .tdn-section-title     { font-size: 1rem; }
}

@media (max-width: 480px) {
    .tdn-mag-container     { padding: 0 12px; }
    .tdn-mag-section       { margin-bottom: 28px; }
    .tdn-trending-card     { flex-direction: column; }
    .tdn-trending-thumb    { width: 100%; min-width: unset; aspect-ratio: 16/9; }
    .tdn-river-thumb       { width: 80px; min-width: 80px; height: 58px; }
    .tdn-river-headline    { font-size: .875rem; }
    .tdn-cat-lead-headline { font-size: 1.1rem; }
    .tdn-cat-sub-thumb     { width: 70px; min-width: 70px; height: 52px; }
    .tdn-cat-sub-headline  { font-size: .82rem; }
    /* Hide excerpts in river on tiny screens to reduce clutter */
    .tdn-river-excerpt     { display: none; }
}