/* =====================================================================
   SKI SCHOOL — the lessons page (views/frontend/ski/lessons.blade.php).
   After the reference: a split hero, a sticky filter bar, lessons as rows
   that alternate side to side, then levels, places, related cards, the
   policies and the essentials. In the site's navy, gold and pale sky blue.
   Prefix .skls-. Loaded after css/ski-landing.css, whose tokens it uses.
   ===================================================================== */
.skls-page { background: #FFFFFF; }
.skls-anchor { position: absolute; top: -90px; }
.skls-sec { padding-block: clamp(44px, 5vw, 76px); scroll-margin-top: 150px; }
.skls-lead { max-width: 62ch; margin: -18px auto clamp(24px, 3vw, 38px); text-align: center; font-size: .94rem; line-height: 1.65; color: var(--skl-muted); }
.skls-lead a { color: var(--skl-navy); font-weight: 700; }

/* ------------------------------------------------------------------ hero */
.skls-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); scroll-margin-top: 90px; }
.skls-hero__copy { display: flex; align-items: center; padding: clamp(36px, 5vw, 80px) clamp(24px, 3.4vw, 56px); background: var(--skl-navy); color: #FFFFFF; }
.skls-hero__in { max-width: 44ch; margin-left: auto; }
.skls-hero__title {
  margin: 0 0 22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.skls-hero__copy p { margin: 0 0 14px; font-size: .96rem; line-height: 1.75; color: rgba(255, 255, 255, .88); }
.skls-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px !important; }
.skls-hero__cta .skl-btn--solid { background: var(--skl-gold); }
.skls-hero__tel { color: #FFFFFF; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
.skls-hero__media { min-height: clamp(300px, 42vw, 560px); }
.skls-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ filter bar
   A white bar of its own, clear of the hero above and the lessons below, as
   the reference has it. Each picker opens a dark glass panel. */
.skls-list {
  padding-block: clamp(18px, 2.4vw, 34px) clamp(30px, 4vw, 56px);
  background: #F7F9FA;
  scroll-margin-top: 78px;
}
.skls-bar {
  position: sticky;
  top: 78px;
  z-index: 30;
  margin-bottom: clamp(10px, 1.4vw, 20px);
  background: #FFFFFF;
  box-shadow: 0 -1px 0 var(--skl-line), 0 1px 0 var(--skl-line), 0 6px 16px rgba(20, 34, 44, .06);
}
.skls-bar__in { display: flex; }
.skls-drop { position: relative; flex: 1 1 0; min-width: 0; }
.skls-drop + .skls-drop { border-left: 1px solid var(--skl-line); }
.skls-drop__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .95rem;
  color: var(--skl-ink);
  text-align: left;
  cursor: pointer;
}
.skls-drop__btn svg { flex: none; width: 16px; height: 16px; color: var(--skl-muted); transition: transform .22s var(--skl-ease); }
.skls-drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.skls-drop__btn.is-set { font-weight: 700; color: var(--skl-navy); }
.skls-drop__btn:focus-visible { outline: 2px solid var(--skl-gold); outline-offset: -3px; }

/* The panel: dark glass, as asked — the page shows through, blurred. */
.skls-pop {
  position: absolute;
  top: 0;
  left: 0;
  min-width: max(100%, 260px);
  z-index: 5;
  padding-bottom: 12px;
  background: rgba(24, 34, 41, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 50px rgba(10, 18, 24, .34);
  color: #FFFFFF;
}
.skls-pop[hidden] { display: none; }
.skls-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 18px 20px;
  font-size: .95rem;
  font-weight: 600;
}
.skls-pop__head svg { width: 16px; height: 16px; transform: rotate(180deg); }
.skls-pop__list { margin: 0; padding: 0 20px; list-style: none; }
.skls-pop__list li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
.skls-pop__list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  font-size: .92rem;
  cursor: pointer;
}
.skls-pop__list input { position: absolute; opacity: 0; pointer-events: none; }
.skls-pop__list i {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 3px;
}
.skls-pop__list input:checked + i { background: var(--skl-gold); border-color: var(--skl-gold); }
.skls-pop__list input:checked + i::after { content: ""; width: 10px; height: 6px; border: 2px solid #FFFFFF; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -2px); }
.skls-pop__list input:focus-visible + i { outline: 2px solid var(--skl-gold); outline-offset: 2px; }

/* ---- the calendar ---- */
.skls-pop--cal { min-width: 320px; padding-bottom: 0; }
.skls-cal { padding: 4px 20px 16px; }
.skls-cal__top { display: flex; gap: 8px; margin-bottom: 12px; }
.skls-cal__top select {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 6px;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}
.skls-cal__top option { color: var(--skl-ink); }
.skls-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.skls-cal__dow { padding: 6px 0; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .75); }
.skls-cal__day {
  display: grid;
  place-items: center;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: .86rem;
  color: #FFFFFF;
  cursor: pointer;
}
.skls-cal__day:hover { background: rgba(255, 255, 255, .14); }
.skls-cal__day.is-out, .skls-cal__day[disabled] { color: rgba(255, 255, 255, .34); cursor: default; }
.skls-cal__day.is-out:hover, .skls-cal__day[disabled]:hover { background: none; }
.skls-cal__day.is-on { background: var(--skl-gold); font-weight: 700; }
.skls-pop__go {
  display: block;
  width: 100%;
  padding: 18px;
  border: 0;
  background: var(--skl-gold);
  color: #FFFFFF;
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.skls-pop__go:hover { filter: brightness(1.08); }

.skls-count { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 8px; font-size: .84rem; color: var(--skl-muted); }
.skls-count p { margin: 0; }
.skls-count b { color: var(--skl-ink); }
.skls-sort { display: flex; align-items: center; gap: 8px; }
.skls-sort button {
  padding: 5px 12px;
  border: 1px solid var(--skl-line);
  border-radius: 999px;
  background: #FFFFFF;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  color: var(--skl-ink);
  cursor: pointer;
}
.skls-sort button.is-on { background: var(--skl-navy); border-color: var(--skl-navy); color: #FFFFFF; }

/* --------------------------------------------------------------- lessons */
.skls-rows { display: grid; }
.skls-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
  padding-block: clamp(26px, 3.4vw, 46px);
  border-bottom: 1px solid var(--skl-line);
  scroll-margin-top: 160px;
}
.skls-row[hidden] { display: none; }
.skls-row.is-flipped .skls-row__txt { order: 2; }
.skls-row__txt h2 {
  margin: 0 0 10px;
  font-family: var(--skl-head);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--skl-navy);
}
.skls-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.skls-facts li {
  padding: 3px 10px;
  border: 1px solid var(--skl-sky);
  border-radius: 999px;
  background: var(--skl-sky-soft);
  font-size: .72rem;
  font-weight: 600;
  color: var(--skl-navy);
}
.skls-row__txt p { margin: 0 0 12px; font-size: .9rem; line-height: 1.7; color: var(--skl-muted); }
.skls-price { color: var(--skl-ink) !important; }
.skls-price b { font-size: 1.05rem; color: var(--skl-navy); }
.skls-row__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.skls-row__img { overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 10; background: var(--skl-sky-soft); }
.skls-row__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--skl-ease); }
.skls-row:hover .skls-row__img img { transform: scale(1.04); }

