/* =====================================================================
   LODGING — /ski/lodging.

   A photo band with the title in a box, three promo tiles, a notice strip,
   the property grid with its toolbar, a map view, and the dining selections
   under their own filters. In the ski pages' own tokens so it reads as the
   same site. Prefix .skd- throughout.
   ===================================================================== */

/* --------------------------------- hero --------------------------------- */
/* A split banner: the words on a pale sky panel on the left — lined up with
   the page's 1180px content edge — and the photograph filling the right side
   edge to edge, full height. */
.skd-hero {
  display: grid;
  grid-template-columns: minmax(0, 41%) minmax(0, 59%);
  align-items: stretch;
  min-height: clamp(260px, 22vw, 400px);
  background: linear-gradient(180deg, var(--skl-sky-soft) 0%, #F7FBFC 100%);
}
.skd-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 48px) clamp(28px, 3.2vw, 48px) max(20px, calc((100vw - 1180px) / 2));
}
.skd-hero__text .skd-crumbs { padding: 0 0 clamp(10px, 1.4vw, 18px); }
.skd-hero__eyebrow {
  margin: 0 0 8px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--skl-gold);
}
.skd-hero__title {
  margin: 0;
  font-family: var(--skl-head);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--skl-navy);
}
.skd-hero__lead {
  max-width: 50ch;
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: clamp(.86rem, .95vw, 1rem);
  line-height: 1.75;
  color: var(--skl-muted);
}
.skd-hero__media { position: relative; min-height: 100%; overflow: hidden; background: var(--skl-sky-soft); }
.skd-hero__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Phones & tablets: the photograph on top, the words beneath it. */
@media (max-width: 900px) {
  .skd-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .skd-hero__media { order: -1; height: clamp(200px, 48vw, 320px); }
  .skd-hero__text { padding: 22px 20px 28px; }
}
/* ------------------------------ breadcrumb ------------------------------ */
.skd-crumbs { padding: clamp(14px, 1.8vw, 22px) 0; }
.skd-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.skd-crumbs li { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--skl-muted); }
.skd-crumbs li + li::before { content: '›'; color: var(--skl-line); }
.skd-crumbs a { color: var(--skl-muted); text-decoration: none; }
.skd-crumbs a:hover { color: var(--skl-navy); }
.skd-crumbs [aria-current] { color: var(--skl-ink); }

