/* ════════════════════════════════════════════════════════════
   Barcelona Explorer — Styles
   Palette: warm stone, terracotta, deep blue, off-white
   ════════════════════════════════════════════════════════════ */

:root {
  /* Core palette — Tour & Wander
     Editorial muted red + deep navy + cream. NOT patriotic — no pure flag-red,
     no flag-stripe layouts. Red is for accents/CTAs, blue for secondary
     borders/links, cream is the base. */
  --stone:        #F5F0E8;
  --stone-dark:   #E8E0D0;

  --brand-red:        #B23A48;   /* primary accent — muted oxblood */
  --brand-red-light:  #D85460;   /* hover                          */
  --brand-red-pale:   #FCEEEF;   /* alert tint                     */

  /* Legacy aliases — kept so any direct ref still resolves to brand red.
     New code should use --brand-red-* or --accent. */
  --terracotta:       var(--brand-red);
  --terracotta-light: var(--brand-red-light);

  --deep-blue:        #1B3A5C;
  --deep-blue-light:  #2A5580;

  --ink:          #1A1A1A;
  --ink-light:    #4A4A4A;
  --ink-muted:    #8A8A80;
  --white:        #FFFFFF;
  --off-white:    #FAFAF6;

  /* Semantic */
  --bg:           var(--off-white);
  --surface:      var(--white);
  --border:       #E0DBD0;
  --border-light: #EEEAE2;
  --accent:       var(--brand-red);
  --accent-hover: var(--brand-red-light);
  --focus-ring:   var(--deep-blue);

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* Type */
  --font-body:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  /* Layout */
  --header-h: 76px;
  --toolbar-h: 140px;
  --mobile-toggle-h: 56px;
  --sidebar-w: 440px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-normal: 250ms;
  --t-slow: 400ms;
}

/* ─── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
/* Map-app layouts (explorer + itinerary) need a fixed viewport so the map
   fills the screen and the sidebar scrolls internally. All other pages
   (home, country, guide, tickets, about, countries) scroll naturally. */
body[data-page="explorer"],
body[data-page="itinerary"],
body.itinerary-page {
  overflow: hidden;
  height: 100dvh;
}
ul { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, select { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Focus ────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ─── Header ───────────────────────────────────────────────── */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--deep-blue);
  color: var(--white);
  display: flex;
  align-items: center;
}
.header-inner {
  width: 100%; max-width: 100%;
  padding: 0 var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}
.brand-link {
  color: inherit;
  text-decoration: none;
}
.brand-link:hover {
  text-decoration: none;
}
.brand-accent {
  color: var(--terracotta-light);
}
.brand-tagline {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.header-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.header-link:hover,
.header-link.active {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  text-decoration: none;
}

.btn-reset-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.1);
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-reset-view:hover {
  background: rgba(255,255,255,0.18);
  color: var(--white);
}

/* ─── Toolbar ──────────────────────────────────────────────── */
.toolbar {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-md) var(--sp-lg) var(--sp-sm);
}
.toolbar-inner {
  display: flex;
  gap: var(--sp-md);
  align-items: center;
  margin-bottom: var(--sp-sm);
}

/* Search */
.search-box {
  flex: 1;
  position: relative;
  max-width: 480px;
}
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 10px 36px 10px 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--off-white);
  color: var(--ink);
  font-size: 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-input::placeholder { color: var(--ink-muted); }
.search-input:focus {
  border-color: var(--deep-blue);
  box-shadow: 0 0 0 3px rgba(27,58,92,0.1);
  outline: none;
}
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--ink-muted);
  transition: background var(--t-fast);
}
.search-clear:hover { background: var(--stone-dark); }

/* Sort */
.sort-select {
  padding: 9px 32px 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--off-white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.sort-select:focus {
  border-color: var(--deep-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,58,92,0.1);
}

/* Filter chips */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-height: 80px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  color: var(--ink-light);
  background: var(--surface);
  transition: all var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
.filter-chip:hover {
  border-color: var(--ink-muted);
  background: var(--stone);
}
.filter-chip.active {
  border-color: var(--deep-blue);
  background: var(--deep-blue);
  color: var(--white);
}
.filter-chip .chip-icon {
  font-size: 14px;
  line-height: 1;
}
.filter-chip .chip-count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 2px;
}

/* ─── Main Layout ──────────────────────────────────────────── */
.app-main {
  position: fixed;
  top: calc(var(--header-h) + var(--toolbar-h));
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
}

/* ─── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  padding: var(--sp-sm) var(--sp-lg);
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.location-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Location Card in Sidebar */
.location-item {
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--t-fast);
  position: relative;
}
.location-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background var(--t-normal) var(--ease-out);
}
.location-item:hover {
  background: var(--stone);
}
.location-item:hover::before {
  background: var(--border);
}
.location-item.active {
  background: rgba(199, 91, 42, 0.06);
}
.location-item.active::before {
  background: var(--terracotta);
}
.location-item.highlighted {
  background: rgba(27, 58, 92, 0.04);
}
.location-item.highlighted::before {
  background: var(--deep-blue);
}