.skls-none { padding: 34px 0; text-align: center; color: var(--skl-muted); }
.skls-none[hidden] { display: none; }
.skls-none button { border: 0; background: none; font: inherit; color: var(--skl-navy); font-weight: 700; text-decoration: underline; cursor: pointer; }
.skls-all { margin: 26px 0 0; text-align: center; }

/* ---------------------------------------------------------------- levels */
.skls-levels { background: var(--skl-sky-soft); }
.skls-levelgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: lvl; }
.skls-levelgrid > li { padding: 20px 20px 18px; border-radius: 10px; background: #FFFFFF; }
.skls-levelgrid__n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--skl-navy);
  color: #FFFFFF;
  font-family: var(--skl-head);
  font-size: 1.05rem;
  font-weight: 800;
}
.skls-levelgrid b { display: block; margin-bottom: 6px; font-size: 1rem; color: var(--skl-navy); }
.skls-levelgrid p { margin: 0 0 10px; font-size: .86rem; line-height: 1.6; color: var(--skl-muted); }
.skls-levelgrid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.skls-levelgrid ul a { font-size: .84rem; font-weight: 600; color: var(--skl-gold); text-decoration: none; }
.skls-levelgrid ul a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- places */
.skls-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.skls-place { text-decoration: none; color: var(--skl-ink); }
.skls-place__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--skl-sky-soft); }
.skls-place__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--skl-ease); }
.skls-place:hover img { transform: scale(1.05); }
.skls-place b { display: block; margin-top: 10px; font-size: .98rem; color: var(--skl-navy); }
.skls-place small { font-size: .82rem; line-height: 1.5; color: var(--skl-muted); }

