/* ==========================================================================
   TurkmenistanTrip.com — main stylesheet
   Colors match the Figma "Variable collection" (see project description).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — served from our own server (static/fonts, OFL licenses next to them),
   not from Google: faster for visitors where Google is slow, and no visitor IP
   goes to Google (GDPR). Variable fonts, Latin only: Cyrillic and CJK fall back
   to Georgia / the system font, as before.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin.069cb90e11a3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.a04d353989ad.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.fa41c43a3d8e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.1ff13d113ba4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallbacks shown until the fonts arrive: Georgia and Arial resized to the same
   text width and line height, so the text barely moves on the swap. Numbers were
   tuned on the English home, tour list and tour pages. Latin ranges only, so Russian text keeps its font. */

@font-face {
  font-family: 'Fraunces Fallback';
  font-weight: 400;
  src: local('Georgia');
  size-adjust: 104%;
  ascent-override: 94.04%;
  descent-override: 24.52%;
  line-gap-override: 0%;
  unicode-range: U+0000-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2000-20CF, U+2100-21FF, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces Fallback';
  font-weight: 600 700;
  src: local('Georgia Bold'), local('Georgia-Bold');
  size-adjust: 94%;
  ascent-override: 104.04%;
  descent-override: 27.13%;
  line-gap-override: 0%;
  unicode-range: U+0000-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2000-20CF, U+2100-21FF, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  font-weight: 400 500;
  src: local('Arial'), local('ArialMT');
  size-adjust: 99%;
  ascent-override: 97.98%;
  descent-override: 25.25%;
  line-gap-override: 0%;
  unicode-range: U+0000-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2000-20CF, U+2100-21FF, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  font-weight: 600 700;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 97%;
  ascent-override: 100%;
  descent-override: 25.77%;
  line-gap-override: 0%;
  unicode-range: U+0000-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2000-20CF, U+2100-21FF, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

:root {
  /* Colors */
  --color-primary: #0E6E8C;            /* Figma: brand */
  --color-secondary: #DDECF1;          /* Figma: brand-soft */
  --color-accent: #F2A33A;             /* Figma: action — main CTA buttons only */
  --color-bg: #FAF7F2;                 /* Figma: bg */
  --color-surface: #FFFFFF;            /* Figma: surface */
  --color-text: #1C2530;               /* Figma: text — also dark section bg */
  --color-text-muted: #5B6671;         /* Figma: text-muted */
  --color-border: #E3DDD1;             /* Figma: border */
  --color-text-muted-inverse: #AEB8C1; /* Figma: text-muted-inverse */
  --color-border-inverse: #3A4552;

  /* Fonts */
  --font-heading: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 80px;
  --radius: 4px;
  --radius-lg: 6px;
  --section-space: 104px;
  --header-height: 80px;
}

@media (max-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-space: 80px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --section-space: 56px;
    --header-height: 72px;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px); /* anchors (#faq) stop below the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: break-word; /* long words and URLs from the admin must not widen the page */
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-space) 0;
}

.section--surface {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Title on the left, short note + link on the right */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.section-head__aside {
  max-width: 380px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.section-head__aside .link {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-text);
}

@media (max-width: 860px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* Small uppercase label with a line before it: "— TOURS AND PRICES" */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
}

.section--dark .eyebrow {
  color: var(--color-text-muted-inverse);
}

/* Eyebrow that leads somewhere: the category of an article */
.eyebrow--link {
  width: fit-content;
  text-decoration: none;
}

.eyebrow--link:hover {
  color: var(--color-text);
}

/* .h1–.h3 also work on non-heading tags (e.g. <p class="h3">) */
.h1,
.h2,
.h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.h1 {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02;
}

.h2 {
  font-size: clamp(32px, 3.6vw, 48px);
}

.h3 {
  font-size: clamp(24px, 2.2vw, 28px);
}

/* "Turkmenistan" at 40px is wider than a 320px screen */
@media (max-width: 400px) {
  .h1 {
    font-size: 34px;
  }
}

.lead {
  color: var(--color-text-muted);
  font-size: 19px;
  line-height: 1.55;
}

.muted {
  color: var(--color-text-muted);
}

.link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.link:hover {
  color: var(--color-primary);
}

.link--brand {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Orange — only for the main action (see design rules) */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-text);
}

.btn--primary:hover {
  background: #E8932A;
}

