/* ================================================================
   HERO SLIDER  (Phase 2)
   ================================================================ */
.hero-slider {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: var(--deep-navy);
}

/* Slides — stacked, fade in/out */
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}
.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* ----------------------------------------------------------------
   Main panel (70%)
   ---------------------------------------------------------------- */
.hero-main {
    flex: 0 0 70%;
    position: relative;
    overflow: hidden;
}

.hero-img {
    position: absolute;
    inset: 0;
}
.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(7,26,45,0.97) 0%,
        rgba(7,26,45,0.65) 38%,
        rgba(7,26,45,0.18) 68%,
        transparent 100%
    );
    pointer-events: none;
}

.hero-content {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    padding: 1.75rem 2rem;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--deep-navy);
    background: var(--gold);
    padding: 0.15rem 0.55rem;
    border-radius: 2px;
    margin-bottom: 0.65rem;
}

.hero-title {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    max-width: 580px;
}
.hero-title a {
    color: var(--white);
    text-decoration: none;
    transition: opacity .15s;
}
.hero-title a:hover { opacity: .85; }

.hero-excerpt {
    font-size: 0.85rem;
    color: rgba(255,255,255,.72);
    line-height: 1.55;
    max-width: 520px;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: rgba(255,255,255,.45);
}
.meta-sep { opacity: .4; }

/* ----------------------------------------------------------------
   Side panel (30%)
   ---------------------------------------------------------------- */
.hero-side {
    flex: 0 0 30%;
    background: var(--deep-navy);
    display: flex;
    flex-direction: column;
    border-inline-start: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
}

.side-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    text-decoration: none;
    transition: background .15s;
    min-height: 0;
}
.side-item:last-child { border-bottom: none; }
.side-item:hover { background: rgba(255,255,255,.04); }

.side-img {
    flex-shrink: 0;
    width: 74px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--radius);
}
.side-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.side-body {
    flex: 1;
    min-width: 0;
}

.side-badge {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.3rem;
}

.side-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,.82);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------------
   Arrows
   ---------------------------------------------------------------- */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3,17,31,0.72);
    color: rgba(255,255,255,.75);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    transition: background .15s, color .15s, border-color .15s;
}
.hero-arrow:hover {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}
/* Position arrows within the main 70% panel */
.hero-prev { left: 0.85rem; }
.hero-next { left: calc(70% - 3rem); }

/* ----------------------------------------------------------------
   Dots
   ---------------------------------------------------------------- */
.hero-dots {
    position: absolute;
    bottom: 1rem;
    left: 35%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    z-index: 10;
}
.hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.3);
    transition: background .2s, width .25s;
    padding: 0;
}
.hero-dot.is-active {
    background: var(--gold);
    width: 20px;
}

/* ----------------------------------------------------------------
   Hero Responsive
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-slider  { height: 340px; }
    .hero-title   { font-size: 1.3rem; max-width: 100%; }
    .hero-excerpt { font-size: 0.8rem; }
    .hero-content { padding: 1.4rem 1.6rem; }
    .side-img     { width: 62px; height: 48px; }
    .side-title   { font-size: 0.74rem; }
    .hero-next    { left: calc(70% - 2.8rem); }
}

@media (max-width: 768px) {
    .hero-slider  { height: 280px; }
    .hero-side    { display: none; }
    .hero-main    { flex: 0 0 100%; }
    .hero-title   { font-size: 1.15rem; }
    .hero-excerpt { font-size: 0.82rem; -webkit-line-clamp: 2; }
    .hero-content { padding: 1.1rem 1.25rem; }
    .hero-prev    { left: 0.6rem; }
    .hero-next    { left: auto; right: 0.6rem; }
    .hero-dots    { left: 50%; transform: translateX(-50%); }
    .hero-arrow   { width: 30px; height: 30px; }
}

@media (max-width: 480px) {
    .hero-slider  { height: 240px; }
    .hero-title   { font-size: 1rem; }
    .hero-excerpt { display: none; }
    .hero-content { padding: 0.85rem 1rem; }
    .hero-badge   { font-size: 0.6rem; }
    .hero-meta    { font-size: 0.68rem; }
    .hero-kicker  { font-size: 0.65rem; }
}

/* ================================================================
   EDITORIAL GRID  (Phase 3)
   ================================================================ */

/* ── Section shell ── */
.eg-section {
    padding: 2rem 0;
    border-top: 1px solid var(--border);
}

