/* =====================================================================
   SKI RESORTS — two blocks on the ski landing page, and the parts of them
   the ski guide reuses.

     .skr-top    Top Rated Ski Resorts: pill tabs, arrows, ranked photo cards
     .skr-guide  Ski Resort Guide: a magazine column beside a sidebar
     .skr-stars  the star rating (partials/stars.blade.php), shared

   Built on the landing page's own tokens (--skl-navy, --skl-gold, …) so the
   new blocks read as the same page. Prefix .skr- throughout.
   ===================================================================== */

.skr-lead {
  margin: -14px 0 clamp(18px, 2vw, 26px);
  max-width: 78ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--skl-muted);
}
.skr-lead a { color: var(--skl-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.skr-lead a:hover { color: var(--skl-gold); }

/* ============================== stars ============================== */
.skr-stars { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.skr-stars__row { display: inline-flex; gap: 1px; }
.skr-stars svg { display: block; width: 14px; height: 14px; }
.skr-stars__base { fill: none; stroke: var(--skl-gold); stroke-width: 1.6; stroke-linejoin: round; }
.skr-stars__fill { fill: var(--skl-gold); }
/* Unrated: the outline in a quiet grey, so an empty row is not mistaken for
   a poor score. */
.skr-stars--none .skr-stars__base { stroke: #B9C4CA; }
.skr-stars__txt { font-size: .72rem; color: var(--skl-muted); }

/* ======================== TOP RATED SKI RESORTS ======================== */
.skr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
/* One line of tabs that scrolls sideways when there are more than fit,
   rather than wrapping into a second row that would push the arrows down. */
.skr-tabs {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}
.skr-tabs::-webkit-scrollbar { display: none; }
.skr-tab {
  flex: none;
  padding: 9px 18px;
  border: 1.5px solid var(--skl-line);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: var(--skl-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--skl-muted);
  cursor: pointer;
  transition: border-color .2s var(--skl-ease), background-color .2s var(--skl-ease), color .2s var(--skl-ease);
}
.skr-tab:hover { border-color: var(--skl-navy); color: var(--skl-navy); }
.skr-tab.is-on { border-color: var(--skl-navy); background: var(--skl-navy); color: #FFFFFF; }
.skr-tab:focus-visible { outline: 2px solid var(--skl-gold); outline-offset: 2px; }

.skr-arrows { flex: none; display: flex; gap: 10px; }
.skr-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid var(--skl-line);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--skl-navy);
  cursor: pointer;
  transition: border-color .2s var(--skl-ease), opacity .2s var(--skl-ease);
}
.skr-arrow svg { width: 18px; height: 18px; }
.skr-arrow:hover { border-color: var(--skl-navy); }
.skr-arrow:focus-visible { outline: 2px solid var(--skl-gold); outline-offset: 2px; }
.skr-arrow[disabled] { opacity: .35; cursor: default; }
.skr-arrow[disabled]:hover { border-color: var(--skl-line); }

/* Five across, each card a fixed share of the row, so paging moves by whole
   cards and a ranked row always starts on a card edge. */
.skr-track {
  --skr-gap: 18px;
  display: flex;
  gap: var(--skr-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.skr-track::-webkit-scrollbar { display: none; }
.skr-cell { flex: 0 0 calc((100% - 4 * var(--skr-gap)) / 5); scroll-snap-align: start; }

.skr-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--skl-sky-soft);
  color: #FFFFFF;
  text-decoration: none;
}
.skr-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--skl-ease); }
.skr-card:hover img { transform: scale(1.05); }
.skr-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 40, 60, .82) 0%, rgba(22, 40, 60, .35) 38%, rgba(22, 40, 60, 0) 62%);
}
.skr-card__rank {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 44px;
  padding: 7px 9px;
  border-radius: 7px;
  background: #FFFFFF;
  font-family: var(--skl-head);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--skl-ink);
}
.skr-card__foot { position: absolute; left: 16px; right: 16px; bottom: 15px; display: flex; flex-direction: column; gap: 3px; }
.skr-card__foot b { font-size: 1.12rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.skr-card__foot small { font-size: .8rem; opacity: .9; }
.skr-card:hover .skr-card__foot b { text-decoration: underline; text-underline-offset: 3px; }
.skr-card:focus-visible { outline: 3px solid var(--skl-gold); outline-offset: 3px; }

/* ========================== SKI RESORT GUIDE ========================== */
/* Straight after the ranked row these are one subject, so the two sections'
   full paddings stacked would read as a gap between unrelated blocks. */
.skr-top + .skr-guide { padding-top: clamp(8px, 1.4vw, 20px); }

.skr-guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
.skr-guide__main { display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 30px); min-width: 0; }

