/* ── News page — carousel, card grid, article list ── */
/* 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 list overrides for light background */
.page-news .news-headline {
  color: var(--teal);
}
.page-news .news-arrow {
  color: var(--gold-dark);
}
.page-news .news-date {
  color: var(--gold-dark);
}



/* ══════════════════════════════════
   NEWS — Article list
   ══════════════════════════════════ */
.news {
  background: var(--cream);
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px) 0;
}
.news-featured + .news {
  padding-top: 0;
}
.news-inner {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--edge-pad);
}
.news-headline {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.025em;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-item {
  border-top: 1px solid rgba(16, 32, 39, 0.12);
}
.news-item:last-child {
  border-bottom: 1px solid rgba(16, 32, 39, 0.12);
}
.news-link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: clamp(20px, 2.5vw, 28px) 0;
  text-decoration: none;
  transition: padding-left 0.2s ease;
}
.news-link:hover {
  padding-left: 6px;
}
.news-arrow {
  font-size: 18px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.news-link:hover .news-arrow {
  transform: translateX(4px);
}
.news-body {
  flex: 1;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
  color: #3a3a3a;
}
.news-pub {
  font-weight: 700;
  color: var(--nav-bg);
}
.news-dash {
  color: var(--nav-bg);
  font-weight: 400;
}
.news-title {
  font-weight: 400;
  color: #3a3a3a;
}
.news-date {
  font-size: clamp(12px, 1vw, 14px);
  color: var(--gold);
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .news-link { gap: 14px; }
  .news-date { display: none; }
}

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

.news-featured {
  background: var(--cream);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(110px, 10vw, 140px);
  padding-bottom: clamp(32px, 4vw, 48px);
  box-sizing: border-box;
}

.news-featured-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.news-page-title {
  font-size: clamp(64px, 9vw, 140px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  word-spacing: -0.06em;
  color: var(--teal);
  margin-bottom: clamp(32px, 3.5vw, 52px);
  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: 8px;
  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;
  gap: 6px;
  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;
  margin-top: clamp(28px, 3vw, 44px);
}

.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: 768px) {
  .news-featured {
    height: auto;
    padding-bottom: clamp(48px, 6vw, 72px);
  }
  .news-carousel-track {
    flex: none;
    /* No fixed height — the grid lets the track size to the tallest
       slide. Fixed heights here used to clip text + push the eyebrow
       up under the image at certain mobile widths. */
  }
  .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(40px, 10vw, 72px);
    margin-bottom: clamp(28px, 4vw, 40px);
  }
  .news-carousel-nav {
    margin-top: clamp(20px, 3vw, 32px);
  }
}

@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;
  padding: 0 var(--edge-pad);
}

.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: 8px;
  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 ── */
@media (min-width: 1920px) {
  .news-grid-inner {
    max-width: 1680px;
    padding: 0 80px;
  }
  .news-featured-inner {
    max-width: 1680px;
  }
}

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