/* Browse All page (/resorts/). Loaded only by resorts-index.njk via extraCss, so no other
   page is affected. Tokens follow the resort results page so the two read as one product.
   Font Awesome is imported here for the same reason it is on the resort page: the shared
   layout must stay untouched. */
/* The hero, the page header and the shared tokens all come from the ski-area results
   stylesheet, so this page uses that design system rather than a second copy of it.
   resort.css pulls in Font Awesome itself. resort.css is not modified. */
@import url("/assets/css/resort-80.css");

:root{
  --bz-navy:#0F2232;
  --bz-ink:#16202B;
  --bz-line:#E3E1DA;
  --bz-muted:#5C636B;
  --bz-accent:#C23B22;
  --bz-paper:#FFFFFF;
  --bz-green:#5E7A58;
}/* ---------- hero ----------
   .rz-hero and its children come from resort.css. Only the supporting sentence is new. */
.bz-lede{margin:11.2px 0 0;max-width:58ch;font-size:13.2px;line-height:1.5;color:rgba(255,255,255,.86)}/* ---------- mode bar ---------- */
.bz-bar{position:sticky;top:0;z-index:20;background:var(--bz-paper);border-bottom:1px solid var(--bz-line)}.bz-bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 19.2px;min-height:51.2px}/* Two shapes sitting side by side, same philosophy as the homepage search tabs:
   selection changes the fill, never the shape. */
