/* desktop */

/* ══════════════════════════════════════
   NAVIGATION SECTION
   ══════════════════════════════════════ */

/* wrapper — stacks all 3 bars */
.nav-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* ── 1. ANNOUNCEMENT BAR ── */
.ann-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  background: #0A0A0B;
}

.ann-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  padding: 0 80px;
}

.ann-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.ann-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  height: 21px;
  background: #DC2626;
  border: 0.5px solid #7F1D1D;
  box-shadow: inset 0px 1px 6px rgba(255, 200, 200, 0.25);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 0px 2px 8px rgba(91, 11, 11, 0.33);
  white-space: nowrap;
}

.ann-text-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.ann-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.ann-sep {
  width: 3px;
  height: 3px;
  background: #737373;
  border-radius: 50%;
  flex-shrink: 0;
}

.ann-time {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #737373;
}

.ann-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  flex-shrink: 0;
}
.ann-close svg { width: 14px; height: 14px; }

/* ── 2. MAIN NAV BAR ── */
.nav-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 92px;
  background: #1A1A1C;
}

.nav-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1440px;
  padding: 0 80px;
}

/* Mining.com.au logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.nav-logo-icon { width: 150px; height: 35px; flex-shrink: 0; object-fit: contain; }
.nav-logo-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.nav-logo-mining {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 1px;
}
.nav-logo-domain {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
}

/* Nav links */
.nav-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 52px;
  flex: 1;
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 20px;
  gap: 10px;
  height: 52px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.nav-tab:hover { border-bottom-color: rgba(3,191,181,0.3); }
.nav-tab.active { border-bottom-color: #03BFB5; }

.nav-tab-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  height: 20px;
}

.nav-tab-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.82);
}
.nav-tab.active .nav-tab-label { color: #03BFB5; }

.nav-tab-chevron { width: 16px; height: 16px; flex-shrink: 0; }

/* Right side: search + sign in */
.nav-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-search-btn svg { width: 24px; height: 24px; }

.nav-signin-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  gap: 6px;
  height: 44px;
  background: #007E77;
  box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.18), inset 0px -2px 0px rgba(0,0,0,0.05);
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  white-space: nowrap;
}
.nav-signin-btn:hover { background: #006a64; }

/* Hamburger — hidden at desktop, shown at mid via media query */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger svg { width: 32px; height: 32px; }

/* ── 3. TICKER BAR ── */
.ticker-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 0;
  width: 100%;
  height: 52px;
  background: #0E0E10;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.ticker-scroll {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  overflow-x: scroll;
  scrollbar-width: none;
  padding: 4px 0;
}
.ticker-scroll::-webkit-scrollbar { display: none; }

.ticker-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: max-content;
}

/* Each ticker group: label + sparkline + badge */
.ticker-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 21px;
  padding: 0 12px;
  height: 25px;
  flex-shrink: 0;
}

.ticker-symbol {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #FFFFFF;
  white-space: nowrap;
}

.ticker-chart-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.ticker-sparkline {
  width: 39.5px;
  height: 12px;
  flex-shrink: 0;
}

