/* ── News page — carousel + card grid ── */
/* Note: investor marquee styles are in base.css (shared with about page) */

/* News page — cream body so no dark gaps show between sections */
.page-news {
  background: var(--cream);
}

/* ══════════════════════════════════════
   NEWS PAGE — Featured Carousel
   ══════════════════════════════════════ */

.news-featured {
  background: var(--cream);
  /* svh = visible-only viewport height. vh would push the carousel
     pager behind iPad Safari's bottom toolbar. vh fallback first
     for older browsers. */
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  /* Floor raised to 140 so iPad portrait (1024px wide, where 10vw
     resolves to ~102px) gets the same 40px gap below the nav as a
     laptop — at 120px the eyebrow felt crowded against the navbar.
     Mobile (<900px) overrides this to 80px below; that branch is
     unaffected since the mobile nav is only 56px tall. */
  padding-top: clamp(140px, 10vw, 152px);
  padding-bottom: clamp(28px, 3vw, 36px);
  box-sizing: border-box;
}

.news-featured-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  /* Horizontal padding uses max() with env() so the carousel clears
     the iPhone Dynamic Island in landscape (viewport-fit=cover);
     env() is 0 on devices without a notch. */
  padding-left: max(clamp(24px, 4vw, 72px), env(safe-area-inset-left));
  padding-right: max(clamp(24px, 4vw, 72px), env(safe-area-inset-right));
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Section eyebrow above the page title — matches the eyebrow language
   used on every other page (about, careers, contact). */
.news-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  margin: 0 0 clamp(16px, 2vw, 24px) 0;
  opacity: 0;
  transform: translateY(12px);
  animation: chFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.05s;
  will-change: transform, opacity;
}
.news-page-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--gold-dark);
  flex-shrink: 0;
}

.news-page-title {
  /* Max trimmed from 140 to 112 so on a 16" MacBook Pro the
     headline doesn't eat half the vertical room and crowd the
     carousel pager into the bottom edge. */
  font-size: clamp(64px, 7.5vw, 112px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  word-spacing: -0.06em;
  color: var(--teal);
  /* Trimmed from 52 to 36 max for the same reason — more vertical
     space for the carousel below. */
  margin-bottom: clamp(28px, 2.5vw, 36px);
  opacity: 0;
  transform: translateY(16px);
  animation: chFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.15s;
  will-change: transform, opacity;
}

.news-carousel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Stack all slides in a single grid cell instead of absolute positioning.
   The track sizes naturally to the tallest slide, so no slide can have
   its content clipped or overflow into the next at any viewport width. */
.news-carousel-track {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: grid;
  min-height: 300px;
}

.news-slide {
  grid-area: 1 / 1; /* every slide shares the same cell, like z-index layers */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Snap outgoing slides hidden, fade incoming slide in via animation —
   guarantees only one slide is rendered visible at a time, eliminating
   the mid-transition text overlap that the absolute-stacked + opacity
   transition approach produced. */
.news-slide--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  animation: newsSlideFadeIn 0.45s ease;
}

@keyframes newsSlideFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .news-slide--active { animation: none; }
}

.news-slide-img {
  border-radius: var(--radius-img);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #d5d1cc;
}

.news-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-slide-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: clamp(4px, 0.5vw, 12px);
}

.news-slide-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(120, 100, 55, 1);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

.news-slide-headline {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--teal);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}

.news-slide-excerpt {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: rgba(12, 26, 32, 0.62);
  margin-bottom: clamp(28px, 2.8vw, 40px);
  max-width: 42ch;
}

.news-slide-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal);
  text-decoration: none;
  padding: 13px 30px;
  border: 1.5px solid rgba(12, 26, 32, 0.15);
  border-radius: 5px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  align-self: flex-start;
}

.news-slide-btn:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}

.news-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Trimmed from clamp(28, 3vw, 44) to clamp(16, 2vw, 24) — the
     previous gap above the pager felt loose on laptop screens, and
     reclaiming ~20px lets .news-featured carry a larger top padding
     above the eyebrow without overflowing the 100svh hero. */
  margin-top: clamp(16px, 2vw, 24px);
}

.news-carousel-dots {
  display: flex;
  gap: 12px;
}

.news-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(12, 26, 32, 0.15);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.news-carousel-dot:hover {
  background: rgba(12, 26, 32, 0.35);
}

.news-carousel-dot--active {
  background: var(--teal);
  transform: scale(1.2);
}

