/* ==========================================================================
   Benefit Dance — landing page
   Plain CSS, no build step. Layout is mobile-first; the few multi-column
   arrangements switch on at 48rem / 64rem.
   ========================================================================== */

:root {
  --bg:          #fbf6f0;
  --surface:     #fffdfb;
  --blush:       #f7e9e4;
  --blush-deep:  #efd9d2;
  --ink:         #2b2422;
  --ink-soft:    #5c4f4a;
  --muted:       #877771;
  --accent:      #c13a2f;
  --accent-dark: #a02b21;
  --on-accent:   #fffaf8;

  --radius:    1.25rem;
  --radius-lg: 1.75rem;
  --shadow:    0 1px 2px rgb(43 36 34 / 6%), 0 12px 28px -18px rgb(43 36 34 / 35%);

  --font-body:    ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;

  --wrap:  min(72rem, 100% - 2.5rem);
  --gap:   clamp(1.25rem, 3vw, 2rem);
  --block: clamp(3.5rem, 9vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Keep in-page anchors clear of the sticky header. */
  scroll-padding-top: 5rem;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 6.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -100vw;
  top: 0;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--on-accent);
  z-index: 20;
}
.skip-link:focus { left: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.btn--accent {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 22px -14px rgb(193 58 47 / 90%);
}
.btn--accent:hover { background: var(--accent-dark); }
.btn--accent:active { transform: translateY(1px); }

.btn--sm  { padding: 0.55rem 1.15rem; font-size: 0.9rem; }
.btn--lg  { padding: 1rem 2.25rem;    font-size: 1.05rem; }
.btn--block { display: block; width: 100%; }

.link-strong {
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blush-deep);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.logo__mark {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(1.5rem, 4vw, 2.75rem) var(--block);
}

.hero__figure {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero__figure img {
  width: 100%;
  /* 4/5 is the tightest crop that still holds the whole arabesque — the raised
     hand and the pointe foot span almost the full height of the source. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.hero__body {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.lede {
  margin-block: 1.25rem 2rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
}

.hero__note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Section scaffolding ──────────────────────────────────────────────── */

.section { padding-block: var(--block); }

/* Alternating page rhythm — applied by position, not by what a section holds. */
.tinted { background: var(--blush); }

.section__head {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.section__sub {
  margin-top: 0.75rem;
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Checklists — the tick is drawn in CSS, no icon font or SVG sprite. */
.ticks {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.ticks li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--blush-deep);
}

.ticks li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.6em;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Programme cards ──────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: var(--gap);
}

.card {
  background: var(--surface);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.card__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.card__body { padding: clamp(1.5rem, 3vw, 2rem); }
.card__body > h3 { margin-bottom: 0.75rem; }
.card__body > p { color: var(--ink-soft); }

.more {
  margin-top: 1.5rem;
  border-top: 1px solid var(--blush-deep);
  padding-top: 1rem;
}

.more summary {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.more summary::-webkit-details-marker { display: none; }

.more summary::after {
  content: " ›";
  display: inline-block;
  transition: transform 0.2s ease;
}
.more[open] summary::after { transform: rotate(90deg); }

.more p {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ── Small-groups band ────────────────────────────────────────────────── */

.band__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.band__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.band__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.band__body > p {
  margin-top: 1.25rem;
  color: var(--ink-soft);
}

.stats {
  margin: 2rem 0 0;
  display: grid;
  gap: 1.25rem;
}

.stats > div {
  padding-left: 1.15rem;
  border-left: 3px solid var(--accent);
}

.stats dt {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.stats dd {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ── Teacher ──────────────────────────────────────────────────────────── */

/* No card: the photo and the text sit directly on the section background. */
.teacher {
  max-width: 34rem;
  margin-inline: auto;
}

.teacher__figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.teacher__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.teacher__body { padding-top: clamp(1.35rem, 3vw, 1.75rem); }

.teacher__body > h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  margin-bottom: 0.9rem;
}

.teacher__body > p { color: var(--ink-soft); }

@media (min-width: 48rem) {
  /* Two columns from here up: a single narrow column strands the row, and
     putting the photo right mirrors the band above, which has its photo left. */
  .teacher {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }

  .teacher__figure { grid-area: 1 / 2; }

  .teacher__body {
    grid-area: 1 / 1;
    padding-top: 0;
  }
}

/* ── Pricing ──────────────────────────────────────────────────────────── */

.prices {
  display: grid;
  gap: var(--gap);
}

.price {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius-lg);
}

.price--featured {
  background: var(--blush);
  border-color: var(--accent);
}

.price__sub {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.price__amount {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
}

.price__amount span {
  font-size: 0.5em;
  color: var(--muted);
}

.price .ticks { flex: 1; margin-bottom: 1.5rem; }
.price:not(.price--featured) .ticks { margin-bottom: 0; }

/* ── Booking ──────────────────────────────────────────────────────────── */

.booking { background: var(--blush); }

.booking__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.booking__intro > p { margin-top: 1.25rem; color: var(--ink-soft); }

.schedule {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.schedule li {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.schedule strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.schedule__addr { color: var(--muted); }

.booking__direct {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.booking__form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.field { display: grid; gap: 0.35rem; }

.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.field input,
.field select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--blush-deep);
  border-radius: 0.7rem;
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.booking__form .btn { margin-top: 0.5rem; }

.booking__privacy {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: 2.5rem;
  border-top: 1px solid var(--blush-deep);
}

.site-footer__inner {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}

.logo--footer { margin: 0; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.92rem;
}

.site-footer nav a {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer nav a:hover { color: var(--accent); }

.site-footer__legal {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ── Wider viewports ──────────────────────────────────────────────────── */

@media (min-width: 48rem) {
  .cards  { grid-template-columns: repeat(2, 1fr); }
  .prices { grid-template-columns: repeat(3, 1fr); }
  .stats  { grid-template-columns: repeat(3, 1fr); }

  .band__inner,
  .booking__inner { grid-template-columns: 1fr 1fr; }

  .site-footer__inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    text-align: left;
  }
  .site-footer nav { justify-content: center; }
}

@media (min-width: 64rem) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--block);
  }

  .hero__figure { margin-bottom: 0; }

  .hero__body { text-align: left; margin-inline: 0; }

  .booking__inner { grid-template-columns: 1.05fr 0.95fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Ghost button ─────────────────────────────────────────────────── */

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--blush-deep);
}
.btn--ghost:hover { background: var(--blush); color: var(--ink); }
.btn--ghost:active { transform: translateY(1px); }

/* ── Cookie consent banner ────────────────────────────────────────── */
/*
   A floating card rather than a full-width strip: it reads as a question from
   the studio, not as page chrome the eye has learned to skip. It never blocks
   the page — no scrim, no focus trap, everything behind it stays usable — and
   while it is up, <html> gets .has-consent so the page can scroll its last
   section (the WhatsApp booking block) clear of it.

   Accept and Reject are the same size and sit side by side. Making Reject
   harder to find than Accept is exactly what EU regulators call a dark
   pattern, so "harder to ignore" applies to the card, never to one button.
*/

.consent {
  position: fixed;
  inset: auto 0.75rem 0.75rem;
  z-index: 100;
  max-width: 30rem;
  margin-inline: auto;
  padding: 1.15rem 1.15rem 1rem;
  background: var(--surface);
  border: 1px solid var(--blush-deep);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow:
    0 2px 4px rgb(43 36 34 / 6%),
    0 24px 48px -16px rgb(43 36 34 / 40%);
  animation: consent-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.consent[hidden] { display: none; }

.consent__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}

.consent__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blush);
  color: var(--accent);
}

.consent__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.consent__text {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.925rem;
  line-height: 1.55;
}

.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* equal widths — no favoured button */
  gap: 0.5rem;                      /* 8dp separation between touch targets */
}

/* 48x48 minimum touch target, per the mobile guidelines in base-plan.md. */
.consent__actions .btn {
  min-height: 48px;
  padding-inline: 0.75rem;
}

/* A clear outline, not a faint ghost: Reject must be as easy to see as Accept. */
.consent__actions .btn--ghost {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink-soft);
}

/* Keep the bottom of the page reachable while the card is up. The height is
   measured in consent.js; the fallback covers the first frame. */
.has-consent body {
  padding-bottom: calc(var(--consent-h, 13rem) + 1.5rem);
}

/* One gentle lift if the visitor scrolls on without answering. Fires once,
   from consent.js — a reminder, not a nag. */
.consent--nudge {
  animation: consent-nudge 0.7s ease-in-out;
}

@keyframes consent-in {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes consent-nudge {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-0.6rem); box-shadow: 0 2px 4px rgb(43 36 34 / 6%), 0 32px 56px -14px rgb(193 58 47 / 45%); }
  60%      { transform: translateY(-0.15rem); }
}

@media (min-width: 48rem) {
  .consent {
    /* Bottom-LEFT: on the first screen that puts it over the hero photo.
       Bottom-right sat on top of the hero's "Записать на пробный урок" —
       the primary CTA — at 1280x800. */
    inset: auto auto 1.5rem 1.5rem;
    margin: 0;
    width: 26rem;
    padding: 1.35rem 1.35rem 1.2rem;
  }
}

/* Reduced motion: no slide, no bounce. The nudge becomes a brief outline
   instead, so the reminder still exists without movement. */
@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
  .consent--nudge {
    animation: none;
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
}

/* ── Prose pages (privacy policy) ─────────────────────────────────── */

.prose {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  max-width: 44rem;
  color: var(--ink-soft);
}

.prose h1 {
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  color: var(--ink);
}

.prose p,
.prose ul { margin-block: 0 1rem; line-height: 1.7; }

.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.35rem; }

.prose code {
  background: var(--blush);
  border-radius: 0.35rem;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

.prose__meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.prose__back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--blush-deep);
}

/* Unfilled legal placeholders must be impossible to miss in review. */
.prose [data-fill] {
  background: #fde68a;
  color: #6b4f00;
  border-radius: 0.3rem;
  padding: 0.05em 0.3em;
}