.location-card-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.location-thumb {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.location-thumb .thumb-icon {
  font-size: 28px;
  color: rgba(255,255,255,0.9);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.location-thumb.has-image .thumb-icon {
  display: none;
}
.location-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-normal) var(--ease-out);
}
.location-item:hover .location-thumb img {
  transform: scale(1.05);
}
.location-text {
  flex: 1;
  min-width: 0;
}
.location-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 4px;
  color: var(--ink);
}
.location-neighborhood {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.location-summary {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-light);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.location-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.location-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--stone);
  color: var(--ink-light);
  border: 1px solid var(--border-light);
}
.location-chip .cat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.location-featured {
  position: absolute;
  top: 12px;
  right: var(--sp-lg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  z-index: 2;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ─── Map ──────────────────────────────────────────────────── */
.map-container {
  flex: 1;
  position: relative;
  min-width: 0;
}
.map {
  width: 100%; height: 100%;
}
/* Leaflet attribution styling */
.leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(255,255,255,0.8) !important;
}

/* Leaflet popup overrides */
.bcn-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 0;
}
.bcn-popup .leaflet-popup-content {
  margin: 0;
  min-width: 220px;
}
.bcn-popup .leaflet-popup-tip {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Hide default Leaflet marker icon wrapper styles */
.leaflet-marker-custom {
  background: none !important;
  border: none !important;
}

/* Custom Info Window */
.iw-card {
  padding: 16px 18px;
  font-family: var(--font-body);
}
.iw-card-name {
  font-family: var(--font-display);
  font-size: 17px;
  margin-bottom: 2px;
  color: var(--ink);
}
.iw-card-neighborhood {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.iw-card-summary {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-light);
  margin-bottom: 10px;
}
.iw-card-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta);
  transition: color var(--t-fast);
}
.iw-card-link:hover { color: var(--terracotta-light); text-decoration: none; }

/* ─── Detail Panel ─────────────────────────────────────────── */
.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-normal) var(--ease-out);
  pointer-events: none;
}
.detail-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.detail-panel {
  background: var(--surface);
  border-radius: 16px;
  width: 90%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  position: relative;
  transform: translateY(16px);
  transition: transform var(--t-slow) var(--ease-out);
}
.detail-overlay.visible .detail-panel {
  transform: translateY(0);
}
.detail-close {
  position: sticky;
  top: 0;
  float: right;
  margin: var(--sp-md);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  color: var(--ink-muted);
  background: var(--stone);
  z-index: 1;
  transition: background var(--t-fast);
}
.detail-close:hover { background: var(--stone-dark); }

.detail-body {
  padding: var(--sp-xl) var(--sp-xl) var(--sp-lg);
}
.detail-body h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 4px;
}
.detail-neighborhood {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-bottom: var(--sp-md);
}
.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-lg);
}
.detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  color: var(--ink-light);
}
.detail-chip .cat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.detail-section {
  margin-bottom: var(--sp-lg);
}
.detail-section h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-xs);
}
.detail-section p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-light);
}
.detail-best-for {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--deep-blue);
  font-weight: 500;
  padding: var(--sp-sm) var(--sp-md);
  background: rgba(27,58,92,0.05);
  border-radius: 8px;
  border-left: 3px solid var(--deep-blue);
  margin-bottom: var(--sp-lg);
}
.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: var(--terracotta);
  color: var(--white);
  transition: background var(--t-fast);
}
.detail-link:hover { background: var(--terracotta-light); text-decoration: none; }
.detail-link svg { flex-shrink: 0; }

/* ─── Mobile Toggle ────────────────────────────────────────── */
.mobile-toggle {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--mobile-toggle-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-sm) var(--sp-md);
  gap: var(--sp-sm);
}
.toggle-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--stone);
  transition: all var(--t-fast);
}
.toggle-btn.active {
  background: var(--deep-blue);
  color: var(--white);
}

/* ─── Empty State ──────────────────────────────────────────── */
.empty-state[hidden] {
  display: none;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2xl);
  text-align: center;
  flex: 1;
  color: var(--ink-muted);
}
.empty-state p { margin-bottom: var(--sp-md); }
.btn-clear-filters {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta);
  border: 1.5px solid var(--terracotta);
  transition: all var(--t-fast);
}
.btn-clear-filters:hover {
  background: var(--terracotta);
  color: var(--white);
}