/* ---- a resort: photo left, words right ---- */
.skr-feature {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--skl-line);
  border-radius: 6px;
  background: #FFFFFF;
}
.skr-feature__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--skl-sky-soft); }
.skr-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--skl-ease); }
.skr-feature:hover .skr-feature__img img { transform: scale(1.04); }
.skr-feature__body { display: flex; flex-direction: column; min-width: 0; }
.skr-feature__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.skr-feature__top .skr-stars { flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 4px; }
.skr-feature__name { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.skr-feature__name a { color: var(--skl-navy); text-decoration: none; }
.skr-feature__name a:hover { color: var(--skl-gold); }
.skr-feature__tag { margin: 4px 0 0; font-size: .88rem; color: var(--skl-ink); }
.skr-feature__text { margin: 14px 0 0; font-size: .88rem; line-height: 1.65; color: var(--skl-muted); }
.skr-more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--skl-navy);
  text-decoration: none;
}
.skr-more:hover { color: var(--skl-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---- a heading with the gold rule beneath it ---- */
.skr-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 -12px;
  padding-bottom: 2px;
  font-family: var(--skl-head);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--skl-navy);
}
.skr-rule svg { flex: none; width: 24px; height: 24px; }

/* ---- a strip of photo tiles hanging from the rule ---- */
.skr-strip {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}
.skr-strip--1 { grid-template-columns: 1fr; }
.skr-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skr-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skr-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skr-strip > li + li { border-left: 0; }
.skr-tile { display: flex; flex-direction: column; height: 100%; padding-bottom: 14px; text-decoration: none; color: var(--skl-ink); }
.skr-tile__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--skl-sky-soft); }
.skr-tile--tall .skr-tile__img { aspect-ratio: 4 / 3.1; }
.skr-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--skl-ease); }
.skr-tile:hover img { transform: scale(1.05); }
.skr-tile small { margin: 12px 12px 0; font-size: .74rem; color: var(--skl-muted); }
.skr-tile b { margin: 2px 12px 0; font-size: .88rem; font-weight: 700; line-height: 1.35; }
.skr-tile:hover b { color: var(--skl-gold); }

/* ---- the sidebar ---- */
.skr-guide__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.skr-box { border: 1px solid var(--skl-line); border-radius: 6px; background: #F6F8F9; overflow: hidden; }
.skr-box__h {
  margin: 0;
  padding: 14px 16px 10px;
  font-family: var(--skl-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--skl-navy);
}

.skr-list { margin: 0; padding: 0 12px 4px; list-style: none; }
.skr-list__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.skr-list__row + .skr-list__row { border-top: 1px solid var(--skl-line); }
.skr-list__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--skl-sky-soft); }
.skr-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.skr-list__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.skr-list__txt b { font-size: .95rem; line-height: 1.3; color: var(--skl-navy); }
.skr-list__txt a { font-size: .82rem; color: var(--skl-navy); text-decoration: none; }
.skr-list__txt a:hover { color: var(--skl-gold); text-decoration: underline; }
/* Stand-in text: set in italics so it is plain at a glance that something
   goes here, and never styled as a link it is not. */
.skr-list__stand { font-size: .8rem; font-style: italic; color: var(--skl-muted); }

.skr-events { margin: 0; padding: 0; list-style: none; background: #FFFFFF; }
.skr-events li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--skl-line); }
.skr-events__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skr-events__what small { font-size: .78rem; color: var(--skl-navy); }
.skr-events__what b { font-size: .86rem; font-style: italic; font-weight: 600; color: var(--skl-muted); }
.skr-events__when { flex: none; font-size: .74rem; font-style: italic; text-align: right; color: var(--skl-muted); }

/* ---- the boxes linked to Discover (/trail-maps, /events, /webcams) ----
   The heading opens the section; every row opens its own page — the whole
   row is the target, through a stretched link on its title. */
.skr-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 16px; }
.skr-box__h a { color: inherit; text-decoration: none; }
.skr-box__h a:hover { color: var(--skl-gold); }
.skr-box__all { flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--skl-gold); text-decoration: none; white-space: nowrap; }
.skr-box__all:hover { text-decoration: underline; }

