/* HejMap homepage: hero, search and the main ways in (index.html).
   Loads after css/v2/home-shared.css, which provides the search, stat pills and
   feature row also used by the trip planner (/trip). */

.v2-home { overflow-x: clip; }
/* Share a stacking context so the enlarged globe stays below links and search. */
.hub-hero { position: relative; padding: 48px 0 40px; text-align: center; }
.hub-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hub-sky .v2-floaters { position: absolute; inset: 0; opacity: 0.35; }
.hub-hero .v2-wrap { position: relative; }
.hub-hero .hub-hero-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.hub-hero-copy { position: relative; z-index: 3; min-width: 0; text-align: left; }
.hub-hero .hub-hero-copy .v2-tour-kicker, .hub-hero-copy .v2-stats { justify-content: flex-start; }
.hub-hero-copy .v2-hero-sub { text-align: left; }
.hub-hero .hub-hero-copy .v2-hero-sub, .hub-hero .hub-hero-copy .v2-search { margin-left: 0; margin-right: 0; }
.hub-hero-copy .hub-title { font-size: clamp(34px, 4.2vw, 68px); }
.hub-hero-copy .hub-title > span { text-wrap: initial; }
.hub-hero .v2-tour-kicker { justify-content: center; }
.hub-title { margin: 0; color: var(--text); font-size: clamp(38px, 6vw, 78px); font-weight: 750; letter-spacing: -0.045em; line-height: 1.02; }
.hub-title > span { display: block; text-wrap: balance; }
.hub-hero .v2-hero-sub { max-width: 52ch; margin: 20px auto 0; font-size: clamp(15px, 1.2vw, 18px); }
.hub-hero > .v2-wrap > * { animation: v2-rise 0.7s var(--ease) both; }
.hub-hero > .v2-wrap > :nth-child(2) { animation-delay: 0.05s; }
.hub-hero > .v2-wrap > :nth-child(3) { animation-delay: 0.1s; }
.hub-hero > .v2-wrap > :nth-child(n + 4) { animation-delay: 0.15s; }

/* ── The main ways in ── */
.hub-paths { position: relative; z-index: 2; padding-top: 6px; padding-bottom: 28px; }
.hub-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; }
/* Each card scales its type and spacing with its own width (cqi = 1% of it). */
.hub-cards > li { container-type: inline-size; animation: v2-rise 0.7s var(--ease) both; }
.hub-cards > li:nth-child(2) { animation-delay: 0.05s; }
.hub-cards > li:nth-child(3) { animation-delay: 0.1s; }
.hub-cards > li:nth-child(4) { animation-delay: 0.15s; }
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 240px;
  padding: clamp(16px, 8cqi, 22px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 13%, var(--surface)) 0%, var(--surface) 62%);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
/* A faint world map in the card's colour, drifting on hover. */
.hub-card::after {
  content: '';
  position: absolute;
  right: -36px;
  bottom: -18px;
  width: 270px;
  height: 160px;
  background: var(--tone);
  -webkit-mask: url(/assets/world-map.min.svg) center / contain no-repeat;
  mask: url(/assets/world-map.min.svg) center / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.5s var(--ease);
}
.hub-card:hover { border-color: color-mix(in srgb, var(--tone) 40%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.hub-card:hover::after { opacity: 0.2; transform: translateX(-8px); }
.hub-card:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; }
.hub-card-icon { display: grid; flex: none; place-items: center; width: clamp(42px, 20cqi, 52px); height: clamp(42px, 20cqi, 52px); border-radius: clamp(13px, 6cqi, 16px); background: var(--tone); color: #fff; box-shadow: 0 10px 22px -10px var(--tone); }
.hub-card-icon svg { width: 50%; height: 50%; }
.hub-card .v2-new { position: absolute; top: clamp(14px, 7cqi, 20px); right: clamp(14px, 7cqi, 20px); }
.hub-card h2 { margin: clamp(4px, 3cqi, 10px) 0 0; color: var(--text); font-size: clamp(18px, 8.6cqi, 22px); line-height: 1.2; font-weight: 750; letter-spacing: -0.02em; }
.hub-card p { position: relative; z-index: 1; max-width: 32ch; margin: 0; color: var(--text-2); font-size: clamp(13.5px, 6cqi, 15px); line-height: 1.5; }
.hub-card-go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--tone); font-size: clamp(13px, 5.6cqi, 14px); font-weight: 700; }
.hub-card-go svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.hub-card:hover .hub-card-go svg { transform: translateX(3px); }

