/* ─────────────────────────────────────────────────────────
   The Alcove — brand design system
   Colours: #53645D (forest green) · #EEE9DD (warm cream)
   Type: Spectral (logo/display) · Helvetica Neue (body)
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root {
  --spectral: 'Spectral', 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===== LIGHT (primary) ===== */
.alcove {
  --bg:        #EEE9DD;
  --bg-elev:   #E6E0D2;
  --bg-subtle: #E9E4D7;
  --green:     #53645D;
  --green-mid: rgba(83, 100, 93, 0.60);
  --green-dim: rgba(83, 100, 93, 0.35);
  --green-ghost: rgba(83, 100, 93, 0.10);
  --ink:       #1c2320;
  --ink-2:     rgba(28, 35, 32, 0.68);
  --ink-3:     rgba(28, 35, 32, 0.42);
  --ink-4:     rgba(28, 35, 32, 0.22);
  --line:      rgba(83, 100, 93, 0.15);
  --accent:    #53645D;
  --accent-fg: #EEE9DD;
  --yellow:    #FFD013;
  --yellow-dim: rgba(255, 208, 19, 0.18);
  /* glass */
  --glass-bg:      rgba(238, 233, 221, 0.55);
  --glass-shadow:  inset 0 1px 1px rgba(255,255,255,0.55);
  --glass-grad-a:  rgba(255, 255, 255, 0.6);
  --glass-grad-b:  rgba(255, 255, 255, 0.2);
  background: var(--bg);
  color: var(--ink);
}

/* ===== DARK ===== */
.alcove[data-theme="dark"] {
  --bg:        #2a3330;
  --bg-elev:   #222926;
  --bg-subtle: #303d39;
  --green:     #8aab9f;
  --green-mid: rgba(138, 171, 159, 0.55);
  --green-dim: rgba(138, 171, 159, 0.28);
  --green-ghost: rgba(138, 171, 159, 0.10);
  --ink:       #EEE9DD;
  --ink-2:     rgba(238, 233, 221, 0.72);
  --ink-3:     rgba(238, 233, 221, 0.45);
  --ink-4:     rgba(238, 233, 221, 0.22);
  --line:      rgba(238, 233, 221, 0.10);
  --accent:    #8aab9f;
  --accent-fg: #2a3330;
  --yellow:    #FFD013;
  --yellow-dim: rgba(255, 208, 19, 0.14);
  --glass-bg:      rgba(42, 51, 48, 0.55);
  --glass-shadow:  inset 0 1px 1px rgba(255,255,255,0.08);
  --glass-grad-a:  rgba(255, 255, 255, 0.18);
  --glass-grad-b:  rgba(255, 255, 255, 0.06);
}

/* ===== Density ===== */
.alcove[data-density="compact"] {
  --section-y:     72px;
  --card-pad:      20px;
  --hero-y:        40px;
  --hero-h1:       76px;
  --hero-h1-lh:    0.92;
  --gap:           12px;
}
.alcove[data-density="regular"] {
  --section-y:     112px;
  --card-pad:      28px;
  --hero-y:        60px;
  --hero-h1:       96px;
  --hero-h1-lh:    0.92;
  --gap:           18px;
}
.alcove[data-density="spacious"] {
  --section-y:     160px;
  --card-pad:      40px;
  --hero-y:        88px;
  --hero-h1:       116px;
  --hero-h1-lh:    0.90;
  --gap:           28px;
}

/* ===== Reset & base ===== */
.alcove,
.alcove * { box-sizing: border-box; }
.alcove {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.alcove a { color: inherit; text-decoration: none; }
.alcove button, .alcove input { font-family: inherit; }
.alcove :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alcove button:focus, .alcove input:focus { outline: none; }

/* ===== Liquid glass ===== */
.lg {
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.lg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    165deg,
    var(--glass-grad-a) 0%,
    var(--glass-grad-b) 25%,
    transparent 50%,
    var(--glass-grad-b) 80%,
    var(--glass-grad-a) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ===== Type ===== */
.spectral     { font-family: var(--spectral); font-weight: 400; }
.spectral-i   { font-family: var(--spectral); font-style: italic; font-weight: 400; }
.spectral-l   { font-family: var(--spectral); font-weight: 300; }
.spectral-li  { font-family: var(--spectral); font-style: italic; font-weight: 300; }

.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  font-family: var(--sans);
}
.rule { height: 1px; background: var(--line); width: 100%; flex-shrink: 0; }

/* ===== Logo ===== */
.logo-text {
  font-family: var(--spectral);
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 21px;
  color: var(--ink);
  line-height: 1;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  border: none;
  transition: transform 0.14s ease, opacity 0.14s ease, background 0.14s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--green);
  color: var(--accent-fg);
}
.btn-primary:hover { opacity: 0.9; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--green-ghost); }

