/* ==========================================================================
   GoNagi Storefront — shared component styles (reference implementation)
   Requires ../tokens/tokens.css. Class prefix: .gn-  (no collisions with
   Booking Core). Mobile-first; breakpoints 768 / 1024 (see tokens.css).
   Component names match components.md.
   ========================================================================== */

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.gn {
  margin: 0;
  background: var(--gn-color-neutral);
  color: var(--gn-color-darkblue);
  font-family: var(--gn-font-family);
  font-size: var(--gn-text-body);
  line-height: var(--gn-leading-body);
  -webkit-font-smoothing: antialiased;
}
.gn :lang(ja), .gn:lang(ja) { font-family: var(--gn-font-family-ja); }
:where(.gn) img { max-width: 100%; display: block; }
:where(.gn) a { color: var(--gn-color-darkblue); }
:where(.gn) a:hover { color: var(--gn-color-slate); }
:where(.gn) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.gn) button { cursor: pointer; }
.gn :focus-visible { outline: var(--gn-focus-ring); outline-offset: var(--gn-focus-offset); }
.gn [hidden] { display: none !important; }
.gn-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gn-icon { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.gn-icon--sm { width: 16px; height: 16px; }
.gn-icon--lg { width: 28px; height: 28px; }

.gn-container { width: 100%; max-width: calc(var(--gn-container-max) + 2 * var(--gn-gutter-mobile)); margin: 0 auto; padding: 0 var(--gn-gutter-mobile); }
@media (min-width: 768px) { .gn-container { max-width: calc(var(--gn-container-max) + 2 * var(--gn-gutter-desktop)); padding: 0 var(--gn-gutter-desktop); } }

.gn-main { padding-bottom: var(--gn-space-16); }
.gn-section { padding-top: var(--gn-space-18); }
@media (min-width: 1024px) { .gn-section { padding-top: var(--gn-space-32); } }

/* ---- Typography helpers ------------------------------------------------- */
.gn-eyebrow { font-size: var(--gn-text-caption); font-weight: var(--gn-font-semibold); letter-spacing: var(--gn-tracking-eyebrow); color: var(--gn-color-slate); text-transform: uppercase; margin: 0; }
.gn-section-title { margin: 0; font-size: var(--gn-text-section-mobile); line-height: var(--gn-leading-section); font-weight: var(--gn-font-bold); }
.gn-page-title { margin: 0; font-size: var(--gn-text-title-mobile); line-height: var(--gn-leading-title); font-weight: var(--gn-font-bold); }
@media (min-width: 768px) {
  .gn-section-title { font-size: var(--gn-text-section); }
  .gn-page-title { font-size: var(--gn-text-title); }
}
.gn-heading { margin: 0; font-size: var(--gn-text-heading); line-height: var(--gn-leading-heading); font-weight: var(--gn-font-bold); }
.gn-h2 { margin: 0; font-size: var(--gn-text-h2); line-height: var(--gn-leading-h2); font-weight: var(--gn-font-medium); }
.gn-lead { margin: 0; font-size: var(--gn-text-body-long); line-height: var(--gn-leading-body-long); color: var(--gn-color-charcoal); }
.gn-muted { color: var(--gn-color-slate); }
.gn-small { font-size: var(--gn-text-sm); line-height: var(--gn-leading-sm); }
.gn-caption { font-size: var(--gn-text-caption); line-height: var(--gn-leading-caption); color: var(--gn-color-slate); }
.gn-section-head { display: flex; flex-direction: column; gap: var(--gn-space-2); margin-bottom: var(--gn-space-8); }
.gn-section-head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--gn-space-4); }
.gn-section-head--center { align-items: center; text-align: center; }
@media (min-width: 1024px) { .gn-section-head { margin-bottom: var(--gn-space-10); } }

/* ---- Buttons ------------------------------------------------------------ */
.gn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gn-space-2);
  min-height: var(--gn-touch-min); padding: 0 var(--gn-space-6);
  border: var(--gn-border-width) solid transparent; border-radius: var(--gn-radius-sm);
  font-size: var(--gn-text-sm); font-weight: var(--gn-font-semibold); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--gn-duration-fast) var(--gn-ease), box-shadow var(--gn-duration-fast) var(--gn-ease);
}
.gn-btn--lg { min-height: var(--gn-control-height); padding: 0 var(--gn-space-8); font-size: var(--gn-text-body); font-weight: var(--gn-font-bold); }
.gn-btn--md { min-height: var(--gn-control-height-sm); font-size: 15px; }
.gn-btn--block { width: 100%; }
/* Primary: lightgold fill + darkblue label. One per view. */
.gn a.gn-btn--primary, .gn-btn--primary { background: var(--gn-color-lightgold); color: var(--gn-color-darkblue); }
.gn-btn--primary:hover { background: var(--gn-color-lightgold-hover); color: var(--gn-color-darkblue); }
/* Strong: darkblue fill + white label */
.gn a.gn-btn--dark, .gn-btn--dark { background: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-btn--dark:hover { background: var(--gn-color-darkblue-hover); color: var(--gn-color-white); }
/* Secondary: white + blue outline */
.gn a.gn-btn--outline, .gn-btn--outline { background: var(--gn-color-white); border-color: var(--gn-color-blue); color: var(--gn-color-darkblue); }
.gn-btn--outline:hover { background: var(--gn-color-lightblue); color: var(--gn-color-darkblue); }
/* Text link button */
.gn a.gn-btn--text, .gn-btn--text { background: transparent; color: var(--gn-color-darkblue); padding: 0 var(--gn-space-2); }
.gn-btn--text:hover { text-decoration: underline; }
/* On dark grounds */
.gn a.gn-btn--on-dark, .gn-btn--on-dark { background: var(--gn-color-white); color: var(--gn-color-darkblue); }
.gn-btn:disabled, .gn-btn[aria-disabled="true"] { background: var(--gn-color-disabled-bg); color: var(--gn-color-disabled-text); border-color: transparent; cursor: not-allowed; }
.gn-btn[aria-busy="true"] { cursor: progress; }
.gn-spinner { width: 18px; height: 18px; border-radius: var(--gn-radius-circle); border: 2px solid currentColor; border-right-color: transparent; animation: gn-spin 0.8s linear infinite; }
@keyframes gn-spin { to { transform: rotate(360deg); } }
.gn-icon-btn { width: var(--gn-touch-min); height: var(--gn-touch-min); display: inline-flex; align-items: center; justify-content: center; border: var(--gn-border-width) solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); background: var(--gn-color-white); color: var(--gn-color-darkblue); }
.gn-icon-btn--bare { border-color: transparent; background: transparent; }
.gn-icon-btn:disabled { color: var(--gn-color-blue); border-color: var(--gn-color-lightblue); cursor: not-allowed; }

