/* =====================================================================
   ONE SKI LEVEL — /ski/levels/{level} (views/frontend/ski/level.blade.php).
   The page is built from the ski trip pages' parts (css/ski-trips.css,
   .skt2-); this sheet adds only what a level needs on top: the lead, the
   checklist, the numbered skills and the terrain note. Prefix .slv-.
   ===================================================================== */

/* The level photographs are people as much as snow: keep their heads in.
   They are bright snow scenes too, so the scrim runs deeper than on a trip
   page and the small gold line above the name still reads. */
.slv-hero .skt2-hero__bg { object-position: center 30%; }
.slv-hero::after { background: linear-gradient(to top, rgba(20, 34, 44, .92) 0%, rgba(20, 34, 44, .62) 55%, rgba(20, 34, 44, .32) 100%); }

/* What the level means — the /ski card's own words, set larger. */
.slv-lead {
  max-width: 62ch;
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--skl-gold);
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.75;
  color: var(--skl-ink);
}

.slv-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* ---- you are at this level if… ---- */
.slv-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.slv-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--skl-line);
  border-radius: 6px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--skl-ink);
}
.slv-checks__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--skl-navy);
  color: #FFFFFF;
}
.slv-checks__ic svg { width: 14px; height: 14px; }

/* ---- what you work on ---- */
.slv-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: slv; }
.slv-steps li {
  position: relative;
  padding: 16px 16px 16px 58px;
  border-radius: 6px;
  background: #F4F6F7;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--skl-ink);
  counter-increment: slv;
}
.slv-steps li::before {
  content: counter(slv, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--skl-head);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--skl-gold);
}

/* ---- where you ski ---- */
.slv-where { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 8px; background: linear-gradient(115deg, #1f3441, #3c5564); color: #FFFFFF; }
.slv-where__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--skl-gold); }
.slv-where__ic svg { width: 22px; height: 22px; }
.slv-where p { margin: 0; font-size: .92rem; line-height: 1.75; }
.slv-where a { color: #FFFFFF; font-weight: 700; }

/* ---- no lesson published for the level ---- */
.slv-none { max-width: 66ch; margin: 0 0 16px; font-size: .92rem; line-height: 1.75; color: var(--skl-muted); }
.slv-none a { color: var(--skl-navy); font-weight: 600; }

/* ---- the other levels: their own words under the name, three lines of
   them, ending on a whole word rather than cut mid-word ---- */
.slv-levels .skt2-card__meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 1.55;
}

@media (max-width: 680px) {
  .slv-steps { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone the other levels stay two to a row: they are a way on to the
   next page, and five full-width cards would bury the closing band. */
@media (max-width: 520px) {
  .slv-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .slv-levels .skt2-card__name { font-size: .84rem; }
}