/* ------------------------------ promo tiles ------------------------------ */
.skd-promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 0 0 clamp(20px, 2.4vw, 30px); padding: 0; list-style: none; }
/* Breathing room between the hero and the three promo tiles below it. */
.skd-promos { margin-top: clamp(32px, 4vw, 56px); }
.skd-promo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--skl-sky-soft); text-decoration: none; }
.skd-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--skl-ease); }
.skd-promo:hover img { transform: scale(1.05); }
.skd-promo__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 34, 44, .82) 0%, rgba(20, 34, 44, .25) 45%, rgba(20, 34, 44, 0) 72%); }
.skd-promo__txt { position: absolute; left: 0; right: 0; bottom: clamp(12px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 3px; text-align: center; color: #FFFFFF; }
.skd-promo__txt b { font-family: var(--skl-head); font-size: clamp(.95rem, 1.5vw, 1.25rem); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.skd-promo__txt small { font-size: .78rem; opacity: .9; }

/* ------------------------------ notice strip ------------------------------ */
.skd-notice {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  padding: 10px clamp(20px, 5vw, 60px);
  background: #8E9AA1;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
  color: #FFFFFF;
}

/* ------------------------------- the toolbar ------------------------------- */
.skd-sec { padding-bottom: clamp(26px, 3vw, 44px); }
.skd-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.skd-bar--dine { align-items: center; margin-top: 14px; }
.skd-bar__right { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.skd-count { margin: 0; font-size: .86rem; color: var(--skl-muted); }
.skd-count b { color: var(--skl-navy); }

.skd-select { display: flex; flex-direction: column; gap: 4px; }
.skd-select > span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--skl-muted); }
.skd-select select,
.skd-select input {
  min-width: 150px;
  padding: 9px 12px;
  border: 1.5px solid var(--skl-line);
  border-radius: 4px;
  background: #FFFFFF;
  font: inherit;
  font-size: .85rem;
  color: var(--skl-ink);
}
.skd-select select:focus-visible,
.skd-select input:focus-visible { outline: 2px solid var(--skl-gold); outline-offset: 1px; }
.skd-select--search input { min-width: 190px; }

.skd-toggle { display: flex; border: 1.5px solid var(--skl-navy); border-radius: 4px; overflow: hidden; }
.skd-toggle button {
  padding: 9px 18px;
  border: 0;
  background: #FFFFFF;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--skl-navy);
  cursor: pointer;
}
.skd-toggle button.is-on { background: var(--skl-navy); color: #FFFFFF; }
.skd-toggle button:focus-visible { outline: 2px solid var(--skl-gold); outline-offset: -2px; }

/* ----------------------------- property cards ----------------------------- */
.skd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: 0; padding: 0; list-style: none; }
.skd-card { display: flex; flex-direction: column; border: 1px solid var(--skl-line); border-radius: 4px; overflow: hidden; background: #FFFFFF; scroll-margin-top: 90px; }
.skd-card[hidden] { display: none; }

.skd-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--skl-sky-soft); }
/* One photograph at a time, all stacked in the same box so the card never
   changes height as the carousel moves. */
.skd-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--skl-ease); }
.skd-card__media img.is-on { opacity: 1; }
.skd-card__flag { position: absolute; top: 0; left: 0; padding: 5px 10px; background: #2F6B4F; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: #FFFFFF; }
.skd-card__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 34px;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255, 255, 255, .82);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--skl-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s var(--skl-ease);
}
.skd-card:hover .skd-card__arrow,
.skd-card__arrow:focus-visible { opacity: 1; }
.skd-card__arrow--prev { left: 0; }
.skd-card__arrow--next { right: 0; }

.skd-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.skd-card__area { font-size: .74rem; color: var(--skl-muted); }
.skd-card__name { margin: 2px 0 8px; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.skd-card__name a { color: var(--skl-navy); text-decoration: none; }
.skd-card__name a:hover { color: var(--skl-gold); text-decoration: underline; }
.skd-card__amens { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; padding: 0; list-style: none; }
.skd-card__amens li { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--skl-muted); }
.skd-card__amens svg { width: 11px; height: 11px; color: #2F6B4F; }
/* Pushed to the foot so every card's price line sits on one baseline. */
.skd-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--skl-line); }
.skd-card__price { display: flex; flex-direction: column; }
.skd-card__price b { font-family: var(--skl-head); font-size: 1.15rem; font-weight: 800; color: var(--skl-navy); }
.skd-card__price small { font-size: .68rem; color: var(--skl-muted); }