/* ─── Custom Map Markers ───────────────────────────────────── */
.custom-marker {
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
  cursor: pointer;
}
.custom-marker .marker-icon {
  transform: rotate(45deg);
  font-size: 14px;
  line-height: 1;
}
.custom-marker:hover,
.custom-marker.active {
  transform: rotate(-45deg) scale(1.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ─── Itinerary Page ───────────────────────────────────────── */
.itinerary-page {
  --toolbar-h: 142px;
}
.itinerary-page .toolbar {
  padding-bottom: var(--sp-md);
}
.itinerary-toolbar-inner {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xs);
}
.route-copy {
  min-width: 0;
}
.route-copy .eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--terracotta);
  margin-bottom: 2px;
}
.route-copy h2 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 2px;
}
.route-copy p:last-child {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
}
.route-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-shrink: 0;
}
.date-control,
.plan-control {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.plan-control > span {
  display: block;
}
.date-input {
  height: 38px;
  min-width: 156px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  background: var(--off-white);
  font-size: 13px;
  font-weight: 600;
}
.date-input:focus {
  border-color: var(--deep-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,58,92,0.1);
}
.plan-toggle {
  display: flex;
  min-height: 38px;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--stone);
}
.plan-toggle-btn {
  min-width: 86px;
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.plan-toggle-btn.active {
  background: var(--deep-blue);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(27,58,92,0.18);
}
.itinerary-toolbar-summary {
  max-width: 760px;
  color: var(--ink-light);
  font-size: 13px;
  line-height: 1.4;
}
.itinerary-sidebar .sidebar-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}
.itinerary-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.itinerary-section {
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--border-light);
}
.itinerary-section > h2 {
  padding: 0 var(--sp-lg) var(--sp-sm);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.itinerary-day-list {
  flex: initial;
  overflow: visible;
}
.itinerary-day-item {
  padding: 14px var(--sp-lg);
}
.itinerary-day-item.expanded {
  background: rgba(27,58,92,0.045);
}
.itinerary-day-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.itinerary-day-badge {
  width: 56px;
  min-width: 56px;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--badge-color) 48%, white);
  border-left: 4px solid var(--badge-color);
  border-radius: 8px;
  display: grid;
  place-items: center;
  align-content: center;
  background: color-mix(in srgb, var(--badge-color) 9%, white);
  color: var(--ink);
}
.itinerary-day-badge span {
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}
.itinerary-day-badge small {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  color: var(--ink-muted);
  white-space: nowrap;
}
.itinerary-day-text {
  min-width: 0;
  flex: 1;
}
.itinerary-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
}
.itinerary-expand-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: var(--stone);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.itinerary-expand-icon::before {
  content: '+';
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}
.itinerary-day-item.expanded .itinerary-expand-icon {
  color: var(--white);
  background: var(--deep-blue);
}
.itinerary-day-item.expanded .itinerary-expand-icon::before {
  content: '-';
}
.itinerary-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.itinerary-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--deep-blue);
  background: rgba(27,58,92,0.07);
}
.expanded-meta-row {
  margin-top: 8px;
}
.itinerary-day-expanded {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height var(--t-normal) var(--ease-out), opacity var(--t-fast), transform var(--t-fast);
}
.itinerary-day-item.expanded .itinerary-day-expanded {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
}
.expanded-grid {
  display: grid;
  gap: 12px;
  margin: 12px 0 0 68px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface);
}
.expanded-grid h3 {
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.expanded-grid p {
  color: var(--ink-light);
  font-size: 12.5px;
  line-height: 1.45;
}
.expanded-muted {
  margin-top: 5px;
  color: var(--ink-muted) !important;
  font-weight: 700;
}
.expanded-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.expanded-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ink-light);
  background: var(--stone);
  border: 1px solid var(--border-light);
  font-size: 11px;
  font-weight: 700;
}
.expanded-detail-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 10px 0 0 68px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--terracotta);
  background: rgba(199,91,42,0.08);
  font-size: 12px;
  font-weight: 800;
}
.expanded-detail-btn:hover {
  background: rgba(199,91,42,0.14);
}
.stay-list,
.transport-list {
  display: grid;
  gap: 10px;
  padding: 0 var(--sp-lg);
}
.stay-card,
.transport-card {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--off-white);
  padding: 13px;
}
.stay-card {
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.stay-card.expanded {
  background: var(--surface);
  border-color: var(--border);
}
.stay-card:hover {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.stay-card-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.stay-color {
  width: 10px;
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
}
.stay-card-title {
  min-width: 0;
  flex: 1;
}
.stay-expand-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: var(--stone);
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.stay-expand-icon::before {
  content: '+';
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
}
.stay-card.expanded .stay-expand-icon {
  color: var(--white);
  background: var(--deep-blue);
}
.stay-card.expanded .stay-expand-icon::before {
  content: '-';
}
.stay-card h3,
.transport-card h3 {
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 2px;
}
.stay-card-head p,
.stay-summary,
.stay-airbnb,
.transport-card p {
  color: var(--ink-light);
  font-size: 12.5px;
  line-height: 1.45;
}
.stay-summary {
  margin-bottom: 10px;
}
.stay-card-expanded {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height var(--t-normal) var(--ease-out), opacity var(--t-fast), transform var(--t-fast);
}
.stay-card.expanded .stay-card-expanded {
  max-height: 760px;
  opacity: 1;
  transform: translateY(0);
  padding-top: 12px;
}
.stay-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.stay-option-grid h4 {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 5px;
}
.lodging-link {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-light);
  text-decoration: none;
}
.lodging-link + .lodging-link {
  margin-top: 6px;
}
.lodging-link:hover {
  text-decoration: none;
  border-color: var(--terracotta);
}
.lodging-link span {
  font-size: 12px;
  font-weight: 800;
}
.lodging-link small {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.35;
}
.stay-airbnb {
  margin-top: 10px;
}
.stay-detail-btn {
  margin-left: 0;
}
.transport-card {
  background: var(--surface);
}
.transport-card p + p {
  margin-top: 6px;
}
.transport-card a {
  display: inline-flex;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
}
.source-section {
  border-bottom: 0;
  padding-bottom: var(--sp-xl);
}
.source-list {
  display: grid;
  gap: 7px;
  padding: 0 var(--sp-lg);
}
.source-list a {
  font-size: 12px;
  font-weight: 700;
}
.itinerary-marker {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  background: var(--marker-color);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
  border: 2px solid var(--white);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.itinerary-marker:hover,
.itinerary-marker.active {
  transform: rotate(-45deg) scale(1.15);
  box-shadow: 0 5px 18px rgba(0,0,0,0.32);
}
.itinerary-marker-day {
  transform: rotate(45deg);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.itinerary-marker-date {
  position: absolute;
  left: 22px;
  top: 24px;
  transform: rotate(45deg);
  min-width: 44px;
  padding: 2px 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 5px rgba(0,0,0,0.14);
  font-size: 9px;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}
.stay-marker {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 3px solid var(--marker-color);
  color: var(--marker-color);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.stay-marker-icon {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}
.stay-marker-index {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--marker-color);
  border: 2px solid var(--white);
  font-size: 10px;
  font-weight: 900;
}
.itinerary-popup-card .iw-card-summary {
  display: block;
}
.detail-inline-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 5px 6px 0;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--ink-light);
  background: var(--stone);
  border: 1px solid var(--border-light);
  font-size: 12px;
  font-weight: 700;
}
.detail-muted {
  color: var(--ink-muted) !important;
  font-size: 13px !important;
  margin-top: 7px;
}
.detail-secondary-link {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--terracotta);
  background: rgba(199,91,42,0.08);
  font-size: 13px;
  font-weight: 800;
}
.detail-secondary-link:hover {
  background: rgba(199,91,42,0.14);
}
.detail-lodging-list {
  display: grid;
  gap: 8px;
}
.detail-lodging-list a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--off-white);
  border: 1px solid var(--border-light);
  color: var(--ink);
  text-decoration: none;
}
.detail-lodging-list a:hover {
  border-color: var(--terracotta);
  text-decoration: none;
}
.detail-lodging-list span {
  color: var(--ink-light);
  font-size: 13px;
}

