/* Homepage. Builds on ds.css tokens (body.ds) and chrome.css. Classes are hm- prefixed.
   External file only: the CSP forbids inline styles in script and we keep markup free of them. */

/* Globe tooltip and fallback (globe.js creates the rest) */
.globe-tooltip{position:absolute;z-index:5;pointer-events:none;max-width:240px;padding:8px 12px;border-radius:10px;background:rgba(11,27,46,.95);color:#fff;font-size:13px;line-height:1.35;box-shadow:var(--shadow)}
.globe-tooltip[hidden]{display:none}
.globe-tooltip strong{display:block;font-size:14px}
.globe-tooltip small{display:block;color:var(--on-ink)}
.globe-tooltip span{display:block;color:#fff;font-weight:600}
.globe-fallback{margin:0;padding:24px;color:var(--on-ink);font-size:14px}
.globe-fallback a{color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.hm-wrap{max-width:1440px;margin:0 auto;padding:0 var(--s4)}
@media(min-width:900px){.hm-wrap{padding:0 40px}}

/* Hero: the globe fills the section, text sits on top */
.hm-hero{position:relative;background:#0a1628;color:#fff;height:min(700px,calc(100svh - 140px));min-height:500px;overflow:hidden}
/* Phone: text on top, globe below it (home.js sets the map padding), top 5 chips underneath */
.hm-hero #globe{position:absolute;inset:0 0 68px 0;width:auto;height:auto;border-radius:0}
.hm-over{position:relative;z-index:2;pointer-events:none;padding-top:var(--s5);height:100%}
.hm-over>*{pointer-events:auto}
.hm-hero h1{font-size:30px;font-weight:700;max-width:14ch;text-shadow:0 1px 12px rgba(10,22,40,.7)}
.hm-lead{display:none;color:var(--on-ink);margin:var(--s3) 0 0;max-width:34ch;font-size:18px}
.hm-controls{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.seg.dark{background:rgba(11,27,46,.72);border-color:rgba(255,255,255,.25)}
.seg.dark button{color:var(--on-ink);padding:0 10px;font-size:13px}
.seg.dark button[aria-pressed=true]{background:#fff;color:var(--ink)}
.seg.is-off{display:none}
.hm-pill{display:flex;align-items:center;max-width:100%;min-height:44px;margin-top:var(--s2);padding:0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);background:rgba(11,27,46,.72);color:#fff;font:500 14px var(--f-ui);cursor:pointer;text-align:left}
.hm-pill[hidden]{display:none}
.hm-pill b{color:var(--sunset);margin:0 4px 0 6px}
.hm-pill:hover{background:rgba(11,27,46,.9)}
.hm-top5{list-style:none;margin:0;padding:0;position:absolute;left:var(--s4);right:84px;bottom:var(--s4);display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none}
.hm-top5::-webkit-scrollbar{display:none}
.hm-top5 li{flex:none}
.hm-top5 :is(a,button){display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.25);background:rgba(11,27,46,.78);color:#fff;font:500 13px var(--f-ui);text-decoration:none;cursor:pointer;white-space:nowrap}
.hm-top5 b{color:var(--sunset);font-weight:700}
.hm-top5 :is(a,button):hover{background:rgba(11,27,46,.95)}
.hm-hint{display:none}

.hm-tools{position:absolute;z-index:3;right:var(--s4);bottom:124px;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2)}
.hm-zoom{display:flex;flex-direction:column;gap:var(--s2)}
.hm-zoom button,.hm-reset{height:44px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.3);background:rgba(11,27,46,.78);color:#fff;font:600 14px var(--f-ui);cursor:pointer}
.hm-zoom button{width:44px;font-size:20px}
.hm-zoom button:disabled{opacity:.4;cursor:default}
.hm-zoom button[aria-pressed=true]{background:#fff;color:var(--ink)}
.hm-reset{padding:0 14px}
.hm-reset[hidden]{display:none}

.hm-share-row{position:absolute;z-index:3;right:var(--s4);top:var(--s4);margin:0}
.hm-share-row .btn{background:rgba(11,27,46,.72)}

/* Resort card */
.hm-card{position:absolute;z-index:4;left:var(--s4);right:var(--s4);bottom:var(--s4);background:#fff;color:var(--ink);border-radius:var(--r-card);padding:var(--s3) var(--s4) var(--s4);box-shadow:var(--shadow);animation:hm-up .2s var(--ease)}
.hm-card[hidden]{display:none}
@keyframes hm-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hm-card .eyebrow{color:var(--slate);margin:0}
.hm-card h2{font-size:22px;padding-right:40px;margin:2px 0}
.hm-x{position:absolute;right:4px;top:2px;width:44px;height:44px;border:0;background:none;font-size:26px;line-height:1;color:var(--slate);cursor:pointer}
.hm-num{display:flex;flex-direction:column;align-items:flex-start;margin:var(--s1) 0 0;color:var(--slate);font-size:14px}
.hm-num b{font:700 44px/1 var(--f-display);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.hm-src{margin:var(--s1) 0 var(--s3);font-size:13px;color:var(--slate)}
.hm-btns{display:flex;gap:var(--s2)}
.hm-btns .btn{flex:1}
.hm-btns .btn.primary{color:var(--sunset-ink)}
.hm-btns .btn.following{background:#fff}
/* While a card is open on a phone, hide the rest of the overlay so the card never covers the headline */
@media(max-width:899px){
  .hm-hero.has-card .hm-over>*:not(h1){display:none}
  .hm-hero.has-card .hm-tools .hm-zoom,.hm-hero.has-card .hm-share-row{display:none}
  .hm-hero.has-card .hm-over h1{font-size:24px}
}

/* Library attribution button: 44px target and a visible focus ring */
#globe .maplibregl-ctrl-attrib.maplibregl-compact{min-height:44px;min-width:44px;margin:0;border-radius:var(--r-pill) 0 0 0}
#globe .maplibregl-ctrl-attrib-button{width:44px;height:44px;background-position:center;background-repeat:no-repeat;background-size:20px 20px}
#globe .maplibregl-ctrl-attrib-button:focus-visible{outline:3px solid #fff;outline-offset:-4px}

/* Sections */
.hm-sect{padding:var(--s7) 0 0}
.hm-sect h2{font-size:clamp(26px,4vw,38px);margin-bottom:var(--s2)}
:where(.hm-sect,.hm-note) a:not(.btn){color:var(--p5)}
.hm-sub{color:var(--slate);margin:0 0 var(--s5);max-width:60ch}
.hm-note{font-size:13px;color:var(--slate);margin:var(--s4) 0 0;max-width:80ch}
.hm-dumps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:700px){.hm-dumps{grid-template-columns:repeat(4,1fr)}}
.hm-dumps button,.hm-dumps a{display:block;width:100%;height:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);cursor:pointer;font:inherit;color:inherit;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s}
.hm-dumps :is(button,a):hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.hm-dumps .rk{font-size:12px;color:var(--slate);font-weight:600;letter-spacing:.06em}
.hm-dumps b{display:block;font:700 40px/1 var(--f-display);letter-spacing:-.03em;margin:var(--s2) 0 2px}
.hm-dumps b small{font:600 16px var(--f-display);color:var(--slate);margin-left:3px}
.hm-dumps .nm{display:block;font-weight:600;font-size:15px;line-height:1.25}
.hm-dumps .rg{display:block;font-size:13px;color:var(--slate)}
.hm-dumps .bar{display:block;height:5px;border-radius:3px;background:var(--p4);margin-top:var(--s3)}
.hm-briefs{display:grid;gap:var(--s3)}
@media(min-width:800px){.hm-briefs{grid-template-columns:repeat(3,1fr)}}
.hm-brief{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5)}
.hm-brief .eyebrow{color:var(--slate);margin:0}
.hm-brief h3{font-size:22px;margin:2px 0 var(--s2)}
.hm-brief p{font-size:15px;color:var(--slate);margin:0 0 var(--s3)}
.hm-brief a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;margin-right:var(--s3)}
.hm-links{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin:var(--s4) 0 0}
.hm-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.hm-band{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:var(--s6) var(--s5);display:grid;gap:var(--s3)}
.hm-band h2{color:#fff;max-width:16ch;font-size:clamp(28px,4.4vw,44px)}
.hm-band p{color:var(--on-ink);max-width:52ch;margin:0}
.hm-band a{color:#fff}
.hm-band form{display:grid;gap:var(--s3);max-width:520px}
.hm-field{width:100%;min-height:48px;border-radius:var(--r-pill);border:1px solid var(--line);padding:0 var(--s4);font:400 16px var(--f-ui);background:#fff;color:var(--ink)}
.hm-field[aria-invalid=true]{border:2px solid var(--sunset)}
.hm-consent{display:flex;gap:var(--s2);align-items:flex-start;color:var(--on-ink);font-size:14px}
.hm-consent input{width:20px;height:20px;margin-top:2px;flex:none}
.hm-band .btn.primary{justify-self:start}
#msg{min-height:1.5em;color:#fff;font-size:14px}

@media(min-width:900px){
  .hm-hero{height:clamp(640px,calc(100svh - 68px),860px)}
  .hm-hero #globe{inset:0}
  .hm-over{padding-top:var(--s7)}
  .hm-hero h1{font-size:clamp(40px,4.4vw,64px);max-width:12ch}
  .hm-lead{display:block}
  .hm-controls{margin-top:var(--s5)}
  .seg.dark button{padding:0 16px}
  .hm-top5{position:static;display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4);overflow:visible;width:max-content}
  .hm-hint{display:block;position:absolute;left:66%;bottom:56px;transform:translateX(-50%);color:var(--on-ink-2);font-size:13px;pointer-events:none;margin:0}
  .hm-card{right:auto;left:40px;bottom:var(--s6);width:380px;padding:var(--s4) var(--s5) var(--s5)}
  .hm-card h2{font-size:28px}
  .hm-num b{font-size:64px}
  .hm-tools{right:40px;bottom:64px}
  .hm-share-row{right:40px;top:var(--s5)}
  .hm-hero.has-card .hm-top5,.hm-hero.has-card .hm-hint,.hm-hero.has-card .hm-lead{display:none}
}
@media(prefers-reduced-motion:reduce){.hm-card{animation:none}.hm-dumps :is(button,a){transition:none}}