/* Homepage three-pillar component.
 *
 * The three brand entry points (Experiences, Track Days, Motorsport)
 * render on index.html as both:
 *   - A mobile carousel: .carousel-wrapper.pillar-carousel
 *   - A desktop expand-on-click card stack: .cards.pillar-cards
 *
 * These styles build on top of the existing .card / .carousel-item /
 * .media-banner / .photo-layer / .text-layer rules in style.css and
 * cards.css. Per-pillar accent colors are toggled by adding a class
 * (.pillar-experiences / .pillar-trackdays / .pillar-motorsport) which
 * sets --accent-color via cards.css.
 */

/* ── Desktop card stack ─────────────────────────────────────────── */

/* Bigger pillar name in the collapsed (title-only) state. Default
   .title-only h2 in cards.css is sized for event cards (~1.5rem);
   pillars want to read at brand-name scale. */
.pillar-cards .title-only h2 {
  margin: 0;
  letter-spacing: -0.025em;
}
.pillar-cards .details h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
/* Squeeze the expanded copy into a column so the paragraph wraps to a
   comfortable reading width instead of stretching across the whole card. */
.pillar-cards .details {
  max-width: 60%;
  margin: 0 auto;
}

/* ── Mobile carousel ────────────────────────────────────────────── */

.pillar-carousel .text-layer h2 {
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
/* Dark gradient overlay so the kicker, headline, paragraph, and button
   stay readable over any photo or video. */
.pillar-carousel .text-layer {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.70) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* ── Background video per pillar ────────────────────────────────────
   The still <img> in each photo-layer is the always-visible default.
   The video sits on top at opacity 0 and only fades in when the pillar
   becomes .active. js/pillar-videos.js handles lazy-loading the source
   and play/pause based on active state + section in viewport. */
.pillar-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  display: block;
}
.card.active .pillar-video,
.carousel-item.active .pillar-video {
  opacity: 1;
}

/* ── Shared kicker (small uppercase eyebrow above the pillar name) ── */

.pillar-kicker {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1rem;
}