/* ─── Scrollbar ────────────────────────────────────────────── */
.location-list::-webkit-scrollbar { width: 6px; }
.location-list::-webkit-scrollbar-track { background: transparent; }
.location-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.location-list::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 340px;
  }
}

@media (max-width: 768px) {
  :root {
    --toolbar-h: 100px;
  }
  .itinerary-page {
    --toolbar-h: 174px;
  }
  body[data-page="explorer"],
  body[data-page="itinerary"],
  body.itinerary-page { overflow: hidden; }

  .toolbar { padding: var(--sp-sm) var(--sp-md) var(--sp-xs); }
  .toolbar-inner { gap: var(--sp-sm); }
  .header-inner { padding: 0 var(--sp-md); }
  .header-actions { gap: 5px; }
  .header-link { height: 30px; padding: 0 9px; font-size: 12px; }
  .search-input { padding: 8px 32px 8px 36px; font-size: 14px; }
  .filter-bar { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .filter-chip { flex-shrink: 0; font-size: 12px; padding: 4px 10px; }
  .filter-chip .chip-count { display: none; }

  .app-main { flex-direction: column; }

  .sidebar {
    width: 100%;
    min-width: 100%;
    order: 2;
    display: none;
    padding-bottom: var(--mobile-toggle-h);
  }
  .sidebar.mobile-visible {
    display: flex;
  }

  .map-container {
    width: 100%;
    flex: 1;
    order: 1;
  }
  .map-container.mobile-hidden { display: none; }

  .mobile-toggle { display: flex; }

  .app-main {
    bottom: var(--mobile-toggle-h);
  }

  .location-item { padding: var(--sp-sm) var(--sp-md); }

  .brand-tagline { display: none; }
  .brand-name { font-size: 19px; }
  .btn-reset-view span { display: none; }
  .btn-reset-view { padding: 6px 10px; }

  .detail-panel { width: 95%; max-height: 85vh; border-radius: 12px; }
  .detail-body { padding: var(--sp-lg) var(--sp-lg) var(--sp-md); }
  .detail-body h2 { font-size: 22px; }

  .itinerary-toolbar-inner {
    flex-direction: column;
    gap: var(--sp-sm);
  }
  .route-controls {
    width: 100%;
    justify-content: space-between;
  }
  .date-control,
  .plan-control {
    flex: 1;
  }
  .date-input {
    width: 100%;
    min-width: 0;
  }
  .plan-toggle {
    flex-shrink: 0;
  }
  .plan-toggle-btn {
    min-width: 74px;
    padding: 0 9px;
  }
  .route-copy h2 {
    font-size: 20px;
  }
  .itinerary-toolbar-summary {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .stay-option-grid {
    grid-template-columns: 1fr;
  }
  .itinerary-section > h2,
  .stay-list,
  .transport-list,
  .source-list {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }
  .itinerary-day-item {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }
  .expanded-grid,
  .expanded-detail-btn {
    margin-left: 68px;
  }
}

@media (max-width: 480px) {
  .sort-select { padding: 8px 28px 8px 10px; font-size: 12px; }
  .search-box { min-width: 0; }
  .brand-name { font-size: 17px; }
  .header-link { padding: 0 7px; }
  .btn-reset-view { padding: 6px 8px; }
  .route-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .plan-toggle {
    width: 100%;
  }
  .plan-toggle-btn {
    flex: 1;
  }
  .expanded-grid,
  .expanded-detail-btn {
    margin-left: 0;
  }
  .itinerary-page {
    --toolbar-h: 204px;
  }
}

/* ─── Print ────────────────────────────────────────────────── */
@media print {
  .app-header, .toolbar, .map-container, .mobile-toggle, .detail-overlay { display: none; }
  .sidebar { width: 100%; position: static; height: auto; overflow: visible; border: none; }
  .app-main { position: static; display: block; }
  .location-list { overflow: visible; }
  .location-item { break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════════
   Tour & Wander — site nav (mega-menu + mobile drawer)
   ════════════════════════════════════════════════════════════ */

/* nav.js injects the header into <div id="site-nav">. We use display:contents
   on the wrapper so .gt-header's sticky containing block is <body>, not the
   wrapper's tiny height. Without this, the sticky header detaches as soon as
   you scroll past the wrapper's bottom edge. */
#site-nav { display: contents; }

.gt-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.gt-header-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-md);
  height: 100%;
}
.gt-brand { justify-self: start; }
.gt-primary { justify-self: center; }
.gt-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-xs);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}
.gt-brand-mark {
  /* Text-glyph fallback for the mark when no image is present. */
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);
}
/* Small image-mark variant (favicon) — used by sibling tools' brand bars. */
.gt-brand-mark-img {
  display: inline-block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  transform: translateY(-2px);
}
/* Hub header brand wordmark — fills the brand slot end-to-end. */
.gt-brand {
  /* Re-target — text-baseline alignment isn't needed when the brand is image-only. */
  align-items: center;
}
.gt-brand-wordmark {
  display: block;
  height: 56px;
  width: auto;
  max-height: calc(var(--header-h) - 16px);
  object-fit: contain;
}
@media (max-width: 600px) {
  .gt-brand-wordmark { height: 44px; }
}
/* Ornate ampersand — the focal accent in 'Tour & Wander'. Renders larger,
   italic, with a small underline-rule flourish. Replace with an SVG/PNG mark
   once the OpenAI logo generation is unblocked. */