/* ── Section header ── */
.eg-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.eg-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    padding-inline-start: 0.6rem;
    border-inline-start: 3px solid var(--gold);
}
.eg-more {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.eg-more:hover { color: var(--navy); }

/* ── Shared card ── */
.eg-card { display: flex; flex-direction: column; }

.eg-card-img {
    display: block;
    overflow: hidden;
    background: #e8e5e0;
    flex-shrink: 0;
    position: relative;
}
.eg-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.eg-card:hover .eg-card-img img { transform: scale(1.04); }

/* Semantic size modifiers — replaces inline style="height:Xpx" */
.eg-card-img--featured { height: 280px; }
.eg-card-img--grid     { height: 120px; }
.eg-card-img--row      { aspect-ratio: 16/9; height: auto; }

.eg-card-body {
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.eg-cat {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.3rem;
}
.eg-card-title {
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.eg-card-title a { color: inherit; text-decoration: none; }
.eg-card-title a:hover { color: var(--navy); }

/* Title size variants */
.eg-title-lg { font-size: 1.2rem; -webkit-line-clamp: 4; }
.eg-title-md { font-size: 0.88rem; -webkit-line-clamp: 3; }
.eg-title-sm { font-size: 0.8rem;  -webkit-line-clamp: 3; }

.eg-card-excerpt {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.eg-card-date {
    font-size: 0.66rem;
    color: var(--muted);
    display: block;
    margin-top: auto;
    padding-top: 0.3rem;
}

/* ── Featured card override (large) ── */
.eg-feature-body,
.eg-feature-lg .eg-card-body {
    border-top: 2px solid var(--gold);
    padding-top: 0.75rem;
}

/* ── Section 1: Financial Markets 60/40 ── */
.eg-fm-layout {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 1.5rem;
    align-items: start;
}
.eg-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.eg-grid-2x2 .eg-card-body { border-top-width: 1px; }

/* ── Section 2: Banking row of 4 ── */
.eg-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* ── Section 3: Macro Economy 58/42 ── */
.eg-macro-layout {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 1.5rem;
    align-items: start;
}
.eg-stack-2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Horizontal card (image + text side by side) */
.eg-card-horiz {
    flex-direction: row;
    gap: 0.75rem;
    align-items: flex-start;
}
.eg-thumb {
    width: 96px !important;
    height: 72px !important;
    flex-shrink: 0;
}
.eg-card-horiz .eg-card-body {
    border-top: none;
    padding-top: 0;
}

/* ── Section 4: FinTech 3 equal cols ── */
.eg-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .eg-fm-layout      { grid-template-columns: 1fr 1fr; }
    .eg-title-lg       { font-size: 1.05rem; }
    .eg-row-4          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .eg-section        { padding: 1.5rem 0; }
    .eg-fm-layout      { grid-template-columns: 1fr; }
    .eg-grid-2x2       { grid-template-columns: repeat(2, 1fr); }
    .eg-macro-layout   { grid-template-columns: 1fr; }
    .eg-card-horiz     { flex-direction: column; }
    .eg-thumb          { width: 100% !important; height: 140px !important; }
    .eg-card-horiz .eg-card-body { border-top: 1px solid var(--border); padding-top: 0.6rem; }
    .eg-row-3          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .eg-row-4          { grid-template-columns: 1fr; }
    .eg-grid-2x2       { grid-template-columns: 1fr; }
    .eg-row-3          { grid-template-columns: 1fr; }
}

/* ================================================================
   PHASE 4 — VISUAL POWER UPGRADE
   ================================================================ */

/* ── 1. Featured image: taller + dark-bottom overlay ── */
.eg-card-img { position: relative; }

.eg-feature    .eg-card-img { height: 320px !important; }
.eg-feature-lg .eg-card-img { height: 300px !important; }

.eg-feature    .eg-card-img::after,
.eg-feature-lg .eg-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,26,45,.22) 0%, transparent 55%);
    pointer-events: none;
}

/* Stronger gold accent on featured body */
.eg-feature-body,
.eg-feature-lg .eg-card-body {
    border-top-width: 3px;
    padding-top: 0.85rem;
}

/* ── 2. Section background distinction ── */
.editorial-grid > .eg-section:nth-child(2) { background: #faf9f6; } /* Banking  */
.editorial-grid > .eg-section:nth-child(3) { background: #f5f5f4; } /* Macro    */
.editorial-grid > .eg-section:nth-child(4) { background: #f0f4f8; } /* FinTech  */

/* Cards in tinted sections pop with white bg */
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-4 .eg-card,
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-3 .eg-card {
    background: var(--white);
}
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-4 .eg-card-body,
.editorial-grid > .eg-section:nth-child(n+2) .eg-row-3 .eg-card-body {
    padding: 0.55rem 0.65rem 0.7rem;
    border-top: 1px solid var(--border);
}
.editorial-grid > .eg-section:nth-child(3) .eg-card-horiz {
    background: var(--white);
    padding: 0.55rem;
    border-radius: 2px;
}
.editorial-grid > .eg-section:nth-child(3) .eg-card-horiz .eg-card-body {
    border-top: none;
    padding-top: 0;
}

/* ── 3. Hover interactions ── */
.eg-card                 { transition: transform .15s, box-shadow .2s; }
.eg-card:hover .eg-card-img img { transform: scale(1.05); }
.eg-card:hover .eg-card-title a { color: var(--navy); }

.eg-row-4    .eg-card:hover,
.eg-row-3    .eg-card:hover,
.eg-grid-2x2 .eg-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0,0,0,0.09);
}
.eg-feature:hover,
.eg-feature-lg:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}

/* ── 4. Typography upgrade ── */
.eg-title-lg {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.025em;
    -webkit-line-clamp: 4;
}
.eg-title-md {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}
.eg-title-sm {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.32;
}
.eg-cat      { font-size: 0.58rem; letter-spacing: .12em; }
.eg-card-date { font-size: 0.62rem; color: rgba(107,114,128,.58); }

/* ── 5. Subtle default shadow on grid/row cards ── */
.eg-row-4    .eg-card,
.eg-row-3    .eg-card,
.eg-grid-2x2 .eg-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── 6. Consistent aspect ratios (overrides inline height) ── */
.eg-grid-2x2 .eg-card-img { aspect-ratio: 4 / 3;  height: auto !important; }
.eg-row-4    .eg-card-img { aspect-ratio: 16 / 9; height: auto !important; }
.eg-row-3    .eg-card-img { aspect-ratio: 16 / 9; height: auto !important; }

/* ── 7. Tighter density ── */
.eg-section      { padding: 1.75rem 0; }
.eg-section-hd   { margin-bottom: 1rem; }
.eg-fm-layout    { gap: 1.25rem; }
.eg-macro-layout { gap: 1.25rem; }
.eg-grid-2x2     { gap: 0.85rem; }
.eg-row-4        { gap: 0.85rem; }
.eg-row-3        { gap: 1rem; }
.eg-stack-2      { gap: 0.85rem; }
.eg-card-body    { padding-top: 0.5rem; }