/* ---- Header / nav ------------------------------------------------------- */
.gn-header { position: relative; z-index: var(--gn-z-header); height: var(--gn-header-height-mobile); background: var(--gn-color-white); box-shadow: var(--gn-shadow-1); }
.gn-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gn-space-3) 0 var(--gn-space-5); }
.gn-header__nav, .gn-header__actions-desktop { display: none; }
.gn-header__logo img { height: 44px; width: auto; }
.gn-header__mobile { display: flex; align-items: center; gap: var(--gn-space-1); }
@media (min-width: 1024px) {
  .gn-header { height: var(--gn-header-height); }
  .gn-header__inner { padding: 0 var(--gn-space-20); }
  .gn-header__nav { display: flex; align-items: center; gap: var(--gn-space-8); flex: 1 1 0; height: 100%; }
  .gn-header__actions-desktop { display: flex; align-items: center; justify-content: flex-end; gap: var(--gn-space-6); flex: 1 1 0; }
  .gn-header__logo img { height: 60px; }
  .gn-header__mobile { display: none; }
}
.gn-nav-link { display: flex; align-items: center; gap: var(--gn-space-2); height: 100%; font-size: 15px; font-weight: var(--gn-font-medium); text-decoration: none; border-bottom: var(--gn-tab-indicator) solid transparent; padding-top: var(--gn-tab-indicator); }
.gn-nav-link[aria-current="page"] { border-bottom-color: var(--gn-color-blue); }
.gn-nav-link .gn-icon { width: 18px; height: 18px; }

/* Language switch (EN / 日本語) */
.gn-lang { display: flex; align-items: center; gap: var(--gn-space-1); }
.gn-lang button { border: 0; background: transparent; min-height: var(--gn-touch-min); padding: 0 var(--gn-space-2); font-size: var(--gn-text-xs); font-weight: var(--gn-font-medium); color: var(--gn-color-slate); }
.gn-lang button[aria-pressed="true"] { color: var(--gn-color-darkblue); font-weight: var(--gn-font-bold); }
.gn-lang__sep { color: var(--gn-color-slate); }

/* Mobile drawer */
.gn-drawer { position: fixed; inset: 0; z-index: var(--gn-z-drawer); background: var(--gn-color-white); display: flex; flex-direction: column; }
.gn-drawer__head { height: var(--gn-header-height-mobile); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gn-space-3) 0 var(--gn-space-5); box-shadow: var(--gn-shadow-1); }
.gn-drawer__nav { display: flex; flex-direction: column; padding: var(--gn-space-4) var(--gn-space-5); }
.gn-drawer__nav a { display: flex; align-items: center; gap: var(--gn-space-3); min-height: 56px; border-bottom: 1px solid var(--gn-color-lightblue); text-decoration: none; font-size: var(--gn-text-body); font-weight: var(--gn-font-medium); }
.gn-drawer__foot { margin-top: auto; padding: var(--gn-space-5); display: flex; flex-direction: column; gap: var(--gn-space-3); }

/* ---- Hero --------------------------------------------------------------- */
.gn-hero { position: relative; height: var(--gn-hero-height-mobile); overflow: hidden; background: var(--gn-color-darkblue); }
.gn-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; }
.gn-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,51,70,.82) 0%, rgba(33,51,70,.6) 50%, rgba(33,51,70,.1) 85%); }
.gn-hero__content { position: absolute; left: 36px; right: 36px; top: var(--gn-space-10); display: flex; flex-direction: column; gap: var(--gn-space-3); }
.gn-hero__eyebrow { font-size: 11px; font-weight: var(--gn-font-semibold); letter-spacing: 0.2em; color: var(--gn-color-gold); margin: 0; }
.gn-hero__light { font-size: var(--gn-text-hero-mobile); line-height: var(--gn-leading-hero); font-weight: var(--gn-font-light); color: var(--gn-color-white); margin: 0; }
.gn-hero__title { font-size: var(--gn-text-display-mobile); line-height: var(--gn-leading-display); font-weight: var(--gn-font-extrabold); letter-spacing: 0.02em; color: var(--gn-color-white); margin: 0; }
.gn-hero__text { font-size: 15px; line-height: 1.7; color: var(--gn-color-neutral); margin: var(--gn-space-1) 0 0; max-width: 560px; }
@media (min-width: 1024px) {
  .gn-hero { height: var(--gn-hero-height); }
  .gn-hero__img { object-position: center 62%; }
  .gn-hero__scrim { background: linear-gradient(90deg, rgba(33,51,70,.78) 0%, rgba(33,51,70,.55) 45%, rgba(33,51,70,0) 75%); }
  .gn-hero__content { left: 136px; right: auto; width: 900px; top: 104px; gap: 18px; }
  .gn-hero__eyebrow { font-size: var(--gn-text-xs); letter-spacing: var(--gn-tracking-eyebrow); }
  .gn-hero__light { font-size: var(--gn-text-hero); }
  .gn-hero__title { font-size: var(--gn-text-display); }
  .gn-hero__text { font-size: var(--gn-text-lead); line-height: var(--gn-leading-lead); margin-top: var(--gn-space-2); max-width: 600px; }
}