.skd-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid var(--skl-navy);
  border-radius: 3px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--skl-navy);
  background: transparent;
  cursor: pointer;
  transition: background-color .2s var(--skl-ease), color .2s var(--skl-ease);
}
.skd-btn svg { width: 12px; height: 12px; }
.skd-btn:hover { background: var(--skl-navy); color: #FFFFFF; }

.skd-empty { margin: 18px 0 0; font-size: .9rem; color: var(--skl-muted); }
.skd-empty button { padding: 0; border: 0; background: none; font: inherit; color: var(--skl-navy); text-decoration: underline; cursor: pointer; }

/* --------------------------------- the map --------------------------------- */
.skd-map { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; }
.skd-map[hidden] { display: none; }
.skd-map__list { max-height: 520px; overflow-y: auto; border: 1px solid var(--skl-line); border-radius: 4px; background: #FFFFFF; }
.skd-map__item { display: block; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--skl-line); background: none; font: inherit; text-align: left; cursor: pointer; }
.skd-map__item:hover, .skd-map__item.is-on { background: #F4F6F7; }
.skd-map__item b { display: block; font-size: .88rem; color: var(--skl-navy); }
.skd-map__item small { font-size: .74rem; color: var(--skl-muted); }
.skd-map__frame { width: 100%; min-height: 520px; border: 1px solid var(--skl-line); border-radius: 4px; }

/* -------------------------------- the pager -------------------------------- */
.skd-pager { display: flex; align-items: center; gap: 6px; margin-top: clamp(18px, 2.2vw, 28px); }
.skd-pager button {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--skl-line);
  border-radius: 3px;
  background: #FFFFFF;
  font: inherit;
  font-size: .85rem;
  color: var(--skl-navy);
  cursor: pointer;
}
.skd-pager button:hover { border-color: var(--skl-navy); }
.skd-pager button.is-on { background: var(--skl-navy); border-color: var(--skl-navy); color: #FFFFFF; }
.skd-pager button[disabled] { opacity: .4; cursor: default; }
.skd-pager button[disabled]:hover { border-color: var(--skl-line); }
.skd-pager__nums { display: flex; gap: 6px; }
.skd-viewall {
  margin-left: 10px;
  padding: 0 16px !important;
  background: var(--skl-navy) !important;
  border-color: var(--skl-navy) !important;
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFFFFF !important;
}
.skd-viewall svg { width: 12px; height: 12px; margin-left: 6px; }

/* --------------------------------- dining --------------------------------- */
.skd-dining { padding: clamp(30px, 3.6vw, 56px) 0; background: #F4F6F7; }
.skd-h2 {
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  font-family: var(--skl-head);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--skl-navy);
}
.skd-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px; border-radius: 4px; background: #FFFFFF; }
.skd-dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: 16px 0 0; padding: 0; list-style: none; }
.skd-dcard { border: 1px solid var(--skl-line); border-radius: 4px; overflow: hidden; background: #FFFFFF; }
.skd-dcard[hidden] { display: none; }
.skd-dcard a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--skl-ink); }
.skd-dcard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--skl-sky-soft); }
.skd-dcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--skl-ease); }
.skd-dcard:hover img { transform: scale(1.05); }
.skd-dcard__name { display: flex; align-items: center; gap: 6px; margin: 12px 14px 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--skl-navy); }
.skd-dcard__name svg { width: 11px; height: 11px; }
.skd-dcard:hover .skd-dcard__name { color: var(--skl-gold); }
.skd-dcard__sub { margin: 4px 14px 14px; font-size: .78rem; line-height: 1.5; color: var(--skl-muted); }
.skd-fine { margin: 18px 0 0; font-size: .8rem; line-height: 1.6; color: var(--skl-muted); }
.skd-fine a { color: var(--skl-navy); font-weight: 600; }

/* ------------------------------- responsive ------------------------------- */
@media (max-width: 1024px) {
  .skd-grid, .skd-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skd-map { grid-template-columns: minmax(0, 1fr); }
  .skd-map__list { max-height: 260px; }
  .skd-map__frame { min-height: 380px; }
}
@media (max-width: 760px) {
  .skd-promos { grid-template-columns: minmax(0, 1fr); }
  .skd-bar { flex-direction: column; align-items: stretch; }
  .skd-bar__right { justify-content: space-between; }
  /* A tapped card has no hover, so its arrows stay visible. */
  .skd-card__arrow { opacity: 1; }
}
@media (max-width: 520px) {
  .skd-grid, .skd-dgrid { grid-template-columns: minmax(0, 1fr); }
  .skd-select select, .skd-select input, .skd-select--search input { min-width: 0; width: 100%; }
  .skd-select { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .skd-promo img, .skd-dcard__img img, .skd-card__media img { transition: none; }
}

/* ---- the stay chosen in the ski landing's booking tabs ---- */
.skd-stay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-left: 4px solid var(--skl-gold, #BD830D);
  background: #F2F5F7;
}
.skd-stay__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0; font-size: .95rem; color: var(--skl-ink, #1f3441); }
.skd-stay__what b {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--skl-gold, #BD830D);
}
.skd-stay__what span { font-weight: 600; }
.skd-stay__what span + span::before { content: "·"; margin-right: 18px; color: #9fb0b9; }
.skd-stay__change { font-size: .85rem; font-weight: 700; color: var(--skl-navy, #2e4755); text-decoration: underline; }
.skd-stay__change:hover { color: var(--skl-gold, #BD830D); }
/* what a property comes to for those nights */
.skd-card__stay { display: block; margin-top: 3px; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--skl-gold, #BD830D); }