.ticker-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}
.ticker-badge.up   { background: #16221E; color: #35B57F; }
.ticker-badge.down { background: #29181A; color: #FF7263; }

/* Divider between ticker items */
.ticker-sep {
  width: 1px;
  height: 18px;
  background: #323234;
  flex-shrink: 0;
}

/* Left/right fade gradients */
.ticker-fade {
  position: absolute;
  top: 0;
  height: 100%;
  width: 210px;
  pointer-events: none;
  z-index: 2;
}
.ticker-fade-left  { left: 0;  background: linear-gradient(90deg, #0E0E10 0%, rgba(14,14,16,0) 100%); }
.ticker-fade-right { right: 0; background: linear-gradient(270deg, #0E0E10 0%, rgba(14,14,16,0) 100%); }

/* ── NEWSWIRE CAROUSEL ── */

.newswire {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #FAFAFA;
}

.nw-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  height: 118px;
  padding: 16px 80px;
}

/* MDF GLOBAL logo */
.nw-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 171px;
  height: 34px;
  flex-shrink: 0;
}

.nw-logo-icon {
  width: 139px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.nw-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.nw-logo-mdf {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #151313;
  letter-spacing: 0.5px;
}
.nw-logo-global {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #151313;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Scroll wrapper — contains track + fades + arrows */
.nw-scroll-wrap {
  position: relative;
  flex: 1;
  height: 86px;
  overflow: hidden;
}

/* Scrollable track */
.nw-track-outer {
  width: 100%;
  height: 86px;
  overflow-x: scroll;
  scrollbar-width: none;
  padding: 0 40px;
}
.nw-track-outer::-webkit-scrollbar { display: none; }

.nw-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  height: 86px;
  width: max-content;
}

/* Individual card */
.nw-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 8px;
  gap: 8px;
  width: 200px;
  min-width: 200px;
  height: 86px;
  cursor: pointer;
  flex-shrink: 0;
}
.nw-card:hover { background: #F0F0F0; border-radius: 4px; }

.nw-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 184px;
  height: 70px;
}

/* Title area — normal card: plain 2-line title */
.nw-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
  width: 184px;
  height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Title area — exclusive card: badge inline with first line */
.nw-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 184px;
  height: 40px;
  gap: 0;
}
.nw-title-line1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 184px;
  height: 20px;
}
.nw-exclusive-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5px 4px;
  background: #EF4444;
  border: 1px solid #EF4444;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #FFFFFF;
  white-space: nowrap;
  flex-shrink: 0;
}
.nw-title-inline {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nw-title-line2 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
  width: 184px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Date & Category row */
.nw-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 184px;
  height: 22px;
}

/* Category: teal text only, no background */
.nw-cat {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #007E77;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Separator dot */
.nw-dot {
  width: 2px;
  height: 2px;
  background: #A3A3A3;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Date */
.nw-date {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #717680;
}

/* Fade gradients */
.nw-fade {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.nw-fade-left {
  left: 0;
  width: 60px;
  background: linear-gradient(90deg, #FAFAFA 0%, rgba(250,250,250,0) 100%);
}
.nw-fade-right {
  right: 0;
  width: 120px;
  background: linear-gradient(270deg, #FAFAFA 0%, rgba(250,250,250,0) 100%);
}

/* Arrow buttons — overlaid, vertically centred */
.nw-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}

.nw-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background: #FAFAFA;
  cursor: pointer;
  pointer-events: all;
  flex-shrink: 0;
}
.nw-arrow-prev { border: 1px solid #E5E5E5; }
.nw-arrow-next { border: 1px solid #A3A3A3; }

.nw-arrow svg {
  width: 14px;
  height: 14px;
}

/* ── PAGE WRAPPER ── */
.hero {
  display: flex;
  justify-content: center;
  width: 100%;
  background: var(--white);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 1440px;
  min-height: 1035px;
  padding: 32px 80px 80px;
}

/* ── TOP HEADER BLOCK ── */
.header-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* ── TAGLINE ── */
.tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--black);
  display: flex;
  align-items: center;
}

/* ── FILTER NAV ── */
.filter-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.filter-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: max-content;
}

/* icon chip */
.chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  width: 32px;
  height: 32px;
  background: var(--chip-bg);
  border-radius: 8px;
  flex-shrink: 0;
  cursor: pointer;
}
.chip-icon svg { width: 20px; height: 20px; }

/* text chip */
.chip {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 16px;
  gap: 8px;
  height: 32px;
  background: var(--chip-bg);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: var(--text-chip);
  transition: background 0.15s, color 0.15s;
}
.chip:hover { background: #e0e0e0; }
.chip.active {
  background: var(--teal);
  color: var(--white);
}

/* "More" chip with chevron */
.chip-more {
  padding: 6px 12px 6px 16px;
  gap: 4px;
}
.chip-more .chevron { width: 16px; height: 16px; flex-shrink: 0; }

/* ── MAIN CONTENT GRID ── */
.main-grid {
  display: grid;
  grid-template-columns: 300px 1fr 180px 300px;
  column-gap: 12px;
  row-gap: 24px;
  width: 100%;
  align-items: start;
}

/* ── SECTION HEADER ── */
.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 6px 0;
  border-bottom: 3px solid var(--border);
  width: 100%;
  gap: 4px;
}

.section-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.section-square {
  width: 16px;
  height: 16px;
  background: var(--teal);
  flex-shrink: 0;
}

.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
}

/* ── BADGES ── */
.badge-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  gap: 4px;
  height: 22px;
  background: var(--black);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--white);
  flex-shrink: 0;
}

.badge-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  gap: 4px;
  height: 22px;
  background: var(--red-badge);
  border: 1px solid var(--red-badge);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--white);
  flex-shrink: 0;
}
.badge-live .live-dot {
  width: 6px;
  height: 6px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(91,11,11,0.25);
  flex-shrink: 0;
}

.view-all {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--teal);
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
}
.view-all svg { width: 20px; height: 20px; }

/* ── CATEGORY BADGE ── */
.cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  height: 22px;
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--white);
  flex-shrink: 0;
}

/* meta row: badge • time  — two color variants */
.meta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* separator dot */
.meta-dot {
  width: 2px;
  height: 2px;
  background: var(--dot-sep);   /* hero cards */
  border-radius: 50%;
  flex-shrink: 0;
}
.meta-dot.muted { background: var(--dot-muted); }  /* bottom cards */

.meta-time {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-body);  /* hero cards */
}
.meta-time.muted { color: var(--text-muted); }     /* bottom cards */

/* ── MOST READ (left column) ── */
.col-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
}