/* ---- Hero search panel (tabs + search bar) ------------------------------ */
.gn-search { position: relative; z-index: 2; margin: -64px var(--gn-space-3) 0; background: var(--gn-color-white); border-radius: var(--gn-radius-sm); box-shadow: var(--gn-shadow-2); padding: 0 var(--gn-space-5) var(--gn-space-6); }
@media (min-width: 1024px) { .gn-search { margin: -118px auto 0; max-width: 1280px; width: calc(100% - 160px); padding: 0 var(--gn-space-10) 36px; } }
.gn-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--gn-color-lightblue); margin-bottom: var(--gn-space-6); }
@media (min-width: 1024px) { .gn-tabs { display: flex; gap: var(--gn-space-10); margin-bottom: var(--gn-space-7); } }
.gn-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gn-space-1); min-height: 68px; border: 0; border-bottom: var(--gn-tab-indicator) solid transparent; margin-bottom: -1px; background: transparent; font-size: var(--gn-text-xs); font-weight: var(--gn-font-medium); color: var(--gn-color-darkblue); padding: var(--gn-space-1) var(--gn-space-1) 0; }
.gn-tab[aria-selected="true"] { border-bottom-color: var(--gn-color-gold); font-weight: var(--gn-font-bold); }
.gn-tab__long { display: none; }
@media (min-width: 1024px) { .gn-tab__long { display: inline; } .gn-tab__short { display: none; } }
@media (min-width: 1024px) { .gn-tab { flex-direction: row; gap: 10px; min-height: 72px; font-size: var(--gn-text-body); } }
.gn-searchbar { display: flex; flex-direction: column; gap: var(--gn-space-5); }
@media (min-width: 1024px) { .gn-searchbar { flex-direction: row; align-items: flex-end; } .gn-searchbar > .gn-field { flex: 1 1 0; } .gn-searchbar > .gn-field--narrow { flex: 0 0 160px; } }
.gn-segmented { display: flex; gap: var(--gn-space-3); margin-bottom: var(--gn-space-5); }
.gn-segmented > label { position: relative; }
.gn-segmented > legend { flex: 0 0 100%; }
fieldset.gn-segmented { flex-wrap: wrap; }
.gn-segmented input { position: absolute; opacity: 0; }
.gn-segmented > label > input + span { display: inline-flex; align-items: center; min-height: var(--gn-touch-min); padding: 0 var(--gn-space-5); border: 1px solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); font-size: var(--gn-text-sm); font-weight: var(--gn-font-semibold); background: var(--gn-color-white); cursor: pointer; }
.gn-segmented > label > input:checked + span { background: var(--gn-color-darkblue); border-color: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-segmented > label > input:focus-visible + span { outline: var(--gn-focus-ring); outline-offset: var(--gn-focus-offset); }

/* ---- Field (outlined, label sits in the top border) --------------------- */
.gn-field { position: relative; display: flex; flex-direction: column; gap: var(--gn-space-1); }
.gn-field__label { position: absolute; top: -9px; left: var(--gn-space-3); padding: 0 6px; background: var(--gn-color-white); font-size: var(--gn-text-caption); font-weight: var(--gn-font-medium); color: var(--gn-color-slate); line-height: 1.5; z-index: 1; pointer-events: none; }
.gn-field__control { width: 100%; min-height: 52px; padding: 0 var(--gn-space-4); border: var(--gn-border-width) solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); background: var(--gn-color-white); font-size: var(--gn-text-body); color: var(--gn-color-darkblue); text-align: left; appearance: none; -webkit-appearance: none; }
@media (min-width: 1024px) { .gn-field__control { min-height: var(--gn-control-height); padding: 0 18px; } }
textarea.gn-field__control { padding: var(--gn-space-4); min-height: 104px; line-height: var(--gn-leading-body-long); resize: vertical; }
select.gn-field__control { padding-right: var(--gn-space-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23213346' d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.gn-field__control::placeholder { color: var(--gn-color-slate); }
.gn-field__control:hover { border-color: var(--gn-color-darkblue); }
.gn-field__control:disabled { background: var(--gn-color-disabled-bg); color: var(--gn-color-disabled-text); border-color: var(--gn-color-lightblue); }
.gn-field__hint { font-size: var(--gn-text-caption); color: var(--gn-color-slate); margin: 0; }
.gn-field__error { display: none; align-items: center; gap: var(--gn-space-1); font-size: var(--gn-text-caption); font-weight: var(--gn-font-medium); color: var(--gn-color-error); margin: 0; }
.gn-field__control[aria-invalid="true"] { border: 2px solid var(--gn-color-error); }
.gn-field__control[aria-invalid="true"] ~ .gn-field__error { display: flex; }
.gn-field__control[aria-invalid="true"] ~ .gn-field__hint { display: none; }
.gn-field--narrow {}
.gn-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-6); }
@media (min-width: 768px) { .gn-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gn-checkbox { display: flex; align-items: flex-start; gap: var(--gn-space-3); min-height: var(--gn-touch-min); font-size: var(--gn-text-sm); cursor: pointer; padding-top: 10px; }
.gn-checkbox a { display: inline-block; padding: 14px 0; margin: -14px 0; }
.gn-checkbox input { width: 20px; height: 20px; margin: 0; accent-color: var(--gn-color-darkblue); flex-shrink: 0; }

/* ---- Card base ---------------------------------------------------------- */
.gn-card { background: var(--gn-color-white); border-radius: var(--gn-radius-sm); box-shadow: var(--gn-shadow-1); }
.gn-card--pad { padding: var(--gn-space-6); }
@media (min-width: 1024px) { .gn-card--pad { padding: var(--gn-space-10); } }
.gn-card--float { box-shadow: var(--gn-shadow-2); }
a.gn-card { text-decoration: none; color: var(--gn-color-darkblue); transition: box-shadow var(--gn-duration) var(--gn-ease); }
a.gn-card:hover { box-shadow: var(--gn-shadow-hover); color: var(--gn-color-darkblue); }
.gn-card__title { margin: 0; font-size: var(--gn-text-h2); font-weight: var(--gn-font-medium); }

/* ---- Feature strip ------------------------------------------------------ */
.gn-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gn-space-7) var(--gn-space-5); padding-top: var(--gn-space-12); }
@media (min-width: 1024px) { .gn-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gn-space-10); padding-top: var(--gn-space-18); } }
.gn-feature { display: flex; flex-direction: column; gap: var(--gn-space-2); }
.gn-feature .gn-icon { width: 24px; height: 24px; }
@media (min-width: 1024px) { .gn-feature .gn-icon { width: 28px; height: 28px; } }
.gn-feature__title { margin: 0; font-size: 15px; line-height: 1.4; font-weight: var(--gn-font-bold); }
.gn-feature__text { margin: 0; font-size: var(--gn-text-xs); line-height: 1.6; color: var(--gn-color-slate); }
@media (min-width: 1024px) { .gn-feature__title { font-size: var(--gn-text-card-title); } .gn-feature__text { font-size: var(--gn-text-sm); line-height: 1.8; } }

