/* Ski-area results page. Loaded only by resort.njk via extraCss, so no other page is
   affected. Font Awesome is pulled in here rather than from the shared layout for the
   same reason. Tokens come from site.css. */
@import url("/assets/fa/fontawesome.min.css");
@import url("/assets/fa/solid.min.css");

:root{
  --rz-navy:#0F2232;
  --rz-ink:#16202B;
  --rz-line:#E3E1DA;
  --rz-muted:#5C636B;
  --rz-near:#C23B22;
  --rz-paper:#FFFFFF;
  --rz-bar-h:49.6px;
}/* ---------- hero: shallow panorama ---------- */
.rz-hero{
  position:relative;
  background-image:linear-gradient(180deg,rgba(9,20,32,.62) 0%,rgba(9,20,32,.30) 42%,rgba(9,20,32,.76) 100%),var(--rz-hero);
  background-size:cover,cover;
  background-position:50% 42%,50% 42%;
  background-repeat:no-repeat;
  color:#fff;
}.rz-hero-in{padding:14.4px 0 20.8px}.rz-hero .crumbs{margin:0 0 14.4px}.rz-hero .crumbs a,.rz-hero .crumbs span{color:rgba(255,255,255,.80)}.rz-hero .crumbs a:hover{color:#fff}.rz-hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28.8px}.rz-eyebrow{margin:0;font-size:9.6px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.74)}.rz-h1{margin:6.4px 0 0;font-size:clamp(24px,3.6vw,38.4px);line-height:1.02;letter-spacing:-.032em;color:#fff;font-weight:700}.rz-facts{display:flex;flex-wrap:wrap;gap:0;margin:14.4px 0 0;padding:0;list-style:none}.rz-facts li{padding:0 17.6px;border-left:1px solid rgba(255,255,255,.26)}.rz-facts li:first-child{padding-left:0;border-left:0}.rz-facts b{display:block;font-size:16.8px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.rz-facts span{display:block;margin-top:2.4px;font-size:10px;color:rgba(255,255,255,.72)}.rz-hero-acts{display:flex;flex-wrap:wrap;gap:8px}.rz-act{
  display:inline-flex;align-items:center;gap:7.2px;
  padding:8px 12.8px;border:1px solid rgba(255,255,255,.42);border-radius:799.2px;
  background:rgba(12,27,42,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  color:#fff;text-decoration:none;font-size:11.2px;font-weight:600;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease;
}.rz-act:hover{background:rgba(12,27,42,.62);border-color:#fff}.rz-act .fa-solid{font-size:10.4px;opacity:.9}.rz-status{margin:0 auto;padding-bottom:14.4px;font-size:11.2px;color:#FFE4D5}/* ---------- control bar ---------- */
.rz-bar{position:sticky;top:0;z-index:20;background:var(--paper,#fff);border-bottom:1px solid var(--rz-line)}.rz-bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9.6px 19.2px;min-height:var(--rz-bar-h)}.rz-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6.4px}.rz-f{
  display:inline-flex;align-items:center;gap:6.4px;
  padding:6.4px 11.2px;border:1px solid var(--rz-line);border-radius:799.2px;
  background:transparent;color:var(--rz-ink);
  font:600 11.2px/1 var(--sans);letter-spacing:-.005em;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}.rz-f span{font-size:10px;font-weight:600;color:var(--rz-muted);font-variant-numeric:tabular-nums}.rz-f:hover{border-color:#C9C6BD}.rz-f.is-on{background:var(--rz-navy);border-color:var(--rz-navy);color:#fff}.rz-f.is-on span{color:rgba(255,255,255,.72)}.rz-f:focus-visible{outline:2px solid var(--rz-navy);outline-offset:2px}.rz-note{font-size:10px;color:var(--rz-muted);margin-left:3.2px}.rz-bar-end{display:flex;align-items:center;gap:16px}.rz-sort select{
  border:1px solid var(--rz-line);border-radius:6.4px;background:transparent;
  padding:6.4px 8px;font:500 10.8px/1 var(--sans);color:var(--rz-ink);cursor:pointer;
}.rz-onway{display:inline-flex;align-items:center;gap:7.2px;font-size:10.8px;color:var(--rz-muted);cursor:default}.rz-onway b{font-weight:600;color:var(--rz-ink)}.rz-onway .fa-solid{font-size:10px;opacity:.75}/* ---------- split layout ---------- */
.rz-split{display:grid;gap:22.4px;padding-top:20.8px;padding-bottom:44.8px}@media (min-width:1000px){.rz-split{grid-template-columns:minmax(0,1fr) minmax(304px,46%);gap:28.8px;align-items:start}.rz-mapwrap{position:sticky;top:calc(var(--rz-bar-h) + 17.6px)}
}@media (min-width:1360px){.rz-split{grid-template-columns:minmax(0,1fr) 448px}}.rz-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12.8px}.rz-list-head h2{font-size:15.2px;font-weight:600;letter-spacing:-.015em;margin:0}.rz-count{margin:0;font-size:10.8px;color:var(--rz-muted);font-variant-numeric:tabular-nums}.rz-fine{margin:6.4px 0 0;font-size:10px;color:var(--rz-muted)}.rz-results{list-style:none;margin:14.4px 0 0;padding:0;border-top:1px solid var(--rz-line)}.rz-card{
  display:grid;grid-template-columns:27.2px minmax(0,1fr);gap:12.8px;
  padding:16px 11.2px 16px 8px;margin:0 -11.2px 0 -8px;
  border-bottom:1px solid var(--rz-line);border-radius:8px;
  transition:background .16s ease;
}.rz-card[hidden]{display:none}.rz-card.is-on,.rz-card:hover{background:#F6F5F1}.rz-card:focus-visible{outline:2px solid var(--rz-navy);outline-offset:-2px}.rz-n{
  display:grid;place-items:center;width:24px;height:24px;margin-top:2px;
  border:1px solid var(--rz-navy);border-radius:50%;
  font:600 11.2px/1 var(--sans);color:var(--rz-navy);font-variant-numeric:tabular-nums;
  transition:background .16s ease,color .16s ease;
}.rz-card.is-on .rz-n{background:var(--rz-navy);color:#fff}.rz-body{min-width:0}.rz-name{margin:0;font-size:14px;font-weight:600;letter-spacing:-.012em;line-height:1.25}.rz-name a{text-decoration:none;color:var(--rz-ink)}.rz-name a:hover{text-decoration:underline;text-underline-offset:2.4px}.rz-tags{display:flex;flex-wrap:wrap;gap:4.8px;margin:6.4px 0 0}.rz-tag{
  font:600 9.2px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;
  padding:4px 7.2px;border-radius:4px;background:#EFEDE7;color:#4A5059;
}.rz-tag-at{background:#FBEDE9;color:var(--rz-near)}.rz-where{display:flex;align-items:baseline;gap:6.4px;margin:8px 0 0;font-size:11.2px;color:var(--rz-muted);line-height:1.45}.rz-where .fa-solid{font-size:9.6px;color:#9AA0A7;position:relative;top:1px}.rz-where b{color:var(--rz-ink);font-weight:600;white-space:nowrap}.rz-acts{display:flex;flex-wrap:wrap;gap:6.4px 8px;margin:11.2px 0 0}.rz-go{
  display:inline-flex;align-items:center;gap:5.6px;
  padding:5.6px 10.4px;border:1px solid var(--rz-line);border-radius:799.2px;
  font:600 10.4px/1 var(--sans);color:var(--rz-ink);text-decoration:none;white-space:nowrap;
  transition:border-color .16s ease,background .16s ease;
}.rz-go:hover{border-color:var(--rz-navy);background:#fff}.rz-go .fa-solid{font-size:9.2px;color:var(--rz-muted)}.rz-empty{margin:22.4px 0;font-size:12px;color:var(--rz-muted)}.rz-empty button{border:0;background:0;padding:0;font:inherit;font-weight:600;color:var(--blue,#1B3A5B);text-decoration:underline;cursor:pointer}/* optional shop photograph: the card works with or without one */
.rz-shot{grid-column:2;margin:0 0 9.6px;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:#EFEDE7}.rz-shot img{width:100%;height:100%;object-fit:cover;display:block}/* ---------- map ---------- */
.rz-map{
  height:min(74vh,576px);min-height:336px;
  border:1px solid var(--rz-line);border-radius:11.2px;overflow:hidden;background:#EDEEE9;
}@media (max-width:999px){.rz-map{height:336px;min-height:0}}.rz-mapfallback{margin:0;padding:19.2px;font-size:11.2px;color:var(--rz-muted)}.rz-maplegend{display:flex;flex-wrap:wrap;align-items:center;gap:6.4px 11.2px;margin:8px 2px 0;font-size:10px;color:var(--rz-muted)}.rz-lg{width:8.8px;height:8.8px;border-radius:50%;display:inline-block}.rz-lg-m{background:var(--rz-navy);box-shadow:0 0 0 2.4px rgba(15,34,50,.18)}.rz-lg-s{background:var(--rz-near)}.rz-credit{margin-left:auto;font-size:9.2px;color:#8E939A}/* map markers */
/* MapLibre owns the marker element's transform, so the teardrop lives on an inner span. */
.rz-marker{border:0;background:0;padding:0;cursor:pointer;line-height:0}.rz-marker:focus-visible{outline:2px solid var(--rz-navy);outline-offset:2.4px;border-radius:50%}.rz-pin{
  display:grid;place-items:center;width:22.4px;height:22.4px;
  border-radius:50% 50% 50% 6.4px;transform:rotate(-45deg);
  background:var(--rz-near);border:1.5px solid #fff;
  box-shadow:0 2px 6.4px rgba(9,20,32,.35);
  transition:transform .14s ease,background .14s ease;
}.rz-pin b{transform:rotate(45deg);font:600 10px/1 var(--sans);color:#fff;font-variant-numeric:tabular-nums}.rz-marker.is-on .rz-pin{background:var(--rz-navy);transform:rotate(-45deg) scale(1.24)}.rz-marker.is-on{z-index:5}.rz-mtn{
  display:flex;align-items:center;gap:5.6px;padding:5.6px 9.6px 5.6px 7.2px;
  border-radius:799.2px;background:var(--rz-navy);color:#fff;
  font:600 10.4px/1 var(--sans);white-space:nowrap;
  box-shadow:0 2.4px 9.6px rgba(9,20,32,.4);border:1.5px solid rgba(255,255,255,.85);
}.rz-mtn .fa-solid{font-size:9.6px}.maplibregl-ctrl-group{border-radius:6.4px!important;box-shadow:0 1px 3.2px rgba(9,20,32,.22)!important}.rz-none,.rz-also{padding-top:28.8px;padding-bottom:38.4px}.rz-also h2{margin-bottom:9.6px}/* ---------- page header: the homepage's elements, nothing more ----------
   Logo plus the same three links the homepage carries, in the same order. No search
   field and no country links. Styled here so the homepage and the shared header
   partial are both left alone. */
.rz-top{background:var(--rz-paper);border-bottom:1px solid var(--rz-line)}.rz-top-in{display:flex;align-items:center;justify-content:space-between;gap:19.2px;min-height:54.4px}.rz-brand{display:flex;align-items:center;gap:8.8px;text-decoration:none;color:var(--rz-ink)}/* Same logo asset as the homepage, recoloured for a light header via a mask so the
   white artwork stays legible. The PNG itself is unchanged. */
.rz-mark{
  display:block;width:27.2px;height:14.4px;background-color:var(--rz-navy);
  -webkit-mask-image:url("/assets/img/lp-logo.png");mask-image:url("/assets/img/lp-logo.png");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}.rz-brand span{font-size:14.4px;font-weight:600;letter-spacing:-.012em;white-space:nowrap}.rz-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20.8px}.rz-nav a{font-size:11.6px;font-weight:500;letter-spacing:.004em;text-decoration:none;color:var(--rz-muted);white-space:nowrap;transition:color .16s ease}.rz-nav a:hover{color:var(--rz-ink)}.rz-nav a:focus-visible{outline:2px solid var(--rz-navy);outline-offset:2.4px;border-radius:2.4px}@media (max-width:620px){.rz-top-in{flex-direction:column;align-items:flex-start;gap:8px;padding-top:11.2px;padding-bottom:11.2px}.rz-nav{gap:6.4px 14.4px}.rz-nav a{font-size:10.8px}
}/* Marker -> listing reveal. Tapping a numbered map pin scrolls its listing into
   view and flashes it briefly so the correspondence is obvious. Pairs with
   reveal() in assets/js/resort-map.js. */
@keyframes rz-flash{
  0%   { background:#FFF3E6; box-shadow:0 0 0 2.4px rgba(228,115,71,.55); }
  100% { background:#F6F5F1; box-shadow:0 0 0 2.4px rgba(228,115,71,0); }
}.rz-card.is-flash{ animation: rz-flash 1.3s ease-out 1; }@media (prefers-reduced-motion: reduce){.rz-card.is-flash{ animation: none; box-shadow: 0 0 0 2.4px rgba(228,115,71,.55); }
}.rz-marker{ cursor: pointer; touch-action: manipulation; }/* ===========================================================================
   Phone and tablet gutter for the hero (<= 999px)

   .rz-hero-in is a .wrap, and its `padding: 18px 0 26px` shorthand wipes out
   the left/right gutter .wrap provides. Below 1000px that put the
   breadcrumb, the eyebrow, the h1 and the lede flush against the screen edge
   (measured at 375px: all four starting at x = 0). Scoped below 1000px so
   wider layouts are unchanged.
   =========================================================================== */
@media (max-width: 999px){
  .rz-hero-in { padding-left: var(--gutter); padding-right: var(--gutter); }
}/* Phone: the shop card's location line is a flex row holding the icon, the
   bolded distance and a bare address text node. nowrap left the address
   squeezed into whatever width survived the distance (measured at 375px:
   116px of usable width, wrapping "42 Snowflake Drive, Breckenridge, CO"
   into a four-line ragged column 81px tall). Letting it wrap puts the
   address on its own full-width line. */
@media (max-width: 640px){
  /* Only rows that actually carry a distance. Town cards have no <b>, just
     the pin and the address: letting those wrap orphaned the pin on a line
     of its own. */
  .rz-where:has(b) { flex-wrap: wrap; }

  /* The hero stats are a flex row that wrapped the third item onto its own
     line out of alignment with the first two (measured on the Breckenridge
     town page at 300px). A two-column grid keeps every number and label on
     the same baselines. */
  .rz-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12.8px 14.4px;
  }
  /* Keep the hairline, but between the two columns rather than after every
     item, so the first item of each row starts flush with the gutter. */
  .rz-facts li { margin: 0; padding: 0 0 0 14.4px; }
  .rz-facts li:nth-child(odd) { padding-left: 0; border-left: 0; }
}/* ===========================================================================
   Stacked-layout control bar breathing room (<= 999px)

   .rz-bar-in is a shared component: the resort page and the town page both
   render the filter pills, the sort select and the "Find rentals on your way"
   control through it. It carries `min-height: var(--rz-bar-h)` and no vertical
   padding, which is fine at desktop widths where the row is a single line
   centred in 62px. Once the pills wrap, the row grows past that min-height and
   the padding-free box puts the first pill flush against the hero.

   Measured on the Breckenridge resort page at 375px, before this rule:
     hero bottom -> first filter pill        0px
     sort / route controls -> results head  27px

   One rule on the shared component fixes both pages; .rz-split supplies the
   extra separation below the controls. Scoped below 1000px, which is where the
   two-column split gives way to the stacked layout, so desktop is untouched.
   =========================================================================== */
@media (max-width: 999px){
  .rz-bar-in {
    padding-top: 12.8px;
    padding-bottom: 12.8px;
    row-gap: 11.2px;
  }
  .rz-split { padding-top: 27.2px; }
}