/* Landing pages: the two free-trial pages.

   These are conversion pages, not service pages, and they carry components the
   rest of the site has no use for: a video hero, an instrument selector, a
   figures band, reviews and teacher cards. They keep the site's shell, type and
   spacing so they do not read as a different website; only the components are
   new. Department colour still enters through accents and hover only, per
   DESIGN-SYSTEM.md section 2. */

/* --- Hero ---------------------------------------------------------------
   Copy left, film right. The film is a facade: a poster and a play mark, with
   nothing loaded until it is asked for. */
.lp-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);
  align-items:center;max-width:1120px;margin:0 auto clamp(60px,7vw,96px)}
.lp-hero h1{margin:0 0 18px;text-wrap:pretty}
.lp-sub{margin:0 0 22px;max-width:46ch;color:var(--p-body);font-size:17px;line-height:1.6}

.lp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.lp-chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border:1px solid var(--p-line,#EDE9F2);border-radius:999px;
  color:var(--p-body);font-size:13px;font-weight:500}
.lp-chips i{font-size:1rem;line-height:1;color:var(--accent,var(--p-ink))}

.lp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

.lp-hero-media{position:relative}
.lp-video{position:relative;display:block;width:100%;padding:0;border:0;
  border-radius:20px;overflow:hidden;cursor:pointer;background:var(--paper-soft,#F8F6FA)}
.lp-video-poster{display:block;width:100%;aspect-ratio:16 / 10;
  background:var(--tint,#F3EFF7) center/cover no-repeat}
.lp-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lp-play i{display:flex;align-items:center;justify-content:center;width:66px;height:66px;
  border-radius:50%;background:rgba(23,18,25,.84);color:#fff;font-size:25px;padding-left:4px}
.lp-video:hover .lp-play i,.lp-video:focus-visible .lp-play i{background:var(--ink)}

/* --- Instrument selector ------------------------------------------------
   Radio inputs and labels, so it works with no JavaScript and is operable from
   the keyboard without anything being wired up. */
.lp-tabs{display:grid;grid-template-columns:210px 1fr;gap:0 clamp(26px,3vw,48px);
  max-width:1120px;margin:0 auto;align-items:start}
.lp-tab-input{position:absolute;opacity:0;pointer-events:none}
.lp-tab{grid-column:1;display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-radius:10px;color:var(--p-quiet);font-size:14px;font-weight:600;
  letter-spacing:.2px;cursor:pointer;transition:background .15s ease,color .15s ease}
.lp-tab i{font-size:1.1rem;line-height:1}
.lp-tab:hover{color:var(--p-ink);background:var(--paper-soft,#F8F6FA)}
.lp-tab-input:checked + .lp-tab{background:var(--tint,#F3EFF7);color:var(--p-ink)}
.lp-tab-input:focus-visible + .lp-tab{outline:2px solid var(--accent,var(--ink));outline-offset:2px}

.lp-panel{grid-column:2;grid-row:1 / span 20;display:none;
  gap:clamp(22px,3vw,40px);padding:clamp(26px,3vw,40px);
  background:var(--tint,#F3EFF7);border-radius:18px}
.lp-panel ul{margin:0;padding:0;list-style:none;display:grid;gap:14px;align-content:start}
.lp-panel li{display:flex;gap:11px;color:var(--p-body);font-size:15.5px;line-height:1.5}
.lp-panel li i{flex:none;margin-top:.18em;font-size:1rem;color:var(--accent,var(--p-ink))}
.lp-panel img{width:100%;height:100%;max-height:260px;object-fit:cover;border-radius:14px}

/* Each radio reveals its own panel. Written out because :has() support is not
   universal and this has to work everywhere the site does. */
#tab-piano:checked ~ [data-for="tab-piano"],
#tab-guitar:checked ~ [data-for="tab-guitar"],
#tab-flute:checked ~ [data-for="tab-flute"],
#tab-violin:checked ~ [data-for="tab-violin"],
#tab-singing:checked ~ [data-for="tab-singing"],
#tab-orchestra:checked ~ [data-for="tab-orchestra"],
#tab-cello:checked ~ [data-for="tab-cello"]{display:grid;grid-template-columns:1fr .85fr}

/* --- Figures ------------------------------------------------------------ */
.lp-stats{max-width:1120px;margin:0 auto clamp(70px,8vw,110px);
  padding:clamp(30px,4vw,44px) 0;border-block:1px solid var(--p-line,#EDE9F2)}
.lp-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(24px,3vw,40px);text-align:center}
.lp-stats-grid b{display:block;font:400 clamp(38px,4.4vw,54px)/1 'Zodiak',serif;
  color:var(--p-ink);letter-spacing:-.5px}
.lp-stats-grid span{display:block;margin-top:9px;color:var(--p-quiet);
  font-size:13.5px;letter-spacing:.1px}

/* --- Reviews ------------------------------------------------------------ */
.lp-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,2.5vw,32px);max-width:1120px;margin:0 auto}
.lp-review{margin:0;padding:clamp(26px,3vw,34px);
  background:var(--paper-soft,#F8F6FA);border-radius:18px}
.lp-stars{display:flex;gap:3px;margin-bottom:14px;color:#E8B22A;font-size:14px}
.lp-review blockquote{margin:0 0 18px;color:var(--p-body);font-size:15.5px;line-height:1.65}
.lp-review figcaption{display:flex;align-items:center;gap:11px;
  color:var(--p-ink);font-size:14px;font-weight:600}
.lp-review figcaption img{width:38px;height:38px;border-radius:50%;object-fit:cover}

/* --- Teachers ----------------------------------------------------------- */
.lp-teachers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,2.5vw,30px);max-width:1120px;margin:0 auto}
.lp-teacher{text-align:center}
.lp-teacher img{width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center top;
  border-radius:16px;background:var(--paper-soft,#F8F6FA)}
.lp-teacher h3{margin:16px 0 4px;font:600 16px/1.3 'Switzer',sans-serif;color:var(--p-ink)}
.lp-teacher p{margin:0;color:var(--p-quiet);font-size:13.5px}

/* Department accents. */
.lp-hero.is-music,.lp-tabs.is-music{--accent:var(--music);--tint:#F1F4FB}
.lp-hero.is-tkd,.lp-tabs.is-tkd{--accent:var(--tkd);--tint:#F5F1EC}
.lp-hero.is-dance,.lp-tabs.is-dance{--accent:var(--dance);--tint:#FBF1F6}

@media (max-width:900px){
  .lp-hero{grid-template-columns:1fr;gap:30px}
  .lp-tabs{grid-template-columns:1fr}
  .lp-tab{grid-column:1}
  .lp-panel{grid-column:1;grid-row:auto}
  #tab-piano:checked ~ [data-for="tab-piano"],
  #tab-guitar:checked ~ [data-for="tab-guitar"],
  #tab-flute:checked ~ [data-for="tab-flute"],
  #tab-violin:checked ~ [data-for="tab-violin"],
  #tab-singing:checked ~ [data-for="tab-singing"],
  #tab-orchestra:checked ~ [data-for="tab-orchestra"],
  #tab-cello:checked ~ [data-for="tab-cello"]{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .lp-tab,.lp-play i{transition:none} }