/* =====================================================================
   SKI — one category of the ski shop (views/frontend/ski/category.blade.php):
   /ski/courses, /ski/services, /ski/backcountry and any category added
   later. Built on the ski school's own pieces — its split hero, filter bar
   and alternating rows come from css/ski-lessons.css — so a category page
   reads as the same site as /ski/lessons. Only what that page has no
   counterpart for lives here: the breadcrumb, the row of sibling
   categories, the "arranged on request" panel and the closing band.
   Prefix .skcat-. Loaded after css/ski-landing.css and css/ski-lessons.css.
   ===================================================================== */

/* ------------------------------------------------------------------ hero */
.skcat-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.skcat-crumb a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.skcat-crumb a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.skcat-crumb [aria-current] { color: var(--skl-gold); }
.skcat-hero .skls-hero__title { margin-bottom: 12px; }
.skcat-hero__tag { margin: 0 0 18px !important; font-family: var(--skl-head); font-size: 1.12rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--skl-gold) !important; }
/* Three facts under the words — the season, how many, the lowest price —
   between hairlines, the way the landing page's stat rows sit. */
.skcat-facts { display: flex; flex-wrap: wrap; margin: 22px 0 4px; padding: 14px 0; border-block: 1px solid rgba(255, 255, 255, .16); }
.skcat-facts > div { flex: 1 1 0; min-width: 96px; padding: 0 16px; }
.skcat-facts > div:first-child { padding-left: 0; }
.skcat-facts > div + div { border-left: 1px solid rgba(255, 255, 255, .16); }
.skcat-facts dt { margin: 0 0 4px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.skcat-facts dd { margin: 0; font-family: var(--skl-head); font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; color: #FFFFFF; white-space: nowrap; }

/* ------------------------------------------------- the sibling categories
   A rail of the shop's categories under the hero, each with the round
   photograph the header's menus use. The page in view is marked in gold. */
.skcat-tabs { background: #FFFFFF; border-bottom: 1px solid var(--skl-line); }
.skcat-tabs__in { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.skcat-tabs__in::-webkit-scrollbar { display: none; }
.skcat-tab {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 15px;
  color: var(--skl-ink);
  text-decoration: none;
  white-space: nowrap;
}
.skcat-tab::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--skl-gold);
  transform: scaleX(0);
  transition: transform .25s var(--skl-ease);
}
.skcat-tab:hover::after, .skcat-tab.is-on::after { transform: scaleX(1); }
.skcat-tab__img { flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: var(--skl-sky-soft); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--skl-line); }
.skcat-tab__img img { width: 100%; height: 100%; object-fit: cover; }
.skcat-tab b { font-family: var(--skl-head); font-size: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.skcat-tab.is-on b { color: var(--skl-navy); }
.skcat-tab.is-on .skcat-tab__img { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--skl-gold); }
.skcat-tab:focus-visible { outline: 2px solid var(--skl-gold); outline-offset: -4px; }

/* ----------------------------------------------- nothing listed (yet)
   A category with nothing published is still a thing Kohwan arranges, so
   the page says how to ask for it instead of showing an empty grid. */
.skcat-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px clamp(20px, 3vw, 36px);
  align-items: start;
  max-width: 860px;
  margin: clamp(16px, 2.4vw, 30px) auto 0;
  padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--skl-line);
  border-radius: 10px;
  background: #FFFFFF;
}
.skcat-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--skl-sky-soft); color: var(--skl-navy); }
.skcat-empty__icon svg { width: 30px; height: 30px; }
.skcat-empty h2 { margin: 0 0 8px; font-family: var(--skl-head); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; text-transform: uppercase; color: var(--skl-navy); }
.skcat-empty p { margin: 0 0 14px; font-size: .92rem; line-height: 1.7; color: var(--skl-muted); }
.skcat-empty__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px !important; }
.skcat-empty__tel { margin: 0 !important; font-size: .86rem !important; }
.skcat-empty__tel a { color: var(--skl-navy); font-weight: 700; }

/* ------------------------------------------- the rest of the ski shop */
.skcat-more .skls-ess__card small { grid-column: 1 / -1; margin-top: -4px; font-size: .8rem; line-height: 1.5; color: var(--skl-muted); }

/* --------------------------------------------------------- closing band */
.skcat-end { background: var(--skl-sky-soft); }
.skcat-end .skl-lead { max-width: 60ch; margin: -18px auto 0; line-height: 1.65; }
.skcat-end__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 680px) {
  /* The rail runs off the right edge on a phone; the fade says it scrolls. */
  .skcat-tabs__in { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .skcat-tabs__in.is-end { -webkit-mask-image: none; mask-image: none; }
  .skcat-tab { padding: 13px 12px 12px; }
  .skcat-tab::after { left: 12px; right: 12px; }
  .skcat-empty { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .skcat-tab::after { transition: none; }
}