/* ---------------------------------------------------------------------------
   Solvane — brand layer.

   Register: calm, spacious, low-contrast. A movement studio sells how it feels
   to walk in, so this build spends its budget on whitespace and restraint
   rather than on volume.

   Layout DNA distinct from the other three: no dark grounds anywhere, a light
   geometric sans at low weight, and a real weekly TIMETABLE as the centrepiece
   instead of a card grid. The timetable is the piece most worth promoting into
   shared/patterns.css — any studio, clinic or class-based business needs it.
   --------------------------------------------------------------------------- */

:root {
  --bg:          #fbfaf8;
  --bg-alt:      #eef0e9;
  --surface:     #ffffff;
  --ink:         #262b26;
  --ink-soft:    #4e564d;
  --ink-mute:    #868d84;
  --line:        #e2e4dc;
  --accent:      #5f7355;
  --accent-ink:  #ffffff;
  --accent-soft: #e8ede3;
  --focus:       #5f7355;

  --clay:        #c2a184;

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --display-weight: 300;
  --display-tracking: -0.022em;
  --display-leading: 1.08;

  --btn-radius: var(--radius-pill);
  --card-radius: 18px;
  --input-radius: 10px;

  --header-h: 80px;
  --container: 1160px;
  --section-y: clamp(4rem, 9vw, 7rem);
}

.eyebrow { color: var(--accent); font-weight: 500; letter-spacing: 0.22em; }

.lede { font-weight: 300; }

/* --- Header --------------------------------------------------------------- */

.site-header { --header-bg: #fbfaf8; --header-line: transparent; }

.brandmark { font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--step-1); }

.site-nav a { font-weight: 400; color: var(--ink-soft); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  --hero-size: clamp(2.5rem, 5.6vw, 4.4rem);
  --hero-py: clamp(3rem, 7vw, 5.5rem);
}

.hero__grid {
  display: grid;
  gap: var(--s-2xl);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

.hero h1 { max-width: 15ch; }

/* --- Value strip ---------------------------------------------------------- */

.values {
  display: grid;
  gap: var(--s-l);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  list-style: none;
  padding: 0;
}

.values li { display: grid; gap: var(--s-2xs); }

.values h3 { font-size: var(--step-1); font-weight: 400; }

.values p { color: var(--ink-soft); font-size: var(--step--1); }

.values svg { width: 30px; height: 30px; color: var(--accent); stroke-width: 1.2; }

/* --- Class cards ---------------------------------------------------------- */

.class-card { --card-pad: var(--s-m); background: var(--surface); }

.class-card .card__body { gap: var(--s-xs); }

.class-card h3 { font-size: var(--step-2); font-weight: 400; }

.class-card p { color: var(--ink-soft); font-size: var(--step--1); }

.class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
  margin-block-start: auto;
  padding-block-start: var(--s-xs);
}

.class-meta span {
  padding: 0.3em 0.7em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* --- Timetable ------------------------------------------------------------ */
/* Columns on a laptop, a stacked day-by-day list on a phone, with no media
   query and no JavaScript: auto-fit collapses the columns and the day heading
   travels with its own classes. */

.timetable {
  display: grid;
  gap: var(--s-s);
  /* 150px, not 170px: at 170 the six columns overflow the 1160px container by a
     few pixels and the last day wraps onto its own row, leaving a hole. */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.timetable__day { display: grid; gap: var(--s-2xs); align-content: start; }

.timetable__day > h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-block-end: var(--s-2xs);
  border-block-end: 1px solid var(--line);
}

.slot {
  display: grid;
  gap: 2px;
  text-decoration: none;   /* each slot is a booking link, not body copy */
  padding: var(--s-xs) var(--s-s);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-inline-start: 3px solid var(--slot-key, var(--accent));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.slot:hover { transform: translateX(2px); box-shadow: var(--shadow-1); }

.slot time { font-size: 0.8rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.slot b { font-family: var(--font-display); font-size: var(--step-0); font-weight: 400; }

.slot small { font-size: 0.74rem; color: var(--ink-mute); }

.slot--reformer { --slot-key: var(--accent); }
.slot--mat      { --slot-key: var(--clay); }
.slot--yoga     { --slot-key: #7f93a8; }
.slot--full     { --slot-key: var(--line); opacity: 0.6; }

.slot--full b::after {
  content: "Waitlist";
  display: inline-block;
  margin-inline-start: 0.5em;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  vertical-align: middle;
}

.legend { display: flex; flex-wrap: wrap; gap: var(--s-m); list-style: none; padding: 0; font-size: var(--step--1); color: var(--ink-mute); }

.legend li { display: flex; align-items: center; gap: 0.55em; }

.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--key); display: inline-block; }

/* --- Pricing -------------------------------------------------------------- */

.plan {
  display: grid;
  gap: var(--s-s);
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
}

.plan--featured {
  background: var(--accent-soft);
  border-color: var(--accent);
  position: relative;
}

.plan--featured::after {
  content: "Most chosen";
  position: absolute;
  inset-block-start: -0.75em;
  inset-inline-start: clamp(1.4rem, 3vw, 2rem);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan h3 { font-size: var(--step-1); font-weight: 400; }

.plan__price {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan__price small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; color: var(--ink-mute); letter-spacing: 0; }

.plan ul { display: grid; gap: var(--s-2xs); list-style: none; padding: 0; font-size: var(--step--1); color: var(--ink-soft); }

.plan li { display: flex; gap: 0.6em; align-items: baseline; }

.plan li::before { content: "·"; color: var(--accent); font-weight: 700; }

/* --- Teachers ------------------------------------------------------------- */

.teacher { display: grid; gap: var(--s-xs); }

.teacher .media { border-radius: var(--card-radius); }

.teacher h3 { font-size: var(--step-1); font-weight: 400; }

.teacher p { font-size: var(--step--1); color: var(--ink-soft); }

.teacher span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* --- Closing panel -------------------------------------------------------- */

.closing {
  padding: clamp(2rem, 6vw, 4rem);
  background: var(--accent-soft);
  border-radius: var(--card-radius);
  text-align: center;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer { --footer-bg: #262b26; --footer-ink: #e8ebe5; }