/* ---- Media (photo or placeholder) --------------------------------------- */
.gn-media { position: relative; background: var(--gn-color-lightblue); overflow: hidden; }
.gn-media img { width: 100%; height: 100%; object-fit: cover; }
.gn-media__ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--gn-space-3); font-size: 11px; letter-spacing: 0.04em; color: var(--gn-color-slate); }
.gn-media__ph::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: rgba(109, 138, 165, 0.25); }
.gn-media__ph span { position: relative; }

/* ---- Destination card --------------------------------------------------- */
.gn-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-6); }
@media (min-width: 768px) { .gn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gn-space-8); } }
.gn-dest { display: flex; flex-direction: column; overflow: hidden; }
.gn-dest .gn-media { height: 220px; }
@media (min-width: 1024px) { .gn-dest .gn-media { height: 420px; } }
.gn-dest__body { padding: var(--gn-space-5); display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 1024px) { .gn-dest__body { padding: var(--gn-space-7) var(--gn-space-8) var(--gn-space-8); gap: var(--gn-space-2); } }
.gn-dest__name { margin: 0; font-size: var(--gn-text-h2); font-weight: var(--gn-font-bold); }
@media (min-width: 1024px) { .gn-dest__name { font-size: 26px; } }
.gn-dest__text { margin: 0; font-size: var(--gn-text-sm); line-height: 1.7; color: var(--gn-color-charcoal); }
@media (min-width: 1024px) { .gn-dest__text { font-size: 15px; line-height: 1.8; } }
.gn-dest__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--gn-space-2); font-size: var(--gn-text-xs); }
.gn-dest__foot strong { font-size: var(--gn-text-sm); font-weight: var(--gn-font-semibold); }

/* ---- Tour card ---------------------------------------------------------- */
.gn-grid-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-5); }
@media (min-width: 600px) { .gn-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gn-grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gn-space-6); } .gn-grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gn-scroller { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gn-gutter-mobile)); padding-bottom: var(--gn-space-2); }
.gn-scroller > * { flex: 0 0 250px; scroll-snap-align: start; }
@media (min-width: 1024px) { .gn-scroller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gn-space-6); overflow: visible; margin-right: 0; } }
.gn-tour { display: flex; flex-direction: column; overflow: hidden; }
.gn-tour .gn-media { height: 170px; }
@media (min-width: 1024px) { .gn-tour .gn-media { height: 240px; } }
.gn-tour__body { padding: var(--gn-space-4); display: flex; flex-direction: column; gap: var(--gn-space-1); flex-grow: 1; }
@media (min-width: 1024px) { .gn-tour__body { padding: var(--gn-space-5) 22px var(--gn-space-6); gap: 6px; } }
.gn-tour__region { font-size: var(--gn-text-caption); font-weight: var(--gn-font-semibold); color: var(--gn-color-slate); }
.gn-tour__title { margin: 0; font-size: var(--gn-text-body); line-height: 1.4; font-weight: var(--gn-font-bold); }
@media (min-width: 1024px) { .gn-tour__title { font-size: var(--gn-text-card-title); line-height: var(--gn-leading-card-title); } }
.gn-tour__meta { font-size: var(--gn-text-caption); color: var(--gn-color-charcoal); margin-top: 6px; }
@media (min-width: 1024px) { .gn-tour__meta { font-size: var(--gn-text-xs); } }
.gn-tour__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: var(--gn-space-4); border-top: 1px solid var(--gn-color-lightblue); }
.gn-price { font-size: var(--gn-text-body); font-weight: var(--gn-font-bold); }
@media (min-width: 1024px) { .gn-price { font-size: var(--gn-text-card-title); } }
.gn-price__unit { font-size: var(--gn-text-caption); font-weight: var(--gn-font-regular); color: var(--gn-color-slate); }
.gn-badge { display: inline-flex; align-items: center; gap: var(--gn-space-1); padding: 6px var(--gn-space-3); border-radius: var(--gn-radius-sm); background: var(--gn-color-lightblue); font-size: var(--gn-text-xs); font-weight: var(--gn-font-medium); color: var(--gn-color-darkblue); }
.gn-badge--error { background: var(--gn-color-error-bg); color: var(--gn-color-error); }
.gn-badge--dark { background: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gn-card--soldout .gn-media { filter: grayscale(0.6); opacity: 0.75; }

/* ---- Route row ---------------------------------------------------------- */
.gn-routes { padding: var(--gn-space-1) var(--gn-space-5); display: flex; flex-direction: column; }
@media (min-width: 1024px) { .gn-routes { padding: var(--gn-space-2) var(--gn-space-8); } }
.gn-route { display: flex; align-items: center; justify-content: space-between; gap: var(--gn-space-3); padding: var(--gn-space-4) 0; border-bottom: 1px solid var(--gn-color-lightblue); text-decoration: none; color: var(--gn-color-darkblue); }
.gn-route:last-child { border-bottom: 0; }
@media (min-width: 1024px) { .gn-route { padding: 22px 0; } }
.gn-route__name { font-size: 15px; font-weight: var(--gn-font-semibold); }
@media (min-width: 1024px) { .gn-route__name { font-size: var(--gn-text-body); } }
.gn-route__meta { display: block; font-size: var(--gn-text-caption); color: var(--gn-color-slate); margin-top: 2px; }
@media (min-width: 1024px) { .gn-route__meta { font-size: var(--gn-text-xs); } }
.gn-route__price { font-size: 15px; font-weight: var(--gn-font-bold); white-space: nowrap; }

.gn-band { background: var(--gn-color-lightblue); padding: var(--gn-space-14) 0; margin-top: var(--gn-space-18); }
@media (min-width: 1024px) { .gn-band { padding: var(--gn-space-24) 0; margin-top: var(--gn-space-32); } }
.gn-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-6); align-items: center; }
@media (min-width: 1024px) { .gn-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gn-space-20); } }

