/* KiwiSurf spots hub (/spots/ and /spots/pt/, tools/build_hub.py). On top of spot.css: same tokens, type, hero sky, CTA and footer. */
.hub-hero{padding:104px 24px 44px}
.hub-in{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.hub-hero .eyebrow{color:var(--kiwi-ink)}
.hub-hero h1{margin-top:10px}
.hub-hero .lede{max-width:640px}
.hub-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px}
.hub-now b{font:800 13px/18px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-700)}
.hub-hero .stale{max-width:640px}
.hub-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hub-jump a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(29,29,28,.1);font:700 15px/20px var(--sans);text-decoration:none;color:var(--ink-900)}
.hub-jump a:hover{background:#fff}
.hub-jump small{font-weight:600;color:var(--ink-600)}

.hub-reg{max-width:1200px;margin:0 auto;padding:56px 24px 0;scroll-margin-top:72px}
.hub-reg h2{font-size:34px;line-height:1.15;letter-spacing:-.02em}
.hub-reg h2 a{color:inherit;text-decoration:none}
.hub-reg h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hub-reglede{margin-top:8px;max-width:720px;font:400 16px/25px var(--sans);color:var(--ink-700)}
.hub-regmore{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--kiwi-ink);white-space:nowrap}
.hub-regmore svg{width:14px;height:14px}
.ksa-mine .hub-grid li{position:relative}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:16px;margin:20px 0 0;padding:0;list-style:none}
.hub-grid li{position:relative;display:flex}

/* a card: the whole card is the link to the guide */
.hc{position:relative;display:flex;flex-direction:column;width:100%;padding:18px 18px 16px;border-radius:18px;background:#fff;color:var(--ink-900);
  text-decoration:none;box-shadow:var(--shadow-border);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.hc:hover{transform:translateY(-2px);box-shadow:var(--shadow-border),var(--lift)}
.hc:focus-visible{outline:3px solid var(--kiwi);outline-offset:3px;border-radius:18px}
.hc.is-closed{background:#fffaf3}
.hc-reg{font:800 11px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600)}
.lv{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font:800 12px/1 var(--sans);white-space:nowrap}
.lv-yes{background:#e3f2d6;color:#1f6b35}
.lv-school{background:#dff0f4;color:#1a5f74}
.lv-inter{background:#fcefd6;color:#7e5210}
.lv-adv{background:#fbe2d6;color:#9a4119}
.hc-n{margin-top:8px;font-size:26px;line-height:1.15;letter-spacing:-.018em}
.hc-pl{margin-top:2px;font:600 14px/20px var(--sans);color:var(--ink-600)}
.hc-lv{display:flex;margin-top:12px}
.hc-day{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ink-200)}
.hc-l{font:800 11px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600)}
.hc-day .r5s{gap:2px}
.hc-day .r5n{margin-left:6px;font-size:13px}
.hc-shut{font:600 14px/20px var(--sans);color:#8a4b12}
.hc-shut b{font-weight:800}
.hc-win{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:6px;font:600 14px/20px var(--sans);color:var(--ink-700)}
.hc-win small{font:700 13px/20px var(--sans);color:var(--ink-600)}
.hc-win b{font-weight:800;color:var(--ink-900);font-variant-numeric:tabular-nums}
.hc-none{color:var(--ink-600)}
.hc-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;font:800 14px/20px var(--sans);color:var(--kiwi-ink)}
.hc-go svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.hc:hover .hc-go svg{transform:translateX(3px)}

.hub-notes{max-width:1200px;margin:40px auto 0;padding:0 24px;font:400 14px/22px var(--sans);color:var(--ink-600)}
.hub-notes p+p{margin-top:6px}
.hub-notes a{color:var(--ink-800)}

@media (max-width:640px){
  .hub-hero{padding:88px 16px 32px}
  .hub-reg{padding:40px 16px 0}
  .hub-reg h2{font-size:28px}
  .hub-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px}
  .hc{padding:16px 16px 14px}
  .hc-n{font-size:24px}
  .hub-notes{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){.hc,.hc-go svg{transition:none}.hc:hover{transform:none}}