/* ------------------------------------------------------------------ also */
/* auto-fill with a ceiling, so one or two cards keep their size and sit in
   the middle rather than stretching across the row. */
.skls-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 360px)); justify-content: center; gap: 22px; }
.skls-card { display: flex; flex-direction: column; }
.skls-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: var(--skl-sky-soft); }
.skls-card__img img { width: 100%; height: 100%; object-fit: cover; }
.skls-card h3 { margin: 12px 0 6px; font-size: 1rem; color: var(--skl-gold); }
.skls-card p { margin: 0 0 14px; font-size: .86rem; line-height: 1.6; color: var(--skl-muted); }
.skls-card .skl-btn { align-self: flex-start; margin-top: auto; }

/* -------------------------------------------------------------- policies */
.skls-acc { max-width: 820px; margin: 0 auto clamp(18px, 2vw, 26px); border-top: 1px solid var(--skl-line); }
.skls-acc details { border-bottom: 1px solid var(--skl-line); }
.skls-acc summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 4px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--skl-navy);
  cursor: pointer;
  list-style: none;
}
.skls-acc summary::-webkit-details-marker { display: none; }
.skls-acc summary::before { content: "+"; width: 18px; font-size: 1.1rem; font-weight: 700; color: var(--skl-gold); }
.skls-acc details[open] summary::before { content: "−"; }
.skls-acc details > div { padding: 0 4px 16px 32px; font-size: .9rem; line-height: 1.7; color: var(--skl-muted); }

/* ------------------------------------------------------------ essentials */
.skls-ess { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.skls-ess__card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--skl-line);
  text-decoration: none;
  color: var(--skl-navy);
  transition: border-color .2s var(--skl-ease);
}
.skls-ess__img { grid-column: 1 / -1; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--skl-sky-soft); }
.skls-ess__img img { width: 100%; height: 100%; object-fit: cover; }
.skls-ess__card b { font-size: .88rem; font-weight: 700; }
.skls-ess__card svg { width: 16px; height: 16px; color: var(--skl-gold); }
.skls-ess__card:hover { border-color: var(--skl-gold); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .skls-hero { grid-template-columns: minmax(0, 1fr); }
  .skls-hero__in { margin: 0; max-width: none; }
  .skls-hero__media { min-height: 240px; }
  .skls-row, .skls-row.is-flipped .skls-row__txt { grid-template-columns: minmax(0, 1fr); order: 0; }
  .skls-row__img { order: -1; }
}
@media (max-width: 680px) {
  /* Stacked, the bar is too tall to pin without eating the screen. */
  .skls-bar { position: static; }
  .skls-bar__in { display: block; }
  .skls-drop + .skls-drop { border-left: 0; border-top: 1px solid var(--skl-line); }
  .skls-drop__btn { padding: 15px 16px; }
  .skls-pop, .skls-pop--cal { min-width: 0; width: 100%; }
  .skls-count { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .skls-row__img img, .skls-place__img img { transition: none; }
}