.gt-brand-accent {
  color: var(--accent);
  font-style: italic;
  font-size: 1.15em;
  font-weight: 500;
  margin: 0 0.06em;
  position: relative;
  display: inline-block;
  transform: translateY(0.04em);
}
.gt-brand-accent::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -4px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.55;
}
/* Same treatment for the brand inside the sibling tool bars. */
.gt-tool-accent {
  color: var(--accent);
  font-style: italic;
  font-size: 1.15em;
  font-weight: 500;
  margin: 0 0.06em;
}
.gt-primary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* On mobile, brand on the left + burger on the right — collapse the
   3-col grid to two cols (auto | auto) and hide the empty middle. */
@media (max-width: 880px) {
  .gt-header-inner {
    grid-template-columns: auto 1fr auto;
  }
}
.gt-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-light);
  font: 500 14px var(--font-body);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.gt-link:hover { background: var(--stone); color: var(--ink); }
.gt-link.is-active { color: var(--accent); }
.gt-caret { font-size: 10px; opacity: .7; }

.gt-mm { position: relative; }
.gt-mm-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: var(--sp-lg);
  display: none;
  min-width: 720px;
}
.gt-mm-panel.is-open { display: block; }
.gt-mm-panel-narrow { min-width: 320px; }

/* Full-bleed variant — panel spans the entire viewport width, anchored to
   the bottom of the sticky header. Pattern matches nicehrgroup.com. */
.gt-mm-panel-fullbleed {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  width: 100vw;
  min-width: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  padding: 0;
}
.gt-mm-fullbleed-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-lg);
}

.gt-mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-lg);
}

/* Per-country column grid (one column per country) */
.gt-mm-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2xl);
  align-items: start;
}
.mm-country-col { min-width: 0; }
.mm-region-eyebrow {
  font: 600 10px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.mm-country-col .mm-country-head {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 var(--sp-md);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--border-light);
}
.mm-country-col .mm-country-head:hover { color: var(--accent); }
.mm-country-col .mm-flag { font-size: 20px; }
.mm-country-col .mm-sub { display: flex; flex-direction: column; gap: 2px; }
.mm-country-col .mm-sub li { margin: 0; }
.mm-country-col .mm-sub-link {
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.45;
}
.gt-mm-col-title {
  font: 600 11px var(--font-body);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-bottom: var(--sp-sm);
}
.gt-mm-list { list-style: none; padding: 0; margin: 0; }
.gt-mm-country { margin-bottom: var(--sp-md); }
.gt-mm-country-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.gt-mm-country-head:hover { color: var(--accent); }
.gt-flag, .mm-flag { font-size: 16px; }
.gt-mm-sub, .mm-sub { list-style: none; padding: 0; margin: 0; }
.gt-mm-sub li, .mm-sub li { margin: 2px 0; }
.gt-mm-sub-link, .mm-sub-link {
  display: inline-block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-light);
  text-decoration: none;
}
.gt-mm-sub-link:hover, .mm-sub-link:hover { color: var(--accent); }
.gt-mm-sub-link.is-dim, .mm-sub-link.is-dim { color: var(--ink-muted); font-size: 12px; }
.gt-mm-foot {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border-light);
}
.gt-mm-foot-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.gt-mm-tools { display: grid; gap: var(--sp-sm); }
.gt-mm-tool {
  display: block;
  padding: var(--sp-md);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.gt-mm-tool:hover { border-color: var(--accent); transform: translateY(-1px); }
.gt-mm-tool-name { font-weight: 600; font-size: 14px; }
.gt-mm-tool-desc { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* Mobile burger + drawer */
.gt-burger {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.gt-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.gt-drawer {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  z-index: 1099;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.gt-drawer-inner {
  padding: var(--sp-md);
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gt-drawer-link {
  display: block;
  padding: var(--sp-md);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.gt-drawer-link:hover { background: var(--stone); }
.gt-drawer-acc, .gt-drawer-sub { border-radius: 10px; }
.gt-drawer-acc > summary,
.gt-drawer-sub > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-md);
  font-weight: 600;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gt-drawer-acc > summary::-webkit-details-marker,
.gt-drawer-sub > summary::-webkit-details-marker { display: none; }
.gt-drawer-acc > summary::after,
.gt-drawer-sub > summary::after { content: '▾'; margin-left: auto; opacity: .6; transition: transform var(--t-fast); }
.gt-drawer-acc[open] > summary::after,
.gt-drawer-sub[open] > summary::after { transform: rotate(180deg); }
.gt-drawer-acc-body { padding: 4px var(--sp-sm) var(--sp-sm); display: flex; flex-direction: column; gap: 2px; }
.gt-drawer-sub { background: var(--stone); margin: 4px 0; }
.gt-drawer-sub > summary { padding: 10px var(--sp-md); font-weight: 500; font-size: 14px; }
.gt-drawer-sublist { list-style: none; padding: 0 var(--sp-md) var(--sp-sm); margin: 0; }
.gt-drawer-sublink {
  display: block;
  padding: 8px var(--sp-sm);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-light);
  font-size: 14px;
}
.gt-drawer-sublink:hover { background: var(--stone-dark); color: var(--ink); }
.gt-drawer-sublink.is-dim { color: var(--ink-muted); font-size: 13px; }

body.gt-drawer-open { overflow: hidden; }

@media (max-width: 880px) {
  .gt-primary { display: none; }
  /* On mobile, push the burger to the far-right edge per UX convention. */
  .gt-burger { display: flex; margin-left: auto; }
}

/* Page sub-hero (small, lives below site nav) */
.page-subhero {
  background: var(--stone);
  border-bottom: 1px solid var(--border);
}
.page-subhero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-md) var(--sp-lg);
}
.page-subhero-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 2px 0;
}
.page-subhero-lede { color: var(--ink-light); font-size: 14px; }

/* ════════════════════════════════════════════════════════════
   Hub home, country grid, country overview, guide page
   ════════════════════════════════════════════════════════════ */

.hub-hero {
  background: linear-gradient(180deg, var(--stone) 0%, var(--off-white) 100%);
  padding: 64px var(--sp-lg) 48px;
  text-align: center;
}
.hub-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  margin: 0 0 var(--sp-md);
}
.hub-hero h1 .accent { color: var(--accent); }
/* Wordmark image variant — used by home page hero */
.hub-hero-wordmark {
  margin: 0 auto var(--sp-md);
  padding: 0;
  line-height: 0;
}
.hub-hero-img {
  display: block;
  margin: 0 auto;
  max-width: min(640px, 88vw);
  height: auto;
  width: auto;
}
.hub-hero-tagline {
  font: italic 500 18px var(--font-body);
  color: var(--ink-muted);
  margin: 0 auto var(--sp-md);
  letter-spacing: 0.02em;
}
.hub-hero p {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--ink-light);
  max-width: 560px;
  margin: 0 auto var(--sp-lg);
}

.hub-section { max-width: 1200px; margin: 0 auto; padding: var(--sp-2xl) var(--sp-lg); }
.hub-section-title {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 var(--sp-lg);
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-lg);
}
.country-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-lg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.country-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.country-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.country-card-flag { font-size: 28px; }
.country-card-name { font-family: var(--font-display); font-size: 22px; }
.country-card-region {
  font: 600 11px var(--font-body);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
}
.country-card-summary { color: var(--ink-light); font-size: 14px; line-height: 1.55; }
.country-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-md);
  font-size: 12px;
  color: var(--ink-muted);
}
.country-card-best { color: var(--accent); font-weight: 600; }

/* Country overview page */
.country-hero {
  background: var(--stone);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-xl) var(--sp-lg);
}
.country-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
.country-hero-flag { font-size: 56px; line-height: 1; }
.country-hero-name {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin: 0;
}
.country-hero-summary { color: var(--ink-light); font-size: 16px; max-width: 720px; }
.country-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  font-size: 13px;
  margin-top: var(--sp-sm);
}
.country-hero-meta strong { color: var(--accent); }

.country-grid-2col {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
}
@media (max-width: 880px) {
  .country-grid-2col { grid-template-columns: 1fr; }
}

.weather-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-lg);
}
.weather-widget-title {
  font: 600 11px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-md);
}
.weather-widget-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--border-light);
}
.weather-widget-row:last-child { border-bottom: 0; }
.weather-widget-city { font-weight: 600; }
.weather-widget-temp { font-family: var(--font-display); font-size: 24px; }
.weather-widget-icon { font-size: 18px; margin-right: 6px; }
.weather-widget-cta {
  margin-top: var(--sp-md);
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.weather-widget-cta a {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 6px 10px;
  border-radius: 999px;
}
.weather-widget-cta a:hover { background: var(--accent); color: var(--white); }

.quick-links {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-lg);
}
.quick-links-list { list-style: none; padding: 0; margin: 0; }
.quick-links-list li { border-bottom: 1px solid var(--border-light); }
.quick-links-list li:last-child { border-bottom: 0; }
.quick-links-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) 0;
  text-decoration: none;
  color: var(--ink);
}
.quick-links-list a:hover { color: var(--accent); }
.quick-links-list .ql-arrow { color: var(--ink-muted); font-size: 18px; }