/* ── Phase 4 responsive adjustments ── */
@media (max-width: 1024px) {
    .eg-feature    .eg-card-img { height: 240px !important; }
    .eg-feature-lg .eg-card-img { height: 220px !important; }
    .eg-title-lg { font-size: 1.1rem; }
}
@media (max-width: 768px) {
    .eg-feature    .eg-card-img { height: 200px !important; }
    .eg-feature-lg .eg-card-img { height: 190px !important; }
    .eg-grid-2x2 .eg-card-img { aspect-ratio: 16 / 9; }
    .eg-row-4 .eg-card:hover,
    .eg-row-3 .eg-card:hover { transform: none; }
}

/* ================================================================
   PHASE 5 — AUTHORITY LAYER
   ================================================================ */

/* ── BREAKING BAR ─────────────────────────────────────────────── */
.breaking-bar {
    display: flex;
    align-items: stretch;
    height: 34px;
    overflow: hidden;
    background: var(--red);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

.brk-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    background: rgba(0,0,0,.22);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: rgba(255,255,255,.95);
    text-transform: uppercase;
    white-space: nowrap;
    border-inline-end: 1px solid rgba(255,255,255,.15);
}

.brk-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.brk-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    direction: ltr;
    animation: brk-scroll 40s linear infinite;
}
.brk-wrap:hover .brk-track { animation-play-state: paused; }

.brk-item {
    font-size: 0.76rem;
    font-weight: 500;
    color: rgba(255,255,255,.92);
    padding: 0 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
a.brk-item:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.brk-sep {
    font-size: 0.4rem;
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
}

@keyframes brk-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── TOP STORIES — Editorial Digest ───────────────────────────── */
.top-stories {
    padding: 1.75rem 0;
    border-top: 1px solid var(--border);
    background: var(--white);
}

/* 3-column digest grid */
.ts-digest {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 0;
}

.ts-col {
    padding: 0 1.25rem;
    border-inline-end: 1px solid var(--border);
}
.ts-col:first-child { padding-inline-start: 0; }
.ts-col:last-child  { border-inline-end: none; padding-inline-end: 0; }

.ts-col--center { padding: 0 1.5rem; }

/* Compact text row */
.ts-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.ts-row:last-child { border-bottom: none; }

.ts-cat { margin-bottom: 0.25rem; }

.ts-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.3rem;
}
.ts-title a { color: inherit; text-decoration: none; }
.ts-title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Center featured card */
.ts-featured {
    margin-bottom: 0.5rem;
}

.ts-feat-img {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 0.6rem;
    aspect-ratio: 16 / 9;
}

.ts-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ts-feat-img:hover img { transform: scale(1.03); }

.ts-feat-body {}

.ts-feat-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.3rem 0;
}
.ts-feat-title a { color: inherit; text-decoration: none; }
.ts-feat-title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

.ts-row--center-sub {
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding: 0.65rem 0;
}

/* ── MOST READ ────────────────────────────────────────────────── */
.most-read {
    background: var(--off-white);
    border-top: 2px solid var(--navy);
    border-bottom: 1px solid var(--border);
    padding: 1.75rem 0;
    margin-top: 0;
}

.mr-hd {
    display: flex;
    align-items: center;
    padding-bottom: 0.6rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.mr-hd-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    padding-inline-start: 0.6rem;
    border-inline-start: 3px solid var(--gold);
}

.mr-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.mr-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0 1.25rem;
    border-inline-end: 1px solid var(--border);
}
.mr-item:first-child { padding-inline-start: 0; }
.mr-item:last-child  { border-inline-end: none; padding-inline-end: 0; }

.mr-num {
    font-family: 'Inter', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--navy);
    opacity: .12;
    flex-shrink: 0;
    letter-spacing: -.04em;
    margin-top: .05rem;
}

.mr-body { flex: 1; min-width: 0; }

.mr-title {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.25rem;
}
.mr-title a { color: inherit; text-decoration: none; }
.mr-title a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* ── Phase 5 Responsive ── */
@media (max-width: 1024px) {
    .mr-list { grid-template-columns: repeat(3, 1fr); }
    .mr-item:nth-child(3) { border-inline-end: none; padding-inline-end: 0; }
    .mr-item:nth-child(4) { padding-inline-start: 0; }
}

@media (max-width: 992px) {
    .ts-digest { grid-template-columns: 1fr 1.3fr; }
    .ts-col--side:last-child { display: none; }
}

@media (max-width: 768px) {
    .brk-label { padding: 0 0.65rem; font-size: 0.55rem; }
    .brk-item  { font-size: 0.72rem; padding: 0 0.75rem; }

    .ts-digest { grid-template-columns: 1fr; }
    .ts-col--side:last-child { display: block; }
    .ts-col  { padding: 0; border-inline-end: none; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem; }
    .ts-col:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    .ts-col--center { padding: 0; }

    .mr-list { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .mr-item  { padding: 0; border-inline-end: none; }
    .mr-num   { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .mr-list { grid-template-columns: 1fr; }
}

/* ================================================================
   PHASE 6 — HERO DOMINATION
   ================================================================ */

/* ── 1. Full bleed 70vh ── */
.hero-slider {
    height: 70vh;
    min-height: 460px;
    max-height: 700px;
}

/* ── 2. Image: transition for hover zoom ── */
.hero-img img {
    transition: transform 0.9s ease;
}
.hero-slider:hover .hero-slide.is-active .hero-img img {
    transform: scale(1.03);
}

/* ── 3. Dual gradient overlay: dark top + heavy bottom ── */
.hero-overlay {
    background:
        linear-gradient(to bottom, rgba(3,17,31,.62) 0%, transparent 30%),
        linear-gradient(to top, rgba(3,17,31,.98) 0%, rgba(3,17,31,.68) 28%, rgba(3,17,31,.18) 65%, transparent 100%);
    transition: opacity .4s;
}
.hero-slider:hover .hero-slide.is-active .hero-overlay {
    opacity: .9;
}

/* ── 4. Badge: absolute top-inline-start of image ── */
.hero-badge {
    position: absolute;
    top: 1.35rem;
    inset-inline-start: 1.75rem;
    z-index: 3;
    margin-bottom: 0;
    font-size: 0.62rem;
    letter-spacing: .1em;
    padding: 0.2rem 0.6rem;
}

/* ── 5. Content: bottom padding only (badge no longer in flow) ── */
.hero-content {
    padding: 0 2rem 2.25rem;
}

/* ── 6. Title domination ── */
.hero-title {
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -.03em;
    -webkit-line-clamp: 2;
    max-width: 620px;
    margin-bottom: 0.65rem;
}
.hero-title a {
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-title a:hover { opacity: .9; }

/* ── 7. Excerpt: softer, 2-line clamp ── */
.hero-excerpt {
    font-size: 0.88rem;
    color: rgba(255,255,255,.72);
    -webkit-line-clamp: 2;
    max-width: 510px;
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

/* ── 8. Meta: subtler ── */
.hero-meta {
    font-size: 0.7rem;
    color: rgba(255,255,255,.45);
    gap: 0.35rem;
}

/* ── 9. Side panel: vertical list upgrade ── */
.hero-side {
    border-inline-start: 1px solid rgba(255,255,255,.08);
}
.side-item {
    padding: 0.95rem 1.1rem;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .18s;
}
.side-item:hover { background: rgba(255,255,255,.05); }

.side-img {
    width: 82px;
    height: 60px;
    border-radius: 2px;
    flex-shrink: 0;
}
.side-img img { border-radius: 2px; }

.side-badge { font-size: 0.59rem; letter-spacing: .1em; margin-bottom: 0.28rem; }

.side-title {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.38;
    -webkit-line-clamp: 3;
    color: rgba(255,255,255,.86);
}

/* ── 10. Arrows: minimal ghost style ── */
.hero-arrow {
    width: 32px;
    height: 32px;
    background: rgba(3,17,31,.5);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}
.hero-arrow:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}
.hero-prev { left: 1rem; }
.hero-next { left: calc(70% - 3.2rem); }

/* ── 11. Dots: refined pill style ── */
.hero-dots { gap: 0.35rem; bottom: 1.25rem; }

.hero-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transition: background .25s, width .3s, border-radius .3s;
}
.hero-dot.is-active {
    width: 22px;
    height: 5px;
    border-radius: 2px;
    background: var(--gold);
}

/* ── Phase 6 Responsive ── */
@media (max-width: 1024px) {
    .hero-slider  { height: 58vh; min-height: 380px; }
    .hero-title   { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
    .hero-content { padding: 0 1.5rem 1.75rem; }
    .hero-badge   { top: 1rem; inset-inline-start: 1.25rem; }
    .hero-next    { left: calc(70% - 2.9rem); }
}

@media (max-width: 768px) {
    .hero-slider  { height: 50vh; min-height: 280px; max-height: 380px; }
    .hero-title   { font-size: 1.2rem; letter-spacing: -.015em; }
    .hero-excerpt { display: none; }
    .hero-badge   { top: 0.75rem; inset-inline-start: 1rem; }
    .hero-content { padding: 0 1rem 1.25rem; }
    .hero-prev    { left: 0.6rem; }
    .hero-next    { left: auto; right: 0.6rem; }
    .hero-dots    { left: 50%; bottom: 0.85rem; }
}

/* ══════════════════════════════════════════════════════
   PHASE 7 — HERO EDITORIAL DOMINANCE
   ══════════════════════════════════════════════════════ */

/* ── Kicker line ── */
.hero-kicker {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    border-inline-start: 2px solid var(--gold);
    padding-inline-start: 0.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.95;
}

/* ── Primary slide (index 0): full editorial weight ── */
.hero-slide[data-index="0"].is-active .hero-title {
    font-size: clamp(2.1rem, 3.8vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.hero-slide[data-index="0"].is-active .hero-kicker {
    color: var(--gold);
    border-color: var(--gold);
}

.hero-slide[data-index="0"].is-active .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(3,17,31,0.92) 0%,
        rgba(3,17,31,0.55) 45%,
        rgba(3,17,31,0.18) 72%,
        transparent 100%
    );
}

/* ── Secondary slides (index 1–4): subdued ── */
.hero-slide:not([data-index="0"]) .hero-excerpt {
    display: none;
}

.hero-slide:not([data-index="0"]).is-active .hero-title {
    font-size: clamp(1.75rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-slide:not([data-index="0"]) .hero-kicker {
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.35);
}

/* ── Side panel: tighter, sharper ── */
.hero-side .side-item {
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
}

.hero-side .side-item:hover {
    background: rgba(201,162,74,.12);
}

.hero-side .side-title {
    font-size: 0.78rem;
    line-height: 1.35;
}

.hero-side .side-badge {
    font-size: 0.58rem;
    letter-spacing: .08em;
    margin-bottom: 0.2rem;
}

/* ── Phase 7 Responsive ── */
@media (max-width: 768px) {
    .hero-kicker { font-size: 0.6rem; margin-bottom: 0.35rem; }
}

/* ══════════════════════════════════════════════════════
   PHASE 8 — HERO VISUAL IMPACT
   ══════════════════════════════════════════════════════ */

/* ── 1. Depth / float shadow under entire hero ── */
.hero-slider {
    box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.25);
}

/* ── 2. Vignette: radial darkness at image edges ── */
.hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 38% 48%, transparent 32%, rgba(3,17,31,.55) 100%);
    pointer-events: none;
}

/* ── 3. Stronger overlay gradient (replaces Phase 6 dual) ── */
.hero-overlay {
    background:
        linear-gradient(to bottom, rgba(3,17,31,.78) 0%, transparent 24%),
        linear-gradient(to top,
            rgba(3,17,31,1.0)  0%,
            rgba(3,17,31,.84) 24%,
            rgba(3,17,31,.32) 54%,
            transparent       100%
        );
}

/* ── 4. Headline shock — primary slide ── */
.hero-slide[data-index="0"].is-active .hero-title {
    font-size: clamp(2.5rem, 4.4vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.09;
}

/* ── 5. Deep text shadow / glow on all hero titles ── */
.hero-title a {
    text-shadow:
        0 2px 18px rgba(0,0,0,.78),
        0 1px 4px  rgba(0,0,0,.60),
        0 6px 44px rgba(0,0,0,.32);
}

/* ── 6. Hover: zoom 1.05 + darker overlay (override Phase 6 .9) ── */
.hero-slider:hover .hero-slide.is-active .hero-img img {
    transform: scale(1.05);
}
.hero-slider:hover .hero-slide.is-active .hero-overlay {
    opacity: 1;
    background:
        linear-gradient(to bottom, rgba(3,17,31,.86) 0%, transparent 24%),
        linear-gradient(to top,
            rgba(3,17,31,1.0)  0%,
            rgba(3,17,31,.94) 24%,
            rgba(3,17,31,.50) 54%,
            rgba(3,17,31,.12) 100%
        );
}

/* ── 7. Side panel — dark glass separation ── */
.hero-side {
    background: rgba(3,17,31,.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-inline-start: 1px solid rgba(255,255,255,.07);
}

/* ── 8. Reduce noise: hide meta on secondary slides ── */
.hero-slide:not([data-index="0"]) .hero-meta {
    display: none;
}

/* ── 9. Kicker glow on primary slide ── */
.hero-slide[data-index="0"].is-active .hero-kicker {
    text-shadow: 0 0 20px rgba(201,162,74,.45);
    letter-spacing: .15em;
}

/* ── Phase 8 Responsive ── */
@media (max-width: 1024px) {
    .hero-slide[data-index="0"].is-active .hero-title {
        font-size: clamp(1.9rem, 3.5vw, 2.4rem);
    }
}
@media (max-width: 768px) {
    .hero-side {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ══════════════════════════════════════════════════════
   PHASE 9 — POST-HERO POWER FLOW
   ══════════════════════════════════════════════════════ */

/* ── 1. Section headers — stronger, authority ── */
.eg-section-hd {
    padding-bottom: 0.75rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid rgba(201,162,74,.28);
}
.mr-hd {
    padding-bottom: 0.75rem;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid rgba(201,162,74,.28);
}
.eg-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--deep-navy);
    border-inline-start-width: 4px;
    padding-inline-start: 0.7rem;
}
.mr-hd-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--deep-navy);
    border-inline-start-width: 4px;
    padding-inline-start: 0.7rem;
}

/* ── 2. Top Stories — clarity + rhythm ── */
.ts-col {
    border-inline-end-color: rgba(7,26,45,.1);
}
.ts-title a:hover {
    color: var(--gold);
    text-decoration: none;
}

/* ── 3. Editorial grid — taller features, better rhythm ── */
.eg-feature    .eg-card-img { height: 360px !important; }
.eg-feature-lg .eg-card-img { height: 340px !important; }

.eg-section      { padding: 2.1rem 0; }
.eg-fm-layout    { gap: 1.4rem; }
.eg-macro-layout { gap: 1.4rem; }
.eg-grid-2x2     { gap: 1.1rem; }
.eg-row-4        { gap: 1.1rem; }
.eg-row-3        { gap: 1.15rem; }
.eg-card-body    { padding-top: 0.65rem; }

/* Card lift: stronger hover elevation */
.eg-row-4    .eg-card:hover,
.eg-row-3    .eg-card:hover,
.eg-grid-2x2 .eg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0,0,0,.11);
}

