/* ───────────────────────────────────────────────────────────────────────────
   Parks hub — a fast, server-rendered directory of the six parks and their tools.

   Static by design (no live API on this page), so it stays quick and indexable.
   Built in the house "Nightfall" theme (deep indigo paper, candlelight cream ink,
   gold accents) with a per-park accent colour set inline as `--accent`, so the six
   cards read as six distinct places rather than one repeated template. Name-led,
   not icon-led, to stay clear of the icon+heading+text card cliche.
   ─────────────────────────────────────────────────────────────────────────── */

.parkhub {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 20px) 0 var(--space-3xl);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.parkhub-head {
  max-width: 60rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.parkhub-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.parkhub-lede {
  font-family: var(--text);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: var(--space-md) 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}

/* ── Quick-start cross-nav (secondary, lighter than the park cards) ──────── */
.parkhub-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-lg);
}
.parkhub-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--paper-2);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.parkhub-quick-link:hover { border-color: var(--rule); background: var(--paper); transform: translateY(-1px); }
.parkhub-quick-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.parkhub-quick-l { font-family: var(--text); font-weight: 700; font-size: 14px; color: var(--ink); }
.parkhub-quick-s { font-family: var(--text); font-size: 13px; color: var(--muted); }
/* margin-left:auto pins the arrow to the right; it only takes effect once the link
   is full-width (mobile), so natural-width pills are unaffected. */
.parkhub-quick-link::after { content: "\2192"; color: var(--gold); font-size: 13px; margin-left: auto; }
@media (max-width: 560px) {
  .parkhub-quick { flex-direction: column; align-items: stretch; }
  .parkhub-quick-link { width: 100%; }
}
/* Comfortable touch targets on coarse pointers (phones/tablets). */
@media (pointer: coarse) {
  .parkhub-quick-link { padding-top: 11px; padding-bottom: 11px; }
  .parkhub-tool { padding-top: 11px; padding-bottom: 11px; }
}

/* ── Resort heading ─────────────────────────────────────────────────────── */
.parkhub-resort {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(30px, 4vw, 48px) 0 var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--hair);
}

/* ── Park grid + cards ──────────────────────────────────────────────────── */
/* Two columns so both resorts fill every row with uniform cards: Walt Disney
   World is four (two by two), Disneyland Resort is two (a single row). Collapses
   to one column on phones. */
.parkhub-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 560px) { .parkhub-grid { grid-template-columns: 1fr; } }
.parkhub-card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background:
    radial-gradient(135% 95% at 0% 0%, color-mix(in oklch, var(--accent) 11%, transparent), transparent 56%),
    var(--paper-2);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.parkhub-card:hover {
  border-color: color-mix(in oklch, var(--accent) 48%, var(--hair));
  transform: translateY(-3px);
}
.parkhub-card-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.parkhub-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 11px color-mix(in oklch, var(--accent) 60%, transparent);
}
.parkhub-desc {
  font-family: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}
/* Pinned to the card bottom so the primary action and chip rows line up across a
   row of cards even when the blurbs run different line counts. */
.parkhub-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--space-xs);
}
.parkhub-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 11px;
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent);
  color: var(--accent);
  font-family: var(--text);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.parkhub-primary:hover { background: color-mix(in oklch, var(--accent) 24%, transparent); }
.parkhub-arr { transition: transform 0.2s ease; }
.parkhub-primary:hover .parkhub-arr { transform: translateX(3px); }
.parkhub-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.parkhub-tool {
  font-family: var(--text);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 11px;
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: var(--paper);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.parkhub-tool:hover {
  border-color: color-mix(in oklch, var(--accent) 50%, var(--hair));
  color: var(--ink);
  background: var(--paper-2);
}
.parkhub-primary:focus-visible,
.parkhub-tool:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Foot ───────────────────────────────────────────────────────────────── */
.parkhub-foot {
  margin-top: clamp(32px, 5vw, 56px);
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .parkhub-quick-link,
  .parkhub-card,
  .parkhub-primary,
  .parkhub-arr,
  .parkhub-tool { transition: none; }
  .parkhub-quick-link:hover,
  .parkhub-card:hover { transform: none; }
}