/* ============================================================
   Tourago Travel — design system
   Palette, type and components from the Organic system used in
   the approved website redesign. Values are the spec: change them
   here, not in page markup.
   ============================================================ */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Figtree", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  --page-max: 1280px;
  --page-pad: clamp(18px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.card-title, .nav-brand, .dialog-title {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — accessibility — */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: var(--space-2); left: var(--space-2); z-index: 100;
  padding: var(--space-3) var(--space-4); background: var(--color-neutral-900);
  color: var(--color-neutral-100); border-radius: var(--radius-md);
  transform: translateY(-200%); transition: transform 200ms;
}
.skip-link:focus { transform: none; color: var(--color-neutral-100); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 700;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 999px; min-height: 40px;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 44px; padding: 8px 14px; font: inherit; font-size: 15px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 999px;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; border-radius: var(--radius-md); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23645c50' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; }
.card-title { font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ============================================================
   Site chrome
   ============================================================ */

.tg-page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

.tg-header { display: flex; align-items: center; gap: 14px; padding: 16px 0; position: relative; flex-wrap: wrap; }
.tg-logo { height: 44px; width: 170px; object-fit: contain; object-position: left center; display: block; }
.tg-nav { display: flex; gap: 14px; align-items: center; font-size: 14px; font-weight: 600; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tg-nav::-webkit-scrollbar { display: none; }
.tg-nav a, .tg-nav .btn { white-space: nowrap; flex-shrink: 0; }
.tg-nav a { color: var(--color-neutral-800); min-height: 44px; display: inline-flex; align-items: center; }
.tg-nav a:hover { color: var(--color-accent-700); }
.tg-nav a[aria-current="page"] { color: var(--color-accent-700); }
.tg-cta { flex-shrink: 0; margin-left: auto; }
.tg-burger { display: none; width: 44px; height: 44px; border-radius: 10px; background: var(--color-neutral-200); align-items: center; justify-content: center; cursor: pointer; color: var(--color-neutral-900); }
.tg-menu-checkbox {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
/* Focus lives on the input; the label is what the eye sees, so it shows the ring. */
.tg-menu-checkbox:focus-visible + div .tg-burger,
.tg-menu-checkbox:focus-visible ~ div .tg-burger {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
/* The burger carries both icons and shows one; open menu, and it becomes a ×. */
.tg-burger-close { display: none; }
.tg-header:has(.tg-menu-checkbox:checked) .tg-burger-open { display: none; }
.tg-header:has(.tg-menu-checkbox:checked) .tg-burger-close { display: block; }

/* Language switcher. Flags rather than EN/FR/PL: a flag is read at a glance in
   any language, and it sits at the end of the nav where a visitor looks for it
   once they have read the rest. Each link keeps its language name as visually
   hidden text, so a screen reader still hears "Polski", not "image". */
.tg-lang { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
.tg-lang a { padding: 5px; border-radius: 6px; min-height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; }
.tg-flag { width: 24px; height: 18px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(20,16,12,.16) inset; }
.tg-lang a { opacity: .55; transition: opacity 140ms, transform 140ms; }
.tg-lang a:hover { opacity: 1; }
.tg-lang a[aria-current="true"] { opacity: 1; }
.tg-lang a[aria-current="true"] .tg-flag { box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 3px rgba(255,255,255,.9); }
/* In the nav the switcher follows Contact, with a divider before it on wide
   screens and a little air above it inside the mobile menu. */
.tg-nav .tg-lang { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--color-divider); }
.tg-nav--hero .tg-lang { border-left-color: rgba(255,255,255,.26); }
@media (max-width: 780px) {
  .tg-nav .tg-lang { margin-left: 0; padding-left: 0; border-left: 0; margin-top: var(--space-2); gap: 10px; }
  .tg-flag { width: 30px; height: 22px; }
}

/* On a phone the header cannot hold the logo, three languages, a button and a
   burger on one line, so the button moves inside the menu rather than wrapping
   onto a second row over the photograph. */
/* `.tg-nav a` above also sets a display, and it wins on specificity, so
   this has to be at least as specific to hide the in-menu button. */
.tg-nav a.tg-nav-cta { display: none; }
@media (max-width: 780px) {
  .tg-burger { display: flex; }
  .tg-cta { display: none; }
  .tg-nav a.tg-nav-cta { display: inline-flex; margin-top: var(--space-2); }
  .tg-nav { display: none; }
  .tg-menu-checkbox { pointer-events: auto; }
  .tg-header:has(.tg-menu-checkbox:checked) .tg-nav {
    display: flex; flex-direction: column; align-items: flex-start; overflow: visible;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg);
    padding: var(--space-4); box-shadow: var(--shadow-md); z-index: 30;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
}
@media (max-width: 700px) {
  .tg-logo { height: 34px; width: 130px; }
  .tg-cta { font-size: 13px; padding: var(--space-2) var(--space-3); }
}

.tg-footer { border-top: 1px solid var(--color-divider); padding: var(--space-6) 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-neutral-700); font-size: 14px; }
.tg-footer img { height: 34px; width: 140px; object-fit: contain; object-position: left center; align-self: flex-start; }
.tg-footer p { margin: 0; line-height: 1.6; max-width: 80ch; }
.tg-footer-links { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.tg-footer-links a { color: var(--color-neutral-700); min-height: 34px; display: inline-flex; align-items: center; }
.tg-footer-links a:hover { color: var(--color-accent-700); }
.tg-footer-copy { margin-left: auto; }
@media (max-width: 640px) { .tg-footer-copy { margin-left: 0; } }

/* — home: split layout, hero, carousel, marquee — */
.tg-split { display: grid; grid-template-columns: minmax(0, 1fr); }
/* The hero owns the full width of the window: the photograph is the product.
   Everything that used to live in the narrow side column now sits underneath it,
   in bands that keep the same 1280px measure as the rest of the site. */
.tg-home-band,
.tg-split > div:last-child > section {
  max-width: var(--page-max);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--page-pad);
}
@media (min-width: 980px) {
  /* The trips fan is excluded here rather than overridden below: an override
     would need to out-weigh this selector, and losing that race silently is
     how the fan ended up capped at 1280px in the first place. */
  .tg-split > div:first-child > section:not(:first-of-type):not(.tg-trips-section),
  .tg-split > div:first-child > .tg-hero + section:not(.tg-trips-section) {
    max-width: var(--page-max); margin-inline: auto;
  }
}

/* Signature experiences: four across on a wide screen. Stacked, they left most
   of the page empty and each line ran to a silly measure. */
.tg-exp-row {
  max-width: var(--page-max); margin-inline: auto; width: 100%;
  padding-inline: var(--page-pad);
  display: grid; gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
.tg-exp { display: flex; gap: 14px; align-items: flex-start; padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.tg-exp-img { width: 56px; height: 56px; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.tg-exp-text { flex: 1; min-width: 0; }
.tg-exp-text h3 { margin: 0 0 4px; font-size: 16px; }
.tg-exp-text p { margin: 0; color: var(--color-neutral-700); font-size: 13px; line-height: 1.5; }

@media (min-width: 760px) {
  .tg-exp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-8); }
}
@media (min-width: 1100px) {
  .tg-exp-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
  /* Stacked vertically the photo is an afterthought; across a row it can lead. */
  .tg-exp { flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); }
  .tg-exp-img { width: 100%; height: 150px; border-radius: var(--radius-md); }
  .tg-exp-text h3 { font-size: 17px; margin-bottom: 6px; }
  .tg-exp-text p { font-size: 13.5px; }
}

.tg-arrow { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.85); display: grid; place-items: center; flex-shrink: 0; color: var(--color-text); transition: background 200ms; border: 0; cursor: pointer; }
.tg-arrow:hover { background: #fff; }
.tg-exp-arrow { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--color-neutral-400); display: grid; place-items: center; flex-shrink: 0; color: var(--color-accent-700); }
.tg-car-track { scrollbar-width: none; }
.tg-car-track::-webkit-scrollbar { display: none; }

.tg-review-track { animation: tg-marquee 36s linear infinite; }
.tg-review-track:hover, .tg-review-track:focus-within { animation-play-state: paused; }
@keyframes tg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* — form status — */
.tg-status { margin: var(--space-3) 0 0; font-size: 14px; line-height: 1.5; padding: 10px 16px; border-radius: var(--radius-md); display: none; }
.tg-status[data-state="sending"] { display: block; background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tg-status[data-state="ok"] { display: block; background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.tg-status[data-state="error"] { display: block; background: #fbe3e0; color: #7f2018; }
.tg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — long-form pages (privacy, terms) — */
.tg-prose { max-width: 74ch; }
.tg-prose h2 { font-size: clamp(22px, 3vw, 30px); margin: var(--space-8) 0 var(--space-3); }
.tg-prose h3 { font-size: clamp(18px, 2.2vw, 22px); margin: var(--space-6) 0 var(--space-2); }
.tg-prose p, .tg-prose li { color: var(--color-neutral-800); line-height: 1.7; font-size: 16px; }
.tg-prose ul { padding-left: 20px; }
.tg-prose li { margin-bottom: 6px; }

/* ============================================================
   Home: hero slider, trips carousel, stars
   ============================================================ */

.tg-header--hero { flex-wrap: wrap; }
/* The hero photo can be bright where the header sits, so the nav gets its own
   scrim rather than relying on the diagonal gradient behind the headline. */
.tg-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 2;
  background: linear-gradient(180deg, rgba(20,16,12,.62) 0%, rgba(20,16,12,.28) 55%, rgba(20,16,12,0) 100%);
  pointer-events: none;
}
.tg-header--hero .tg-logo { filter: none; }
.tg-nav--hero a { color: #fff; }
.tg-nav--hero a:hover, .tg-nav--hero a[aria-current="page"] { color: var(--color-accent-300); }
.tg-burger--hero { background: rgba(255,255,255,.16); color: #fff; }
.tg-lang--dark a { opacity: .6; }
.tg-lang--dark a:hover, .tg-lang--dark a[aria-current="true"] { opacity: 1; }
.tg-lang--dark .tg-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset; }
.tg-lang--dark a[aria-current="true"] .tg-flag { box-shadow: 0 0 0 2px var(--color-accent-300); }
@media (max-width: 780px) {
  /* Solid, not 94%: white hero type at six percent still ghosts through and
     the menu reads as dirty rather than as a panel. */
  .tg-header--hero:has(.tg-menu-checkbox:checked) .tg-nav--hero {
    background: #17130f;
    box-shadow: var(--shadow-md);
  }
  .tg-header--hero:has(.tg-menu-checkbox:checked) .tg-nav--hero a { color: #fff; }
}

.tg-hero-slides { position: absolute; inset: 0; }
.tg-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease, transform 900ms cubic-bezier(.22,.68,0,1); transform: scale(1.06); }
.tg-hero-slide.is-active { opacity: 1; transform: scale(1); }
/* The slides after the first are held back until the page has painted.
   A lazily-loaded image that is merely transparent still downloads; only
   display:none defers it, so the first view pays for one photograph, not five.
   The script lifts this a moment after load, long before the first change. */
.tg-hero-defer { display: none; }
.tg-hero-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width 300ms, background 300ms; }
.tg-hero-dot.is-active { width: 26px; background: #fff; }
.tg-hero-dots { align-items: center; }
/* Keyboard users get a real target even though the dot is 6px tall. */
.tg-hero-dot::after { content: ""; position: absolute; inset: -18px -6px; }
.tg-hero-dots { position: absolute; }
.tg-hero-dot { position: relative; }

/* The fan runs the full width of the window. Card width is about one quarter
   of the viewport so that five cards, fanned, reach both edges; site.js works
   the spacing out from the measured card and container. */
.tg-trips-section { padding: 0 0 clamp(48px, 7vw, 84px); }
.tg-trips-head {
  max-width: var(--page-max); margin-inline: auto;
  padding-inline: var(--page-pad); margin-bottom: var(--space-6);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.tg-car {
  --card-w: clamp(250px, 27vw, 560px);
  --card-h: calc(var(--card-w) * 1.30);
  position: relative;
  perspective: 1600px;
  height: calc(var(--card-h) + 60px);
  overflow: hidden;
  width: 100%;
}
.tg-car-track { position: relative; height: 100%; list-style: none; margin: 0; padding: 0; transform-style: preserve-3d; }
.tg-car-card {
  position: absolute; left: 50%; top: 50%;
  width: var(--card-w); height: var(--card-h);
  margin-left: calc(var(--card-w) / -2); margin-top: calc(var(--card-h) / -2);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 20px 50px -18px rgba(20,16,12,.55);
  transition: transform 550ms cubic-bezier(.22,.68,0,1), opacity 550ms;
}
.tg-car-link { position: absolute; inset: 0; display: block; color: inherit; }
/* Without JS the cards stack; this lays them out as a readable row instead. */
.tg-car:not([data-ready]) .tg-car-track { display: flex; gap: var(--space-4); overflow-x: auto; padding: 0 clamp(20px,4vw,48px); }
.tg-car:not([data-ready]) .tg-car-card { position: relative; left: auto; top: auto; margin: 0; flex: 0 0 var(--card-w); }

.tg-stars { display: inline-flex; gap: 2px; color: var(--color-accent-600); }
.tg-star { cursor: pointer; display: inline-grid; place-items: center; width: 44px; height: 44px; }
.tg-star svg { fill: none; transition: fill 120ms; }
.tg-stars:has(#r-star-1:checked) label[for="r-star-1"] svg,
.tg-stars:has(#r-star-2:checked) label[for="r-star-1"] svg, .tg-stars:has(#r-star-2:checked) label[for="r-star-2"] svg,
.tg-stars:has(#r-star-3:checked) label[for="r-star-1"] svg, .tg-stars:has(#r-star-3:checked) label[for="r-star-2"] svg, .tg-stars:has(#r-star-3:checked) label[for="r-star-3"] svg,
.tg-stars:has(#r-star-4:checked) label[for="r-star-1"] svg, .tg-stars:has(#r-star-4:checked) label[for="r-star-2"] svg, .tg-stars:has(#r-star-4:checked) label[for="r-star-3"] svg, .tg-stars:has(#r-star-4:checked) label[for="r-star-4"] svg,
.tg-stars:has(#r-star-5:checked) label[for="r-star-1"] svg, .tg-stars:has(#r-star-5:checked) label[for="r-star-2"] svg, .tg-stars:has(#r-star-5:checked) label[for="r-star-3"] svg, .tg-stars:has(#r-star-5:checked) label[for="r-star-4"] svg, .tg-stars:has(#r-star-5:checked) label[for="r-star-5"] svg
{ fill: currentColor; }
.tg-star:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 999px; }

/* Trip detail: sticky facts card beside the itinerary on wide screens. */
.tg-trip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 7vw, 84px);
}
@media (min-width: 900px) {
  .tg-trip-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .tg-trip-aside { position: sticky; top: var(--space-4); }
}

/* Hero slideshow pause control — a slideshow that moves on its own needs a
   way to stop it (WCAG 2.2.2), and the dots are navigation, not a stop. */
.tg-hero-pause {
  width: 28px; height: 28px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; background: rgba(255,255,255,.22); color: #fff;
  display: grid; place-items: center; margin-left: 10px; flex-shrink: 0;
}
.tg-hero-pause:hover { background: rgba(255,255,255,.38); }
.tg-hero-pause span[aria-hidden]:not([hidden]) { display: grid; place-items: center; }
.tg-hero-pause span[hidden] { display: none; }
.tg-hero-pause::after { content: ""; position: absolute; inset: -8px; }
.tg-hero-pause { position: relative; }

/* The visa-fee table scrolls sideways on a phone, so its region shows focus. */
[role="region"][tabindex="0"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Four reasons in a 2x2. auto-fit left "From 1 traveller" orphaned on its own
   row on a wide screen. */
.tg-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 460px) { .tg-why-grid { grid-template-columns: minmax(0, 1fr); } }

/* The home CTA is a wide band now, so the copy sits in a column on the left
   and the photograph keeps the rest. */
.tg-home-cta { min-height: 260px; }
.tg-home-cta-inner {
  position: relative; min-height: 260px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 12px; padding: clamp(22px, 3vw, 40px);
}
.tg-home-cta-h { color: #fff; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; font-weight: 800; }
.tg-home-cta-p { color: rgba(255,255,255,.85); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.5; max-width: 46ch; }
@media (min-width: 900px) {
  .tg-home-cta, .tg-home-cta-inner { min-height: 320px; }
}

/* The slide label and the dots share the bottom of the hero. On a phone they
   collided, so the label moves up onto its own line. */
.tg-hero-place-tag {
  position: absolute; right: clamp(18px, 3vw, 28px); bottom: 24px; z-index: 2;
  display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px;
}
@media (max-width: 620px) {
  .tg-hero-place-tag { right: auto; left: clamp(20px, 4vw, 48px); bottom: 62px; }
}

/* On a phone the price card falls below an itinerary that can run to 8,000px,
   so the price and the enquiry button follow the reader instead. */
.tg-trip-bar { display: none; }
@media (max-width: 899px) {
  .tg-trip-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--page-pad) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-divider);
    box-shadow: 0 -4px 18px rgba(46,43,37,.10);
  }
  .tg-trip-bar-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .tg-trip-bar-label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-neutral-600); font-weight: 700; }
  .tg-trip-bar-price strong { font-size: 19px; font-weight: 800; color: var(--color-accent-700); }
  .tg-trip-bar .btn { flex-shrink: 0; }
  /* keep the footer clear of the bar */
  .tg-footer { padding-bottom: calc(var(--space-8) + 64px); }
}

/* The enquiry page says which trip you came from. */
.tg-trip-context {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin: var(--space-4) 0 0; padding: 10px 16px;
  background: var(--color-accent-100); border-radius: var(--radius-md);
  font-size: 15px; color: var(--color-accent-900); max-width: max-content;
}
.tg-trip-context span { font-weight: 600; }
.tg-trip-context a { font-weight: 800; color: var(--color-accent-800); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- call-to-action band ---------- */
.tg-cta-band {
  background: linear-gradient(135deg, var(--color-accent-2-300) 0%, var(--color-accent-2-200) 62%);
  border: 1px solid var(--color-accent-2-400);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 40px) clamp(24px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6) var(--space-8); flex-wrap: wrap;
}
.tg-cta-band-text { display: flex; flex-direction: column; gap: 8px; max-width: 58ch; min-width: 0; }
.tg-cta-band-text h2 {
  margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12;
  font-size: clamp(24px, 3vw, 34px); color: var(--color-accent-2-900);
}
.tg-cta-band-text p { margin: 0; color: var(--color-accent-2-800); font-size: 16.5px; line-height: 1.55; }
.tg-cta-band-btn { flex-shrink: 0; align-self: center; }
@media (max-width: 640px) {
  .tg-cta-band { align-items: flex-start; }
  .tg-cta-band-btn { align-self: stretch; text-align: center; justify-content: center; }
}

/* ---------- tables in prose ---------- */
.tg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-4) 0; }
.tg-table-scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.tg-prose table { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 15.5px; }
.tg-prose th, .tg-prose td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-divider); color: var(--color-neutral-800); line-height: 1.5;
}
.tg-prose th {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--color-neutral-700); white-space: nowrap;
}
.tg-prose tr:last-child td { border-bottom: 0; }

/* The pause control holds both icons and hides one with [hidden]. An inline
   display would beat that, so the rule is written here and skips a hidden
   span rather than trying to out-weigh it. */
.tg-car-pause span[aria-hidden]:not([hidden]) { display: grid; }
.tg-car-pause span[aria-hidden][hidden] { display: none; }