/* ============================================================
   FRESH AIR PILATES — Home Page Styles (home.css)
   Hero: Full-bleed cinematic slideshow with Ken Burns effect
   ============================================================ */

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 400px;
  max-height: 550px;
  overflow: hidden;
  background: var(--text-dark);
}

/* ── SLIDESHOW ───────────────────────────────────────────────── */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.08);
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-slide.active img {
  transform: scale(1.0);
}

/* Gradient overlay — left dark for text readability, right fades out */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(44, 36, 32, 0.78) 0%,
      rgba(44, 36, 32, 0.45) 50%,
      rgba(44, 36, 32, 0.15) 100%
    ),
    linear-gradient(
      to top,
      rgba(44, 36, 32, 0.4) 0%,
      transparent 40%
    );
}

/* ── SLIDE INDICATORS ────────────────────────────────────────── */
.hero-indicators {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 10;
}

/* Hero pagination dots — visual is 2px tall but the BUTTON gets generous
   vertical padding so the touch target hits the WCAG 2.5.5 minimum (44x44).
   The visible bar sits inside the bigger transparent hit area. */
.hero-dot {
  width: 28px;
  height: 44px;             /* was 2px — now meets touch-target minimum */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.4s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-dot::before {
  content: '';
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
  transition: all 0.4s ease;
}
.hero-dot.active::before {
  background: white;
  width: 44px;
}

/* Progress bar inside the active dot — overlays the ::before bar */
.hero-dot.active::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 0;
  background: var(--sage-light);
  border-radius: 2px;
  animation: dotProgress 6s linear forwards;
}

.hero.is-paused .hero-dot.active::after {
  animation-play-state: paused;
}

@keyframes dotProgress {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── SLIDE NAVIGATION ARROWS ─────────────────────────────────── */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.hero-arrow:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}

.hero-arrow-prev { left: 2rem; }
.hero-arrow-next { right: 2rem; }

/* ── PLAY / PAUSE TOGGLE (WCAG 2.2.2) ────────────────────────── */
.hero-playpause {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  z-index: 10;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  width: 44px;        /* WCAG 2.5.5 minimum (was 36px) */
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  padding: 0;
}

.hero-playpause:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}

.hero-playpause:focus-visible {
  outline: 2px solid var(--sage-light);
  outline-offset: 3px;
}

.hero-playpause-icon {
  line-height: 1;
  letter-spacing: -1px;
  pointer-events: none;
}

/* ── HERO CONTENT (text overlay) ─────────────────────────────── */
.hero-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  align-items: center;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-text {
  max-width: 620px;
  padding: 2rem 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: heroFadeUp 0.8s ease 0.2s forwards;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--sage-light);
  flex-shrink: 0;
}

.hero-text h1 {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
  opacity: 0;
  animation: heroFadeUp 0.8s ease 0.4s forwards;
}

.hero-text h1 em {
  color: var(--gold-light);
  font-style: italic;
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 2.5rem;
  font-weight: 300;
  opacity: 0;
  animation: heroFadeUp 0.8s ease 0.6s forwards;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: heroFadeUp 0.8s ease 0.8s forwards;
}

.hero-actions .btn-primary {
  background: white;
  color: var(--text-dark);
}

.hero-actions .btn-primary:hover {
  background: var(--sage);
  color: white;
}

.hero-actions .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: white;
}

.hero-actions .btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: white;
}

.hero-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  max-width: fit-content;
  opacity: 0;
  animation: heroFadeUp 0.8s ease 1s forwards;
}

.hero-promo strong {
  color: var(--gold-light);
  font-weight: 600;
}

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 2rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  animation: scrollPulse 2.2s ease infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

.hero-scroll-label {
  writing-mode: vertical-rl;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  font-family: 'Jost', sans-serif;
}

/* ── OFFERINGS GRID ─────────────────────────────────────────── */
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--stone);
  margin-top: 1.5rem;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}