.skr-list__row--link,
.skr-events__row--link { position: relative; transition: background-color .2s ease; }
.skr-list__row--link { margin-inline: -12px; padding-inline: 12px; }
.skr-list__row--link:hover,
.skr-events__row--link:hover { background: #FFFFFF; }
.skr-events__row--link:hover { background: #F6F8F9; }
.skr-list .skr-list__go,
.skr-events .skr-list__go { font-size: inherit; font-style: inherit; font-weight: inherit; color: inherit; text-decoration: none; }
.skr-list__go::after { content: ""; position: absolute; inset: 0; }
.skr-list__go:focus-visible { outline: none; }
.skr-list__go:focus-visible::after { outline: 2px solid var(--skl-gold); outline-offset: -2px; border-radius: 4px; }
.skr-list__row--link:hover .skr-list__go,
.skr-events__row--link:hover .skr-list__go { color: var(--skl-gold); }
.skr-list__more { font-size: .82rem; color: var(--skl-navy); }
.skr-list__row--link:hover .skr-list__more { color: var(--skl-gold); text-decoration: underline; }
.skr-list__row--link .skr-list__stand { font-style: normal; }
.skr-list__row--link .skr-list__thumb { position: relative; }
.skr-list__row--link .skr-list__thumb img { transition: transform .4s ease; }
.skr-list__row--link:hover .skr-list__thumb img { transform: scale(1.06); }
.skr-events__row--link .skr-events__what b { font-style: normal; color: var(--skl-navy); }
.skr-list__live {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #c0392b;
  color: #FFFFFF;
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
}

.skr-report { background: #FFFFFF; }
.skr-report__h {
  margin: 0;
  padding: 9px 14px;
  background: var(--skl-navy);
  font-size: .9rem;
  font-weight: 700;
  color: #FFFFFF;
}
.skr-report__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.skr-report__name { margin-top: 4px; font-size: 1.05rem; color: var(--skl-navy); }
.skr-report__where { font-size: .8rem; color: var(--skl-muted); }
.skr-report__rows { margin: 12px 0 0; padding: 0; list-style: none; }
.skr-report__rows li { display: flex; align-items: center; gap: 12px; padding: 3px 0; font-size: .82rem; color: var(--skl-ink); }
.skr-report__rows em { color: var(--skl-muted); }
.skr-report__rows .skr-stars svg { width: 11px; height: 11px; }
.skr-report__btn {
  align-self: flex-end;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 3px;
  background: var(--skl-gold);
  font-size: .8rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}
.skr-report__btn:hover { filter: brightness(1.1); }

/* ============================== responsive ============================== */
@media (max-width: 1100px) {
  .skr-cell { flex-basis: calc((100% - 3 * var(--skr-gap)) / 4); }
}
@media (max-width: 960px) {
  .skr-guide__grid { grid-template-columns: minmax(0, 1fr); }
  /* Side by side, the sidebar boxes are short enough to sit two across. */
  .skr-guide__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 820px) {
  .skr-cell { flex-basis: calc((100% - 2 * var(--skr-gap)) / 3); }
  .skr-bar { flex-wrap: wrap; }
  .skr-tabs { flex: 1 1 100%; order: 2; }
  .skr-arrows { order: 1; margin-left: auto; }
  .skr-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skr-strip--4 > li:nth-child(3) { border-left: 0; }

}
@media (max-width: 640px) {
  .skr-cell { flex-basis: 72%; }
  .skr-feature { grid-template-columns: minmax(0, 1fr); }
  .skr-guide__side { grid-template-columns: minmax(0, 1fr); }
  .skr-strip--3 { grid-template-columns: minmax(0, 1fr); }
  .skr-strip--3 > li + li { border-left: 0; border-top: 1px solid var(--skl-line); }
}
@media (prefers-reduced-motion: reduce) {
  .skr-track { scroll-behavior: auto; }
  .skr-card img, .skr-feature__img img, .skr-tile__img img { transition: none; }
}

/* ============================ THE SWIPE RAILS ============================
   The resort cards, the two strips and the three sidebar lists are all
   swiped rather than stacked: sideways for the cards and strips, up and down
   for the lists. No arrows, no dots and no scrollbar — the rail is dragged
   with a finger, a pointer or the arrow keys, and it snaps to each item. */
.skr-swipe { position: relative; }
.skr-swipe__track,
.skr-swipe--y {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.skr-swipe__track::-webkit-scrollbar,
.skr-swipe--y::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- sideways ---- */
.skr-swipe--x .skr-swipe__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
}
.skr-swipe--x .skr-swipe__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.skr-swipe--x .skr-swipe__track > * { scroll-snap-align: start; }
/* One whole card to a view, for the resorts. */
.skr-swipe--one .skr-swipe__track { gap: clamp(14px, 1.6vw, 20px); }
.skr-swipe--one .skr-swipe__track > .skr-feature { flex: 0 0 100%; }

/* The strips keep their frame, and four tiles to a view on a wide screen. */
.skr-swipe--x .skr-strip { display: flex; }
.skr-swipe--x .skr-strip > li { flex: 0 0 29%; min-width: 172px; }
.skr-swipe--x .skr-strip > li + li { border-left: 0; }

/* ---- up and down ---- */
.skr-swipe--y {
  --skr-row-h: 78px;
  max-height: calc(var(--skr-rows, 3) * var(--skr-row-h));
  overflow-y: auto;
  scroll-snap-type: y proximity;
  cursor: grab;
}
.skr-swipe--y.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.skr-swipe--y > li { scroll-snap-align: start; }
.skr-list.skr-swipe--y { --skr-row-h: 103px; }
.skr-events.skr-swipe--y { --skr-row-h: 67px; }
/* A whisper of a fade at the foot of a rail that has more in it — no dots,
   no arrows, no scrollbar, just a hint that it moves. */
.skr-swipe--y { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }

.skr-swipe--y.is-end { -webkit-mask-image: none; mask-image: none; }
/* Nothing is dragged away by accident: the browser keeps the up-and-down
   swipe for the rail and the page keeps the rest. */
.skr-swipe--x .skr-swipe__track { touch-action: pan-x; }
.skr-swipe--y { touch-action: pan-y; }
.skr-swipe:focus-visible,
.skr-swipe__track:focus-visible { outline: 2px solid var(--skl-gold); outline-offset: 3px; }

@media (max-width: 720px) {
  .skr-swipe--x .skr-strip > li { flex-basis: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .skr-swipe__track, .skr-swipe--y { scroll-behavior: auto; }
}
/* The resorts: two cards in view, stacked, the rest a swipe up away. */
.skr-swipe--cards {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  max-height: calc(var(--skr-rows, 2) * var(--skr-card-h, 302px) + (var(--skr-rows, 2) - 1) * 18px);
  padding-right: 2px;
}
.skr-swipe--cards > .skr-feature { flex: 0 0 auto; scroll-snap-align: start; }
@media (max-width: 900px) {
  .skr-swipe--cards { --skr-card-h: 420px; max-height: none; overflow: visible; }
}
/* ---- the tiles: pictures with their words beneath, no frame ---- */
.skr-swipe--x .skr-strip { gap: clamp(10px, 1.2vw, 16px); }
.skr-swipe--x .skr-strip > li { flex: 0 0 30%; min-width: 180px; }
.skr-tile { padding-bottom: 4px; }
.skr-tile__img { border-radius: 6px; }
.skr-tile small { margin: 10px 0 0; }
.skr-tile b { margin: 2px 0 0; }

/* ---- the resort cards: shorter, so two sit in the same space ---- */
.skr-feature { padding: clamp(10px, 1.2vw, 14px); }
.skr-feature__img { aspect-ratio: 16 / 10; }
.skr-feature__text {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.skr-feature__body .skr-more { margin-top: 12px; }
.skr-swipe--cards { --skr-card-h: 218px; }
/* One line to an event, so the rail's rows line up. */
.skr-events__what b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 30ch; }

/* ---- the upright rails scroll without a scrollbar ----
   The resort cards, the trail maps, the events and the webcams are taller
   than their box. On Windows a visible bar is drawn with an arrow button at
   each end, and four of those down one section is more furniture than the
   content — so the bar is hidden and the rails are scrolled, swiped or
   arrow-keyed instead. The soft fade at the foot of each rail (further up
   this file) is the hint that there is more, and it returns because nothing
   cancels the mask here any more. */
.skr-swipe--y {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.skr-swipe--y::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ---- the package cards: a line and a half of plain text, no rank badge ---- */
.skr-card__rank { display: none !important; }
.skr-card__foot b {
  display: -webkit-box;
  overflow: hidden;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.skr-card__foot small { margin-top: 4px; font-size: .78rem; opacity: .88; }
/* ---- shorter resort cards: two lines of words, three cards in view ---- */
.skr-feature { padding: 10px; }
.skr-feature__img { aspect-ratio: 16 / 9; }
.skr-feature__text { -webkit-line-clamp: 2; margin-top: 8px; font-size: .85rem; line-height: 1.55; }
.skr-feature__name { font-size: 1.05rem; }
.skr-feature__tag { font-size: .82rem; }
.skr-feature__body .skr-more { margin-top: 8px; font-size: .84rem; }