.bz-seg{display:flex;align-items:center;gap:0;padding:3.2px;border:1px solid var(--bz-line);border-radius:799.2px}.bz-seg-b{
  display:inline-flex;align-items:center;justify-content:center;gap:7.2px;
  padding:7.2px 16px;border:0;border-radius:799.2px;background:transparent;
  font:600 11.6px/1 var(--sans);letter-spacing:-.005em;color:var(--bz-muted);
  cursor:pointer;white-space:nowrap;transition:background .16s ease,color .16s ease;
}.bz-seg-b .fa-solid{font-size:11.2px}.bz-seg-b[aria-selected="true"]{background:var(--bz-navy);color:#fff}@media (hover:hover){.bz-seg-b[aria-selected="false"]:hover{color:var(--bz-ink)}}.bz-seg-b:focus-visible{outline:2px solid var(--bz-navy);outline-offset:2.4px}/* ---------- map ---------- */
.bz-map-sec{border-bottom:1px solid var(--bz-line);background:#F3F2EC}.bz-map{position:relative;height:clamp(288px,54vh,496px);width:100%;overflow:hidden}.bz-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6.4px 17.6px;padding:8.8px 0 10.4px;font-size:10px;color:var(--bz-muted)}.bz-key{display:inline-flex;align-items:center;gap:6.4px;font-weight:600;color:var(--bz-ink)}.bz-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--bz-accent);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(15,34,50,.28)}.maplibregl-ctrl-group{border-radius:6.4px!important;box-shadow:0 1px 3.2px rgba(9,20,32,.22)!important}/* map markers: a small refined dot, not the numbered teardrop used for shops.
   MapLibre owns the marker element's own transform and opacity, so every visual state
   lives on the inner .bz-d node instead. */
.bz-marker{display:block;line-height:0;cursor:pointer}.bz-marker:focus-visible{outline:2px solid var(--bz-navy);outline-offset:2.4px;border-radius:50%}.bz-d{
  display:block;width:8.8px;height:8.8px;border-radius:50%;
  background:var(--bz-accent);border:1.5px solid #fff;
  box-shadow:0 1px 2.4px rgba(9,20,32,.4);
  transition:transform .14s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}.bz-marker:hover .bz-d,.bz-marker:focus-visible .bz-d{transform:scale(1.7);background:var(--bz-navy)}.bz-marker:hover{z-index:6}/* de-emphasis while one or more regions are expanded: the rest of North America stays
   visible, just quieter. Colour and size both change, so this never relies on colour
   alone. */
.bz-marker.is-dim .bz-d{
  background:#CBBCB2;border-color:rgba(255,255,255,.72);
  box-shadow:none;transform:scale(.78);
}.bz-marker.is-lit .bz-d{
  background:var(--bz-navy);border-color:#fff;
  box-shadow:0 1px 4px rgba(9,20,32,.55);transform:scale(1.18);
}.bz-tip{
  position:absolute;z-index:9;pointer-events:none;
  transform:translate(-50%,-100%);
  padding:5.6px 8.8px;border-radius:6.4px;background:var(--bz-navy);color:#fff;
  font:600 10px/1.35 var(--sans);white-space:nowrap;
  box-shadow:0 3.2px 11.2px rgba(9,20,32,.32);
}.bz-tip b{display:block;font-weight:600}.bz-tip span{display:block;font-weight:500;font-size:9.2px;color:rgba(255,255,255,.72)}/* ---------- browse panels ---------- */
.bz-panels{padding:27.2px 0 51.2px}.bz-country+.bz-country{margin-top:36.8px}.bz-country-h{
  margin:0 0 2px;padding-bottom:9.6px;border-bottom:1px solid var(--bz-navy);
  font-size:10.4px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bz-navy);
}.bz-regions{list-style:none;margin:0;padding:0}.bz-region{border-bottom:1px solid var(--bz-line);scroll-margin-top:60.8px}.bz-region-h{margin:0;font-size:inherit;font-weight:inherit}.bz-row{
  display:grid;grid-template-columns:1fr auto 16px;align-items:center;gap:12.8px;
  width:100%;padding:12px 2px;border:0;background:transparent;text-align:left;cursor:pointer;
  font:inherit;color:var(--bz-ink);
}.bz-region-name{font-size:14px;font-weight:600;letter-spacing:-.014em}.bz-count{font-size:10.8px;font-weight:600;color:var(--bz-muted);font-variant-numeric:tabular-nums}/* A drawn plus / minus. The glyph itself changes shape, so expanded state is never
   communicated by colour alone. */
.bz-ind{position:relative;display:block;width:11.2px;height:11.2px;margin-left:auto}.bz-ind::before,.bz-ind::after{
  content:"";position:absolute;left:0;top:50%;width:11.2px;height:1.6px;
  background:var(--bz-muted);transform:translateY(-50%);transition:transform .18s ease,opacity .18s ease;
}.bz-ind::after{transform:translateY(-50%) rotate(90deg)}.bz-row[aria-expanded="true"] .bz-ind::after{transform:translateY(-50%) rotate(90deg) scaleX(0);opacity:0}.bz-row[aria-expanded="true"] .bz-ind::before{background:var(--bz-accent)}.bz-row[aria-expanded="true"] .bz-region-name{color:var(--bz-navy)}@media (hover:hover){.bz-row:hover .bz-region-name{color:var(--bz-navy)}.bz-row:hover .bz-ind::before,.bz-row:hover .bz-ind::after{background:var(--bz-ink)}}.bz-row:focus-visible{outline:2px solid var(--bz-navy);outline-offset:-2px}.bz-drawer{padding:2px 2px 16px}.bz-items{
  list-style:none;margin:0;padding:0;
  columns:3;column-gap:27.2px;
}.bz-items li{
  display:flex;align-items:baseline;gap:8px;
  break-inside:avoid;padding:4px 0;font-size:11.6px;line-height:1.4;
}.bz-items a{color:var(--bz-ink);text-decoration:none;text-underline-offset:2.4px}.bz-items a:hover{text-decoration:underline;color:var(--bz-navy)}.bz-items .bz-n{
  margin-left:auto;padding-left:8px;font-size:9.6px;font-weight:600;
  color:var(--bz-muted);font-variant-numeric:tabular-nums;
}.bz-region-all{margin:12.8px 0 0;font-size:10.8px}.bz-region-all a{color:var(--bz-accent);font-weight:600;text-decoration:none}.bz-region-all a:hover{text-decoration:underline;text-underline-offset:2.4px}@media (max-width:980px){.bz-items{columns:2}
}@media (max-width:620px){.bz-bar-in{min-height:0;padding-top:9.6px;padding-bottom:9.6px;gap:6.4px}.bz-seg{width:100%}.bz-seg-b{flex:1 1 0;padding:8px 8px;font-size:10.8px}.bz-seg-b .fa-solid{font-size:10.4px}.bz-map{height:clamp(192px,36vh,256px)}.bz-items{columns:1}.bz-row{padding:11.2px 2px;gap:9.6px}.bz-region-name{font-size:13.2px}
}/* ===========================================================================
   Phone and tablet gutters (<= 999px)

   .bz-legend and .bz-panels are both .wrap elements, and .wrap supplies the
   page gutter through padding-left/right. Each then sets `padding` as a
   shorthand, which resets left and right to 0. Above 1000px the 1240px
   max-width hides it; below, the legend, the country headings and every
   state row ran flush to the screen edge (measured at 375px: "United States"
   and every .bz-region-name starting at x = 0-2).

   Restored below 1000px only, so layouts at and above 1000px are byte for
   byte what they were.
   =========================================================================== */
@media (max-width: 999px){
  .bz-legend { padding-left: var(--gutter); padding-right: var(--gutter); }
  .bz-panels { padding-left: var(--gutter); padding-right: var(--gutter); }
}