/* Keep the feature row visible on small screens, unlike the trip planner. */
.hub-paths .hub-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Four cards: one row on desktop, two on tablets, one on phones. */
.hub-cards { gap: clamp(10px, 1.2vw, 16px); }
@media (max-width: 1060px) {
  .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .hub-paths .hub-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Laptops with short screens: a tighter hero, so the whole row of cards is
   on screen straight away instead of half below the fold. */
@media (min-width: 761px) and (max-height: 900px) {
  .hub-hero { padding-top: clamp(16px, 2.4vh, 32px); padding-bottom: clamp(12px, 2.2vh, 24px); }
  .hub-title { font-size: clamp(34px, min(5vw, 7vh), 72px); }
  .hub-hero .v2-hero-sub { margin-top: clamp(8px, 1.4vh, 18px); }
  .hub-hero .v2-search { margin-top: clamp(12px, 2.2vh, 26px); }
  .hub-hero .v2-stats { margin-top: clamp(8px, 1.3vh, 16px); }
  .hub-paths { padding-top: 0; }
  .hub-card { min-height: 0; gap: 6px; padding-top: clamp(14px, 6cqi, 20px); padding-bottom: clamp(14px, 6cqi, 20px); }
  .hub-card-icon { width: clamp(38px, 16cqi, 46px); height: clamp(38px, 16cqi, 46px); }
}
@media (min-width: 761px) and (max-height: 760px) {
  .hub-hero .v2-tour-kicker { display: none; }
}
@media (max-width: 760px) {
  .hub-hero .hub-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hub-hero-copy { text-align: center; }
  .hub-hero .hub-hero-copy .v2-tour-kicker, .hub-hero-copy .v2-stats { justify-content: center; }
  .hub-hero-copy .v2-hero-sub { text-align: center; }
  .hub-hero .hub-hero-copy .v2-hero-sub, .hub-hero .hub-hero-copy .v2-search { margin-left: auto; margin-right: auto; }
  .hub-hero-copy .hub-title { font-size: clamp(34px, 7vw, 54px); }
}

.hub-globe { position: relative; z-index: 1; min-width: 0; width: 100%; max-width: 600px; justify-self: center; }
.hub-globe-svg { position: relative; z-index: 0; display: block; width: 100%; aspect-ratio: 1; overflow: visible; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.hub-globe-svg:active { cursor: grabbing; }
.hub-globe-svg:focus, .hub-globe-svg a:focus { outline: none; }
.hub-globe:has(.hub-globe-svg:focus-visible) .hub-globe-hint { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.hub-globe-ocean-light { stop-color: #e3f4ff; }
.hub-globe-ocean-dark { stop-color: #a6cce9; }
[data-theme="dark"] .hub-globe-ocean-light { stop-color: #243f64; }
[data-theme="dark"] .hub-globe-ocean-dark { stop-color: #101e36; }
.hub-globe-ocean { fill: url(#homeGlobeOcean); stroke: var(--line-strong); stroke-width: 1; }
.hub-globe-country { fill: var(--country-color, var(--surface-2)); stroke: var(--surface); stroke-width: 0.65; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hub-globe-country:hover, .hub-globe-country.is-selected, .hub-globe-svg a:focus-visible .hub-globe-country { fill: var(--blue); stroke: var(--text); stroke-width: 1.1; }
.hub-globe-dot { stroke-width: 1; }
.hub-globe-shade, .hub-globe-texture { display: none; pointer-events: none; }

/* Illustrated atlas alternative; remove hub-globe--atlas to restore the explorer palette. */
.hub-globe--atlas .hub-globe-ocean-light { stop-color: #72bed2; }
.hub-globe--atlas .hub-globe-ocean-dark { stop-color: #2878a4; }
.hub-globe--atlas .hub-globe-ocean { stroke: #d0ebdc; stroke-opacity: 0.8; stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 12px #65b7cc35) drop-shadow(0 10px 22px #245a7030); }
.hub-globe--atlas .hub-globe-country { fill: #a1cc87; fill: color-mix(in srgb, var(--country-color, #a1cc87) 10%, #a1cc87); stroke: #54866a; stroke-width: 0.65; }
.hub-globe--atlas .hub-globe-country:hover, .hub-globe--atlas .hub-globe-country.is-selected, .hub-globe--atlas .hub-globe-svg a:focus-visible .hub-globe-country { fill: #f9c86c; stroke: #fff1bf; stroke-width: 1.2; }
.hub-globe--atlas .hub-globe-shade { display: block; fill: url(#homeGlobeShade); }
.hub-globe--atlas .hub-globe-texture { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hub-globe--atlas .hub-globe-svg[data-detail-motion="on"] .hub-globe-texture { display: block; }
.hub-globe--atlas .hub-globe-waves { stroke: #e6f1d9; stroke-opacity: 0.7; stroke-width: 1.35; }
.hub-globe--atlas .hub-globe-texture path { opacity: 0; }
.hub-globe--atlas .hub-globe-svg[data-detail-motion="on"] .hub-globe-waves path { animation: hub-wave-visit var(--detail-duration) ease-in-out var(--detail-delay) infinite; }
.hub-globe--atlas .hub-globe-svg[data-detail-motion="on"] .hub-globe-texture path { animation-play-state: var(--detail-play-state, paused); }
.hub-globe-greeting.v2-floaters { inset: 0 0 auto; aspect-ratio: 1; z-index: 1; overflow: clip; }
.hub-globe-greeting .v2-floater { width: clamp(76px, 24%, 118px); transform: translate(calc(-20% + 6px), calc(-96.875% - 8px)); transition-property: none; }
.hub-globe-greeting .v2-floater-bob { animation: none; }
.hub-globe-greeting .v2-floater:hover svg { scale: 1; }
.hub-globe-greeting .v2-floater svg { filter: drop-shadow(0 3px 5px #2a533b20); }
.hub-globe-greeting .v2-bubble-bg { fill: #e6f6f4; stroke: #9bcfc9; stroke-width: 1.5; }
.hub-globe-greeting .v2-bubble-text { fill: #28584c; }
@keyframes hub-wave-visit {
  0%, 55%, 92%, 100% { opacity: 0; }
  68%, 78% { opacity: 1; }
}

.hub-globe-controls { position: relative; z-index: 1; display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; padding: 0; border: 0; }
.hub-globe-controls button { height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.hub-globe-controls button { flex: none; width: 36px; font-size: 20px; cursor: pointer; }
.hub-globe-controls button svg { width: 16px; height: 16px; fill: currentColor; vertical-align: middle; }
.hub-globe-controls button:hover { background: var(--surface-2); }
.hub-globe-controls :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hub-globe-controls :disabled { opacity: 0.5; cursor: default; }
.hub-globe-hint { position: relative; z-index: 1; margin: 10px 0 0; text-align: center; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.hub-globe-status { position: absolute; top: 42%; left: 10%; right: 10%; margin: 0; text-align: center; color: var(--text-2); }
#homeGlobeRetry { position: absolute; top: 55%; left: 50%; transform: translateX(-50%); }
.hub-globe-card { position: absolute; z-index: 2; bottom: 76px; left: 50%; width: min(320px, calc(100% - 20px)); padding: 16px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-md); text-align: left; transform: translateX(-50%); box-sizing: border-box; }
.hub-globe-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 30px 12px 0; font-size: 20px; letter-spacing: -0.02em; }
.hub-globe-card p { margin: 6px 0; color: var(--text-2); font-size: 13px; }
.hub-globe-card a { display: inline-flex; margin-top: 10px; color: var(--blue); font-size: 13px; font-weight: 650; }
.hub-globe-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 20px; cursor: pointer; }
@media (min-width: 761px) and (max-height: 900px) {
  .hub-globe { max-width: min(100%, 52vh); }
}
@media (max-width: 899px) {
  .hub-hero { padding-top: 36px; padding-bottom: 28px; }
}
@media (max-width: 560px) {
  .hub-cards, .hub-paths .hub-feats { grid-template-columns: minmax(0, 1fr); }
  .hub-card { min-height: 0; padding: 18px; }
  .hub-card h2 { font-size: 20px; }
  .hub-hero .v2-stats { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-hero > .v2-wrap > *, .hub-cards > li { animation: none; }
  .hub-card, .hub-card::after { transition: none; }
}