.country-acc { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-lg) var(--sp-xl); }
.country-acc details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: var(--sp-md);
  overflow: hidden;
}
.country-acc summary {
  padding: var(--sp-md) var(--sp-lg);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
}
.country-acc summary::-webkit-details-marker { display: none; }
.country-acc summary::after { content: '▾'; margin-left: auto; opacity: .6; transition: transform var(--t-fast); }
.country-acc details[open] summary::after { transform: rotate(180deg); }
.country-acc-body { padding: 0 var(--sp-lg) var(--sp-lg); color: var(--ink-light); }

.guide-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-lg) var(--sp-2xl);
}
.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-lg);
}
.guide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.guide-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.guide-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--stone-dark) center/cover no-repeat;
}
.guide-card-body { padding: var(--sp-md); }
.guide-card-author { font-size: 12px; color: var(--ink-muted); }
.guide-card-title { font-weight: 600; margin: 4px 0; line-height: 1.35; }

/* Guide page */
.guide-page-wrap { max-width: 1100px; margin: 0 auto; padding: var(--sp-xl) var(--sp-lg); }
.guide-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-lg);
  align-items: start;
  margin-bottom: var(--sp-xl);
}
@media (max-width: 760px) { .guide-hero { grid-template-columns: 1fr; } }
.guide-hero-thumb {
  aspect-ratio: 16 / 9;
  background: var(--stone-dark) center/cover no-repeat;
  border-radius: 12px;
  overflow: hidden;
}
.guide-hero-meta .eyebrow { color: var(--accent); }
.guide-hero-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); margin: 6px 0 var(--sp-sm); }
.guide-hero-author { color: var(--ink-muted); font-size: 14px; }
.guide-hero-watch {
  display: inline-flex;
  margin-top: var(--sp-md);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.guide-editorial {
  background: var(--stone);
  border-left: 4px solid var(--accent);
  padding: var(--sp-lg);
  border-radius: 0 12px 12px 0;
  margin-bottom: var(--sp-xl);
  white-space: pre-wrap;
}
.guide-editorial.empty { color: var(--ink-muted); font-style: italic; }

.guide-embed {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--sp-xl);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}
.guide-embed iframe { width: 100%; height: 100%; border: 0; }

.guide-transcript {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-lg);
}
.guide-transcript-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 var(--sp-md);
}
.guide-segment {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-md);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.guide-segment:last-child { border-bottom: 0; }
.guide-segment a {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.guide-segment p { margin: 0; line-height: 1.55; }

/* ════════════════════════════════════════════════════════════
   Tickets page (city-level)
   ════════════════════════════════════════════════════════════ */

.tk-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 50;
}
.tk-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-md) var(--sp-lg);
}
.tk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  overflow-x: auto;
}
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font: 500 13px var(--font-body);
  color: var(--ink-light);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.tk-chip:hover { border-color: var(--accent); color: var(--ink); }
.tk-chip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.tk-chip.is-active .tk-chip-count { color: rgba(255, 255, 255, .7); }
.tk-chip-icon { font-size: 14px; }
.tk-chip-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-left: 2px;
}

.tk-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
}
.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-lg);
}
.tk-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.tk-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}
.tk-featured {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  z-index: 2;
  background: var(--accent);
  color: var(--white);
  font: 600 10px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 6px;
}
.tk-thumb {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.tk-thumb.has-image { background: var(--stone-dark); }
.tk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tk-thumb-icon {
  font-size: 40px;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.tk-thumb.has-image .tk-thumb-icon { display: none; }
.tk-body {
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  flex: 1;
}
.tk-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}
.tk-cat-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.tk-cat-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 10px;
}
.tk-price {
  margin-left: auto;
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
}
.tk-name {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  margin: 2px 0;
  color: var(--ink);
}
.tk-summary {
  color: var(--ink-light);
  font-size: 14px;
  line-height: 1.5;
}
.tk-tip {
  font-size: 13px;
  color: var(--ink-light);
  background: var(--stone);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}
.tk-tip strong { color: var(--ink); }
.tk-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: auto;
  padding-top: var(--sp-sm);
}
.tk-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font: 600 13px var(--font-body);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tk-cta-primary {
  background: var(--accent);
  color: var(--white);
}
.tk-cta-primary:hover { background: var(--accent-hover); }
.tk-cta-secondary {
  background: transparent;
  color: var(--ink-light);
  border: 1px solid var(--border);
}
.tk-cta-secondary:hover { color: var(--ink); border-color: var(--accent); }

@media (max-width: 720px) {
  .tk-bar { position: static; }
  .tk-grid { grid-template-columns: 1fr; gap: var(--sp-md); }
  .tk-name { font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════
   Cafés page — work-friendly tips banner
   ════════════════════════════════════════════════════════════ */

.cafe-tips {
  background: var(--stone);
  border-bottom: 1px solid var(--border);
}
.cafe-tips-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-md) var(--sp-lg);
}
.cafe-tips-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.cafe-tips-card > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  transition: background var(--t-fast);
}
.cafe-tips-card > summary::-webkit-details-marker { display: none; }
.cafe-tips-card > summary::after {
  content: '▾';
  margin-left: auto;
  opacity: 0.6;
  transition: transform var(--t-fast);
}
.cafe-tips-card[open] > summary::after { transform: rotate(180deg); }
.cafe-tips-card > summary:hover { background: var(--stone); }
.cafe-tips-eyebrow {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}
.cafe-tips-summary {
  color: var(--ink-light);
  font-size: 13px;
}
.cafe-tips-body {
  padding: 0 var(--sp-lg) var(--sp-md);
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
  padding-top: var(--sp-md);
}
.cafe-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-md);
}
.cafe-tips-block {
  background: var(--stone);
  border-radius: 10px;
  padding: var(--sp-md);
}
.cafe-tips-time {
  font: 600 11px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.cafe-tips-block p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-light);
}
.cafe-tips-block a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-muted);
}
.cafe-tips-block a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cafe-tips-divider {
  border: 0;
  border-top: 1px solid var(--border-light);
  margin: var(--sp-md) 0;
}
.cafe-tips-etiquette {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-light);
}
.cafe-tips-etiquette li {
  position: relative;
  padding-left: 18px;
}
.cafe-tips-etiquette li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--accent);
  font-weight: 700;
}
.cafe-tips-etiquette strong { color: var(--ink); }

/* ════════════════════════════════════════════════════════════
   Pet & Service Animal pages — sidebar TOC + long-form article
   ════════════════════════════════════════════════════════════ */

.pets-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-2xl);
  align-items: start;
}

.pets-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-md));
  align-self: start;
  max-height: calc(100vh - var(--header-h) - var(--sp-md));
  overflow-y: auto;
  padding-right: var(--sp-md);
}

.pets-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}
.pets-toc li { margin: 0; }
.pets-toc-link {
  display: block;
  padding: 8px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pets-toc-link:hover { color: var(--ink); }
.pets-toc-link.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

.pets-mobile-jump {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-sm) var(--sp-lg);
  position: sticky;
  top: var(--header-h);
  z-index: 50;
}
.pets-mobile-jump select {
  width: 100%;
  font: 500 14px var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
}
.pets-mobile-jump select:hover { border-color: var(--accent); }

.pets-article {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-light);
}
.pets-article > section { margin-bottom: var(--sp-2xl); }
.pets-article h2 {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 var(--sp-md);
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.pets-article p { margin: 0 0 var(--sp-md); }
.pets-article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pets-article a:hover { color: var(--accent-hover); }
.pets-article strong, .pets-article em strong { color: var(--ink); }

.pets-numbered, .pets-bullets {
  margin: 0 0 var(--sp-md) 1.25em;
  padding: 0;
}
.pets-numbered li, .pets-bullets li { margin-bottom: var(--sp-sm); }

.pets-callout {
  background: var(--brand-red-pale);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: var(--sp-md) var(--sp-lg);
  margin: var(--sp-md) 0 var(--sp-lg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.pets-callout-info {
  background: #EEF3F8;
  border-left-color: var(--deep-blue);
}

.pets-fineprint {
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}

/* Vet timeline — vertical with offset markers */
.pets-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-lg);
  border-left: 2px solid var(--border);
  position: relative;
}
.pets-timeline > li {
  position: relative;
  padding-bottom: var(--sp-lg);
}
.pets-timeline > li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-lg) - 6px);
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--border);
}
.pets-timeline-when {
  display: inline-block;
  font: 600 11px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--brand-red-pale);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.pets-timeline > li p { margin: 0; }

/* Airline cards */
.pets-airlines {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
  margin: var(--sp-md) 0 var(--sp-lg);
}
.pets-airline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-lg);
}
.pets-airline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-sm);
  flex-wrap: wrap;
}
.pets-airline-head h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  margin: 0;
}
.pets-rating {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--brand-red-pale);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pets-airline-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px var(--sp-md);
  margin: var(--sp-sm) 0 var(--sp-md);
  font-size: 14px;
}
.pets-airline-grid dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
  padding-top: 4px;
}
.pets-airline-grid dd {
  margin: 0;
  color: var(--ink-light);
  line-height: 1.55;
}
.pets-airline-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.pets-airline-link:hover { text-decoration: underline; }

/* Skytrax ratings table */
.pets-ratings {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-md) 0 var(--sp-md);
  font-size: 14px;
}
.pets-ratings thead th {
  text-align: left;
  font: 600 11px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.pets-ratings tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--ink-light);
}
.pets-ratings tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
}

/* Packing checklists — accordion details */
.pets-checklist {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: var(--sp-sm);
  overflow: hidden;
}
.pets-checklist > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-md) var(--sp-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
}
.pets-checklist > summary::-webkit-details-marker { display: none; }
.pets-checklist > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  font-weight: 300;
  color: var(--ink-muted);
  transition: transform var(--t-fast);
}
.pets-checklist[open] > summary::after { content: '−'; }
.pets-checklist > ul {
  margin: 0;
  padding: 0 var(--sp-lg) var(--sp-md) calc(var(--sp-lg) + 1.25em);
  list-style: disc;
}

/* Mobile — collapse sidebar to sticky select */
@media (max-width: 880px) {
  .pets-layout {
    grid-template-columns: 1fr;
    padding: var(--sp-md) var(--sp-md) var(--sp-2xl);
    gap: var(--sp-md);
  }
  .pets-sidebar { display: none; }
  .pets-mobile-jump { display: block; }
  .pets-article h2 { font-size: 24px; }
  .pets-airline-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pets-airline-grid dt { padding-top: var(--sp-sm); }
  .pets-ratings thead { display: none; }
  .pets-ratings tbody tr {
    display: block;
    padding: var(--sp-sm) 0;
    border-bottom: 1px solid var(--border);
  }
  .pets-ratings tbody td {
    display: block;
    padding: 2px 0;
    border: 0;
  }
}