.offering-card {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transition: background var(--trans);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.offering-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 3px;
  background: var(--sage);
  transition: width 0.5s var(--ease);
}

.offering-card:hover { background: var(--warm-white); }
.offering-card:hover::after { width: 100%; }

.offering-img {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.offering-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.7s var(--ease);
}

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

.offering-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.offering-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.82rem;
  color: var(--sage-light);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.offering-body h3 { margin-bottom: 0.75rem; }
.offering-body p  { font-size: 0.9rem; flex: 1; }

.offering-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
  font-family: 'Jost', sans-serif;
}

/* ── MEMBERSHIP SUMMARY ─────────────────────────────────────── */
.membership-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.ms-text h2 { margin-bottom: 1rem; }
.ms-text p  { max-width: 480px; font-size: 0.92rem; }

.ms-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.ms-card {
  background: var(--sage-pale);
  border: 1px solid var(--sage-light);
  padding: 1.5rem;
  border-radius: 8px;
}

.ms-features {
  display: flex;
  flex-direction: column;
}

.ms-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(181,203,183,0.4);
  font-size: 0.88rem;
  color: var(--text-mid);
}

.ms-features li:last-child { border-bottom: none; }

.ms-check {
  color: var(--sage);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .offerings-grid { grid-template-columns: 1fr; }
  .membership-summary { grid-template-columns: 1fr; gap: 2rem; }
  .hero-arrow { display: none; }
}

@media (max-width: 768px) {
  .hero {
    min-height: 400px;
    max-height: 550px;
  }

  .hero-slide img {
    object-position: 65% center; /* Show more of right side on mobile */
  }

  .hero-text h1 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  .hero-sub {
    font-size: 0.95rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-scroll { display: none; }

  .hero-playpause {
    bottom: 1.5rem;
    right: 1rem;
  }

  .hero-indicators {
    bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-content { padding: 0 1.5rem; }
  .hero-text { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   TRUST / SOCIAL PROOF STRIP
   ══════════════════════════════════════════════════════════════ */
.trust-strip {
  background: var(--warm-white);
  border-bottom: 1px solid rgba(196, 185, 176, 0.3);
  padding: 2rem 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2.5rem;
  align-items: center;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 2rem;
}

.trust-rating {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.trust-stars {
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.trust-rating-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.3;
}

.trust-rating-meta strong {
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-dark);
}

.trust-rating-meta span {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light);
  font-family: 'Jost', sans-serif;
}

.trust-quote {
  padding: 0 1.5rem;
  border-left: 1px solid rgba(196, 185, 176, 0.4);
  border-right: 1px solid rgba(196, 185, 176, 0.4);
}

.trust-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0 0 0.4rem;
}

.trust-quote cite {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  font-style: normal;
  font-weight: 500;
}

.trust-badges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-badges li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tb-icon {
  font-size: 0.95rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .trust-rating { justify-content: center; }
  .trust-quote {
    padding: 1.25rem 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(196, 185, 176, 0.4);
    border-bottom: 1px solid rgba(196, 185, 176, 0.4);
  }
  .trust-badges {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — honour user preference
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Hero Ken Burns off */
  .hero-slide img,
  .hero-slide.active img {
    transform: none !important;
    transition: none !important;
  }
  .hero-slide { transition: opacity 0.2s linear; }

  /* Dot progress bar off */
  .hero-dot.active::after {
    animation: none !important;
    width: 100%;
  }

  /* Hero text fade-in animations off */
  .hero-eyebrow,
  .hero-text h1,
  .hero-sub,
  .hero-actions,
  .hero-promo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Scroll pulse off */
  .hero-scroll-line { animation: none !important; opacity: 0.5; transform: none !important; }

  /* Marquee off — content still visible, just stopped */
  .marquee-track { animation: none !important; }

  /* Fade-up reveals become instant */
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Offering card hover zoom off */
  .offering-card:hover .offering-img img { transform: none !important; }
}