.most-read-list {
  list-style: none;
  width: 100%;
  position: relative;
}

.most-read-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
  min-height: 64px;
  cursor: pointer;
}

.most-read-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--teal);
  min-width: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.most-read-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-body);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* fade gradient — shared by Most Read and Latest News */
.most-read-fade,
.latest-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 73.73%);
  pointer-events: none;
  z-index: 2;
}

.most-read-footer,
.latest-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  position: relative;
  z-index: 3;
}

/* ── FEATURED ARTICLE (center-left) ── */
.featured-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  isolation: isolate;
}

.featured-img {
  width: 100%;
  aspect-ratio: 440 / 274;
  overflow: hidden;
  border-radius: 4px;
}

.featured-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--black);
}

.featured-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-body);
}

/* ── SIDE ARTICLES (center-right) ── */
.side-articles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}

.side-card-img {
  width: 100%;
  aspect-ratio: 180 / 141;
  overflow: hidden;
  border-radius: 4px;
}

.side-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.side-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── SIDE ARTICLES: hide 3rd card at desktop (shown at mid via media query) ── */
.side-card:nth-child(3) { display: none; }

/* ── GRID TEXT WIDTH CAP: 85% of parent column ── */
.featured-title,
.featured-desc,
.side-card-title {
  max-width: 85%;
}

/* ── LATEST NEWS (right column) ── */
.col-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.latest-list {
  list-style: none;
  width: 100%;
  padding-left: 16px; /* room for timeline */
}

.latest-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 12px 0;
  gap: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
  min-height: 64px;
  position: relative;
  isolation: isolate;
  cursor: pointer;
}

/* timeline: vertical line + dot */
.latest-timeline {
  position: absolute;
  left: -16px;
  top: 0;
  width: 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.tl-line-top {
  width: 2px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}
.tl-line-top.first { background: transparent; }

.tl-dot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-radius: 7px;
  flex-shrink: 0;
  padding: 3px;
}
.tl-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
}
.tl-line-bottom {
  width: 2px;
  flex: 1;
  background: var(--border);
}

.latest-time {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-time);
  min-width: 32px;
  width: 32px;
  flex-shrink: 0;
}
.latest-time.recent { color: var(--red); }

.latest-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-body);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── BOTTOM ROW ── */
.bottom-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.bottom-cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.bottom-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.bottom-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── NEWS CARD (More Stories / Videos / Podcasts) ── */
/* Figma: 158×89 thumbnail + text, row layout */
.news-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

/* 16:9 thumbnail wrapper */
.thumb-169 {
  width: 158px;
  height: 89px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-card);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── VIDEO THUMB OVERLAY ── */
/* Play button: 32×32 circle, semi-transparent + white border */
.play-btn-circle {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.3);
  border: 1.6px solid #FFFFFF;
  border-radius: 100px;
  backdrop-filter: blur(1.76px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-btn-circle svg {
  width: 12.8px;
  height: 12.8px;
  position: relative;
  left: 1px; /* optical center for play icon */
}

/* Duration badge — bottom-left */
.video-duration {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1px);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.03em;
  color: #F1F1F1;
}

/* ── PODCAST THUMB ── */
/* Teal top border + headphone icon top-right */
.thumb-podcast {
  border-top: 4px solid var(--teal);
}

.podcast-headphone {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: var(--teal);
  border-radius: 0 0 0 4px; /* only bottom-left radius */
  display: flex;
  align-items: center;
  justify-content: center;
}
.podcast-headphone svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ── AD BOX ── */
.ad-box {
  width: 300px;
  flex-shrink: 0;
}

.ad-inner {
  width: 100%;
  min-height: 343px;
  background: linear-gradient(326deg, #052424 33.34%, #0C3737 101.33%);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.ad-inner img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.6;
}

.ad-label-box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.ad-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #FFFFFF;
  mix-blend-mode: overlay;
}

/* ══════════════════════════════════════
   NEWSLETTER SECTION
   ══════════════════════════════════════ */
.newsletter-section {
  order: 10; /* desktop: pushed to end of hero-inner flex column */
  display: flex;
  flex-direction: row;          /* desktop: text left, form right */
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  background: linear-gradient(326deg, #052424 33.34%, #0C3737 101.33%);
  padding: 40px 80px;
  border-radius: 4px;
  overflow: hidden;
}

.newsletter-section .newsletter-copy { flex: 1; }

.newsletter-section .newsletter-form {
  flex: 0 0 320px;
}

.newsletter-copy { display: flex; flex-direction: column; gap: 8px; }

.newsletter-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: #FFFFFF;
  text-transform: uppercase;
}

.newsletter-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.65);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.newsletter-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
}
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.newsletter-input:focus { border-color: rgba(255, 255, 255, 0.45); }

.newsletter-btn {
  width: 100%;
  padding: 14px;
  background: var(--teal);
  border: none;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.newsletter-btn:hover { background: #006a64; }