.btn--outline {
  border-color: var(--color-text);
  background: transparent;
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--ghost {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
}

.btn--ghost:hover {
  border-color: var(--color-primary);
}

.btn--sm {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 15px;
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.logo {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.logo__domain {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Sticky: stays at the top while the page scrolls */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-height);
}

.header__nav {
  flex: 1;
}

.header__menu {
  display: flex;
  justify-content: center;
  gap: 36px;
}

.header__menu a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.header__menu a:hover {
  color: var(--color-primary);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}

.header__phone {
  color: var(--color-text-muted);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.header__phone:hover {
  color: var(--color-primary);
}

.header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}

.header__toggle-icon,
.header__toggle-icon::before,
.header__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.2s;
}

.header__toggle-icon {
  position: relative;
}

.header__toggle-icon::before,
.header__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.header__toggle-icon::before { top: -6px; }
.header__toggle-icon::after { top: 6px; }

.header__toggle[aria-expanded="true"] .header__toggle-icon {
  background: transparent;
}

.header__toggle[aria-expanded="true"] .header__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Language menu: after the menu on desktop, next to the burger on mobile */
.lang-switch {
  position: relative;
  order: 1;
}

.header__actions {
  order: 2;
}

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lang-switch__toggle::-webkit-details-marker {
  display: none;
}

/* Small chevron, turns up while the menu is open */
.lang-switch__toggle::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.lang-switch[open] .lang-switch__toggle::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.lang-switch__toggle:hover,
.lang-switch[open] .lang-switch__toggle {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.lang-switch__globe {
  flex: none;
}

.lang-switch__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 12px 28px rgba(28, 37, 48, 0.12);
  list-style: none;
}

.lang-switch__list a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch__list a:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

/* The current language: bold with a check mark */
.lang-switch__list a[aria-current="true"] {
  font-weight: 600;
}

.lang-switch__list a[aria-current="true"]::after {
  content: '✓';
  float: right;
  margin-left: 16px;
  color: var(--color-primary);
}

/* The phone is also in the WhatsApp button and the footer, so it goes first */
@media (max-width: 1440px) {
  .header__phone {
    display: none;
  }
}

/* Six menu items in Russian or Japanese (Open groups and Blog appear when there is something in them)
   need the room: smaller gaps first, then narrower sides, then the burger */
@media (max-width: 1520px) {
  .header__menu {
    gap: 24px;
  }
}

@media (max-width: 1280px) {
  .header__inner {
    padding-right: min(var(--gutter), 40px);
    padding-left: min(var(--gutter), 40px);
  }
}

@media (max-width: 1180px) {
  .header__inner {
    flex-wrap: wrap;
    gap: 0;
  }

  /* The logo keeps the row at full height: with the menu open the row would shrink to the buttons */
  .header__inner > .logo {
    display: flex;
    align-items: center;
    min-height: var(--header-height);
  }

  .header__toggle {
    display: inline-flex;
  }

  .lang-switch {
    order: 0;
    margin-left: auto;
  }

  .lang-switch + .header__toggle {
    margin-left: 8px;
  }

  .header__actions {
    display: none;
  }

  /* Mobile menu: hidden until the burger is pressed.
     A line and a gap separate it from the logo and burger row. */
  .header__nav {
    display: none;
    flex-basis: 100%;
    margin-top: 4px;
    padding: 8px 0 16px;
    border-top: 1px solid var(--color-border);
  }

  /* The open menu is inside the sticky header, so it scrolls on its own if taller than the screen */
  .header__nav.is-open {
    display: block;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
  }

  .header__menu {
    flex-direction: column;
    gap: 0;
  }

  /* Plain text rows with a full-width line under each */
  .header__menu a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 17px;
  }

  .header__menu li:last-child a {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .logo {
    font-size: 21px;
  }
}

/* Narrow phones (360px and less): logo, language and burger must stay on one row */
@media (max-width: 400px) {
  .logo {
    font-size: 18px;
  }

  .lang-switch__globe {
    display: none;
  }
}

@media (max-width: 340px) {
  .logo {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   Messages (django.contrib.messages)
   -------------------------------------------------------------------------- */

.messages {
  margin-bottom: 24px;
}

.messages__item {
  padding: 14px 18px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-secondary);
  color: var(--color-text);
}

.messages__item + .messages__item {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  /* Bottom room for the floating WhatsApp button, so it doesn't cover the legal links */
  padding: 80px 0 96px;
  background: var(--color-text);
  color: var(--color-bg);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--color-border-inverse);
}

.footer__about {
  max-width: 320px;
}

.footer__about .logo {
  display: inline-block;
  margin-bottom: 24px;
}

.footer__muted {
  margin-bottom: 16px;
  color: var(--color-text-muted-inverse);
  font-size: 15px;
}

.footer__contacts {
  font-size: 15px;
}

.footer__contacts a {
  text-decoration: none;
}

.footer__contacts a:hover,
.footer__menu a:hover {
  color: var(--color-accent);
}

.footer__social {
  display: flex;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-text-muted-inverse);
}

.footer__social-link:hover {
  color: var(--color-accent);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

.footer__cols {
  display: flex;
  gap: 88px;
}

.footer__heading {
  margin-bottom: 14px;
  color: var(--color-text-muted-inverse);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__menu li + li {
  margin-top: 10px;
}

.footer__menu a {
  font-size: 15px;
  text-decoration: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  color: var(--color-text-muted-inverse);
  font-size: 13px;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer__legal a {
  text-decoration: none;
}

.footer__legal a:hover {
  color: var(--color-bg);
  text-decoration: underline;
}

/* "Cookie settings": a button that looks like the links next to it */
.footer__link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.footer__link-button:hover {
  color: var(--color-bg);
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .footer__cols {
    gap: 48px;
  }
}

@media (max-width: 760px) {
  .footer {
    padding-top: 56px;
  }

  .footer__top {
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
  }

  .footer__cols {
    flex-direction: column;
    gap: 32px;
  }
}

/* --------------------------------------------------------------------------
   Floating WhatsApp button
   -------------------------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 6px 20px rgba(28, 37, 48, 0.2);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: #0B5C75;
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   Cookie banner (only when Google Analytics is on)
   -------------------------------------------------------------------------- */

/* Bottom left, so it does not cover the WhatsApp button */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(420px, calc(100% - 48px));
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 10px 30px rgba(28, 37, 48, 0.16);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
}

.cookie-banner__text a {
  color: var(--color-primary);
}

/* Both answers look the same: declining is as easy as accepting */
.cookie-banner__actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.cookie-banner__actions .btn {
  flex: 1;
}

/* On a phone it is wider than the gap left of the WhatsApp button, so it goes above it */
@media (max-width: 640px) {
  .cookie-banner {
    left: 16px;
    bottom: 76px;
    width: calc(100% - 32px);
    padding: 16px 18px;
  }
}

/* --------------------------------------------------------------------------
   Shared components
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.caption {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Dashed box where a real photo will go (photos are added later) */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-secondary);
  text-align: center;
}

.photo-placeholder__title {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 500;
}

.photo-placeholder__note {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Text column + card side by side */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}

.split__lead {
  margin-top: 24px;
}

@media (max-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 72px 0 88px;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.hero__title {
  margin-bottom: 28px;
}

.hero__lead {
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.hero__media {
  margin: 0;
}

.photo-placeholder--hero {
  aspect-ratio: 9 / 10;
}

.hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 10;
  border-radius: var(--radius);
  object-fit: cover;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  margin: 32px 0 0;
}

/* dt (label) comes first in HTML, but the number is shown on top */
.stats__item {
  display: flex;
  flex-direction: column-reverse;
}

.stats__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
}

.stats__label {
  color: var(--color-text-muted);
  font-size: 14px;
}

@media (max-width: 960px) {
  .hero {
    padding: 40px 0 56px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .hero__actions .btn {
    width: 100%;
  }

  .stats {
    flex-direction: column;
    gap: 16px;
  }

  .stats__value {
    font-size: 32px;
  }
}

/* --------------------------------------------------------------------------
   Tour cards
   -------------------------------------------------------------------------- */

.tour-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}

@media (max-width: 1024px) {
  .tour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tour-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.tour-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.tour-card__image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-secondary);
}

.tour-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.tour-card:hover .tour-card__image img {
  transform: scale(1.03);
}

.tour-card__image .photo-placeholder {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.tour-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

.tour-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.tour-card__days {
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-card__title {
  margin-top: 12px;
  font-size: 26px;
}

.tour-card__title a {
  text-decoration: none;
}

.tour-card__title a:hover {
  color: var(--color-primary);
}

.tour-card__route {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.tour-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/* Gap above the footer line; the footer itself is pushed down by margin-top: auto */
.tour-card__body > :nth-last-child(2) {
  margin-bottom: 20px;
}

.tour-card__price {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

.tour-card__from,
.tour-card__per {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

/* "per person in a group of 4" sits on its own line under the price */
p.tour-card__per {
  margin-top: 4px;
  white-space: normal;
}

/* On narrow cards the price wraps, the button stays on one line */
.tour-card__footer .btn {
  flex: none;
  white-space: nowrap;
}

.tour-card__includes {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Price section
   -------------------------------------------------------------------------- */

.reasons {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.reasons__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  padding: 28px 0;
  border-top: 1px solid var(--color-border);
}

.reasons__num {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.2;
}

.reasons__title {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

.price-card {
  padding: 40px;
}

.price-card__note {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.price-card__label {
  margin: 32px 0 12px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-card__label--muted {
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.check-list li,
.dash-list li {
  position: relative;
  padding: 7px 0 7px 24px;
}

.check-list li::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

.dash-list li {
  color: var(--color-text-muted);
}

.dash-list li::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--color-text-muted);
}

@media (max-width: 640px) {
  .price-card {
    padding: 28px 20px;
  }
}

/* --------------------------------------------------------------------------
   Gallery (group photos)
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 280px;
  gap: 16px;
}

.gallery__item--large {
  grid-row: span 2;
}

@media (max-width: 760px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }

  .gallery__item--large {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 16px;
  object-fit: cover;
  border-radius: var(--radius);
}

.team-card__name {
  margin-bottom: 6px;
  font-size: 24px;
}

.team-card .muted {
  font-size: 15px;
}

.team-card__bio {
  margin-top: 12px;
  font-size: 15px;
}

.contacts-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 48px;
  margin: 48px 0 0;
  padding: 28px 36px;
}

.contacts-strip dd {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 500;
}

.contacts-strip a {
  text-decoration: none;
}

.contacts-strip__label {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .contacts-strip {
    flex-direction: column;
    padding: 24px 20px;
  }
}

/* --------------------------------------------------------------------------
   Reviews (dark section)
   -------------------------------------------------------------------------- */

.reviews__title {
  margin-bottom: 48px;
}

.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-lg);
}

/* Authors line up at the bottom even when the quotes differ in length */
.review__text {
  flex: 1;
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.4;
}

.review__author {
  font-weight: 500;
}

.review__meta {
  margin-top: 4px;
  color: var(--color-text-muted-inverse);
  font-size: 13px;
}

.reviews__note {
  margin-top: 32px;
  color: var(--color-text-muted-inverse);
  font-size: 15px;
}

.reviews__note .link {
  margin-left: 8px;
  color: var(--color-bg);
  white-space: nowrap;
}

@media (max-width: 960px) {
  .reviews {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Seasons
   -------------------------------------------------------------------------- */

.seasons__title {
  margin-bottom: 48px;
}

.seasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.season {
  padding-top: 28px;
  border-top: 2px solid var(--color-text);
}

.season__name {
  font-size: 30px;
}

.season__months {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season__temp {
  margin: 12px 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.1;
}

@media (max-width: 960px) {
  .seasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }
}

@media (max-width: 480px) {
  .seasons {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 96px;
}

.faq-layout__note {
  margin: 24px 0 16px;
}

.faq {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '+';
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
}

.faq__item[open] .faq__question::after {
  content: '–';
}

.faq__answer {
  max-width: 820px;
  margin-top: -12px;
  padding-bottom: 28px;
  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq__question {
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.split--form {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
}

@media (max-width: 960px) {
  .split--form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-person {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.contact-person__photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-person__name {
  font-weight: 600;
}

.contact-person .muted {
  font-size: 14px;
}

.form-card {
  padding: 40px;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.form-field--wide {
  grid-column: 1 / -1;
}

.form-field__label {
  font-size: 14px;
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: 16px;
}

.form-field textarea {
  height: 112px;
  min-height: 112px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-secondary);
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
  border-color: #B42318;
}

.form-field__error,
.errorlist {
  margin: 0;
  padding: 0;
  color: #B42318;
  font-size: 14px;
  list-style: none;
}

.form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.form__note {
  font-size: 14px;
}

@media (max-width: 640px) {
  .form-card {
    padding: 24px 20px;
  }

  .form-card > .form__submit .btn {
    width: 100%;
  }

  .form__grid {
    grid-template-columns: 1fr;
  }

  .form__submit .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Inner pages: page head, breadcrumbs, empty and message states
   -------------------------------------------------------------------------- */

.page-head {
  padding: 40px 0 72px;
}

.page-head__title {
  max-width: 900px;
}

.page-head__lead {
  max-width: 640px;
  margin-top: 24px;
}

.page-head__lead p + p {
  margin-top: 12px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.breadcrumbs a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.section--tight {
  padding-top: 56px;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 48px 0;
}

.empty-state .muted {
  margin-top: 8px;
}

.message-page {
  max-width: 820px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.message-page .lead {
  margin-top: 24px;
}

.message-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}

@media (max-width: 640px) {
  .page-head {
    padding: 24px 0 48px;
  }

  .breadcrumbs {
    margin-bottom: 24px;
  }
}

/* --------------------------------------------------------------------------
   Tour list filters
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.filters .form-field {
  flex: 0 1 260px;
}

.filters__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Native select with a custom arrow */
.form-field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6671' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  cursor: pointer;
}

@media (max-width: 640px) {
  .filters .form-field {
    flex-basis: 100%;
  }

  .filters__actions {
    width: 100%;
  }

  .filters__actions .btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Tour page
   -------------------------------------------------------------------------- */

.tour-hero {
  padding: 40px 0 72px;
}

.tour-hero__meta {
  margin-bottom: 12px;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
}

.tour-hero__route {
  margin-top: 16px;
}

.gallery--tour {
  grid-auto-rows: 212px;
  margin-top: 40px;
}

.gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-secondary);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fewer than 5 photos: large photo + one column of small ones */
.gallery--few {
  grid-template-columns: 2fr 1fr;
}

.gallery--few .gallery__item:nth-child(2):last-child {
  grid-row: span 2;
}

/* With only one photo, let it take the full width */
.gallery__item--large:only-child {
  grid-column: 1 / -1;
  grid-row: span 2;
}

.tour-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 408px;
  gap: 32px;
  align-items: start;
}

/* Sticks below the sticky header, not under it */
.tour-layout__aside {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.tour-section + .tour-section {
  margin-top: 88px;
}

.tour-section > .h2 {
  margin-bottom: 24px;
}

.tour-section__lead {
  margin-bottom: 28px;
  color: var(--color-text);
}

.tour-section__lead p + p {
  margin-top: 12px;
}

.facts {
  margin: 0;
  overflow: hidden;
}

.facts__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 14px 24px;
}

.facts__row + .facts__row {
  border-top: 1px solid var(--color-border);
}

.facts dt {
  color: var(--color-text-muted);
}

.facts dd {
  margin: 0;
}

.itinerary {
  position: relative;
  overflow: hidden;
}

.itinerary__body {
  position: relative;
  padding: 28px 32px;
}

/* A long program folds to about the first day (static/js/itinerary.js) */
.itinerary--folded .itinerary__body {
  max-height: var(--itinerary-preview, 640px);
  overflow-y: auto;
}

.itinerary__fade {
  display: none;
  position: absolute;
  right: var(--itinerary-scrollbar, 0px);
  bottom: 0;
  left: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface) 85%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.itinerary--folded .itinerary__fade {
  display: block;
}

.itinerary--folded.itinerary--end .itinerary__fade {
  opacity: 0;
}

/* Touch screens: no scroll inside the box, a swipe keeps scrolling the page */
@media (hover: none) {
  .itinerary--folded .itinerary__body {
    overflow-y: hidden;
  }
}

.itinerary__toggle {
  margin-top: 16px;
}

.itinerary p + p {
  margin-top: 16px;
}

/* Tour program from the admin: ## Day, ### heading, - list (filter "itinerary") */
.itinerary__day {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.itinerary__day:not(:first-child) {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.itinerary__heading {
  margin-top: 24px;
  font-size: 17px;
  font-weight: 600;
}

.itinerary__day + p,
.itinerary__heading + p {
  margin-top: 12px;
}

.itinerary ul {
  margin: 12px 0 16px;
  padding-left: 20px;
  list-style: disc;
}

.itinerary li + li {
  margin-top: 6px;
}

.itinerary ul + p {
  margin-top: 16px;
}

.price-box__price--request,
.tour-card__price--request {
  font-size: 24px;
}

.included {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.included .h3 {
  margin-bottom: 20px;
}

/* Slider (static/js/slider.js): a heading with arrows over a row of cards that scrolls sideways */
.slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.slider-nav {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.slider-nav[hidden] {
  display: none;
}

.slider-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}

.slider-nav__btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.slider-nav__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.slider-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.guide-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.guide-list::-webkit-scrollbar {
  display: none;
}

.guide-list:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.guide-card {
  display: flex;
  flex: 0 0 240px;
  flex-direction: column;
  padding: 16px;
  scroll-snap-align: start;
}

.guide-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 16px;
  object-fit: cover;
  border-radius: var(--radius);
}

.guide-card__name {
  margin-bottom: 6px;
  font-size: 22px;
}

.guide-card__meta {
  color: var(--color-primary);
  font-size: 14px;
}

.guide-card__bio {
  margin-top: 12px;
  font-size: 15px;
}

/* At the bottom of the card, on one line across the row */
.guide-card__since {
  margin-top: auto;
  padding-top: 12px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.line-list li {
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}

.line-list li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.line-list--muted li {
  color: var(--color-text-muted);
}

.price-box {
  padding: 24px;
}

.price-box__title {
  margin-bottom: 20px;
  font-weight: 500;
}

.price-box__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.price-box__option {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.price-box__option--best {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
}

.price-box__people {
  color: var(--color-text-muted);
  font-size: 14px;
}

.price-box__price {
  margin: 8px 0;
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
}

.badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
}

.price-box__note {
  margin: 16px 0 20px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.price-box .btn + .btn {
  margin-top: 12px;
}

.price-box__small {
  margin-top: 20px;
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
}

.book {
  padding-top: 72px;
  border-top: 1px solid var(--color-border);
}

.book__note {
  margin-top: 24px;
  font-size: 15px;
}

.book__tour {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.book__tour .h3 {
  margin: 6px 0 8px;
}

.tour-rows {
  border-top: 1px solid var(--color-border);
}

.tour-row {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.tour-row__image {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
}

.tour-row__image img,
.tour-row__image .photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-row__body .h3 a {
  text-decoration: none;
}

.tour-row__body .h3 a:hover {
  color: var(--color-primary);
}

.tour-row__body .muted {
  margin-top: 8px;
}

.tour-row__price {
  text-align: right;
}

.tour-row__price .muted {
  font-size: 14px;
}

.tour-row__price .tour-card__price {
  margin: 4px 0 8px;
}

/* Open groups: dates | tour, days, free seats | price and "Join" */
.group-rows {
  border-top: 1px solid var(--color-border);
}

.group-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.group-row--compact {
  padding: 18px 0;
}

.group-row__dates {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.group-row__year {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.group-row__body .h3 a {
  text-decoration: none;
}

.group-row__body .h3 a:hover {
  color: var(--color-primary);
}

.group-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.group-row__body .h3 + .group-row__meta {
  margin-top: 8px;
}

.group-row__seats {
  color: var(--color-text);
  font-weight: 600;
}

.group-row__action {
  text-align: right;
}

.group-row__price .muted {
  font-size: 14px;
}

.group-row__price .tour-card__price {
  margin: 4px 0 12px;
  white-space: nowrap;
}

/* On the home page the groups sit inside the tours section, under the tour cards */
.home-groups {
  margin-top: 88px;
  padding-top: 72px;
  border-top: 1px solid var(--color-border);
}

.price-box__groups {
  display: block;
  margin-bottom: 16px;
  font-size: 15px;
}

.group-page__tour {
  margin-top: 20px;
}

/* Checkbox with a two-line label: "Other travelers can join my trip" */
.form-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.form-field.form-check input {
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--color-primary);
}

.form-check__label {
  font-size: 15px;
  font-weight: 500;
}

.form-check__hint {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 760px) {
  .group-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 20px 0;
  }

  .group-row__dates,
  .group-row__year {
    display: inline;
  }

  .group-row__year {
    margin-left: 8px;
  }

  .group-row__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    text-align: left;
  }

  .group-row__price .tour-card__price {
    margin-bottom: 0;
  }

  .home-groups {
    margin-top: 56px;
    padding-top: 48px;
  }
}

@media (max-width: 1024px) {
  .tour-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Price box goes right under the gallery on small screens */
  .tour-layout__aside {
    position: static;
    order: -1;
  }
}

@media (max-width: 760px) {
  .gallery--tour {
    grid-auto-rows: 140px;
  }

  .facts__row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px 18px;
  }

  .itinerary__body {
    padding: 20px;
  }

  .included {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* The next card peeks out at the edge, so it is clear the row swipes */
  .guide-card {
    flex-basis: min(72vw, 260px);
  }

  /* Phones swipe; the heading gets the whole width */
  .slider-nav {
    display: none !important;
  }

  .tour-section + .tour-section {
    margin-top: 64px;
  }

  .tour-row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
  }

  .tour-row__price {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    text-align: left;
  }

  .book {
    padding-top: 48px;
  }
}

/* Two prices side by side don't fit on 320px phones */
@media (max-width: 400px) {
  .price-box__options {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Destination page
   -------------------------------------------------------------------------- */

.dest-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head media"
    "text media";
  gap: 0 72px;
  align-items: start;
}

.dest-hero__head {
  grid-area: head;
}

.dest-hero__media {
  grid-area: media;
}

/* The rest of the description, under the lead */
.dest-hero__text {
  grid-area: text;
  max-width: 640px;
  margin-top: 32px;
  font-size: 17px;
  line-height: 1.7;
}

.dest-hero__text p + p {
  margin-top: 1em;
}

.dest-hero__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.dest-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dest-hero__media .photo-placeholder--hero {
  aspect-ratio: 4 / 3;
}

@media (max-width: 960px) {
  .dest-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "media"
      "text";
    gap: 32px;
  }

  .dest-hero__text {
    margin-top: 0;
  }
}

/* Destination page: gallery. The first 8 photos, the rest behind "Show all photos" */
.dest-gallery-section {
  padding-bottom: var(--section-space);
}

.dest-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dest-gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-secondary);
}

.dest-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dest-gallery__item:hover img {
  transform: scale(1.03);
}

.dest-gallery__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.dest-gallery__more > summary {
  margin-top: 24px;
  list-style: none;
  cursor: pointer;
}

.dest-gallery__more > summary::-webkit-details-marker {
  display: none;
}

.dest-gallery__more[open] > summary {
  display: none;
}

.dest-gallery__more[open] > .dest-gallery {
  margin-top: 12px;
}

@media (max-width: 1024px) {
  .dest-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dest-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dest-gallery__more[open] > .dest-gallery {
    margin-top: 8px;
  }
}

/* Full-screen photo viewer (templates/includes/lightbox.html, static/js/lightbox.js) */
html.lightbox-open {
  overflow: hidden;
}

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 20, 26, 0.95);
  color: #fff;
}

.lightbox::backdrop {
  background: rgba(15, 20, 26, 0.95);
}

.lightbox__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 64px 88px;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox__counter {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-muted-inverse);
  font-size: 14px;
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox__btn--close {
  top: 12px;
  right: 12px;
}

.lightbox__btn--prev,
.lightbox__btn--next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__btn--prev {
  left: 20px;
}

.lightbox__btn--next {
  right: 20px;
}

.lightbox--single .lightbox__btn--prev,
.lightbox--single .lightbox__btn--next {
  display: none;
}

/* Phone: the photo takes the full width, arrows go under it (swipe works too) */
@media (max-width: 640px) {
  .lightbox__figure {
    padding: 64px 0 88px;
  }

  .lightbox__btn--prev,
  .lightbox__btn--next {
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .lightbox__btn--prev {
    left: calc(50% - 64px);
  }

  .lightbox__btn--next {
    right: calc(50% - 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dest-gallery__item img {
    transition: none;
  }
}

/* Home: tiles linking to every destination. Without a photo a tile is a brand-soft block */
.dest-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dest-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  color: var(--color-text);
  text-decoration: none;
}

.dest-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Dark fade at the bottom so the name stays readable on any photo */
.dest-tile--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 37, 48, 0.75), rgba(28, 37, 48, 0) 60%);
}

.dest-tile__name {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
}

.dest-tile--photo .dest-tile__name {
  color: #fff;
}

.dest-tile:hover .dest-tile__name {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.dest-tile:hover img {
  transform: scale(1.04);
}

.dest-tile:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .dest-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dest-tiles {
    gap: 12px;
  }

  .dest-tile {
    padding: 14px;
  }

  .dest-tile__name {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dest-tile img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Blog: post cards, list, article page
   -------------------------------------------------------------------------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}

@media (max-width: 1024px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .post-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.post-card {
  display: flex;
  flex-direction: column;
}

.post-card__image {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  text-decoration: none;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__image .photo-placeholder {
  height: 100%;
  border-radius: var(--radius-lg);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 20px;
}

/* Date · reading time */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.post-meta__category {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.post-meta__category:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Blog categories above the list of articles */
.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}

.category-nav__link {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.category-nav__link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.category-nav__link.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 640px) {
  .category-nav {
    margin-bottom: 36px;
  }
}

.post-card__title {
  margin-top: 10px;
  font-size: 24px;
  line-height: 1.2;
}

.post-card__title a {
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-primary);
}

.post-card__excerpt {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.post-card__more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 16px;
  font-size: 15px;
}

/* First post on the first page: wide, photo on the left */
.post-card--featured {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--color-border);
}

.post-card--featured .post-card__body {
  padding-top: 0;
}

.post-card--featured .post-card__title {
  margin-top: 14px;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.1;
}

.post-card--featured .post-card__excerpt {
  margin-top: 16px;
  font-size: 17px;
}

.post-card--featured .post-card__more {
  margin-top: 24px;
  padding-top: 0;
}

@media (max-width: 860px) {
  .post-card--featured {
    display: flex;
    gap: 0;
    padding-bottom: 40px;
  }

  .post-card--featured .post-card__body {
    padding-top: 20px;
  }
}

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.pagination > :last-child {
  justify-self: end;
}

.pagination__status {
  color: var(--color-text-muted);
  font-size: 15px;
}

/* Article page */
.article-head {
  padding-bottom: 56px;
}

/* Breadcrumbs, title, text and CTA share one centered column */
.article-col {
  max-width: 760px;
  margin: 0 auto;
}

.article-head__lead {
  margin-top: 24px;
}

.article-head__meta {
  margin-top: 28px;
}

/* Staff opening an unpublished article */
.draft-note {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: #FDF3E4;
  font-size: 15px;
}

.article-cover {
  max-width: calc(1040px + var(--gutter) * 2);
  margin: 0 auto;
}

.article-cover img {
  width: 100%;
  max-height: 640px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.article-cover__author {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* Long text from the admin: comfortable line length and spacing */
.prose {
  padding: 64px 0 0;
  font-size: 18px;
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 1.2em;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: 1.8em;
}

.prose h2 {
  font-size: 32px;
}

.prose h3 {
  font-size: 24px;
}

.prose h4 {
  font-size: 20px;
}

/* The text may start with a heading: no extra space above it */
.prose > :first-child {
  margin-top: 0;
}

/* A heading belongs to the text under it */
.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.6em;
}

.prose a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li,
.prose li > ul,
.prose li > ol {
  margin-top: 0.4em;
}

.prose u {
  text-underline-offset: 3px;
}

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 24px;
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.45;
}

.prose img {
  border-radius: var(--radius);
}

/* Photos in the article text (blog/content.py): full width of the column, the caption under it */
.prose figure {
  margin: 2em 0;
}

.prose figure img {
  width: 100%;
}

.prose figcaption {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* A wide table scrolls sideways instead of widening the page */
.prose figure:has(> table) {
  overflow-x: auto;
}

/* Share buttons under the text (includes/share_buttons.html). On hover a button takes its network's color */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

/* The same row in the article head, under the date: no line above it */
.share--top {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.share__label {
  font-weight: 600;
}

.share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share__button {
  --share-color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.share__button:hover {
  border-color: var(--share-color);
  background: var(--share-color);
  color: #FFFFFF;
}

.share__button svg {
  width: 20px;
  height: 20px;
}

.share__button--vk { --share-color: #0077FF; }
.share__button--line { --share-color: #06C755; }
.share__button--weibo { --share-color: #E6162D; }
.share__button--whatsapp { --share-color: #25D366; }
.share__button--telegram { --share-color: #26A5E4; }
.share__button--facebook { --share-color: #0866FF; }
.share__button--x { --share-color: #000000; }

.share__status {
  color: var(--color-text-muted);
  font-size: 14px;
}

.article-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin: 64px 0 var(--section-space);
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.article-cta > div:first-child {
  flex: 1 1 300px;
}

.article-cta__text {
  margin-top: 8px;
}

.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 640px) {
  .article-head {
    padding-bottom: 40px;
  }

  .prose {
    padding-top: 40px;
    font-size: 17px;
  }

  /* Seven buttons fit one line on a 360px phone */
  .share {
    margin-top: 40px;
  }

  .share--top {
    margin-top: 20px;
  }

  .share__list {
    gap: 6px;
  }

  .share__button {
    width: 40px;
    height: 40px;
  }

  .article-cta {
    margin-top: 48px;
    padding: 24px 20px;
  }

  .article-cta__actions,
  .article-cta__actions .btn {
    width: 100%;
  }

  .pagination {
    margin-top: 48px;
  }
}

/* --------------------------------------------------------------------------
   Legal pages: Terms, Privacy (long text in .prose)
   -------------------------------------------------------------------------- */

.prose--legal {
  padding-bottom: var(--section-space);
  font-size: 17px;
}

.prose--legal h2 {
  font-size: 26px;
}

.prose strong {
  font-weight: 600;
}

/* Wide tables scroll inside their box on phones instead of widening the page */
.table-wrap {
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.prose th,
.prose td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal-toc {
  padding: 24px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: 15px;
}

.legal-toc__title {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prose .legal-toc ol {
  margin-top: 12px;
  columns: 2;
  column-gap: 32px;
}

.prose .legal-toc li {
  margin: 0 0 6px;
  break-inside: avoid;
}

.legal-toc a {
  text-decoration: none;
}

.legal-toc a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .prose .legal-toc ol {
    columns: 1;
  }

  .prose--legal h2 {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------------
   B2B page for travel agencies (/partners/)
   -------------------------------------------------------------------------- */

.b2b-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 72px;
  align-items: end;
}

.b2b-hero .hero__actions {
  margin-top: 36px;
}

/* Licence, office, borders: the facts an agency checks first */
.b2b-facts {
  margin: 0;
  padding: 12px 32px;
}

.b2b-facts__row {
  padding: 18px 0;
}

.b2b-facts__row + .b2b-facts__row {
  border-top: 1px solid var(--color-border);
}

.b2b-facts dt {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.b2b-facts dd {
  margin: 4px 0 0;
  font-size: 15px;
}

.b2b-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.b2b-card {
  padding: 32px;
  background: var(--color-bg);
}

.b2b-card__num {
  display: block;
  margin-bottom: 20px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.2;
}

.b2b-card__title,
.b2b-service__title,
.b2b-module__title {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
}

.b2b-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.b2b-service {
  padding-top: 28px;
  border-top: 2px solid var(--color-text);
}

.b2b-quote-list {
  margin-top: 24px;
}

.b2b-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.b2b-module {
  padding-top: 28px;
  border-top: 2px solid var(--color-text);
}

.b2b-module__days {
  margin-bottom: 12px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.1;
}

.b2b-steps__title {
  margin-bottom: 48px;
}

.b2b-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b2b-step {
  padding: 28px 32px 32px;
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-lg);
}

.b2b-step__num {
  display: block;
  margin-bottom: 16px;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.2;
}

.b2b-step__title {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

.b2b-step p {
  color: var(--color-text-muted-inverse);
  font-size: 15px;
}

.b2b-contacts {
  justify-content: flex-start;
  margin-top: 32px;
  padding: 28px 0 0;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 960px) {
  .b2b-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .b2b-cards,
  .b2b-services,
  .b2b-modules {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .b2b-services,
  .b2b-modules {
    gap: 40px;
  }

  .b2b-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .b2b-facts,
  .b2b-card,
  .b2b-step {
    padding-left: 20px;
    padding-right: 20px;
  }

  .b2b-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .b2b-module__days {
    font-size: 32px;
  }
}

/* --------------------------------------------------------------------------
   Motion: slow, soft fades. Everything here is off for prefers-reduced-motion.
   -------------------------------------------------------------------------- */

:root {
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* First screen fades in on load */
  .hero__content,
  .page-head .container,
  .tour-hero .container {
    animation: fade-up 0.9s var(--ease-calm) backwards;
  }

  .hero__media {
    animation: fade-up 0.9s 0.15s var(--ease-calm) backwards;
  }

  .whatsapp-float {
    animation: fade-in 0.6s 0.8s ease backwards;
    transition: background-color 0.2s, transform 0.3s var(--ease-calm);
  }

  .whatsapp-float:hover {
    transform: translateY(-2px);
  }

  /* Cards lift a little on hover */
  .tour-card {
    transition: transform 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm);
  }

  .tour-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(28, 37, 48, 0.08);
  }

  .tour-card__image img,
  .tour-row__image img,
  .post-card__image img {
    transition: transform 0.8s var(--ease-calm);
  }

  .tour-row:hover .tour-row__image img,
  .post-card:hover .post-card__image img {
    transform: scale(1.03);
  }

  .faq__item[open] .faq__answer {
    animation: fade-down 0.4s var(--ease-calm);
  }

  .header__nav.is-open {
    animation: fade-down 0.3s var(--ease-calm);
  }

  /* Scroll reveal: base.html adds .motion to <html> and .is-visible to each block.
     Keep this list in sync with REVEAL in base.html. Guide cards are not in it: they sit in
     a slider, cards hidden to the side would only fade in during a swipe. */
  .motion :is(.section-head, .split__main, .price-card, .tour-card, .tour-row,
    .team-card, .review, .season, .faq-layout, .form-card, .tour-section,
    .empty-state, .post-card, .article-cta, .group-row, .b2b-card, .b2b-step) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease-calm), transform 0.8s var(--ease-calm);
    transition-delay: var(--reveal-delay, 0s);
  }

  .motion :is(.section-head, .split__main, .price-card, .tour-card, .tour-row,
    .team-card, .review, .season, .faq-layout, .form-card, .tour-section,
    .empty-state, .post-card, .article-cta, .group-row, .b2b-card, .b2b-step).is-visible {
    opacity: 1;
    transform: none;
  }

  /* Revealed cards keep the hover lift (the delay is removed by JS after the reveal) */
  .motion .tour-card.is-visible {
    transition: opacity 0.8s var(--ease-calm), transform 0.4s var(--ease-calm), box-shadow 0.4s var(--ease-calm);
    transition-delay: var(--reveal-delay, 0s);
  }

  .motion .tour-card.is-visible:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}