/* ============================================================
   carousel-tiers.css
   PROGRAM page module carousel — one tier per slide, auto-advancing.
   Consolidated from cards-tiers.css + program.css and renamed for
   a clean separation:
       .tier-carousel      →  .carousel-tiers
       .tier-carousel__*   →  .carousel-tiers__*
   Pairs with carousel-tiers.js.

   LINK THIS LAST on program.html (after style.css, cards-tiers-shared.css,
   program.css) so its carousel rules win the cascade.

   Behaviour: ALWAYS one tier at a time (phone + tablet + desktop),
   with arrows + dots always visible. The three emoji cards sit
   3-across (row) on tablet/desktop and stack (column) on phones.
   Note: .tier-card__* (shared card front) stays in cards-tiers-shared.css;
   only the carousel shell was renamed here.
   ============================================================ */

/* ---- Shell ---- */
.carousel-tiers { position: relative; margin-top: var(--space-m); }
.carousel-tiers__viewport { overflow: hidden; }
.carousel-tiers__track { display: flex; transition: transform 0.4s ease; }
.carousel-tiers__slide { flex: 0 0 100%; min-width: 0; padding: 0 var(--space-xxs); }

/* a slide reuses the existing features-tier markup, sized for one column */
.carousel-tiers__slide .features-tier { height: auto; }

/* ---- Header (badge · optional photo) ---- */
.carousel-tiers__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-s);
}
.carousel-tiers__header .tier-card__photo {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  margin: 0 auto var(--space-xs);
}
.carousel-tiers__badge {
  font-family: var(--ff-accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-lila);
  font-size: var(--fs-body);
}
.carousel-tiers__name { font-family: var(--ff-heading); color: var(--color-blue); margin: 0.15rem 0 0; }

/* ---- Emoji cards inside a slide: 3-across (row) on tablet/desktop ---- */
.carousel-tiers__slide .features-tier-cards {
  flex-direction: row;
  gap: var(--space-s);
}
.carousel-tiers__slide .features-tier-cards .card { flex: 1 1 0; }

/* ---- Arrows + dots (always visible: one-tier carousel at every size) ---- */
.carousel-tiers__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(124,149,134,0.6);
  background: rgba(255,255,255,0.7);
  color: var(--color-blue);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.carousel-tiers__arrow:hover { background: #fff; border-color: var(--color-bridge); }
.carousel-tiers__arrow--prev { left: -0.5rem; }
.carousel-tiers__arrow--next { right: -0.5rem; }

.carousel-tiers__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-s); }
.carousel-tiers__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(124,149,134,0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-tiers__dot.is-active { background: var(--color-bridge); transform: scale(1.3); }

/* ---- Tablet (700–1024px): tighten the 3-across cards ---- */
@media (min-width: 700px) and (max-width: 1024px) {
  .carousel-tiers__slide .features-tier-cards { gap: var(--space-xs); }
  .carousel-tiers__slide .features-tier-cards .card { padding: var(--space-xs); }
  .carousel-tiers__slide .features-icon { font-size: 2rem; }
  .carousel-tiers__slide .features-text h3 { font-size: var(--fs-body); }
  .carousel-tiers__slide .features-text p  { font-size: var(--fs-footer-meta); }
}

/* ============ MOBILE (≤699px) — STACK + HEIGHT-COLLAPSE FIX ============ */
/* Root cause of the "thin white lines, no cards" bug:
   The slides are flex items inside the flex track. With the default
   align-items:stretch the track syncs every slide to one definite
   height; .features-tier (height:100%) then resolves against a chain
   that can bottom out at 0, and the flex:1 cards collapse to lines.
   Fix = (1) stop the track stretching slides, and (2) let the tier
   and each card size to their own content.                          */
@media (max-width: 699px) {
  .carousel-tiers__track { align-items: flex-start; }

  .carousel-tiers__slide .features-tier { height: auto; }
  .carousel-tiers__slide .features-tier-cards {
    flex-direction: column;
    flex: 0 0 auto;
  }
  .carousel-tiers__slide .features-tier-cards .card {
    flex: 0 0 auto;
    min-height: 0;
  }
}

/* ---- Reduced motion: no sliding transition ---- */
@media (prefers-reduced-motion: reduce) {
  .carousel-tiers__track { transition: none; }
}