/* ---- How it works (numbered steps) -------------------------------------- */
.gn-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 1024px) { .gn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gn-space-12); } }
.gn-steps li { display: flex; gap: var(--gn-space-4); align-items: flex-start; }
@media (min-width: 1024px) { .gn-steps li { flex-direction: column; align-items: center; text-align: center; gap: 14px; } }
.gn-num { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--gn-radius-circle); background: var(--gn-color-darkblue); color: var(--gn-color-gold); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: var(--gn-font-bold); }
@media (min-width: 1024px) { .gn-steps .gn-num { width: 56px; height: 56px; font-size: 22px; } }
.gn-steps h3 { margin: 0; font-size: 17px; font-weight: var(--gn-font-bold); }
.gn-steps p { margin: 2px 0 0; font-size: var(--gn-text-sm); line-height: 1.7; color: var(--gn-color-slate); max-width: 300px; }
@media (min-width: 1024px) { .gn-steps h3 { font-size: var(--gn-text-h2); } .gn-steps p { font-size: 15px; line-height: 1.8; } }

/* ---- LINE CTA block ----------------------------------------------------- */
.gn-cta { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--gn-space-4); padding: var(--gn-space-8) var(--gn-space-6); }
@media (min-width: 1024px) { .gn-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gn-space-12); padding: var(--gn-space-16) var(--gn-space-18); } }
.gn-cta__text { position: relative; display: flex; flex-direction: column; gap: var(--gn-space-3); max-width: 640px; }
.gn-cta__title { margin: 0; font-size: 22px; line-height: 1.45; font-weight: var(--gn-font-bold); }
@media (min-width: 1024px) { .gn-cta__title { font-size: var(--gn-text-title); } }
.gn-cta__actions { position: relative; display: flex; flex-direction: column; gap: var(--gn-space-3); }
@media (min-width: 1024px) { .gn-cta__actions { flex-direction: row; gap: var(--gn-space-4); } }
.gn-cta__sun { position: absolute; right: 0; bottom: 0; width: 260px; height: 140px; pointer-events: none; }
.gn-cta--compact { padding: var(--gn-space-6); }
@media (min-width: 1024px) { .gn-cta--compact { padding: var(--gn-space-7) var(--gn-space-8); flex-direction: row; } }

/* ---- Progress stepper (checkout) ---------------------------------------- */
.gn-progress { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--gn-space-2); }
.gn-progress li { display: flex; align-items: center; gap: var(--gn-space-2); }
.gn-progress__dot { width: 28px; height: 28px; border-radius: var(--gn-radius-circle); display: flex; align-items: center; justify-content: center; font-size: var(--gn-text-xs); font-weight: var(--gn-font-bold); border: 1px solid var(--gn-color-blue); background: var(--gn-color-white); color: var(--gn-color-slate); }
.gn-progress__label { font-size: var(--gn-text-caption); font-weight: var(--gn-font-medium); color: var(--gn-color-slate); }
.gn-progress__line { width: 16px; height: 1px; background: var(--gn-color-blue); }
.gn-progress li[aria-current="step"] .gn-progress__dot { background: var(--gn-color-darkblue); border-color: var(--gn-color-darkblue); color: var(--gn-color-gold); }
.gn-progress li[aria-current="step"] .gn-progress__label { color: var(--gn-color-darkblue); font-weight: var(--gn-font-bold); }
.gn-progress li[data-done] .gn-progress__dot { background: var(--gn-color-darkblue); border-color: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-progress li:not([aria-current="step"]) .gn-progress__label { display: none; }
@media (min-width: 768px) {
  .gn-progress { gap: var(--gn-space-4); }
  .gn-progress li:not([aria-current="step"]) .gn-progress__label { display: inline; }
  .gn-progress__dot { width: 32px; height: 32px; font-size: var(--gn-text-sm); }
  .gn-progress__label { font-size: var(--gn-text-sm); }
  .gn-progress__line { width: 40px; }
}
.gn-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--gn-text-xs); color: var(--gn-color-slate); margin: 0; padding: 0; list-style: none; }
.gn-crumbs a { color: var(--gn-color-slate); }
.gn-pagehead { display: flex; flex-direction: column; gap: var(--gn-space-4); padding: var(--gn-space-6) 0; }
@media (min-width: 1024px) { .gn-pagehead { flex-direction: row; justify-content: space-between; align-items: center; padding: var(--gn-space-10) 0 var(--gn-space-8); } }

/* ---- Layout with side panel -------------------------------------------- */
.gn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-8); align-items: start; }
@media (min-width: 1024px) { .gn-layout { grid-template-columns: minmax(0, 1fr) var(--gn-sidebar-width); gap: var(--gn-space-12); } .gn-layout__side { position: sticky; top: var(--gn-space-6); } }
.gn-stack { display: flex; flex-direction: column; gap: var(--gn-space-6); }
@media (min-width: 1024px) { .gn-stack { gap: var(--gn-space-8); } }

/* ---- Date strip --------------------------------------------------------- */
.gn-datestrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gn-date { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 1px solid var(--gn-color-lightblue); border-radius: var(--gn-radius-sm); background: var(--gn-color-white); color: var(--gn-color-darkblue); }
.gn-date__dow { font-size: 11px; }
.gn-date__day { font-size: 17px; font-weight: var(--gn-font-bold); }
.gn-date[aria-pressed="true"] { background: var(--gn-color-darkblue); border-color: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-date:disabled { background: var(--gn-color-disabled-bg); color: var(--gn-color-blue); cursor: not-allowed; }
.gn-date:disabled .gn-date__day { text-decoration: line-through; font-weight: var(--gn-font-medium); }

/* ---- Pax stepper -------------------------------------------------------- */
.gn-pax { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gn-color-lightblue); }
.gn-pax:last-child { border-bottom: 0; }
.gn-pax__label { display: flex; flex-direction: column; font-size: 15px; }
.gn-pax__controls { display: flex; align-items: center; gap: var(--gn-space-4); }
.gn-pax__value { min-width: 24px; text-align: center; font-size: 17px; font-weight: var(--gn-font-bold); }

/* ---- Radio card --------------------------------------------------------- */
.gn-radios { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }
.gn-radios legend, .gn-label-strong { font-size: 15px; font-weight: var(--gn-font-bold); margin-bottom: var(--gn-space-2); padding: 0; }
.gn-radio { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px var(--gn-space-4); min-height: var(--gn-touch-min); border: 1px solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); background: var(--gn-color-white); cursor: pointer; }
.gn-radio input { position: absolute; opacity: 0; }
.gn-radio__dot { width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--gn-radius-circle); border: 2px solid var(--gn-color-blue); background: var(--gn-color-white); }
.gn-radio__text { display: flex; flex-direction: column; gap: 2px; }
.gn-radio__title { font-size: 15px; font-weight: var(--gn-font-semibold); }
.gn-radio__note { font-size: var(--gn-text-caption); color: var(--gn-color-slate); }
.gn-radio__aside { margin-left: auto; font-weight: var(--gn-font-bold); white-space: nowrap; }
.gn-radio:has(input:checked) { border-color: var(--gn-color-darkblue); background: var(--gn-color-lightblue); }
.gn-radio:has(input:checked) .gn-radio__dot { border: 6px solid var(--gn-color-darkblue); }
.gn-radio:has(input:focus-visible) { outline: var(--gn-focus-ring); outline-offset: var(--gn-focus-offset); }
.gn-radio:has(input:disabled) { background: var(--gn-color-disabled-bg); border-color: var(--gn-color-lightblue); cursor: not-allowed; color: var(--gn-color-disabled-text); }

/* ---- Sticky booking panel (desktop side panel) + mobile sticky bar ------ */
.gn-booking { display: flex; flex-direction: column; gap: var(--gn-space-7); padding: var(--gn-space-6); }
@media (min-width: 1024px) { .gn-booking { padding: var(--gn-space-8); } }
.gn-summary-box { background: var(--gn-color-lightblue); border-radius: var(--gn-radius-sm); padding: var(--gn-space-4) 18px; display: flex; flex-direction: column; gap: var(--gn-space-1); }
.gn-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--gn-z-sticky); background: var(--gn-color-white); box-shadow: var(--gn-shadow-sticky); padding: var(--gn-space-3) var(--gn-space-5) calc(var(--gn-space-3) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--gn-space-4); }
.gn-stickybar__price { display: flex; flex-direction: column; font-size: var(--gn-text-caption); color: var(--gn-color-slate); }
.gn-stickybar__price strong { font-size: var(--gn-text-card-title); color: var(--gn-color-darkblue); }
@media (min-width: 1024px) { .gn-stickybar { display: none; } }
.gn-has-stickybar { padding-bottom: 96px; }
@media (min-width: 1024px) { .gn-has-stickybar { padding-bottom: 0; } }
/* On mobile the full booking panel sits in the page flow (anchor #book); the sticky bar scrolls to it. */

/* ---- Leg card + itinerary panel (transfers) ----------------------------- */
.gn-leg { padding: var(--gn-space-6); display: flex; flex-direction: column; gap: var(--gn-space-6); }
@media (min-width: 1024px) { .gn-leg { padding: var(--gn-space-8); } }
.gn-leg__head { display: flex; justify-content: space-between; align-items: center; gap: var(--gn-space-3); }
.gn-leg__num { display: inline-flex; align-items: center; gap: var(--gn-space-3); }
.gn-leg__route { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-5); }
@media (min-width: 768px) { .gn-leg__route { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: start; } .gn-leg__swap { margin-top: 6px; } }
.gn-leg__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-5); }
@media (min-width: 768px) { .gn-leg__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gn-leg--collapsed { padding: var(--gn-space-4) var(--gn-space-5); flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gn-space-3); }
.gn-leg-summary { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gn-leg-summary__route { font-size: 15px; font-weight: var(--gn-font-semibold); }
.gn-leg-summary__meta { font-size: var(--gn-text-caption); color: var(--gn-color-slate); }
.gn-itin { padding: var(--gn-space-6); display: flex; flex-direction: column; gap: var(--gn-space-5); }
@media (min-width: 1024px) { .gn-itin { padding: var(--gn-space-8); } }
.gn-itin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gn-itin__item { position: relative; padding: 0 0 var(--gn-space-5) var(--gn-space-8); }
.gn-itin__item::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: 0; width: 2px; background: var(--gn-color-lightblue); }
.gn-itin__item:last-child::before { display: none; }
.gn-itin__marker { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: var(--gn-radius-circle); background: var(--gn-color-darkblue); }
.gn-itin__item--draft .gn-itin__marker { background: var(--gn-color-white); border: 2px dashed var(--gn-color-blue); }
.gn-itin__route { font-size: 15px; font-weight: var(--gn-font-semibold); }
.gn-itin__meta { font-size: var(--gn-text-caption); color: var(--gn-color-slate); }
.gn-itin__price { font-size: var(--gn-text-sm); font-weight: var(--gn-font-bold); margin-top: 2px; }
.gn-totals { display: flex; flex-direction: column; gap: 10px; padding-top: var(--gn-space-5); border-top: 1px solid var(--gn-color-lightblue); font-size: var(--gn-text-sm); }
.gn-totals__row { display: flex; justify-content: space-between; gap: var(--gn-space-4); }
.gn-totals__row--total { font-size: var(--gn-text-body); font-weight: var(--gn-font-bold); }
.gn-totals__row--total span:last-child { font-size: 22px; }
.gn-totals__row--deposit { background: var(--gn-color-lightblue); margin: 0 calc(-1 * var(--gn-space-3)); padding: var(--gn-space-3); border-radius: var(--gn-radius-sm); font-weight: var(--gn-font-semibold); }

/* ---- Vehicle tier card -------------------------------------------------- */
.gn-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-4); }
@media (min-width: 768px) { .gn-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gn-tier { position: relative; display: flex; flex-direction: column; gap: var(--gn-space-2); padding: var(--gn-space-5); border: 1px solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); background: var(--gn-color-white); cursor: pointer; }
.gn-tier input { position: absolute; opacity: 0; }
.gn-tier__icon { width: 44px; height: 44px; border-radius: var(--gn-radius-sm); background: var(--gn-color-lightblue); display: flex; align-items: center; justify-content: center; }
.gn-tier__name { font-size: var(--gn-text-body); font-weight: var(--gn-font-bold); }
.gn-tier__cap { display: flex; gap: var(--gn-space-3); font-size: var(--gn-text-caption); color: var(--gn-color-slate); }
.gn-tier__cap span { display: inline-flex; align-items: center; gap: var(--gn-space-1); }
.gn-tier__price { margin-top: auto; padding-top: var(--gn-space-3); border-top: 1px solid var(--gn-color-lightblue); display: flex; flex-direction: column; }
.gn-tier__price strong { font-size: 22px; }
.gn-tier__check { position: absolute; top: var(--gn-space-4); right: var(--gn-space-4); width: 24px; height: 24px; border-radius: var(--gn-radius-circle); border: 2px solid var(--gn-color-blue); display: flex; align-items: center; justify-content: center; color: transparent; }
.gn-tier:has(input:checked) { border: 2px solid var(--gn-color-darkblue); background: var(--gn-color-lightblue); padding: 19px; }
.gn-tier:has(input:checked) .gn-tier__check { background: var(--gn-color-darkblue); border-color: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-tier:has(input:focus-visible) { outline: var(--gn-focus-ring); outline-offset: var(--gn-focus-offset); }

/* ---- Add-on row --------------------------------------------------------- */
.gn-addon { display: flex; align-items: center; gap: var(--gn-space-3); padding: var(--gn-space-3) 0; border-bottom: 1px solid var(--gn-color-lightblue); }
.gn-addon:last-child { border-bottom: 0; }
.gn-addon__text { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 15px; }
.gn-addon__price { font-size: var(--gn-text-sm); font-weight: var(--gn-font-semibold); white-space: nowrap; }

/* ---- Alerts, empty state, skeleton -------------------------------------- */
.gn-alert { display: flex; gap: var(--gn-space-3); align-items: flex-start; padding: var(--gn-space-4) 18px; border-radius: var(--gn-radius-sm); background: var(--gn-color-lightblue); font-size: var(--gn-text-sm); line-height: var(--gn-leading-sm); }
.gn-alert strong { display: block; font-size: 15px; }
.gn-alert--error { background: var(--gn-color-error-bg); color: var(--gn-color-error); }
.gn-alert--error strong { color: var(--gn-color-error); }
.gn-alert--success { background: var(--gn-color-success-bg); color: var(--gn-color-success); }
.gn-alert .gn-icon { margin-top: 2px; }
.gn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--gn-space-3); padding: var(--gn-space-12) var(--gn-space-6); }
.gn-empty__art { width: 120px; height: 72px; }
.gn-empty__title { margin: 0; font-size: var(--gn-text-h2); font-weight: var(--gn-font-bold); }
.gn-empty__text { margin: 0; max-width: 440px; font-size: 15px; line-height: 1.8; color: var(--gn-color-charcoal); }
.gn-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gn-space-3); margin-top: var(--gn-space-2); }
.gn-skel { background: var(--gn-color-skeleton); border-radius: var(--gn-radius-sm); position: relative; overflow: hidden; }
.gn-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: gn-shimmer 1.4s infinite; }
@keyframes gn-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .gn-skel::after, .gn-spinner { animation: none; } }
.gn-skel-line { height: 14px; }

/* ---- Definition list (summaries) ---------------------------------------- */
.gn-dl { margin: 0; display: flex; flex-direction: column; gap: var(--gn-space-3); font-size: 15px; }
.gn-dl > div { display: flex; justify-content: space-between; gap: var(--gn-space-4); }
.gn-dl dt { color: var(--gn-color-slate); }
.gn-dl dd { margin: 0; font-weight: var(--gn-font-semibold); text-align: right; }

