/* ============================================================
   site.css — Lotus & Lime Yoga, page-specific layout.
   Reuses framework components; adds only what's unique to this
   site. Custom classes are prefixed .ll- to stay out of the
   shared component namespace. Every value still a token.
   ============================================================ */

/* Display face on headings + the brand wordmark. */
h1, h2, h3, .ll-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
}
.nav__brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
/* The lime leaf-dot in the wordmark — the signature, in miniature. */
.ll-mark { color: var(--brand-lime); }

/* Eyebrow tuned for this brand: pine, spaced, with a lime tick. */
.eyebrow { color: var(--color-brand); display: inline-flex; align-items: center; gap: var(--space-2); }
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--brand-lime); border-radius: var(--radius-full); }

/* ---- Breath line: the signature divider --------------------
   A single calm arc echoing the hero's ripples. Sits between
   sections as a quiet exhale. */
.ll-breath { display: block; width: 100%; height: 40px; margin: var(--space-8) 0; color: var(--brand-lime); }
.ll-breath svg { width: 100%; height: 100%; }

/* ---- Hero --------------------------------------------------
   Text left; an atmospheric SVG of concentric arcs (breath /
   Atlantic horizon / lotus) right. Stacks on mobile with the
   art behind the words. */
.ll-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, var(--brand-lime-soft) 0%, transparent 55%),
    linear-gradient(180deg, #EEF1E3 0%, var(--color-bg) 70%);
  border-bottom: 1px solid var(--color-border);
}
.ll-hero__inner {
  display: grid; gap: var(--space-12); align-items: center;
  grid-template-columns: 1.1fr 0.9fr;
  padding-block: var(--space-24) var(--space-16);
}
.ll-hero__title { font-size: clamp(2.6rem, 6vw, var(--text-4xl)); margin: var(--space-4) 0; }
.ll-hero__title em { font-style: italic; color: var(--color-brand); }
.ll-hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34rem; }
.ll-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }
.ll-hero__art { position: relative; display: grid; place-items: center; min-height: 18rem; }
.ll-hero__art svg { width: 100%; max-width: 30rem; height: auto; }
@media (max-width: 820px) {
  .ll-hero__inner { grid-template-columns: 1fr; padding-block: var(--space-16) var(--space-12); }
  .ll-hero__art { order: -1; opacity: 0.9; }
}

/* A quiet line of what's on offer — not a stat-grid cliché. */
.ll-offer { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center;
  color: var(--color-text-muted); font-size: var(--text-sm); }
.ll-offer span { display: inline-flex; align-items: center; gap: var(--space-2); }
.ll-offer .ico { color: var(--color-brand); }

/* ---- Section scaffolding ----------------------------------- */
.ll-section { padding-block: var(--space-16); }
.ll-section__head { max-width: var(--max-width-prose); margin-bottom: var(--space-12); }
.ll-section__head p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ---- Class cards ------------------------------------------- */
.ll-classes { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ll-class { display: grid; gap: var(--space-3); align-content: start; }
.ll-class__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ll-class__name { font-family: var(--font-display); font-size: var(--text-xl); }
.ll-class__body { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Weekly schedule --------------------------------------- */
.ll-schedule { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ll-schedule caption { text-align: left; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.ll-schedule th, .ll-schedule td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.ll-schedule thead th { font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs); }
.ll-schedule tbody tr:hover { background: var(--color-surface); }
.ll-schedule__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ll-schedule__day { font-weight: var(--weight-medium); }
@media (max-width: 640px) { .ll-schedule .ll-hide-sm { display: none; } }

/* ---- Teachers ---------------------------------------------- */
.ll-teachers { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ll-teacher { display: grid; gap: var(--space-3); justify-items: start; }
.ll-teacher__avatar {
  width: 4.5rem; height: 4.5rem; border-radius: var(--radius-full); display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-brand);
  background: radial-gradient(120% 120% at 30% 20%, var(--brand-lime-soft), var(--color-surface-2));
  border: 1px solid var(--color-border);
}
.ll-teacher__name { font-family: var(--font-display); font-size: var(--text-lg); }
.ll-teacher__role { color: var(--color-brand); font-size: var(--text-sm); }
.ll-teacher__bio { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Retreat band: the dark, warm moment ------------------- */
.ll-retreat { background: var(--color-brand); color: #F4F6EC; border-radius: var(--radius-lg); overflow: hidden; }
.ll-retreat__inner { display: grid; gap: var(--space-12); grid-template-columns: 1.3fr 1fr; align-items: center;
  padding: var(--space-16); }
.ll-retreat h2 { color: #FBFCF4; }
.ll-retreat p { color: #D7E0CE; }
.ll-retreat .eyebrow { color: var(--brand-lime); }
.ll-retreat .eyebrow::before { background: var(--brand-lime); }
.ll-retreat__card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-4); }
.ll-retreat__price { font-family: var(--font-display); font-size: var(--text-3xl); color: #FBFCF4; }
.ll-retreat__meta { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: #D7E0CE; }
.ll-retreat__meta div { display: flex; gap: var(--space-3); align-items: baseline; }
.ll-retreat__meta dt { color: var(--brand-lime); min-width: 5.5rem; }
.ll-retreat__meta dd { margin: 0; }
@media (max-width: 820px) { .ll-retreat__inner { grid-template-columns: 1fr; padding: var(--space-12); } }

/* ---- Booking split (scheduler + enquiry) ------------------- */
.ll-booking { display: grid; gap: var(--space-16); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .ll-booking { grid-template-columns: 1fr; gap: var(--space-12); } }

/* ---- Visit ------------------------------------------------- */
.ll-visit { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .ll-visit { grid-template-columns: 1fr; } }
.ll-hours { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.ll-hours div { display: flex; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-1);
  border-bottom: 1px dashed var(--color-border); }
.ll-hours dt { color: var(--color-text); }
.ll-hours dd { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }