/*
  Slope360™ Page Styles
  =====================
  Page-specific styles for the Slope360 Ski Resort Explorer.

  Organization:
  1. UI / Explorer Shell
  2. SlopeDB Engine / Resort Cards
  3. SlopeDB Engine / Buttons & Comparison
  4. SlopeDB Engine / Card Refinements
  5. UI / Sticky & Responsive Controls
  6. UI / Help, Share & Unit Controls
  7. Editorial Content & Footer
  8. Loading States & Pagination

  Shared Next Outdoor Adventures site styling remains in:
  ../../assets/base.css
  ../../assets/nav-menu.css
  ../../assets/nav-mobile.css
*/

/* Slope360 Explorer UI — Frozen Version 1.
     Shared site styles remain loaded from the existing assets below. */

  /* =========================================================
   1. UI / EXPLORER SHELL
   Search, toolbar, filters, results header and general layout
   ========================================================= */
.toolbar{
    display:grid;
    grid-template-columns:
      minmax(260px,1fr)
      minmax(120px,145px)
      minmax(140px,180px)
      minmax(180px,230px)
      minmax(170px,200px);
    gap:12px;
    align-items:stretch;
    margin:18px 0 0;
  }

  .search{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid rgba(11,42,63,.10);
    border-radius:12px;
    padding:10px 12px;
    box-shadow:0 8px 24px rgba(11,42,63,.06);
  }

  .search input{
    border:0;
    outline:0;
    flex:1;
    background:transparent;
    font:inherit;
    color:var(--deep);
  }

  .filter,
  .sort{
    display:flex;
    min-width:0;
  }

  .filter select{
    min-width:0;
    width:100%;
  }

  #state-filter{
    min-width:0;
  }

  .toolbar select{
    width:100%;
    border:1px solid rgba(11,42,63,.10);
    border-radius:12px;
    padding:10px 12px;
    background:#fff;
    color:var(--deep);
    font:inherit;
    box-shadow:0 8px 24px rgba(11,42,63,.06);
  }

  .visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .explorer-layout{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:20px;
    align-items:start;
  }

  .explorer-filters{
    position:sticky;
    top:18px;
    padding:18px;
    background:#fff;
    border:1px solid rgba(11,42,63,.10);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(11,42,63,.06);
  }

  .explorer-sidebar{
    min-width:0;
  }

  .explorer-filters__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .explorer-filters h3,
  .explorer-results h3{
    margin:0;
    color:var(--deep);
  }

  .clear-filters{
    border:0;
    padding:4px;
    background:transparent;
    color:var(--brand);
    font-weight:800;
    cursor:pointer;
  }

  .explorer-filters fieldset{
    margin:16px 0 0;
    padding:16px 0 0;
    border:0;
    border-top:1px solid rgba(11,42,63,.10);
  }

  .explorer-filters legend{
    margin-bottom:8px;
    color:var(--deep);
    font-weight:800;
  }

  .explorer-filters label{
    display:flex;
    align-items:center;
    gap:9px;
    padding:6px 0;
    cursor:pointer;
  }

  .explorer-filters input[type="checkbox"]{
    width:17px;
    height:17px;
    accent-color:var(--brand);
  }

  .filter-toplink{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid rgba(40,126,183,.24);
    border-radius:10px;
    background:#eef8fc;
    color:#0d5f91;
    font-size:.83rem;
    font-weight:800;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    transition:background-color .16s ease, border-color .16s ease, color .16s ease;
    box-shadow:0 6px 16px rgba(11,42,63,.08);
  }

  .filter-toplink:hover{
    border-color:rgba(40,126,183,.42);
    background:#dceef8;
    color:#0b4f78;
  }

  .filter-toplink:focus-visible{
    outline:3px solid rgba(249,115,22,.30);
    outline-offset:2px;
  }

  .scale-legend{
    display:flex;
    align-items:center;
    gap:10px 18px;
    flex-wrap:wrap;
    margin-top:18px;
    padding:13px 15px;
    border:1px solid rgba(11,42,63,.10);
    border-radius:12px;
    background:#f7fbfd;
    color:#456278;
    font-size:.78rem;
    line-height:1.4;
  }

  .scale-legend strong{
    color:var(--deep);
    font-size:.80rem;
  }

  .scale-legend__item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
  }

  .scale-legend__mark{
    display:inline-grid;
    grid-template-columns:repeat(5, 3px);
    gap:2px;
    width:max-content;
  }

  .scale-legend__mark i{
    display:block;
    width:3px;
    height:10px;
    border-radius:2px;
    background:#0b2a3f;
  }

  @media (max-width:640px){
    .filter-toplink{
      position:static;
      box-shadow:none;
    }

    .scale-legend{
      align-items:flex-start;
      gap:8px 14px;
    }

    .scale-legend strong{
      flex-basis:100%;
    }
  }

  .explorer-results__header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
  }

  .explorer-results__header h3{
    margin-top:10px;
    font-size:1.7rem;
  }

  .result-count{
    margin:3px 0 0;
    color:var(--muted);
  }

  /* =========================================================
   2. SLOPEDB ENGINE / RESORT CARDS
   Resort-card layout, identity, stats, terrain and amenities
   ========================================================= */
.resort-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:64px;
  }

  .resort-grid > .resort-card + .resort-card{
    margin-top:2px;
  }

  .resort-card{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:0;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(11,42,63,.12);
    border-left:5px solid #2f7fb7;
    border-radius:14px;
    box-shadow:0 10px 26px rgba(11,42,63,.07);
  }

  .resort-card--alternate{
    border-left-color:#4a9b69;
  }

  .resort-card__identity{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
  }

  .resort-card__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:#2f7fb7;
    color:#fff;
    box-shadow:0 4px 12px rgba(11,42,63,.12);
  }

  .resort-card--alternate .resort-card__icon{
    background:#4a9b69;
  }

  .resort-card__icon svg,
  .inline-icon svg,
  .feature-icon svg{
    width:1em;
    height:1em;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .inline-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:6px;
    color:var(--brand);
    vertical-align:-.12em;
  }

  .feature-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--brand);
  }

  .resort-card__actions .btn{
    gap:7px;
  }

  .resort-card.is-selected{
    outline:2px solid rgba(11,42,63,.18);
  }

  .resort-card__top{
    position:relative;
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    padding:18px 22px;
    border-bottom:1px solid rgba(11,42,63,.10);
    background:#eef8fc;
  }

  .result-position-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#0b2a3f;
    color:#fff;
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    letter-spacing:-.02em;
    box-shadow:0 3px 9px rgba(11,42,63,.22);
  }

  .resort-card__ranking{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:8px;
    margin-left:auto;
    transform:translateX(-6px);
  }

  .resort-card h4{
    margin:0;
    color:var(--deep);
    font-size:1.45rem;
  }

  .resort-location{
    margin:5px 0 0;
    color:var(--muted);
    font-size:.95rem;
  }

  .country-flag{
    display:inline-flex;
    flex:0 0 auto;
    width:20px;
    height:14px;
    margin:0 6px 0 2px;
    overflow:hidden;
    border-radius:2px;
    box-shadow:0 0 0 1px rgba(11,42,63,.18);
    vertical-align:-.14em;
  }

  .country-flag svg{
    display:block;
    width:100%;
    height:100%;
  }

  .resort-summary{
    margin:0;
    color:var(--text);
    line-height:1.65;
  }

  .resort-card__body{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    gap:24px;
    padding:20px 22px;
  }

  .resort-card__main,
  .resort-card__side{
    min-width:0;
  }

  .resort-card__side{
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding-left:22px;
    border-left:1px solid rgba(11,42,63,.08);
  }

  .section-label{
    margin:0 0 10px;
    color:var(--deep);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .pass-pill{
    flex:0 0 auto;
    border-radius:999px;
    padding:6px 10px;
    background:#fff;
    border:1px solid rgba(11,42,63,.12);
    color:var(--deep);
    font-size:.75rem;
    font-weight:800;
    box-shadow:0 3px 10px rgba(11,42,63,.05);
  }

  .pass-pill[data-pass="Epic"]{
    background:#dbeafe;
    border-color:#60a5fa;
    color:#1d4ed8;
  }

  .pass-pill[data-pass="Ikon"]{
    background:#ffedd5;
    border-color:#fb923c;
    color:#c2410c;
  }

  .pass-pill[data-pass="Local"]{
    background:#dcfce7;
    border-color:#4ade80;
    color:#166534;
  }

  .resort-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
  }

  .resort-stat{
    padding:10px;
    border-radius:10px;
    background:#f4f9fc;
    border:1px solid rgba(11,42,63,.06);
  }

  .resort-stat span{
    display:block;
    color:var(--muted);
    font-size:.76rem;
  }

  .resort-stat strong{
    display:block;
    margin-top:2px;
    color:var(--deep);
  }

  /* Fixed-reference statistic scales: 10,000 acres, 5,000 ft vertical,
     15,000 ft summit elevation, and 600 in annual snowfall. */
  .resort-stat .stat-scale{
    display:grid;
    grid-template-columns:repeat(20,minmax(0,1fr));
    gap:2px;
    width:min(136px,100%);
    height:8px;
    margin:8px auto 0;
    overflow:hidden;
  }

  .resort-stat .stat-scale__segment{
    display:block;
    min-width:0;
    height:100%;
    background:#d7dee5;
    border-radius:1px;
  }

  .resort-stat .stat-scale__segment.is-filled{
    background:#0b2a3f;
  }

  .resort-stat .stat-scale[data-empty="true"]{
    visibility:hidden;
  }

  .terrain-bar{
    display:flex;
    height:14px;
    margin-top:17px;
    overflow:hidden;
    border-radius:999px;
    background:#e7edf1;
  }

  .terrain-section{
    margin-top:18px;
  }

  .terrain-section .section-label{
    margin-bottom:8px;
  }

  .terrain-bar__beginner{background:#4d9d6c}
  .terrain-bar__intermediate{background:#4c82aa}
  .terrain-bar__advanced{background:#485761}
  .terrain-bar__expert{background:#222d35}

  .terrain-not-provided{
    padding:12px 14px;
    border:1px solid rgba(11,42,63,.08);
    border-radius:10px;
    background:#f7fafc;
    color:var(--muted);
    font-size:.84rem;
  }

  .terrain-labels{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:7px;
    color:#28485f;
    font-size:.76rem;
    font-weight:600;
  }

  .terrain-official-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto;
    min-width:160px;
    margin-top:16px;
    padding:8px 14px;
    border-radius:10px;
    font-size:.9rem;
  }

  .feature-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:16px 0;
  }

  .feature-pill{
    border:1px solid rgba(11,42,63,.10);
    border-radius:999px;
    padding:5px 8px;
    background:#fff;
    font-size:.76rem;
  }

  .airport-panel{
    margin:18px 0 0;
    min-height:132px;
    padding:20px 18px;
    border:1px solid rgba(11,42,63,.08);
    background:#f7fafc;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .airport-title{
    margin:0 0 12px;
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    color:var(--brand);
    letter-spacing:.05em;
  }

  .airport-name{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--deep);
    font-weight:700;
    font-size:1rem;
    margin-bottom:7px;
  }

  .airport-meta{
    color:var(--muted);
    font-size:.82rem;
    margin-left:26px;
  }

  .resort-card__actions{
    display:flex;
    justify-content:flex-end;
    margin-top:auto;
    padding-top:22px;
  }

  .resort-card__actions .btn{
    width:100%;
    min-height:40px;
    padding:8px 12px;
    font-size:.92rem;
  }

  .compare-option{
    width:min(100%, 210px);
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:9px 12px;
    border:1px solid #0d5f91;
    border-radius:10px;
    background:#0d5f91;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(13,95,145,.18);
    transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  }

  .compare-option:hover{
    border-color:#083f63;
    background:#083f63;
    box-shadow:0 6px 14px rgba(8,63,99,.24);
    transform:translateY(-1px);
  }

  .compare-option:focus-within{
    outline:3px solid rgba(249,115,22,.30);
    outline-offset:2px;
  }

  .compare-option input{
    width:17px;
    height:17px;
    accent-color:var(--brand);
  }

  .resort-source-note{
    grid-column:1 / -1;
    display:flex;
    align-items:flex-start;
    gap:4px;
    padding-top:14px;
    border-top:1px solid rgba(11,42,63,.08);
    color:var(--muted);
    font-size:.76rem;
    line-height:1.45;
  }

  .resort-source-note .inline-icon{
    flex:0 0 auto;
    margin-top:2px;
  }

  .status-box{
    padding:20px;
    border:1px dashed rgba(11,42,63,.14);
    border-radius:12px;
    background:#f4f9fc;
    color:var(--muted);
    text-align:center;
  }

  .status-box.error{
    background:#fff5f5;
    color:#a44343;
    border-color:#e7bcbc;
  }

  /* =========================================================
   3. SLOPEDB ENGINE / BUTTONS & COMPARISON
   Compare controls, action buttons and comparison table
   ========================================================= */
.compare-panel{
    margin-top:34px;
    padding:22px;
    border:1px solid rgba(11,42,63,.10);
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 24px rgba(11,42,63,.06);
  }

  .compare-panel h3{
    margin:0;
    color:var(--deep);
    font-size:1.6rem;
  }

  .compare-panel__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:12px 0 8px;
  }

  .compare-panel__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
  }

  .print-comparison-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:9px 15px;
    border:1px solid rgba(11,42,63,.22);
    border-radius:10px;
    background:#f4f9fc;
    color:var(--deep);
    font:inherit;
    font-size:.9rem;
    font-weight:800;
    line-height:1.2;
    cursor:pointer;
  }

  .print-comparison-button svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
  }

  .print-comparison-button:hover{background:#e7f3f9}

  .print-comparison-button:focus-visible{
    outline:3px solid rgba(249,115,22,.38);
    outline-offset:2px;
  }

  .uncheck-selected-button{
    flex:0 0 auto;
    min-height:40px;
    padding:9px 15px;
    border:1px solid #0b2a3f;
    border-radius:10px;
    background:#0b2a3f;
    color:#fff;
    font:inherit;
    font-size:.9rem;
    font-weight:800;
    line-height:1.2;
    cursor:pointer;
    box-shadow:0 5px 14px rgba(11,42,63,.18);
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
  }

  .uncheck-selected-button:hover{
    border-color:#164d6b;
    background:#164d6b;
    transform:translateY(-1px);
  }

  .uncheck-selected-button:focus-visible{
    outline:3px solid rgba(249,115,22,.38);
    outline-offset:2px;
  }

  .compare-table-wrap{
    margin-top:18px;
    overflow-x:auto;
    border:1px solid rgba(11,42,63,.10);
    border-radius:12px;
  }

  .compare-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
  }

  .compare-table th,
  .compare-table td{
    padding:13px 14px;
    border-bottom:1px solid rgba(11,42,63,.10);
    text-align:left;
    vertical-align:top;
  }

  .compare-table th{
    background:#f4f9fc;
    color:var(--deep);
  }

  .compare-table tr:last-child td{
    border-bottom:0;
  }

  .compare-section-row th{
    padding:10px 14px;
    background:#e7f3f9;
    color:var(--deep);
    font-size:.84rem;
    letter-spacing:.045em;
    text-transform:uppercase;
  }

  .compare-section-icon,
  .compare-feature-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    color:var(--brand);
  }

  .compare-section-icon{margin-right:7px}
  .compare-feature-icon{margin-right:8px}

  .compare-section-icon svg,
  .compare-feature-icon svg{
    width:17px;
    height:17px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .compare-feature-label{white-space:nowrap}

  .compare-value{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  .compare-value--yes{color:#237a45;font-weight:800}
  .compare-value--no,
  .compare-value--unknown{color:#687985}
  .compare-value--unknown{font-style:italic}

  @media (max-width:860px){
    .explorer-layout{grid-template-columns:1fr}
    .explorer-filters{position:static}
    .toolbar{grid-template-columns:minmax(240px,1.5fr) minmax(120px,.75fr) minmax(140px,1fr)}
    .toolbar .filter:nth-of-type(4){grid-column:1 / span 2}
  }

  @media (max-width:520px){
    .compare-panel__header{align-items:stretch;flex-direction:column}
    .compare-panel__actions{display:grid;grid-template-columns:1fr 1fr}
    .print-comparison-button,
    .uncheck-selected-button{width:100%}
  }

  @media print{
    @page{size:landscape;margin:.45in}

    html,
    body.comparison-print-mode{background:#fff !important}

    body.comparison-print-mode > :not(#comparison-print-root){display:none !important}

    body.comparison-print-mode #comparison-print-root{
      display:block !important;
      width:100%;
      margin:0;
      padding:0;
      background:#fff;
    }

    body.comparison-print-mode #comparison-print-root .compare-panel{
      display:block !important;
      margin:0;
      padding:0;
      border:0;
      box-shadow:none;
    }

    body.comparison-print-mode #comparison-print-root .compare-panel__actions,
    body.comparison-print-mode #comparison-print-root .tag{display:none !important}

    body.comparison-print-mode #comparison-print-root .compare-panel__header{margin:0 0 12px}
    body.comparison-print-mode #comparison-print-root .compare-table-wrap{overflow:visible;margin-top:0}
    body.comparison-print-mode #comparison-print-root .compare-table{font-size:9pt}
    body.comparison-print-mode #comparison-print-root .compare-table th,
    body.comparison-print-mode #comparison-print-root .compare-table td{
      padding:6px 8px;
      background:#fff !important;
      print-color-adjust:exact;
      -webkit-print-color-adjust:exact;
    }
    body.comparison-print-mode #comparison-print-root .compare-section-row th{
      background:#fff !important;
      print-color-adjust:exact;
      -webkit-print-color-adjust:exact;
    }
  }

  @media (max-width:640px){
    .toolbar{display:grid;grid-template-columns:1fr}
    .search{min-width:0}
    .filter,.sort,.toolbar select{width:100%}
    .toolbar .filter:nth-of-type(4){grid-column:auto}
    .explorer-results__header{align-items:flex-start;flex-direction:column}
    .explorer-results__header .btn{width:100%}
    .resort-grid{grid-template-columns:1fr}
    .resort-card__body{grid-template-columns:1fr}
    .resort-card__side{padding-left:0;padding-top:18px;border-left:0;border-top:1px solid rgba(11,42,63,.08)}
    .resort-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .compare-option{width:100%;margin-left:0}
  }

  /* Variant 1 — larger statistic icons and full-width footer actions */
  .resort-card__body{
    grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);
    gap:24px;
    padding:20px 22px 0;
  }

  .resort-card__main,
  .resort-card__side{min-width:0}

  .resort-card__side{padding-left:22px}

  .resort-stats--visual{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-top:0;
  }

  .resort-stat--visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:145px;
    padding:15px 10px 13px;
    text-align:center;
    border-radius:11px;
    background:#f4f9fc;
  }

  .resort-stat__icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    margin-bottom:10px;
    color:var(--brand);
  }

  .resort-stat__icon svg{
    width:36px;
    height:36px;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .resort-stat__label{
    display:block;
    color:var(--muted);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.035em;
    line-height:1.25;
    text-transform:uppercase;
  }

  .resort-stat--visual strong{
    margin-top:7px;
    color:var(--deep);
    font-size:1.08rem;
    line-height:1.22;
  }

  .terrain-section{margin-top:22px}
  .terrain-bar{height:14px}
  .feature-list{align-content:flex-start;margin:12px 0 16px}
  .feature-pill{display:inline-flex;align-items:center;gap:5px}

  .airport-panel{
    margin-top:14px;
    min-height:108px;
    padding:16px;
  }

  .major-city-line{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:12px;
    padding:12px 14px;
    border:1px solid rgba(11,42,63,.08);
    border-radius:10px;
    background:#f7fafc;
  }

  .major-city-line__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    color:var(--brand);
  }

  .major-city-line__icon svg{
    width:22px;
    height:22px;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .major-city-line__label,
  .major-city-line__meta{
    display:block;
    color:var(--muted);
    font-size:.72rem;
    line-height:1.35;
  }

  .major-city-line__label{
    margin-bottom:3px;
    color:var(--brand);
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
  }

  .major-city-line__name{
    display:block;
    color:var(--deep);
    font-size:.9rem;
    line-height:1.3;
  }

  .major-city-line__meta{margin-top:3px}

  .resort-card__footer{
    grid-column:1 / -1;
    margin:20px -22px 0;
    padding:14px 22px 15px;
    background:#f7fbfd;
    border-top:1px solid rgba(11,42,63,.08);
  }

  .resort-card__actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(130px,190px));
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:0;
    padding:0 0 12px;
  }

  .compact-action,
  .resort-card__actions .btn,
  .compare-option{
    width:100%;
    min-width:0;
    min-height:38px;
    margin:0;
    padding:8px 14px;
    border-radius:9px;
    font-size:.84rem;
  }

  .resort-source-note{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
    padding:10px 0 0;
    border-top:1px solid rgba(11,42,63,.08);
    color:var(--muted);
    font-size:.71rem;
    line-height:1.45;
    text-align:center;
  }

  @media (max-width:760px){
    .resort-stats--visual{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  @media (max-width:640px){
    .resort-card__footer{margin:18px 0 0;padding-left:0;padding-right:0;background:#fff}
    .resort-card__actions{grid-template-columns:1fr}
    .compact-action,.resort-card__actions .btn,.compare-option{width:100%}
  }

  /* Balanced access cards and aligned actions */
  .access-cards-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
    align-items:stretch;
  }

  .access-card,
  .airport-panel,
  .major-city-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    min-height:136px;
    height:100%;
    margin:0;
    padding:15px 14px;
    border:1px solid rgba(11,42,63,.08);
    border-radius:11px;
    background:#f7fafc;
    box-sizing:border-box;
  }

  .access-card__title{
    margin:0 0 10px;
    color:var(--brand);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.045em;
    line-height:1.3;
    text-transform:uppercase;
    text-align:center;
  }

  .access-card__name{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    color:var(--deep);
    font-size:.82rem;
    line-height:1.3;
    text-align:left;
  }

  .access-card__name strong{min-width:0;overflow-wrap:anywhere}

  .access-card__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    color:var(--brand);
  }

  .access-card__icon svg{
    width:21px;
    height:21px;
    display:block;
    stroke:currentColor;
    fill:none;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .access-card__meta{
    margin-top:7px;
    color:var(--muted);
    font-size:.72rem;
    line-height:1.35;
    text-align:center;
  }

  .resort-card__actions{align-items:stretch}

  .compact-action,
  .resort-card__actions .btn,
  .compare-option{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    height:38px;
    min-height:38px;
    box-sizing:border-box;
    line-height:1;
    white-space:nowrap;
    font-weight:800;
  }

  .resort-card__actions .inline-icon{margin-right:0;vertical-align:0}
  .compare-option input{flex:0 0 auto;margin:0}

  @media (max-width:900px){
    .access-cards-row{grid-template-columns:1fr}
    .access-card,.airport-panel,.major-city-card{min-height:112px}
  }

  /* Final full-width access row */
  .access-cards-row{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
    margin:20px 0 0;
    padding-top:18px;
    border-top:1px solid rgba(11,42,63,.08);
  }

  .access-card,.airport-panel,.major-city-card{min-height:132px}
  .pass-pill{box-shadow:0 4px 12px rgba(11,42,63,.10)}

  @media (max-width:760px){
    .access-cards-row{grid-template-columns:1fr}
  }

  /* Final spacing refinement */
  .terrain-section{
    grid-column:1 / -1;
    margin:24px 0 0;
    padding-top:18px;
    border-top:1px solid rgba(11,42,63,.08);
  }

  .terrain-section .section-label{margin-bottom:10px}
  .terrain-bar{width:100%}
  .access-cards-row{margin-top:16px;padding-top:16px}
  .access-card,.airport-panel,.major-city-card{min-height:112px;padding-top:13px;padding-bottom:13px}
  .resort-card__footer{margin-top:10px;padding-top:10px}
  .resort-card__actions{padding-bottom:10px}

  @media (max-width:640px){
    .terrain-section{margin-top:20px;padding-top:16px}
    .access-cards-row{margin-top:14px;padding-top:14px}
  }

  /* Final stacked card layout */
  .resort-card__body{
    display:block;
    padding:18px 22px 0;
  }

  .resort-card__stats-section,
  .resort-services-section,
  .terrain-section,
  .access-cards-row,
  .resort-card__footer{
    width:100%;
    box-sizing:border-box;
  }

  .resort-card__stats-section{margin:0}

  .resort-stats--visual{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
    width:100%;
    margin:0;
  }

  .resort-stat--visual{
    min-height:124px;
    padding:14px 14px 12px;
  }

  .resort-stat__icon{width:38px;height:38px;margin-bottom:8px}
  .resort-stat__icon svg{width:34px;height:34px}
  .resort-stat--visual strong{font-size:1.12rem}

  .resort-services-section{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(11,42,63,.08);
  }

  .resort-services-section .section-label{margin-bottom:12px}

  .resort-services-section .feature-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px;
    margin:0;
  }

  .terrain-section{margin-top:18px;padding-top:16px}
  .terrain-bar{width:100%}
  .terrain-labels{justify-content:space-between}
  .access-cards-row{margin-top:14px;padding-top:14px}
  .access-card,.airport-panel,.major-city-card{min-height:100px;padding:11px 13px}
  .resort-card__footer{margin:8px -22px 0;padding:9px 22px 13px}
  .resort-card__actions{padding-bottom:8px}

  @media (max-width:760px){
    .resort-stats--visual{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  }

  @media (max-width:640px){
    .resort-card__body{padding-left:16px;padding-right:16px}
    .resort-card__footer{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
    .resort-services-section .feature-list{justify-content:center}
  }

/* =========================================================
   PAGE-SPECIFIC OVERRIDES
   These rules originally appeared after the shared site CSS.
   They are kept in their original order below.
   ========================================================= */

/* =========================================================
   4. SLOPEDB ENGINE / CARD REFINEMENTS
   Final card accents, pass badges, spacing and action styling
   ========================================================= */
.card.resort-card{
    --card-accent:#2f7fb7;
    --card-header-bg:#e5f4fb;
    padding:0;
    border-left-color:var(--card-accent);
    border-radius:16px;
  }

  .card.resort-card.resort-card--alternate{
    --card-accent:#4a9b69;
    --card-header-bg:#e7f5ec;
    border-left-color:var(--card-accent);
  }

  .card.resort-card .resort-card__top{
    margin:0;
    padding:18px 22px;
    background:var(--card-header-bg);
    border-radius:12px 12px 0 0;
  }

  .card.resort-card .resort-card__icon{background:var(--card-accent)}

  .card.resort-card .resort-card__body{
    padding-left:22px;
    padding-right:22px;
  }

  .card.resort-card .resort-card__stats-section,
  .card.resort-card .resort-services-section,
  .card.resort-card .terrain-section,
  .card.resort-card .access-cards-row{
    margin-left:0;
    margin-right:0;
    width:100%;
    box-sizing:border-box;
  }

  .card.resort-card .pass-pill{
    padding:7px 12px;
    border-width:1.5px;
    box-shadow:0 4px 12px rgba(11,42,63,.12);
    font-size:.78rem;
  }

  .card.resort-card .pass-pill[data-pass="Epic"]{
    background:#bfdbfe;
    border-color:#2563eb;
    color:#1e3a8a;
  }

  .card.resort-card .pass-pill[data-pass="Ikon"]{
    background:#fed7aa;
    border-color:#f97316;
    color:#9a3412;
  }

  .card.resort-card .pass-pill[data-pass="Local"]{
    background:#bbf7d0;
    border-color:#22c55e;
    color:#14532d;
  }

  .card.resort-card .resort-stat--visual,
  .card.resort-card .access-card,
  .card.resort-card .airport-panel,
  .card.resort-card .major-city-card,
  .card.resort-card .resort-card__footer,
  .card.resort-card .compact-action,
  .card.resort-card .compare-option{
    border-radius:12px;
  }

  .card.resort-card .resort-stat--visual{min-width:0}

  .card.resort-card .resort-card__footer{
    margin-left:-22px;
    margin-right:-22px;
    padding-left:22px;
    padding-right:22px;
    border-radius:0 0 12px 12px;
  }

  #compare-button{
    border:1px solid #ea580c;
    border-radius:12px;
    background:#f97316;
    color:#fff;
    box-shadow:0 6px 16px rgba(234,88,12,.20);
    font-weight:800;
  }

  #compare-button:hover:not(:disabled){
    background:#ea580c;
    border-color:#c2410c;
  }

  #compare-button:disabled{
    background:#fdba74;
    border-color:#fb923c;
    color:#7c2d12;
    opacity:1;
    cursor:not-allowed;
  }

  @media (max-width:640px){
    .card.resort-card .resort-card__top{padding-left:16px;padding-right:16px}
    .card.resort-card .resort-card__body{padding-left:16px;padding-right:16px}
    .card.resort-card .resort-card__footer{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  }

  .explorer-results__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 12px 280px;
  }

  .explorer-results__header h3{
    margin:0;
    font-size:1.7rem;
    line-height:1.15;
  }

  .explorer-results__header .result-count{margin:3px 0 0}

  .card.resort-card .resort-card__footer{background:#fff}
  .card.resort-card .resort-source-note{background:#fff}

  @media (max-width:860px){
    .explorer-results__header{margin-left:0}
  }

  @media (max-width:640px){
    .explorer-results__header{align-items:stretch;flex-direction:column;margin-bottom:12px}
    .explorer-results__header #compare-button{width:100%}
  }

  /* =========================================================
   5. UI / STICKY & RESPONSIVE CONTROLS
   Sticky filter/results behavior, mobile layout and branding
   ========================================================= */
:root{
    --slope360-sticky-top:8px;
    --slope360-filter-top:78px;
  }

  .explorer-results__header{
    position:sticky;
    top:var(--slope360-sticky-top);
    z-index:40;
    margin-bottom:12px;
    padding:8px 0;
    background:transparent;
    border:1px solid transparent;
    border-radius:12px;
    box-shadow:none;
    transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,padding .16s ease;
  }

  .explorer-results__header.is-stuck{
    padding-left:12px;
    padding-right:12px;
    background:rgba(238,249,253,.98);
    border-color:rgba(11,42,63,.10);
    box-shadow:0 8px 20px rgba(11,42,63,.10);
    backdrop-filter:blur(8px);
  }

  .explorer-sidebar{
    position:sticky;
    top:var(--slope360-filter-top);
    max-height:calc(100vh - var(--slope360-filter-top) - 12px);
    max-height:calc(100dvh - var(--slope360-filter-top) - 12px);
    display:flex;
    flex-direction:column;
  }

  .explorer-filters{
    position:static;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  @media (max-width:860px){
    .explorer-sidebar{position:static;max-height:none;display:block}
    .explorer-filters{overflow:visible;scrollbar-gutter:auto}
    .explorer-results__header{margin-left:0}
  }

  @media (max-width:640px){
    .explorer-results__header{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
      padding:7px 0;
    }

    .explorer-results__header h3{display:none}

    .explorer-results__header .result-count{
      margin:0;
      color:var(--deep);
      font-size:.9rem;
      font-weight:800;
      line-height:1.2;
    }

    .explorer-results__header #compare-button{
      flex:0 0 auto;
      width:auto;
      min-height:38px;
      padding:8px 11px;
      font-size:.82rem;
      white-space:nowrap;
    }

    .explorer-results__header.is-stuck{padding-left:8px;padding-right:8px}
  }

  .hero-brand-tags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-top:0;
    margin-bottom:14px;
  }

  .hero-brand-tags .tag{margin:0}

  .powered-by-label{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:6px 11px;
    border:1px solid rgba(11,42,63,.14);
    border-radius:12px;
    background:rgba(255,255,255,.68);
    color:#35556d;
    font-size:.78rem;
    line-height:1;
    letter-spacing:.01em;
    white-space:nowrap;
  }

  .powered-by-label strong{
    margin-left:4px;
    color:#12344d;
    font-weight:800;
  }

  .slope360-title{margin-bottom:4px}

  .slope360-tagline{
    margin:0 0 10px;
    color:var(--muted);
    font-size:clamp(.96rem, 1.7vw, 1.12rem);
    font-weight:600;
    line-height:1.35;
  }

  .filter-disclaimer-link{
    display:block;
    margin-top:7px;
    padding:7px 10px;
    color:var(--muted);
    font-size:.78rem;
    font-weight:700;
    text-align:center;
    text-decoration:underline;
    text-underline-offset:3px;
  }

  .filter-disclaimer-link:hover,
  .filter-disclaimer-link:focus-visible{color:var(--ink)}

  @media (max-width:480px){
    .hero-brand-tags{gap:7px;margin-top:0;margin-bottom:12px}
    .powered-by-label{min-height:30px;padding:5px 9px;font-size:.74rem}
  }

  .wrap.hero{padding-top:24px !important}

  @media (max-width:640px){
    .wrap.hero{padding-top:18px !important}
  }

  .explorer-results__header{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    align-items:end;
    gap:20px;
    margin-left:0;
  }

  .result-count--filters{
    margin:0 0 4px;
    color:var(--muted);
    font-size:.95rem;
    line-height:1.2;
  }

  .explorer-results__controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-width:0;
  }

  .explorer-results__controls h3{margin:0}

  @media (max-width:860px){
    .explorer-results__header{grid-template-columns:1fr;align-items:stretch;gap:8px}
    .explorer-results__controls{width:100%}
  }

  @media (max-width:640px){
    .explorer-results__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
    .result-count--filters{grid-column:1;margin:0;color:var(--deep);font-size:.9rem;font-weight:800}
    .explorer-results__controls{grid-column:2;width:auto}
    .explorer-results__controls h3{display:none}
  }

  .explorer-results__header{
    grid-template-columns:260px minmax(0,1fr);
    align-items:end;
  }

  .explorer-results__summary{min-width:0}

  .explorer-results__summary h3{
    margin:0 0 3px;
    font-size:1.7rem;
    line-height:1.1;
  }

  .explorer-results__controls{justify-content:flex-end}

  .terrain-bar__beginner{background:#4d9d6c}
  .terrain-bar__intermediate{background:#4c82aa}
  .terrain-bar__advanced{background:#202a31}
  .terrain-bar__expert{background:#05090c}

  .terrain-trail-counts{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 16px;
    margin-top:8px;
    color:#667d8f;
    font-size:.70rem;
    font-weight:500;
    line-height:1.35;
  }

  .terrain-trail-counts span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
  }

  .terrain-trail-counts__prefix{color:#7890a1}

  .trail-color{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:3px;
    flex:0 0 auto;
  }

  .trail-color--green{background:#4d9d6c}
  .trail-color--blue{background:#4c82aa}
  .trail-color--black{background:#11181d}

  @media (max-width:860px){
    .explorer-results__header{grid-template-columns:minmax(0,1fr) auto;align-items:center}
    .explorer-results__controls{width:auto}
  }

  @media (max-width:640px){
    .explorer-results__summary h3{display:none}
    .explorer-results__summary{grid-column:1}
    .terrain-trail-counts{gap:5px 11px;font-size:.68rem}
    .terrain-trail-counts__prefix{flex-basis:100%}
  }

  .terrain-trail-counts{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:0;
    margin-top:5px;
    color:#6b8192;
    font-size:.70rem;
    font-weight:500;
    line-height:1.25;
  }

  .terrain-trail-count{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-width:0;
    white-space:nowrap;
  }

  .terrain-trail-count--green{grid-column:1;justify-self:start}
  .terrain-trail-count--blue{grid-column:2;justify-self:center}
  .terrain-trail-count--black{grid-column:3 / 5;justify-self:center}

  @media (max-width:640px){
    .terrain-trail-counts{font-size:.67rem}
    .terrain-trail-count{gap:4px}
  }

  .explorer-results__controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
  }

  /* =========================================================
   6. UI / HELP, SHARE & UNIT CONTROLS
   How-to-use dialog, share button and measurement switcher
   ========================================================= */
.unit-switcher{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:42px;
    padding:4px 5px 4px 10px;
    border:1px solid rgba(11,42,63,.14);
    border-radius:12px;
    background:rgba(255,255,255,.78);
    box-shadow:0 6px 16px rgba(11,42,63,.07);
  }

  .unit-switcher__label{
    color:#456278;
    font-size:.75rem;
    font-weight:800;
    line-height:1;
  }

  .unit-switcher__options{
    display:inline-flex;
    align-items:center;
    padding:2px;
    border-radius:9px;
    background:#eaf4f9;
  }

  .unit-switcher__button{
    min-height:30px;
    padding:6px 9px;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:#34556c;
    font:inherit;
    font-size:.75rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
  }

  .unit-switcher__button:hover{background:rgba(255,255,255,.72)}

  .unit-switcher__button[aria-pressed="true"]{
    border-color:#287eb7;
    background:#dceef8;
    color:#0d4d76;
    box-shadow:0 2px 7px rgba(11,42,63,.10);
  }

  .unit-switcher__button:focus-visible{
    outline:3px solid rgba(249,115,22,.30);
    outline-offset:2px;
  }

  .share-results-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:9px 12px;
    border:1px solid rgba(11,42,63,.14);
    border-radius:12px;
    background:rgba(255,255,255,.78);
    color:#0d4d76;
    box-shadow:0 6px 16px rgba(11,42,63,.07);
    font:inherit;
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
  }

  .how-to-use-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 12px;
    border:1px solid rgba(40,126,183,.28);
    border-radius:12px;
    background:#fff;
    color:#0d5f91;
    font:inherit;
    font-size:.82rem;
    font-weight:800;
    line-height:1;
    cursor:pointer;
  }

  .how-to-use-button:hover{background:#e7f4fa;border-color:rgba(40,126,183,.42)}
  .how-to-use-button:focus-visible{outline:3px solid rgba(249,115,22,.30);outline-offset:2px}

  .slope360-help-dialog{
    width:min(760px,calc(100% - 32px));
    max-height:calc(100vh - 48px);
    padding:0;
    border:0;
    border-radius:16px;
    color:var(--deep);
    box-shadow:0 24px 70px rgba(11,42,63,.28);
  }

  .slope360-help-dialog::backdrop{background:rgba(7,28,42,.62)}
  .slope360-help-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid rgba(11,42,63,.10)}
  .slope360-help-dialog__header h2{margin:0;font-size:1.45rem}
  .slope360-help-dialog__close{width:38px;height:38px;border:0;border-radius:10px;background:#edf5f8;color:var(--deep);font-size:1.6rem;line-height:1;cursor:pointer}
  .slope360-help-dialog__close:hover{background:#dceef8}
  .slope360-help-dialog__close:focus-visible{outline:3px solid rgba(249,115,22,.30);outline-offset:2px}
  .slope360-help-dialog__body{padding:20px 22px 24px;overflow:auto}
  .slope360-help-dialog__body ol{margin:0;padding-left:22px}
  .slope360-help-dialog__body li{margin:0 0 14px;padding-left:5px;line-height:1.55}
  .slope360-help-dialog__body li:last-child{margin-bottom:0}
  .slope360-help-video{margin-top:24px;padding-top:20px;border-top:1px solid rgba(11,42,63,.10)}
  .slope360-help-video h3{margin:0 0 12px;font-size:1.08rem;color:var(--deep)}
  .slope360-help-video__frame{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border-radius:12px;background:#0b2a3f;box-shadow:0 10px 24px rgba(11,42,63,.16)}
  .slope360-help-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

  .share-results-button:hover{
    border-color:rgba(40,126,183,.42);
    background:#dceef8;
  }

  .share-results-button:focus-visible{
    outline:3px solid rgba(249,115,22,.30);
    outline-offset:2px;
  }

  .share-results-button svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
  }

  @media (max-width:640px){
    .explorer-results__header{grid-template-columns:1fr;gap:7px}
    .explorer-results__summary{grid-column:1}
    .explorer-results__controls{grid-column:1;width:100%;justify-content:space-between;flex-wrap:nowrap;gap:8px}
    .unit-switcher{min-height:38px;padding:3px}
    .share-results-button{min-height:38px;padding:7px 9px;font-size:.72rem}
    .how-to-use-button{min-height:38px;padding:7px 9px;font-size:.72rem}
    .unit-switcher__label{display:none}
    .unit-switcher__button{min-height:28px;padding:5px 7px;font-size:.70rem}
    .explorer-results__controls #compare-button{flex:0 1 auto;min-width:0;padding-left:9px;padding-right:9px;font-size:.76rem}
    .explorer-results__controls{justify-content:flex-start;flex-wrap:wrap}
  }

  /* Explanatory content */
  /* Frozen site-header branding: keep the established Next Outdoor Adventures size. */
  /* =========================================================
   7. EDITORIAL CONTENT & FOOTER
   Static Slope360 guidance, site branding and footer layout
   ========================================================= */
.brand-name{margin:0;font-size:1.25rem;line-height:1.1;font-weight:800;white-space:nowrap}
  .slope360-guide{padding:72px 0;background:#f7fbfd;border-top:1px solid rgba(11,42,63,.08)}
  .slope360-guide h2{margin:0 0 14px;color:var(--deep)}
  .slope360-guide h3{margin:28px 0 8px;color:var(--deep)}
  .slope360-guide p{width:100%;color:var(--muted);line-height:1.7}
  .slope360-guide__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .slope360-guide__links a{display:inline-flex;padding:9px 12px;border:1px solid rgba(40,126,183,.24);border-radius:10px;background:#fff;color:#0d5f91;font-weight:700;text-decoration:none}
  .slope360-guide__links a:hover,.slope360-guide__links a:focus-visible{background:#e7f4fa}
  .slope360-intro{width:100%;color:var(--muted)}
  .brand-home-link{color:inherit;text-decoration:none}
  .site-footer__content{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

  /* Keep the loading placeholder container available to app.js, but never display
     skeleton resort cards. Loading/error states are communicated by the status box. */
  #loading-placeholders{
    display:none !important;
  }

  /* =========================================================
   8. LOADING STATES & PAGINATION
   Loading/error presentation and Load More / Show All controls
   ========================================================= */
.resort-grid--loading[hidden],
  .results-pagination[hidden]{display:none}

  .resort-placeholder{
    min-height:360px;
    overflow:hidden;
    border:1px solid rgba(11,42,63,.10);
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 28px rgba(11,42,63,.08);
  }

  .resort-placeholder::before{
    content:"";
    display:block;
    height:100%;
    min-height:360px;
    background:linear-gradient(90deg,#edf3f6 25%,#f8fbfc 50%,#edf3f6 75%);
    background-size:200% 100%;
    animation:slope360-placeholder 1.35s ease-in-out infinite;
  }

  @keyframes slope360-placeholder{
    from{background-position:200% 0}
    to{background-position:-200% 0}
  }

  .results-pagination{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin:28px 0 6px;
  }

  .load-more-resorts{
    min-width:230px;
    border:1px solid var(--deep);
    border-radius:10px;
    padding:12px 20px;
    background:var(--deep);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer;
  }

  .load-more-resorts:hover,
  .load-more-resorts:focus-visible{background:#164d6c}

  .show-all-resorts{
    border:0;
    padding:5px 8px;
    background:transparent;
    color:#0d5f91;
    font:inherit;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
  }

  @media (max-width:640px){
    .load-more-resorts{width:100%}
  }

  @media (prefers-reduced-motion:reduce){
    .resort-placeholder::before{animation:none}
  }

  /* Responsive results header: aligned with results on desktop, full width when folded. */
  .explorer-results__header{
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
    align-items:center;
    gap:24px;
    margin-left:0;
  }

  .explorer-results__summary{
    display:block;
    min-width:0;
  }

  .explorer-results__summary h2{
    margin:0;
    color:var(--deep);
    font-size:1.7rem;
    line-height:1.15;
  }

  .explorer-results__summary .result-count{
    margin:4px 0 0;
    text-align:left;
  }

  .explorer-results__controls{
    width:100%;
    justify-content:space-between;
    flex-wrap:nowrap;
  }

  @media (max-width:860px){
    .explorer-results__header{
      grid-template-columns:1fr;
      align-items:stretch;
      gap:9px;
      margin-left:0;
    }

    .explorer-results__summary{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
    }

    .explorer-results__summary .result-count{
      margin:0;
      text-align:right;
    }

    .explorer-results__controls{
      width:100%;
      justify-content:space-between;
    }
  }

  @media (max-width:640px){
    .explorer-results__summary .result-count{
      margin:0;
      text-align:right;
      white-space:nowrap;
    }

    .explorer-results__controls{
      flex-wrap:nowrap;
      justify-content:space-between;
      gap:8px;
    }
  }

  @media (max-width:400px){
    .explorer-results__summary{
      flex-direction:column;
      align-items:flex-start;
      gap:3px;
    }

    .explorer-results__summary .result-count{
      text-align:left;
      white-space:normal;
    }
  }