/* Pause/play button */
.news-carousel-pause {
  margin-left: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(12, 26, 32, 0.2);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(12, 26, 32, 0.5);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.news-carousel-pause:hover {
  color: var(--teal);
  border-color: rgba(12, 26, 32, 0.4);
}
.news-carousel-pause svg {
  width: 12px;
  height: 12px;
}
.news-carousel-pause .carousel-icon-play {
  display: none;
}
.news-carousel-pause--paused .carousel-icon-pause {
  display: none;
}
.news-carousel-pause--paused .carousel-icon-play {
  display: block;
}

@media (max-width: 1024px) {
  .news-featured {
    height: auto;
    /* Bottom padding tightened — combined with .news-grid-section's
       reduced top padding below, the gap between the carousel and
       "More headlines" stays appropriately small on mobile. */
    padding-bottom: clamp(12px, 2.5vw, 24px);
  }
  /* Tighten the gap above "More headlines" on mobile. */
  .news-grid-section {
    padding-top: clamp(12px, 2.5vw, 24px);
  }
  .news-carousel-track {
    flex: none;
  }
  /* Stack the carousel slide at <=1024 so any tablet-portrait viewport
     (including iPad Pro 11" at 834px) gets the single-column layout —
     the 1fr 1fr grid was too cramped below ~1024. */
  .news-slide {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .news-slide-img {
    aspect-ratio: 16 / 9;
  }
  .news-slide-text {
    padding-top: 0;
  }
  .news-slide-headline {
    font-size: clamp(20px, 5vw, 28px);
  }
  .news-slide-excerpt {
    font-size: 13px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-slide-eyebrow {
    margin-bottom: 10px;
  }
  .news-slide-btn {
    padding: 10px 22px;
    font-size: 12px;
  }
  .news-page-title {
    font-size: clamp(36px, 9vw, 60px);
    margin-bottom: clamp(20px, 3vw, 32px);
  }
  .news-carousel-nav {
    margin-top: clamp(20px, 3vw, 32px);
  }
}

/* ── Mobile-only: tighter top padding ──
   Below 900px the navbar shrinks to 56px (base.css). Pair it with
   an 80px section padding-top to keep the eyebrow + title cluster
   visually anchored near the top without the dead zone the
   desktop's 120-140px padding would create. iPad portrait (1024px
   wide) stays on desktop nav + desktop padding so it doesn't
   collide with the taller navbar. */
@media (max-width: 900px) {
  .news-featured {
    padding-top: 80px;
  }
}

@media (max-width: 480px) {
  .news-slide-excerpt {
    -webkit-line-clamp: 2;
  }
}


/* ══════════════════════════════
   NEWS CARD GRID
   ══════════════════════════════ */

.news-grid-section {
  padding: clamp(96px, 11vw, 128px) 0;
  background: var(--cream);
}

.news-grid-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  /* Match .news-featured-inner above — same horizontal padding formula so
     the carousel and the card grid sit on identical left/right margins at
     every viewport. Previously used var(--edge-pad), which scales up at
     1440px+ and made the grid narrower than the hero on laptop screens. */
  padding: 0 clamp(24px, 4vw, 72px);
}

/* Section eyebrow above the "All articles" headline — same pattern as
   .news-page-eyebrow above; the news page now follows the eyebrow +
   headline cadence used on every other page. */
.news-grid-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  margin: 0 0 clamp(14px, 1.6vw, 20px) 0;
}
.news-grid-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--gold-dark);
  flex-shrink: 0;
}

.news-grid-headline {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: #102027;
  letter-spacing: -0.025em;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.news-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(28px, 3.5vw, 48px);
  row-gap: clamp(56px, 7vw, 80px);
  align-items: start;
}

/* ── Editorial tile — borderless, image-anchored ── */
.news-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.news-card-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: #d0cbc3;
  margin-bottom: 18px;
}

.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Hide broken external images gracefully */
.news-card-img img.img-broken,
.news-slide-img img.img-broken {
  visibility: hidden;
}

.news-card:hover .news-card-img img {
  transform: scale(1.04);
}

.news-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.news-card-pub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark, #6b5a36);
  margin-bottom: 9px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 23, 6, 0.1);
}

.news-card-headline {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 700;
  color: #1a1706;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.news-card:hover .news-card-headline {
  color: var(--gold, #b7965d);
}

.news-card-excerpt {
  font-size: clamp(12px, 0.85vw, 14px);
  color: rgba(26, 23, 6, 0.61);
  line-height: 1.72;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .news-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .news-cards {
    grid-template-columns: 1fr;
    row-gap: clamp(44px, 9vw, 64px);
  }
}

/* ── News grid: large & ultra-wide scaling ──
   Padding overrides removed so the grid keeps tracking the hero's
   clamp(24px, 4vw, 72px) padding at every viewport. Only max-width
   scales up at these breakpoints. */
@media (min-width: 1920px) {
  .news-grid-inner {
    max-width: 1680px;
  }
  .news-featured-inner {
    max-width: 1680px;
  }
}

@media (min-width: 2400px) {
  .news-grid-inner {
    max-width: 2100px;
  }
  .news-featured-inner {
    max-width: 2100px;
  }
  .news-cards {
    column-gap: 60px;
    row-gap: 80px;
  }
}