/* ===== Layout ===== */
.wrap        { max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.wrap-narrow { max-width: 900px;  margin: 0 auto; padding: 0 48px; }

/* ===== Artboard shell ===== */
.alcove-artboard {
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.alcove-artboard::-webkit-scrollbar { width: 5px; }
.alcove-artboard::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.alcove-artboard::-webkit-scrollbar-track { background: transparent; }

/* ===== Photo helpers ===== */
.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ═══════════════════════════════════════════════════════════
   Motion — entrance cascade + hover micro-interactions
   All entrance motion is gated on .is-loaded and disabled under
   prefers-reduced-motion so print / PDF / a11y see final state.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .alcove.js-reveal .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.8s cubic-bezier(0.22, 0.7, 0.3, 1),
      transform 0.8s cubic-bezier(0.22, 0.7, 0.3, 1);
    transition-delay: var(--d, 0s);
  }
  .alcove.js-reveal .reveal.in { opacity: 1; transform: none; }

  /* Hero photo: one-time slow settle (no infinite loop) */
  .alcove .hero-photo {
    transform: scale(1.12);
    transition: transform 2.4s cubic-bezier(0.22, 0.7, 0.3, 1);
  }
  .alcove.is-loaded .hero-photo { transform: scale(1.02); }
}

/* Nav links — animated underline */
.alcove .nav-link { position: relative; transition: color 0.2s ease; }
.alcove .nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 1px; background: currentColor;
  transition: right 0.32s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.alcove .nav-link:hover { color: #EEE9DD; }
.alcove .nav-link:hover::after { right: 0; }

/* Option rows — slide + tint on hover */
.alcove .svc-row {
  transition: background 0.28s ease, padding-left 0.28s cubic-bezier(0.22,0.7,0.3,1);
}
.alcove .svc-row:hover { background: var(--green-ghost); padding-left: 16px; }
.alcove .svc-icon { transition: transform 0.3s cubic-bezier(0.22,0.7,0.3,1), color 0.3s ease; }
.alcove .svc-row:hover .svc-icon { transform: translateY(-3px); color: var(--green); }

/* Trainer cards — lift + image zoom */
.alcove .trainer-card { transition: transform 0.3s cubic-bezier(0.22,0.7,0.3,1); }
.alcove .trainer-card:hover { transform: translateY(-4px); }
.alcove .trainer-photo { overflow: hidden; }
.alcove .trainer-photo img { transition: transform 0.6s cubic-bezier(0.22,0.7,0.3,1); }
.alcove .trainer-card:hover .trainer-photo img { transform: scale(1.05); }

/* Pricing tiers — lift + shadow */
.alcove .tier-card {
  transition: transform 0.3s cubic-bezier(0.22,0.7,0.3,1), box-shadow 0.3s ease;
}
.alcove .tier-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(28, 35, 32, 0.12);
}

/* Generic image-zoom container */
.alcove .img-zoom { overflow: hidden; }
.alcove .img-zoom img { transition: transform 0.7s cubic-bezier(0.22,0.7,0.3,1); }
.alcove .img-zoom:hover img { transform: scale(1.04); }

/* Social icons — lift */
.alcove .soc-ico { transition: transform 0.22s ease, opacity 0.22s ease; }
.alcove .soc-ico:hover { transform: translateY(-2px); opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════
   Responsive — phones & small tablets (deploy build only)
   Collapses the multi-column desktop grids to a single column,
   scales display type down, and simplifies the nav.
   ═══════════════════════════════════════════════════════════ */

/* Tablet — drop 3-up grids to 2-up */
@media (max-width: 920px) {
  .alcove .trainers-grid,
  .alcove .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .alcove .wrap { padding: 0 32px !important; }
}

/* Phone */
@media (max-width: 680px) {
  .alcove[data-density] {
    --hero-h1: clamp(52px, 14vw, 84px);
    --hero-h1-lh: 0.96;
    --hero-y: 44px;
    --section-y: 76px;
    --gap: 18px;
  }

  .alcove .wrap { padding: 0 20px !important; }

  /* Display headings */
  .alcove h2 { font-size: clamp(34px, 9.5vw, 50px) !important; }

  /* Stack every multi-column layout */
  .alcove .about-grid,
  .alcove .about-cols,
  .alcove .trainers-grid,
  .alcove .pricing-grid,
  .alcove .contact-grid,
  .alcove .findus-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .alcove .contact-details { gap: 26px !important; }

  /* Service rows → simple stacked blocks (and no hover shift on touch) */
  .alcove .svc-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .alcove .svc-row:hover { padding-left: 0 !important; background: transparent !important; }

  /* Nav — keep just the logo + booking button on small screens */
  .alcove .nav-menu { display: none !important; }
  .alcove .nav-actions > div { display: none !important; }

  /* Footer wraps instead of overflowing */
  .alcove footer .wrap { flex-wrap: wrap !important; gap: 16px !important; }
  .alcove footer .wrap > div { flex-wrap: wrap !important; gap: 16px !important; }
}