/* Title hover: gold accent */
.eg-card-title a:hover { color: var(--gold); }

/* Card base: consistent radius + shadow */
.eg-row-4    .eg-card,
.eg-row-3    .eg-card,
.eg-grid-2x2 .eg-card {
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 2px 7px rgba(0,0,0,.07);
}

/* ── 4. Most Read — contrast + impact ── */
.most-read {
    border-top: 3px solid var(--gold);
    padding: 2.1rem 0;
}
.mr-num {
    color: var(--gold);
    opacity: .22;
    font-size: 2.2rem;
}
.mr-title {
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.mr-title a:hover { color: var(--gold); }
.mr-item { gap: 0.85rem; }

/* ── 5. Section background rhythm ── */
.editorial-grid > .eg-section:nth-child(1) { background: var(--white); }
.editorial-grid > .eg-section:nth-child(2) { background: #f9f8f5; }
.editorial-grid > .eg-section:nth-child(3) { background: #f4f4f2; }
.editorial-grid > .eg-section:nth-child(4) { background: #eef3f8; }

/* ── Phase 9 Responsive ── */
@media (max-width: 1024px) {
    .eg-feature    .eg-card-img { height: 270px !important; }
    .eg-feature-lg .eg-card-img { height: 250px !important; }
    .top-stories { padding: 1.75rem 0; }
    .most-read   { padding: 1.75rem 0; }
}
@media (max-width: 768px) {
    .eg-feature    .eg-card-img { height: 220px !important; }
    .eg-feature-lg .eg-card-img { height: 205px !important; }
    .top-stories { padding: 1.25rem 0; }
    .most-read   { padding: 1.25rem 0; }
    .mr-num      { font-size: 1.6rem; }
}

/* ── Phase 14: hero compact on desktop ── */
.hero-slider {
    height: 55vh;
    min-height: 400px;
    max-height: 560px;
}

/* ── Phase 14: tighter vertical rhythm ── */
.editorial-grid > .eg-section { padding: 1.75rem 0; }
.top-stories { padding: 1.75rem 0; }
.most-read   { padding: 1.75rem 0; }

/* ── Phase 14 responsive: hero ── */
@media (max-width: 1024px) {
    .hero-slider { height: 50vh; min-height: 360px; max-height: 480px; }
}
@media (max-width: 768px) {
    .hero-slider { height: 44vh; min-height: 260px; max-height: 360px; }
}

/* ════════════════════════════════════════════════════════
   PHASE 22B + 22D — Homepage Newsletter + Density polish
   ════════════════════════════════════════════════════════ */

/* ── Newsletter section ── */
.hp-newsletter {
    background: var(--deep-navy);
    padding: 3rem 0;
    border-top: 1px solid rgba(201,162,74,.12);
    border-bottom: 1px solid rgba(201,162,74,.12);
}
.hp-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.hp-newsletter-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(201,162,74,.35);
    padding: 0.2rem 0.65rem;
    border-radius: 2px;
    margin-bottom: 0.75rem;
}
.hp-newsletter-title {
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.22;
    margin: 0 0 0.6rem;
    letter-spacing: -.02em;
}
.hp-newsletter-sub {
    font-size: 0.88rem;
    color: rgba(255,255,255,.55);
    margin: 0;
    line-height: 1.6;
    max-width: 420px;
}
.hp-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hp-newsletter-input-row {
    display: flex;
    gap: 0.55rem;
}
.hp-newsletter-input {
    flex: 1;
    padding: 0.75rem 1.1rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--white);
    font-size: 0.9rem;
    border-radius: 3px;
    outline: none;
    transition: border-color .18s;
    font-family: inherit;
}
.hp-newsletter-input::placeholder { color: rgba(255,255,255,.3); }
.hp-newsletter-input:focus { border-color: rgba(201,162,74,.5); background: rgba(255,255,255,.1); }
.hp-newsletter-btn {
    padding: 0.75rem 1.6rem;
    background: var(--gold);
    color: var(--deep-navy);
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .18s, transform .15s;
    letter-spacing: .02em;
}
.hp-newsletter-btn:hover { opacity: .9; transform: translateY(-1px); }
.hp-newsletter-note {
    font-size: 0.7rem;
    color: rgba(255,255,255,.3);
}
.hp-newsletter-note a { color: rgba(201,162,74,.6); text-decoration: none; }
.hp-newsletter-note a:hover { color: var(--gold); }
.hp-newsletter-perks {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.hp-newsletter-perk {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,.5);
}
.hp-newsletter-perk svg { color: var(--gold); flex-shrink: 0; }
@media (max-width: 768px) {
    .hp-newsletter-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .hp-newsletter-input-row { flex-direction: column; }
    .hp-newsletter-btn { width: 100%; text-align: center; }
}

/* ── Category section density: tighter headings ── */
.eg-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(201,162,74,.2);
    gap: 1rem;
}
.eg-section-title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--deep-navy);
    padding-inline-start: 0.65rem;
    border-inline-start: 4px solid var(--gold);
    line-height: 1.2;
}
.eg-section-more {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .15s;
}
.eg-section-more:hover { opacity: 1; }