/* ---- Listing (filters + results) ---------------------------------------- */
.gn-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-5); padding: var(--gn-space-6) var(--gn-space-5); }
@media (min-width: 1024px) { .gn-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; padding: var(--gn-space-7) var(--gn-space-8); } }
.gn-typetabs { display: flex; gap: var(--gn-space-2); overflow-x: auto; }
.gn-typetab { display: inline-flex; align-items: center; gap: var(--gn-space-2); min-height: var(--gn-touch-min); padding: 0 var(--gn-space-4); border: 1px solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); background: var(--gn-color-white); font-size: var(--gn-text-sm); font-weight: var(--gn-font-semibold); text-decoration: none; white-space: nowrap; }
.gn-typetab[aria-current="page"] { background: var(--gn-color-darkblue); border-color: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-results-head { display: flex; justify-content: space-between; align-items: center; gap: var(--gn-space-4); margin: var(--gn-space-8) 0 var(--gn-space-5); }
.gn-sort { display: flex; align-items: center; gap: var(--gn-space-2); font-size: var(--gn-text-sm); }
.gn-sort select { min-height: var(--gn-touch-min); border: 1px solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); background: var(--gn-color-white); padding: 0 var(--gn-space-3); }
.gn-pagination { display: flex; justify-content: center; gap: var(--gn-space-2); margin-top: var(--gn-space-10); }
.gn-pagination a, .gn-pagination span { min-width: var(--gn-touch-min); min-height: var(--gn-touch-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gn-radius-sm); text-decoration: none; font-weight: var(--gn-font-semibold); font-size: var(--gn-text-sm); }
.gn-pagination [aria-current="page"] { background: var(--gn-color-darkblue); color: var(--gn-color-white); }
.gn-stay-card .gn-media { height: 200px; }

/* ---- Confirmation ------------------------------------------------------- */
.gn-confirm { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gn-space-6); }
.gn-confirm__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--gn-space-4); }
.gn-confirm__mark { width: 72px; height: 72px; border-radius: var(--gn-radius-circle); background: var(--gn-color-darkblue); color: var(--gn-color-lightgold); display: flex; align-items: center; justify-content: center; }
.gn-confirm__mark .gn-icon { width: 34px; height: 34px; }
.gn-code { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--gn-space-3); align-items: baseline; padding: 14px var(--gn-space-6); background: var(--gn-color-lightblue); border-radius: var(--gn-radius-sm); }
.gn-code strong { font-size: var(--gn-text-h2); letter-spacing: 0.08em; }
.gn-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gn-space-4); }
.gn-next li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.7; }

/* ---- Footer ------------------------------------------------------------- */
.gn-footer { background: var(--gn-color-darkblue); color: var(--gn-color-white); padding: var(--gn-space-12) 0 var(--gn-space-8); }
@media (min-width: 1024px) { .gn-footer { padding: var(--gn-space-18) 0 var(--gn-space-10); } }
.gn-footer a { color: var(--gn-color-white); text-decoration: none; }
.gn-footer a:hover { color: var(--gn-color-lightgold); text-decoration: underline; }
.gn-footer__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gn-space-10); }
@media (min-width: 1024px) { .gn-footer__top { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)) 1.4fr; gap: var(--gn-space-12); } }
.gn-footer__brand { display: flex; flex-direction: column; gap: var(--gn-space-4); }
.gn-footer__brand img { height: 64px; width: auto; align-self: flex-start; }
.gn-footer__tag { font-size: var(--gn-text-sm); color: var(--gn-color-lightblue); margin: 0; }
.gn-footer__cols { display: contents; }
@media (max-width: 1023px) { .gn-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gn-space-8) var(--gn-space-6); } }
.gn-footer__col { display: flex; flex-direction: column; gap: var(--gn-space-3); }
.gn-footer__col h2 { margin: 0 0 var(--gn-space-1); font-size: var(--gn-text-caption); font-weight: var(--gn-font-semibold); letter-spacing: 0.12em; color: var(--gn-color-gold); text-transform: uppercase; }
.gn-footer__col a, .gn-footer__col p { font-size: var(--gn-text-sm); margin: 0; min-height: var(--gn-touch-min); display: inline-flex; align-items: center; }
@media (min-width: 1024px) { .gn-footer__col a, .gn-footer__col p { min-height: 28px; } }
.gn-footer__contact { display: flex; flex-direction: column; gap: var(--gn-space-3); font-size: var(--gn-text-sm); font-style: normal; }
.gn-footer__contact a, .gn-footer__contact > span { display: inline-flex; align-items: center; gap: var(--gn-space-2); min-height: var(--gn-touch-min); }
@media (min-width: 1024px) { .gn-footer__contact a, .gn-footer__contact > span { min-height: 28px; } }
.gn-footer__col { gap: 0; }
@media (min-width: 1024px) { .gn-footer__col { gap: var(--gn-space-3); } }
.gn-footer__contact .gn-icon { width: 16px; height: 16px; fill: var(--gn-color-gold); }
.gn-footer__bottom { margin-top: var(--gn-space-12); padding-top: var(--gn-space-6); border-top: 1px solid var(--gn-color-slate); display: flex; flex-direction: column; gap: var(--gn-space-4); font-size: var(--gn-text-caption); color: var(--gn-color-lightblue); }
@media (min-width: 1024px) { .gn-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.gn-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gn-space-2) var(--gn-space-6); }
.gn-footer__legal a { color: var(--gn-color-lightblue); min-height: var(--gn-touch-min); display: inline-flex; align-items: center; }
@media (min-width: 1024px) { .gn-footer__legal a { min-height: 0; } }
.gn-footer .gn-lang button { color: var(--gn-color-lightblue); }
.gn-footer .gn-lang button[aria-pressed="true"] { color: var(--gn-color-white); }
.gn-footer .gn-lang__sep { color: var(--gn-color-lightblue); }

/* ---- Demo-only (DO NOT PORT) -------------------------------------------- */
.gn-demo { position: fixed; right: 12px; bottom: 12px; z-index: 99; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100vw - 24px); padding: 8px 10px; background: #111; color: #fff; border-radius: 6px; font: 12px/1.3 system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.gn-demo button { border: 1px solid #555; background: #222; color: #fff; border-radius: 4px; padding: 4px 8px; font: inherit; cursor: pointer; }
.gn-demo button[aria-pressed="true"] { background: #fff; color: #111; }
.gn-has-stickybar .gn-demo { bottom: 96px; }

/* Private / Shared switch inside a leg (pure CSS; backend renders the list for the chosen type) */
.gn-leg:has(input[value="shared"]:checked) .gn-tiers--private { display: none; }
.gn-leg:not(:has(input[value="shared"]:checked)) .gn-tiers--shared { display: none; }
@media (max-width: 767px) { .gn-sort > span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }