/* ============================================================
   TTCC — FEATURED
   "Looking Beyond The Obvious" panel and its card row.
   index.html only.
   ============================================================ */

/* ============================================================
   FEATURED
   A dark panel inset by the shared gutter, with a four-up card
   row built by JS from the FEATURED array.
   ============================================================ */
/* Mirrors .hero-slider-wrap exactly — same gutter at every width, no
   full-bleed override — so the panel's edges land on the slider's.
   40px of white space below the hero before this section starts. */
.featured-wrap {
  margin-top: 40px;
  padding: 0 var(--gutter);
}

.featured {
  max-width: 2000px;            /* matches the slider's cap */
  margin: 0 auto;
  padding: 56px 56px 72px;
  background: #d0e8c0;
}

/* ----- Alt block -----
   Same shell as FEATURED above, but dark: the #1a1a1a the card panel
   already uses elsewhere on the site, so the type flips to white and the
   quote can sit straight on the ground with no panel of its own. */
.featured--alt {
  background: #1a1a1a;
}

.featured--alt .featured__title,
.featured--alt .featured__intro {
  color: #ffffff;
}

/* ----- Quote (alt block only) -----
   A 35% empty column, then the text, ending at the content edge. */
.featured-quote {
  display: grid;
  grid-template-columns: 35% 1fr;
  margin: 0;
  padding: 140px 0;
}

.featured-quote__text,
.featured-quote__by {
  grid-column: 2;
  margin: 0;
  color: #ffffff;
}

/* Close to .featured__title, a step down from it. */
.featured-quote__text {
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.featured-quote__by {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* Fills the empty left column: centred across it, and spanning both rows
   so it centres against the quote and its attribution together. No ratio
   is imposed — the illustration keeps its own proportions and is shown
   whole, capped at 220px wide. */
.featured-quote__visual {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}

.featured__title {
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #000000;
}

.featured__intro {
  margin-top: 40px;
  max-width: 1080px;
  font-size: 17px;
  line-height: 1.5;
  color: #000000;
}

/* Paragraphs after the first sit closer than the title gap. */
.featured__intro + .featured__intro {
  margin-top: 24px;
}

/* ----- Card row ----- */
.featured__panel {
  margin-top: 72px;
  background: #1a1a1a;
  padding: 22px;
  border-radius: 6px;
}

.featured__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 22px;
  row-gap: 12px;
  align-items: start;         /* cards top-align; captions may end at different heights */
}

/* Clips the media's hover scale */
.f-card__media-wrap {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #2a2a2a;          /* shows through until the image lands */
  border-radius: 0;
}

.f-card__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.f-card:hover .f-card__media {
  transform: scale(1.03);
}

/* Text sits left-aligned (the default) and inside the panel's own 22px
   padding — .featured__grid is a direct child of .featured__panel, so
   nothing here needs its own inset. */
.f-card__title {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.f-card__desc {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
}

/* Quote goes full width — no empty left column. */
@media (max-width: 900px) {
  .featured-quote {
    grid-template-columns: 1fr;
    padding: 80px 0;
  }

  .featured-quote__text,
  .featured-quote__by {
    grid-column: 1;
  }

  /* No empty column left to sit in. */
  .featured-quote__visual {
    display: none;
  }
}

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

@media (max-width: 700px) {
  .featured {
    padding: 32px;
  }

  .featured__title {
    font-size: clamp(26px, 7vw, 40px);
  }

  .featured__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .f-card__media {
    transition: none !important;
  }

  .f-card:hover .f-card__media {
    transform: none;
  }
}