/* ── Homepage density: tighter section gaps ── */
.media-section { padding: 2rem 0; }
.media-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(201,162,74,.2);
}
.media-section-title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--deep-navy);
    padding-inline-start: 0.65rem;
    border-inline-start: 4px solid var(--gold);
}
.media-section-more {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s;
}
.media-section-more:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   PHASE 23 — FINAL VISUAL DOMINANCE
   Bloomberg / FT elite newsroom feel
   ════════════════════════════════════════════════════════════════ */

/* ── 1. HERO: taller, bigger typography, Ken Burns zoom ── */
.hero-slider {
    height: 520px !important;
    min-height: 460px !important;
    max-height: 600px !important;
}

@keyframes heroKenBurns {
    from { transform: scale(1);    }
    to   { transform: scale(1.07); }
}
.hero-slide.is-active .hero-img img {
    animation: heroKenBurns 9s ease-out forwards;
}

/* Hero title: bigger, tighter, heavier */
.hero-title {
    font-size: clamp(1.65rem, 2.8vw, 2.3rem) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.028em !important;
    margin-bottom: 0.7rem !important;
    max-width: 640px !important;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.55rem;
}
.hero-kicker::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--gold);
}
.hero-excerpt {
    font-size: 0.88rem !important;
    -webkit-line-clamp: 3 !important;
    max-width: 580px !important;
    color: rgba(255,255,255,.75) !important;
}
/* Deeper overlay — text always readable */
.hero-overlay {
    background: linear-gradient(
        to top,
        rgba(3,17,31,.98) 0%,
        rgba(3,17,31,.72) 35%,
        rgba(3,17,31,.22) 65%,
        transparent 100%
    ) !important;
}
.hero-content { padding: 2rem 2.25rem !important; }

/* Side panel upgrade */
.side-item {
    padding: 0.75rem 1rem !important;
}
.side-img {
    width: 78px !important;
    height: 58px !important;
}
.side-title {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* Hero responsive */
@media (max-width: 1024px) {
    .hero-slider { height: 400px !important; min-height: 360px !important; }
}
@media (max-width: 768px) {
    .hero-slider { height: 300px !important; min-height: 260px !important; }
    .hero-title  { font-size: 1.3rem !important; }
}

/* ── 2. GLOBAL SECTION SPACING: 25% tighter ── */
.eg-section         { padding: 1.5rem 0 !important; }
.top-stories        { padding: 1.35rem 0 !important; }
.most-read          { padding: 1.35rem 0 !important; }
.editorial-grid > .eg-section { padding: 1.5rem 0 !important; }
.hp-newsletter      { padding: 2.25rem 0 !important; }
.media-section      { padding: 1.5rem 0 !important; }

/* ── 3. NEWS GRID: denser cards, tighter gaps ── */
.eg-row-4  { gap: 0 !important; }
.eg-row-3  { gap: 0 !important; }
.eg-grid-2x2 { gap: 0 !important; }
.eg-fm-layout  { gap: 1.25rem !important; }
.eg-macro-layout { gap: 1.25rem !important; }

/* Cards in row-4 and row-3: add right separator */
.eg-row-4 .eg-card,
.eg-row-3 .eg-card {
    padding-inline-end: 0.9rem;
    padding-inline-start: 0.9rem;
    border-inline-end: 1px solid var(--border);
}
.eg-row-4 .eg-card:first-child,
.eg-row-3 .eg-card:first-child { padding-inline-start: 0; }
.eg-row-4 .eg-card:last-child,
.eg-row-3 .eg-card:last-child  { border-inline-end: none; padding-inline-end: 0; }

/* Card body: tighter padding */
.eg-card-body {
    padding-top: 0.5rem !important;
}

/* Card title: tighter line-height */
.eg-card-title {
    line-height: 1.28 !important;
    margin-bottom: 0.25rem !important;
}
.eg-title-lg { font-size: 1.22rem !important; font-weight: 800 !important; }
.eg-title-md { font-size: 0.9rem  !important; font-weight: 700 !important; }
.eg-title-sm { font-size: 0.82rem !important; font-weight: 700 !important; }

/* Category label: crisper */
.eg-cat {
    font-size: 0.58rem !important;
    letter-spacing: .1em !important;
    font-weight: 800 !important;
    margin-bottom: 0.22rem !important;
}

/* Card excerpt: 1-line only on small cards */
.eg-row-4 .eg-card-excerpt { display: none !important; }
.eg-row-3 .eg-card-excerpt { -webkit-line-clamp: 1 !important; }

/* Date meta */
.eg-card-date {
    font-size: 0.64rem !important;
    padding-top: 0.2rem !important;
    opacity: .65;
}

/* Section header: cleaner, bolder */
.eg-section-hd {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.85rem !important;
    border-bottom: 2px solid var(--border) !important;
}
.eg-section-title {
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    border-inline-start: 4px solid var(--gold) !important;
}
.eg-more {
    font-size: 0.68rem !important;
    text-decoration: none !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    opacity: .8;
    transition: opacity .15s;
}
.eg-more:hover { opacity: 1 !important; color: var(--gold) !important; }

/* Featured card image: taller on desktop */
.eg-feature    .eg-card-img { height: 340px !important; }
.eg-feature-lg .eg-card-img { height: 320px !important; }
@media (max-width: 1024px) {
    .eg-feature    .eg-card-img { height: 240px !important; }
    .eg-feature-lg .eg-card-img { height: 220px !important; }
}

/* Section backgrounds: more contrast */
.editorial-grid > .eg-section:nth-child(2) { background: #f8f7f3 !important; }
.editorial-grid > .eg-section:nth-child(3) { background: #f2f4f7 !important; }
.editorial-grid > .eg-section:nth-child(4) { background: #f0f4f8 !important; }

/* ── 4. TOP-STORIES ticker: denser ── */
.ts-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ts-item {
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid var(--border);
}
.ts-item:last-child { border-bottom: none; }

/* ── 5. MOST-READ: tighter spacing ── */
.mr-item  { padding: 0.55rem 0 !important; gap: 0.75rem !important; }
.mr-num   { font-size: 1.55rem !important; line-height: 1 !important; }
.mr-title { font-size: 0.85rem !important; line-height: 1.3 !important; }

/* ── 6. AD SLOTS: integrated feel ── */
.ad-wrap--leaderboard,
.ad-wrap--banner {
    margin: 0 !important;
    padding: 0.6rem 0 !important;
    background: #f8f7f3;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ad-slot { text-align: center; }
.ad-sponsored-label {
    font-size: 0.56rem !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 0.35rem;
    opacity: .6;
}

/* Homepage secondary ad between sections */
.ad-wrap--native-mid {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(201,162,74,.1);
    border-bottom: 1px solid rgba(201,162,74,.1);
    background: var(--deep-navy);
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 30 — PREMIUM POLISH + FINAL RHYTHM
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Definitive section spacing ── */
.editorial-grid > .eg-section { padding: 1.75rem 0 !important; }
.top-stories                  { padding: 1.6rem 0 !important; }
.most-read                    { padding: 1.6rem 0 !important; }
.hp-newsletter                { padding: 2.75rem 0 !important; }
.media-section                { padding: 1.75rem 0 !important; }

/* ── 2. Top Stories — stronger column separators + visual anchor ── */
.top-stories {
    border-top: 3px solid var(--navy);
    border-bottom: 1px solid var(--border);
}
.ts-col                 { border-inline-end-color: rgba(201,162,74,.2) !important; }
.ts-row                 { border-bottom-color: rgba(7,26,45,.07) !important; }
.ts-row--center-sub     { border-top-color: rgba(7,26,45,.07) !important; }

/* Category + date meta row */
.ts-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.22rem;
    flex-wrap: wrap;
}
.ts-meta-sep {
    font-size: 0.5rem;
    color: rgba(107,114,128,.4);
    line-height: 1;
    flex-shrink: 0;
}

/* ── 3. Events slider — strong top edge, bigger title ── */
.ev-slider         { border-top: 3px solid var(--navy); border-bottom: 3px solid var(--navy); }
.ev-title          { font-size: 1.9rem !important; font-weight: 900 !important; letter-spacing: -.025em !important; }
.ev-subtitle       { font-size: 0.95rem; line-height: 1.6; }

/* ── 4. Section header standardization across all types ── */
.mr-hd,
.media-section-hd,
.fv-hd,
.pod-hd {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.9rem !important;
    border-bottom: 2px solid var(--border) !important;
    gap: 1rem;
}
.mr-hd-title,
.media-section-title,
.fv-title,
.pod-hd-title {
    font-size: 0.6rem !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--deep-navy) !important;
    border-inline-start: 4px solid var(--gold) !important;
    padding-inline-start: 0.65rem !important;
    line-height: 1.2 !important;
}

/* ── 5. Card image border-radius consistency ── */
.eg-card-img { border-radius: 2px; overflow: hidden; }

/* ── 6. Most-read item padding — flush on edges ── */
.mr-item:first-child { padding-inline-start: 0 !important; }
.mr-item:last-child  { padding-inline-end: 0 !important; }

/* ── Phase 30 responsive ── */
@media (max-width: 768px) {
    .top-stories   { padding: 1.25rem 0 !important; border-top-width: 2px; }
    .most-read     { padding: 1.25rem 0 !important; }
    .editorial-grid > .eg-section { padding: 1.4rem 0 !important; }
    .ev-title      { font-size: 1.4rem !important; }
    .ev-slider     { border-top-width: 2px; border-bottom-width: 2px; }
}
@media (max-width: 480px) {
    .ev-title      { font-size: 1.15rem !important; }
    .ts-meta       { gap: 0.25rem; }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 31 — FINAL HOMEPAGE DOMINANCE
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DENSITY: 10–15% tighter than Phase 30 ── */
.editorial-grid > .eg-section { padding: 1.5rem 0 !important; }
.top-stories                  { padding: 1.4rem 0 !important; }
.most-read                    { padding: 1.4rem 0 !important; }
.hp-newsletter                { padding: 2.5rem 0 !important; }
.media-section                { padding: 1.5rem 0 !important; }
.fv-block                     { padding: 1.5rem 0 !important; }
.eg-section-hd                { margin-bottom: 0.75rem !important; padding-bottom: 0.45rem !important; }
.mr-hd                        { margin-bottom: 0.75rem !important; padding-bottom: 0.45rem !important; }
.eg-card-body                 { padding-top: 0.45rem !important; }

/* ── 2. TOP STORIES: wider center, stronger featured ── */
.ts-digest {
    grid-template-columns: 1fr 1.55fr 1fr !important;
}
.ts-feat-title {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.36 !important;
    letter-spacing: -.015em !important;
    -webkit-line-clamp: 4 !important;
}
.ts-feat-img {
    border-radius: 3px;
    overflow: hidden;
}
.ts-feat-img img {
    transition: transform .45s ease !important;
}
.ts-featured:hover .ts-feat-img img {
    transform: scale(1.03) !important;
}
.ts-featured:hover .ts-feat-img {
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
}
.ts-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
}
.ts-title a:hover { color: var(--gold) !important; text-decoration: none !important; }
.ts-row { transition: background .18s ease; }
.ts-row:hover { background: rgba(201,162,74,.025); }

/* ── 3. ADS: native integration, grid-aligned ── */
.ad-rail {
    background: #f5f4f0 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(7,26,45,.06) !important;
    padding: 0.85rem 0 !important;
}
.ad-wrap--mid-leaderboard {
    background: #f5f4f0 !important;
    border-top: 1px solid rgba(7,26,45,.05) !important;
    border-bottom: 1px solid rgba(7,26,45,.05) !important;
}
.ad-wrap--banner,
.ad-wrap--leaderboard {
    background: #f8f7f3 !important;
}

/* ── 4. SECTION HEADERS: sharper gold bar, reduced letter-spacing ── */
.eg-section-title {
    letter-spacing: .14em !important;
    border-inline-start: 4px solid var(--gold) !important;
    border-inline-start-color: var(--gold) !important;
    padding-inline-start: 0.6rem !important;
    line-height: 1.15 !important;
}
.mr-hd-title,
.media-section-title,
.fv-title,
.pod-hd-title {
    letter-spacing: .14em !important;
}

/* ── 5. MICRO INTERACTIONS ── */
.eg-card {
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.eg-card-img img {
    transition: transform .45s ease !important;
}
.eg-card:hover .eg-card-img img {
    transform: scale(1.03) !important;
}
.eg-row-4 .eg-card:hover,
.eg-row-3 .eg-card:hover,
.eg-grid-2x2 .eg-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
}
.eg-feature:hover,
.eg-feature-lg:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.08) !important;
}
/* Side items: smooth transition */
.side-item {
    transition: background .2s ease !important;
}
/* Most-read: subtle hover */
.mr-title a:hover { color: var(--gold) !important; text-decoration: none !important; }

/* ── 6. VISUAL DEPTH ── */
.top-stories {
    box-shadow: 0 2px 14px rgba(7,26,45,.04);
}
.most-read {
    box-shadow: inset 0 -2px 10px rgba(7,26,45,.03);
}
.editorial-grid > .eg-section:nth-child(2) { background: #f8f7f3 !important; }
.editorial-grid > .eg-section:nth-child(3) { background: #f2f5f8 !important; }
.editorial-grid > .eg-section:nth-child(4) { background: #edf2f7 !important; }

/* Featured card images: tall and impactful on desktop */
.eg-feature    .eg-card-img { height: 360px !important; }
.eg-feature-lg .eg-card-img { height: 340px !important; }

/* ── Phase 31 responsive ── */
@media (max-width: 992px) {
    .ts-digest { grid-template-columns: 1fr 1.45fr !important; }
}
@media (max-width: 768px) {
    .ts-digest               { grid-template-columns: 1fr !important; }
    .top-stories             { padding: 1.2rem 0 !important; }
    .most-read               { padding: 1.2rem 0 !important; }
    .editorial-grid > .eg-section { padding: 1.25rem 0 !important; }
    .eg-feature    .eg-card-img   { height: 220px !important; }
    .eg-feature-lg .eg-card-img   { height: 205px !important; }
    .ts-feat-title           { font-size: 0.98rem !important; }
    .eg-row-4 .eg-card:hover,
    .eg-row-3 .eg-card:hover { transform: none !important; }
}
@media (max-width: 480px) {
    .eg-feature    .eg-card-img { height: 185px !important; }
    .eg-feature-lg .eg-card-img { height: 175px !important; }
}