/* ==========================================================================
   VisitTNT - main stylesheet
   Loaded after Bootstrap and Swiper so every rule here wins.

   TABLE OF CONTENTS
   01. Design tokens
   02. Bootstrap variable overrides
   03. Base / reset
   04. Typography
   05. Layout helpers (sections, headings)
   06. Buttons
   07. Forms
   08. Cards and surfaces
   09. Header / navigation
   10. Hero slider
   11. About us
   12. Explore destinations
   13. Browse by experience
   14. Browse by themes
   15. Browse by destination
   16. Browse by duration
   17. Latest blog posts
   18. FAQs
   19. Plan your trip
   20. Footer
   21. Swiper overrides
   22. Back to top
   23. Scroll reveal animation
   24. Accessibility and print
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   Single source of truth for colour, type, spacing and motion.
   ========================================================================== */
:root {
  /* --- Brand colours --- */
  --vt-bg: #ffffff;            /* Main background - pure white          */
  --vt-bg-alt: #f4f5f7;        /* Alternating section background        */
  --vt-heading: #0f172a;       /* Headings h1-h3 - deep jet black       */
  --vt-text: #334155;          /* Body copy - charcoal grey             */
  --vt-border: #e2e8f0;        /* Muted text, hairlines, dividers       */
  --vt-primary: #780606;       /* Highlight / primary button - maroon   */
  --vt-primary-dark: #990000;  /* Primary button hover - brighter red   */

  /*
    Light tint of the brand red, for text, icons and thin accents on dark
    surfaces (topbar, footer, photo overlays, the train card). The maroon
    itself measures only 1.67:1 against --vt-dark and would vanish there;
    this tint measures 5.72:1. On light backgrounds keep --vt-primary.
  */
  --vt-primary-light: #e06666;

  /*
    Near-black for the topbar and footer. The heading colour is slate, whose
    blue channel is almost three times its red, which reads as navy over a
    large area. This one is close to neutral so those bands look black.
  */
  --vt-dark: #0d0f13;

  /* RGB channels, needed for rgba() shadows, overlays and tints */
  --vt-primary-rgb: 120, 6, 6;
  --vt-primary-light-rgb: 224, 102, 102;
  --vt-heading-rgb: 15, 23, 42;
  --vt-dark-rgb: 13, 15, 19;

  /* Soft primary tint used for icon chips and subtle badges */
  --vt-primary-soft: rgba(var(--vt-primary-rgb), 0.1);

  /* --- Typography --- */
  /*
    Headings use Cormorant Upright, a calligraphic display serif. It is only
    loaded in weight 700, so headings should not ask for anything heavier.
    Small UI labels (navigation, eyebrows, counters) stay in the body font,
    because the display face loses legibility below roughly 18px.
  */
  --vt-font-heading: "Cormorant Upright", Georgia, "Times New Roman", serif;
  --vt-font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /*
    Fluid type scale: min size, preferred (viewport based), max size.
    Cormorant has a much smaller cap height than a typical sans (measured at
    about 1/1.19 of Plus Jakarta Sans), so the scale runs roughly 20% larger
    than it would for a sans to give headings the same visual weight.
  */
  --vt-fs-h1: clamp(2.7rem, 1.9rem + 3.4vw, 4.2rem);
  --vt-fs-h2: clamp(2.1rem, 1.6rem + 2.2vw, 3rem);
  --vt-fs-h3: clamp(1.6rem, 1.4rem + 1.1vw, 2.1rem);
  --vt-fs-h4: 1.5rem;
  --vt-fs-h5: 1.35rem;
  --vt-fs-h6: 1.2rem;
  --vt-fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  /* --- Spacing --- */
  --vt-section-y: clamp(3.5rem, 2.5rem + 3vw, 6rem); /* section rhythm */

  /*
    Fixed topbar height. The sticky header offsets itself by exactly this
    amount, so the two values have to stay in step.
  */
  --vt-topbar-h: 42px;

  /* --- Radii --- */
  --vt-radius-sm: 8px;
  --vt-radius: 14px;
  --vt-radius-lg: 20px;
  --vt-radius-pill: 999px;

  /* --- Elevation --- */
  --vt-shadow-sm: 0 1px 2px rgba(var(--vt-heading-rgb), 0.06);
  --vt-shadow: 0 8px 24px rgba(var(--vt-heading-rgb), 0.08);
  --vt-shadow-lg: 0 18px 48px rgba(var(--vt-heading-rgb), 0.12);

  /* --- Motion --- */
  --vt-transition: 0.25s ease;
  --vt-transition-slow: 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Layers --- */
  --vt-z-header: 1030;
  --vt-z-floating: 1040;
}

/* ==========================================================================
   02. BOOTSTRAP VARIABLE OVERRIDES
   Re-point the Bootstrap custom properties at the brand tokens so the
   framework utilities and components inherit the design system for free.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--vt-font-body);
  --bs-body-color: var(--vt-text);
  --bs-body-color-rgb: 51, 65, 85;
  --bs-body-bg: var(--vt-bg);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;

  --bs-heading-color: var(--vt-heading);
  --bs-emphasis-color: var(--vt-heading);

  --bs-border-color: var(--vt-border);
  --bs-border-color-translucent: var(--vt-border);
  --bs-border-radius: var(--vt-radius-sm);
  --bs-border-radius-lg: var(--vt-radius);
  --bs-border-radius-xl: var(--vt-radius-lg);

  --bs-primary: var(--vt-primary);
  --bs-primary-rgb: var(--vt-primary-rgb);

  --bs-link-color: var(--vt-primary);
  --bs-link-color-rgb: var(--vt-primary-rgb);
  --bs-link-hover-color: var(--vt-primary-dark);
  --bs-link-hover-color-rgb: 153, 0, 0;

  --bs-secondary-color: rgba(var(--bs-body-color-rgb), 0.7);
  --bs-tertiary-bg: var(--vt-bg-alt);

  /* Without this the focus ring stays Bootstrap blue on links and buttons */
  --bs-focus-ring-color: rgba(var(--vt-primary-rgb), 0.25);
}

/* ==========================================================================
   03. BASE / RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Anchor jumps stop below the sticky header instead of underneath it */
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--vt-bg);
  color: var(--vt-text);
  font-family: var(--vt-font-body);
  font-size: 1rem;
  line-height: 1.7;
  /*
    Stops a wide element from creating a horizontal scrollbar on mobile.
    Must be clip rather than hidden: hidden turns the body into a scroll
    container, which stops position: sticky working on the header.
  */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  transition: color var(--vt-transition);
}

ul,
ol {
  margin-bottom: 0;
}

/*
  Consistent focus ring for every keyboard-focusable element. No
  border-radius here: it would override component radii on focus (a 20px
  card snapping to 4px corners), and outlines already follow the element's
  own radius in current browsers.
*/
:focus-visible {
  outline: 2px solid var(--vt-primary);
  outline-offset: 3px;
}

/* On the dark bands a maroon ring would not show, so use the light tint */
.topbar :focus-visible,
.hero :focus-visible,
.train-card :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--vt-primary-light);
}

/* On the maroon call-to-action card only a white ring stands out */
.plan-trip__card :focus-visible {
  outline-color: #ffffff;
}

/* Brand-coloured text selection */
::selection {
  background-color: rgba(var(--vt-primary-rgb), 0.18);
  color: var(--vt-heading);
}

/* Slim, on-brand scrollbar (WebKit / Chromium) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--vt-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--vt-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vt-primary);
}

/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--vt-font-heading);
  color: var(--vt-heading);
  font-weight: 700;
  line-height: 1.15;
  /* Negative tracking crowds a high-contrast serif, so keep it neutral */
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

h1,
.h1 {
  font-size: var(--vt-fs-h1);
}

h2,
.h2 {
  font-size: var(--vt-fs-h2);
}

h3,
.h3 {
  font-size: var(--vt-fs-h3);
}

h4,
.h4 {
  font-size: var(--vt-fs-h4);
}

h5,
.h5 {
  font-size: var(--vt-fs-h5);
}

h6,
.h6 {
  font-size: var(--vt-fs-h6);
}

p {
  color: var(--vt-text);
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--vt-fs-lead);
  font-weight: 400;
  line-height: 1.75;
}

/* Small uppercase label that sits above a section heading */
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vt-primary);
  margin-bottom: 0.75rem;
}

/* Reusable colour helpers */
.text-brand {
  color: var(--vt-primary) !important;
}

.text-heading {
  color: var(--vt-heading) !important;
}

.text-muted-soft {
  color: #64748b !important;
}

.bg-alt {
  background-color: var(--vt-bg-alt) !important;
}

.bg-brand {
  background-color: var(--vt-primary) !important;
}

.bg-brand-soft {
  background-color: var(--vt-primary-soft) !important;
}

.border-soft {
  border-color: var(--vt-border) !important;
}

/* ==========================================================================
   05. LAYOUT HELPERS
   ========================================================================== */

/* Standard vertical rhythm for every page section */
.section {
  padding-top: var(--vt-section-y);
  padding-bottom: var(--vt-section-y);
}

.section-sm {
  padding-top: calc(var(--vt-section-y) * 0.6);
  padding-bottom: calc(var(--vt-section-y) * 0.6);
}

/* Heading block used at the top of most sections */
.section-heading {
  max-width: 640px;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading p {
  color: #64748b;
  margin-bottom: 0;
}

/* Heading on the left; slider arrows or a single button on the right */
.section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}

.section-bar__title {
  margin-bottom: 0;
}

/* Unlike the arrows, a call to action stays visible on phones */
.section-bar__action {
  flex-shrink: 0;
}

.section-bar__controls {
  display: flex;
  flex-shrink: 0;
  gap: 0.6rem;
}

/* On a phone the carousel is swiped, so the arrows only crowd the heading */
@media (max-width: 575.98px) {
  .section-bar__controls {
    display: none;
  }
}

/* ==========================================================================
   06. BUTTONS
   Built on the Bootstrap --bs-btn-* API so states, sizes and focus rings
   keep working without rewriting the component.
   ========================================================================== */
.btn {
  --bs-btn-font-family: var(--vt-font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-border-radius: var(--vt-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.5;
  transition: background-color var(--vt-transition),
    border-color var(--vt-transition), color var(--vt-transition),
    transform var(--vt-transition), box-shadow var(--vt-transition);
}

.btn:active {
  transform: translateY(1px);
}

/* Solid brand-coloured call to action */
.btn-brand {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--vt-primary);
  --bs-btn-border-color: var(--vt-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--vt-primary-dark);
  --bs-btn-hover-border-color: var(--vt-primary-dark);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vt-primary-dark);
  --bs-btn-active-border-color: var(--vt-primary-dark);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--vt-primary);
  --bs-btn-disabled-border-color: var(--vt-primary);
  --bs-btn-focus-shadow-rgb: var(--vt-primary-rgb);
  box-shadow: 0 6px 18px rgba(var(--vt-primary-rgb), 0.28);
}

.btn-brand:hover {
  box-shadow: 0 10px 24px rgba(var(--vt-primary-rgb), 0.36);
}

/* Outlined variant for secondary actions */
.btn-outline-brand {
  --bs-btn-color: var(--vt-heading);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--vt-border);
  --bs-btn-hover-color: var(--vt-primary);
  --bs-btn-hover-bg: var(--vt-primary-soft);
  --bs-btn-hover-border-color: var(--vt-primary);
  --bs-btn-active-color: var(--vt-primary);
  --bs-btn-active-bg: var(--vt-primary-soft);
  --bs-btn-active-border-color: var(--vt-primary);
  --bs-btn-focus-shadow-rgb: var(--vt-primary-rgb);
}

/* Dark variant for use on light imagery */
.btn-dark-brand {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--vt-heading);
  --bs-btn-border-color: var(--vt-heading);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--vt-primary);
  --bs-btn-hover-border-color: var(--vt-primary);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--vt-primary-dark);
  --bs-btn-active-border-color: var(--vt-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--vt-heading-rgb);
}

/* White variant for brand-coloured or dark surfaces */
.btn-light-brand {
  --bs-btn-color: var(--vt-primary);
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-color: var(--vt-primary-dark);
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-active-color: var(--vt-primary-dark);
  --bs-btn-active-bg: var(--vt-bg-alt);
  --bs-btn-active-border-color: var(--vt-bg-alt);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  box-shadow: 0 10px 26px rgba(var(--vt-dark-rgb), 0.24);
}

.btn-light-brand:hover {
  box-shadow: 0 14px 32px rgba(var(--vt-dark-rgb), 0.32);
  transform: translateY(-2px);
}

/* Keep the focus ring when the button is hovered as well */
.btn-light-brand:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow),
    0 10px 26px rgba(var(--vt-dark-rgb), 0.24);
}

/* Text-only link button with a nudging arrow */
.btn-link-brand {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: var(--vt-primary);
  --bs-btn-hover-color: var(--vt-primary-dark);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  font-weight: 600;
}

.btn-link-brand i {
  transition: transform var(--vt-transition);
}

.btn-link-brand:hover i {
  transform: translateX(4px);
}

/* Tighter size for dense areas such as the header bar */
.btn-compact {
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-font-size: 0.9375rem;
}

/* Circular icon-only button, used for slider arrows and similar controls */
.btn-icon {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ==========================================================================
   07. FORMS
   ========================================================================== */
.form-control,
.form-select {
  border-color: var(--vt-border);
  border-radius: var(--vt-radius-sm);
  color: var(--vt-heading);
  padding: 0.75rem 1rem;
  transition: border-color var(--vt-transition), box-shadow var(--vt-transition);
}

.form-control::placeholder {
  color: #94a3b8;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--vt-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--vt-primary-rgb), 0.15);
}

.form-label {
  font-weight: 600;
  color: var(--vt-heading);
  margin-bottom: 0.375rem;
}

.form-check-input:checked {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
}

.form-check-input:focus {
  border-color: var(--vt-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--vt-primary-rgb), 0.15);
}

/* ==========================================================================
   08. CARDS AND SURFACES
   ========================================================================== */
.card {
  --bs-card-border-color: var(--vt-border);
  --bs-card-border-radius: var(--vt-radius);
  --bs-card-bg: var(--vt-bg);
  transition: transform var(--vt-transition-slow),
    box-shadow var(--vt-transition-slow);
}

/* Opt-in lift on hover, add alongside .card */
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--vt-shadow-lg);
}

/* Small rounded chip that holds a feature icon */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--vt-radius);
  background-color: var(--vt-primary-soft);
  color: var(--vt-primary);
  font-size: 1.5rem;
  flex: 0 0 auto;
}

/* Pill badge used for tags, categories and prices */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-primary-soft);
  color: var(--vt-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Fixed-ratio image wrapper that crops without distorting */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--vt-radius);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--vt-transition-slow);
}

.media-frame:hover img {
  transform: scale(1.06);
}

/* ==========================================================================
   09. HEADER / NAVIGATION

   Two rows:
   09.1 Topbar     - slim dark strip, desktop only, scrolls away with the page
   09.2 Navbar     - sticky white bar holding the brand, menu and actions
   09.3 Dropdowns  - panels that sit flush under their nav item so the two
                     read as one connected surface
   09.4 Search
   09.5 Mobile

   main.js adds .is-scrolled to .header-main once the page moves, and opens
   the dropdowns on hover from the lg breakpoint upwards.
   ========================================================================== */

/*
  The whole header sticks, not just the navbar: a sticky child can only move
  inside its parent box, so .header-main alone would scroll away with the
  wrapper. Offsetting by the topbar height slides the topbar out of view and
  pins the navbar against the top of the viewport.
*/
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--vt-z-header);
}

@media (min-width: 992px) {
  .site-header {
    top: calc(-1 * var(--vt-topbar-h));
  }
}

/* --------------------------------------------------------------------------
   09.1 Topbar
   Hidden below lg, where the space is better spent on the navbar.
   -------------------------------------------------------------------------- */
.topbar {
  display: none;
  background-color: var(--vt-dark);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}

@media (min-width: 992px) {
  .topbar {
    display: flex;
    align-items: center;
    height: var(--vt-topbar-h);
  }

  .topbar > .container {
    flex: 1 1 auto;
  }
}

.topbar a {
  color: inherit;
}

.topbar a:hover {
  color: #ffffff;
}

.topbar__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
}

.topbar__link,
.topbar__note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.topbar__link i,
.topbar__note i {
  color: var(--vt-primary-light);
  font-size: 0.875rem;
}

.topbar__divider {
  width: 1px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.18);
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
}

.topbar__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.875rem;
  transition: background-color var(--vt-transition), color var(--vt-transition);
}

.topbar__social a:hover {
  background-color: var(--vt-primary);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   09.2 Main navbar
   -------------------------------------------------------------------------- */
.header-main {
  background-color: var(--vt-bg);
  border-bottom: 1px solid var(--vt-border);
  transition: box-shadow var(--vt-transition);
}

.header-main.is-scrolled {
  box-shadow: var(--vt-shadow-sm);
}

/*
  Brand: the supplied logo already carries the mark, wordmark and tagline,
  so only its height is set. Width follows from the intrinsic ratio given by
  the img width and height attributes, which also stops any layout shift.
*/
.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 0;
}

.brand-logo {
  height: 44px;
  width: auto;
}

@media (min-width: 992px) {
  .brand-logo {
    height: 50px;
  }
}

/* Menu items */
.main-menu {
  gap: 0.125rem;
}

.main-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vt-heading);
  transition: color var(--vt-transition), background-color var(--vt-transition);
}

.main-menu .nav-link:hover,
.main-menu .nav-link:focus-visible {
  color: var(--vt-primary);
}

.main-menu .nav-link i {
  font-size: 1.0625rem;
}

/*
  Bootstrap gives .nav-link a soft box-shadow ring on focus. A crisp inset
  outline reads better on an item that is already highlighted as a tab.
*/
.main-menu .nav-link:focus-visible {
  outline: 2px solid var(--vt-primary);
  outline-offset: -2px;
  box-shadow: none;
}

/*
  No ring while the panel is open: a box on all four sides would cut the
  seam between the tab and the panel. The tab background and the brand-coloured
  label already mark the item clearly.
*/
.main-menu .nav-link.show:focus-visible {
  outline: none;
}

/* The home item shows its icon only once there is room for the full menu */
@media (min-width: 992px) {
  .main-menu .nav-link__label {
    display: none;
  }
}

/* Chevron caret, replacing the solid triangle Bootstrap draws by default */
.main-menu .dropdown-toggle::after {
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.5rem;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  border-radius: 1px;
  vertical-align: 0.15em;
  transform: rotate(45deg);
  transition: transform var(--vt-transition);
}

.main-menu .dropdown-toggle.show::after {
  transform: rotate(225deg);
}

/* Header search and call to action */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   09.3 Dropdown panels (desktop)
   Nav items stretch to the full navbar height so an open item reads as a tab
   joined to the panel below it.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .header-main {
    --bs-navbar-padding-y: 0;
  }

  /* The container is the positioning context for the full-width mega panel */
  .header-main > .container {
    position: relative;
    align-items: stretch;
    min-height: 78px;
  }

  /*
    Above lg the offcanvas is plain inline content. Bootstrap zeroes its
    padding and hides its header; these rules let it stretch to the navbar
    height so the open tab can meet its panel.
  */
  .header-drawer {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
  }

  .header-drawer .offcanvas-body {
    flex: 1 1 auto;
    align-items: stretch;
    overflow: visible;
  }

  .main-menu {
    align-items: stretch;
  }

  .main-menu > .nav-item {
    display: flex;
    align-items: stretch;
    position: relative;
  }

  .main-menu .nav-link {
    padding: 0 1.05rem;
    border-radius: var(--vt-radius) var(--vt-radius) 0 0;
  }

  /* Open item: same surface as the panel, so the seam disappears */
  .main-menu .nav-link.show {
    background-color: var(--vt-bg-alt);
    color: var(--vt-primary);
  }

  /* The mega panel spans the container, so its item must not be the anchor */
  .nav-item--mega {
    position: static !important;
  }

  .dropdown-panel {
    /* Kept in the DOM at all times so opening and closing can be animated */
    display: block;
    top: 100%;
    margin-top: 0;
    padding: 1.25rem;
    border-radius: 0 0 var(--vt-radius-lg) var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease,
      visibility 0.22s ease;
  }

  .dropdown-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Wide enough to keep the longest entry on a single line */
  .dropdown-panel--sm {
    min-width: 312px;
  }

  .dropdown-panel--md {
    min-width: 440px;
  }

  /* Panels are sized to their content, so entries never need to wrap */
  .dropdown-panel .mega-link {
    white-space: nowrap;
  }

  .dropdown-panel--mega {
    left: 0;
    right: 0;
    width: auto;
    padding: 1.75rem;
  }

  /* Vertical rule between the Domestic and International groups */
  .mega-group--bordered {
    border-left: 1px solid var(--vt-border);
    padding-left: 1.75rem;
    height: 100%;
  }
}

/* Shared panel look, both breakpoints */
.dropdown-panel {
  --bs-dropdown-bg: var(--vt-bg-alt);
  --bs-dropdown-border-width: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-font-size: 0.9375rem;
}

.mega-group__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-primary);
  padding-left: 0.75rem;
  margin-bottom: 0.65rem;
}

.mega-list {
  margin: 0;
}

.mega-link {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--vt-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--vt-text);
  transition: background-color var(--vt-transition),
    color var(--vt-transition), box-shadow var(--vt-transition);
}

.mega-link:hover,
.mega-link:focus-visible {
  background-color: var(--vt-bg);
  color: var(--vt-primary);
  box-shadow: var(--vt-shadow-sm);
}

/* Secondary text inside a link, e.g. "(Delhi Agra Jaipur)" */
.mega-link__hint {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #94a3b8;
}

/* --------------------------------------------------------------------------
   09.4 Header search
   -------------------------------------------------------------------------- */
.header-search {
  position: relative;
  flex: 1 1 auto;
}

.header-search__icon {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.9375rem;
  pointer-events: none;
}

.header-search__input {
  width: 100%;
  padding: 0.55rem 1rem 0.55rem 2.5rem;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-bg-alt);
  font-size: 0.9rem;
  color: var(--vt-heading);
  outline: none;
  transition: width var(--vt-transition), border-color var(--vt-transition),
    background-color var(--vt-transition), box-shadow var(--vt-transition);
}

.header-search__input::placeholder {
  color: #94a3b8;
}

.header-search__input:focus {
  border-color: var(--vt-primary);
  background-color: var(--vt-bg);
  box-shadow: 0 0 0 0.2rem rgba(var(--vt-primary-rgb), 0.14);
}

/* Grows a little on focus to give long queries more room */
@media (min-width: 992px) {
  .header-search {
    flex: 0 0 auto;
  }

  .header-search__input {
    width: 190px;
  }

  .header-search__input:focus {
    width: 250px;
  }
}

/* --------------------------------------------------------------------------
   09.5 Mobile navigation
   The menu lives in an offcanvas drawer below lg and inline above it, so the
   markup is written once. Search moves into its own collapsing panel.
   -------------------------------------------------------------------------- */

/* Square icon buttons sitting beside the brand */
.header-mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/*
  Bare icons, no chrome. The box stays 42px so the tap target keeps its
  recommended size even though nothing is drawn around the glyph.
*/
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--vt-heading);
  font-size: 1.35rem;
  line-height: 1;
  transition: color var(--vt-transition);
}

.header-icon-btn:hover {
  color: var(--vt-primary);
}

/*
  Active state keys off aria-expanded, which Bootstrap maintains on the
  search toggle. Keying off :not(.collapsed) would also catch the menu
  button, because offcanvas triggers never receive that class.
*/
.header-icon-btn__close {
  display: none;
}

.header-icon-btn[aria-expanded="true"] {
  color: var(--vt-primary);
}

.header-icon-btn[aria-expanded="true"] .header-icon-btn__open {
  display: none;
}

.header-icon-btn[aria-expanded="true"] .header-icon-btn__close {
  display: inline-block;
}

/* Search panel that slides out from under the navbar */
.mobile-search {
  background-color: var(--vt-bg-alt);
  border-bottom: 1px solid var(--vt-border);
}

.mobile-search__form {
  position: relative;
  padding: 0.85rem 0;
}

.mobile-search__icon {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.9375rem;
  pointer-events: none;
}

.mobile-search .header-search__input {
  background-color: var(--vt-bg);
}

@media (max-width: 991.98px) {
  .header-main {
    --bs-navbar-padding-y: 0.85rem;
  }

  /* Drawer shell */
  .header-drawer {
    --bs-offcanvas-width: min(86vw, 340px);
    --bs-offcanvas-padding-x: 1.25rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-bg: var(--vt-bg);
  }

  .header-drawer .offcanvas-header {
    border-bottom: 1px solid var(--vt-border);
  }


  .header-drawer .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
  }

  .main-menu .nav-link {
    padding: 0.8rem 0.25rem;
    border-bottom: 1px solid var(--vt-border);
  }

  /* Only the dropdown rows push their caret out to the right edge */
  .main-menu .dropdown-toggle {
    justify-content: space-between;
  }

  /* Panels expand inline instead of floating above the page */
  .dropdown-panel {
    position: static !important;
    width: 100%;
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem;
    border-radius: var(--vt-radius);
    box-shadow: none;
  }

  .mega-group + .mega-group,
  .mega-group--bordered {
    margin-top: 0.75rem;
  }

  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }

  /* Contact block pinned to the bottom of the drawer */
  .drawer-footer {
    margin-top: auto;
    padding-top: 1.5rem;
  }

  .drawer-footer__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 0.9375rem;
    color: var(--vt-text);
  }

  .drawer-footer__link i {
    color: var(--vt-primary);
  }

  .drawer-footer__link:hover {
    color: var(--vt-primary);
  }

  .drawer-footer__social {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
  }

  .drawer-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--vt-bg-alt);
    color: var(--vt-heading);
    transition: background-color var(--vt-transition),
      color var(--vt-transition);
  }

  .drawer-footer__social a:hover {
    background-color: var(--vt-primary);
    color: #ffffff;
  }
}

/* Link that lets keyboard users skip the navigation, visible only on focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--vt-radius-sm) var(--vt-radius-sm);
  background-color: var(--vt-primary);
  color: #ffffff;
  font-weight: 600;
  transition: top var(--vt-transition);
}

.skip-link:focus {
  top: 0;
  color: #ffffff;
}
/* ==========================================================================
   10. HERO SLIDER

   Full-bleed banner. Slides cross-fade rather than travel sideways, the
   active photo drifts in slowly, and every control is grouped along the
   bottom edge instead of floating over the middle of the image.

   The source photos are 1366x430, so the height is capped near that to
   keep them sharp: past roughly 480px they would be upscaled.
   ========================================================================== */
.hero {
  position: relative;
  height: clamp(320px, 34vw, 480px);
}

.hero-slider,
.hero-slider .swiper-slide {
  height: 100%;
}

.hero-slide {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Slow drift across the photo while its slide is showing */
.swiper-slide-active .hero-slide__img {
  animation: hero-drift 8s ease-out forwards;
}

@keyframes hero-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

/*
  Two scrims: one up the left for the caption, one along the bottom for the
  control row. Both are needed because the photos vary from bright sky to
  night scenes.
*/
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to top,
      rgba(var(--vt-dark-rgb), 0.88) 0%,
      rgba(var(--vt-dark-rgb), 0.15) 42%,
      rgba(var(--vt-dark-rgb), 0) 70%
    ),
    linear-gradient(
      to right,
      rgba(var(--vt-dark-rgb), 0.72) 0%,
      rgba(var(--vt-dark-rgb), 0.2) 52%,
      rgba(var(--vt-dark-rgb), 0) 100%
    );
  pointer-events: none;
}

/* --- Caption --- */
.hero-slide__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* Clears the control row sitting below */
  padding-bottom: clamp(4.5rem, 3rem + 5vw, 6.5rem);
  pointer-events: none;
}

.hero-slide__rule {
  width: 46px;
  height: 4px;
  margin-bottom: 1rem;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-primary-light);
}

.hero-slide__place {
  font-family: var(--vt-font-heading);
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(var(--vt-dark-rgb), 0.5);
}

.hero-slide__region {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.hero-slide__region i {
  color: var(--vt-primary-light);
}

/* Caption parts rise into place once their slide is the active one */
.hero-slide__rule,
.hero-slide__place,
.hero-slide__region {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.swiper-slide-active .hero-slide__rule,
.swiper-slide-active .hero-slide__place,
.swiper-slide-active .hero-slide__region {
  opacity: 1;
  transform: translateY(0);
}

.swiper-slide-active .hero-slide__rule {
  transition-delay: 0.15s;
}

.swiper-slide-active .hero-slide__place {
  transition-delay: 0.25s;
}

.swiper-slide-active .hero-slide__region {
  transition-delay: 0.35s;
}

/* --- Control row --- */
.hero-controls {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  z-index: 3;
}

.hero-controls__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.hero-controls__left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hero-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--vt-radius-sm);
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.05rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color var(--vt-transition),
    border-color var(--vt-transition), color var(--vt-transition);
}

.hero-nav:hover {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
  color: #ffffff;
}

.hero-counter {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0 0.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
}

.hero-counter__current {
  font-size: 1.375rem;
  color: #ffffff;
}

/* --- Thumbnails --- */
.hero-thumbs {
  display: flex;
  gap: 0.6rem;
  margin: 0;
}

.hero-thumb {
  display: block;
  width: 86px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--vt-radius-sm);
  background: none;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--vt-transition), border-color var(--vt-transition);
}

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

.hero-thumb:hover {
  opacity: 0.85;
}

.hero-thumb.is-active {
  opacity: 1;
  border-color: var(--vt-primary-light);
}

/* Too cramped next to the arrows on a phone */
@media (max-width: 767.98px) {
  .hero-thumbs {
    display: none;
  }
}

/* --- Autoplay progress --- */
.hero-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.16);
}

.hero-progress__bar {
  display: block;
  height: 100%;
  background-color: var(--vt-primary-light);
  /* slider.js writes --hero-progress as the timer counts down */
  transform: scaleX(var(--hero-progress, 0));
  transform-origin: left center;
}


/* ==========================================================================
   11. ABOUT US

   One photo beside the story. From lg up the photo column is stretched by
   the grid row to the height of the text, and the image covers it, so the
   two sides always line up however long the copy is. Below lg the photo
   stacks on top as a square.
   ========================================================================== */
.about-media {
  position: relative;
  height: 100%;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-bg-alt);
  box-shadow: var(--vt-shadow-lg);
}

/* Absolutely placed, so the photo never adds height of its own */
.about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-media:hover img {
  transform: scale(1.04);
}

@media (max-width: 991.98px) {
  .about-media {
    height: auto;
    min-height: 0;
    max-width: 620px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
  }
}

/* --- Story --- */
.about-content__title {
  margin-bottom: 1.1rem;
}

.about-content .lead {
  color: var(--vt-heading);
  margin-bottom: 0.9rem;
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
}

@media (max-width: 575.98px) {
  .about-actions .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   12. EXPLORE DESTINATIONS

   Portrait photo cards in a carousel. The track is allowed to overflow its
   container to the right, so the next card peeks in from the edge of the
   screen, while a clip on the left hides cards that have scrolled past.
   ========================================================================== */

/*
  Clips the cards that run past the screen edge. overflow-x: clip on body
  is not enough: body passes its overflow up to the viewport, which still
  lets the page grow wider and pan sideways on phones. clip (unlike hidden)
  does not make a scroll container, so the vertical hover lift still shows.
*/
.destinations {
  overflow-x: clip;
}

.destinations-slider.swiper {
  overflow: visible;
  /*
    Top, right and bottom are opened up so hover lift and shadows are not
    cut off. The left edge is clipped 16px out: kept below the 20px slide
    gap (spaceBetween in slider.js), so the first card's shadow still fits
    but no sliver of a scrolled-away card shows. Change both together.
  */
  clip-path: inset(-60px -100vw -60px -16px);
}

.destination-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-dark);
  color: #ffffff;
  isolation: isolate;
  transition: transform var(--vt-transition-slow),
    box-shadow var(--vt-transition-slow);
}

.destination-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scrim under the text; strong enough for bright sand and snow */
.destination-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to top,
    rgba(var(--vt-dark-rgb), 0.88) 0%,
    rgba(var(--vt-dark-rgb), 0.4) 36%,
    rgba(var(--vt-dark-rgb), 0) 62%
  );
  pointer-events: none;
}

.destination-card:hover,
.destination-card:focus-visible {
  color: #ffffff;
  transform: translateY(-8px);
  box-shadow: var(--vt-shadow-lg);
}

.destination-card:hover .destination-card__img,
.destination-card:focus-visible .destination-card__img {
  transform: scale(1.08);
}

/* Glass button in the corner; fills with the brand colour and swings round on hover */
.destination-card__arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background-color: rgba(var(--vt-dark-rgb), 0.28);
  color: #ffffff;
  font-size: 1.05rem;
  backdrop-filter: blur(8px);
  transition: background-color var(--vt-transition),
    border-color var(--vt-transition), transform var(--vt-transition-slow);
}

.destination-card:hover .destination-card__arrow,
.destination-card:focus-visible .destination-card__arrow {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
  transform: rotate(45deg);
}

/*
  The title comes first in the markup so the link is announced by its
  place name; column-reverse then shows the small tag above it.
*/
.destination-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
}

/* 24px on phones up to 25px on wide screens */
.destination-card__title {
  font-family: var(--vt-font-heading);
  font-size: clamp(1.5rem, 1.45rem + 0.15vw, 1.5625rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(var(--vt-dark-rgb), 0.45);
}

.destination-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.destination-card__tag::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-primary-light);
}

/* Progress track below the cards; sits outside .swiper, so undo its pinning */
.destinations .swiper-scrollbar.destinations__scrollbar {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
}

/* ==========================================================================
   13. BROWSE BY EXPERIENCE

   A bento grid of experiences next to a package list. The tiles set the
   height of the row (every small tile has a fixed aspect ratio). From lg up
   the package panel is size-contained, so it takes that height instead of
   growing with its content: a short list stretches its rows to fill it,
   and a long list scrolls inside it with fading edges.
   ========================================================================== */
.experience-layout {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}

@media (min-width: 992px) {
  .experience-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
  }
}

/* --- Bento grid --- */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.experience-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--vt-radius);
  background-color: var(--vt-dark);
  color: #ffffff;
  isolation: isolate;
}

/* On a phone the featured tile runs the full width of the two columns */
.experience-tile--featured {
  grid-column: span 2;
}

@media (min-width: 576px) {
  .experience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  /*
    From here the featured tile covers a 2x2 block. Its height comes from
    the two small tiles beside it, so it drops its own aspect ratio.
  */
  .experience-tile--featured {
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

@media (min-width: 992px) {
  .experience-grid {
    gap: 16px;
  }
}

/*
  Between lg and xxl the container is narrower, so the package routes wrap
  and the list grows taller. Taller tiles here keep the current seven
  packages fitting without a scrollbar, with about 35px to spare at the
  1140px container (6:5 left only ~1px, too fragile). Wider screens stay
  at 4:3.
*/
@media (min-width: 992px) and (max-width: 1399.98px) {
  .experience-tile {
    aspect-ratio: 8 / 7;
  }
}

.experience-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to top,
    rgba(var(--vt-dark-rgb), 0.85) 0%,
    rgba(var(--vt-dark-rgb), 0.3) 45%,
    rgba(var(--vt-dark-rgb), 0) 70%
  );
  pointer-events: none;
}

.experience-tile:hover,
.experience-tile:focus-visible {
  color: #ffffff;
}

.experience-tile:hover .experience-tile__img,
.experience-tile:focus-visible .experience-tile__img {
  transform: scale(1.08);
}

/* Label with a short brand-coloured rule that stretches out on hover */
.experience-tile__label {
  position: absolute;
  inset-inline: 1rem;
  bottom: 0.85rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--vt-font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(var(--vt-dark-rgb), 0.45);
}

.experience-tile__label::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-primary-light);
  transition: width var(--vt-transition-slow);
}

.experience-tile:hover .experience-tile__label::before,
.experience-tile:focus-visible .experience-tile__label::before {
  width: 40px;
}

.experience-tile--featured .experience-tile__label {
  inset-inline: 1.4rem;
  bottom: 1.25rem;
  font-size: clamp(1.6rem, 1.35rem + 0.7vw, 1.95rem);
}

/* Corner arrow fades in on hover; touch screens never show it */
.experience-tile__arrow {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--vt-primary);
  color: #ffffff;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
  transition: opacity var(--vt-transition), transform var(--vt-transition-slow);
}

.experience-tile:hover .experience-tile__arrow,
.experience-tile:focus-visible .experience-tile__arrow {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* --- Package panel --- */
.package-panel {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-bg-alt);
}

@media (min-width: 992px) {
  .package-panel {
    /*
      Size containment: the panel's content no longer counts towards the
      grid row, so the row is as tall as the tile grid and the panel is
      stretched to match. The list below then fills or scrolls.
    */
    contain: size;
  }
}

.package-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.7rem 0.6rem;
}

.package-panel__title {
  margin: 0;
  font-size: 1.45rem;
}

.package-panel__count {
  min-width: 2rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-bg);
  color: var(--vt-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--vt-shadow-sm);
}

/*
  Custom properties registered so the edge fades can animate. Browsers
  without @property support simply switch the fades on and off.
*/
@property --scroll-fade-top {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --scroll-fade-bottom {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@media (min-width: 992px) {
  .package-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    /* main.js toggles the classes below only when the list overflows */
    --scroll-fade-top: 0px;
    --scroll-fade-bottom: 0px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000000 var(--scroll-fade-top),
      #000000 calc(100% - var(--scroll-fade-bottom)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000000 var(--scroll-fade-top),
      #000000 calc(100% - var(--scroll-fade-bottom)),
      transparent 100%
    );
    transition: --scroll-fade-top var(--vt-transition),
      --scroll-fade-bottom var(--vt-transition);
  }

  .package-scroll.has-overflow:not(.is-at-start) {
    --scroll-fade-top: 28px;
  }

  .package-scroll.has-overflow:not(.is-at-end) {
    --scroll-fade-bottom: 40px;
  }

  .package-scroll:hover {
    scrollbar-color: var(--vt-primary) transparent;
  }

  /* A short list spreads its rows over the full panel height */
  .package-list {
    min-height: 100%;
  }

  .package-list > li {
    display: flex;
    flex: 1 0 auto;
  }

  .package-list > li > .package-row {
    flex: 1 1 auto;
  }
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.package-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--vt-radius);
  color: inherit;
  transition: background-color var(--vt-transition),
    box-shadow var(--vt-transition);
}

.package-row:hover,
.package-row:focus-visible {
  background-color: var(--vt-bg);
  box-shadow: var(--vt-shadow-sm);
  color: inherit;
}

.package-row__thumb {
  flex: 0 0 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 12px;
}

.package-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--vt-transition-slow);
}

.package-row:hover .package-row__thumb img {
  transform: scale(1.12);
}

/* min-width: 0 lets long titles and routes wrap instead of pushing the arrow out */
.package-row__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.package-row__days {
  padding: 0.05rem 0.5rem;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-primary-soft);
  color: var(--vt-primary);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.package-row__title {
  color: var(--vt-heading);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
}

.package-row__route {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.5;
}

/*
  Dot between stops. content is empty and the dot is drawn with a
  background, so screen readers read only the place names.

  Each stop is nowrap with its dot inside it, so a wrapped route only breaks
  at the spaces between stops and a dot always stays on the line of the word
  before it. Without nowrap, browsers disagree about breaking beside an
  inline-block, and dots end up at the start of a line in some and the end
  in others.
*/
.package-row__route > span {
  white-space: nowrap;
}

.package-row__route > span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.15rem 0 0.4rem;
  border-radius: 50%;
  background-color: #cbd5e1;
  vertical-align: middle;
}

.package-row__arrow {
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  height: 36px;
  border: 1px solid var(--vt-border);
  border-radius: 50%;
  background-color: var(--vt-bg);
  color: var(--vt-heading);
  font-size: 0.9rem;
  transition: background-color var(--vt-transition),
    border-color var(--vt-transition), color var(--vt-transition),
    transform var(--vt-transition-slow);
}

.package-row:hover .package-row__arrow,
.package-row:focus-visible .package-row__arrow {
  border-color: var(--vt-primary);
  background-color: var(--vt-primary);
  color: #ffffff;
  transform: rotate(45deg);
}

/* ==========================================================================
   14. BROWSE BY THEMES

   Theme cards framed as Mughal-style arches with the label below the photo,
   and a dark luxury-train promo in the last slot. Phones get the themes as
   a horizontal swipe row with the promo underneath; from 576px the themes
   and the promo share one grid (3 columns, then 4 from lg).
   ========================================================================== */

/* --- Layout --- */
.themes-layout {
  display: grid;
  gap: 1.25rem;
}

/*
  Phones: a swipe row that snaps card by card. The negative margin lets it
  run to the screen edges while the padding keeps the first card in line
  with the heading.
*/
.theme-grid {
  display: grid;
  grid-auto-columns: 46%;
  grid-auto-flow: column;
  gap: 14px;
  margin-inline: calc(var(--bs-gutter-x) * -0.5);
  padding: 8px calc(var(--bs-gutter-x) * 0.5) 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(var(--bs-gutter-x) * 0.5);
  scrollbar-width: none;
}

.theme-grid::-webkit-scrollbar {
  display: none;
}

.theme-grid > .theme-cell {
  scroll-snap-align: start;
}

@media (min-width: 576px) {
  .themes-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }

  /* The swipe row dissolves and its cards join the parent grid */
  .theme-grid {
    display: contents;
  }

  /* With 3 columns the promo fills the two slots after the 7th theme */
  .theme-cell--promo {
    grid-column: span 2;
  }
}

@media (min-width: 992px) {
  .themes-layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.25rem 1.5rem;
  }

  .theme-cell--promo {
    grid-column: auto;
  }
}

/* Size container, so the arch radius can be expressed as 50cqw */
.theme-cell {
  min-width: 0;
  container-type: inline-size;
}

/* --- Theme card --- */
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: var(--vt-heading);
}

.theme-card:hover,
.theme-card:focus-visible {
  color: var(--vt-primary);
}

.theme-card__arch {
  position: relative;
  display: block;
  width: 100%;
}

/*
  Half-circle dome on top, rounded corners below. 50cqw is half the card
  width, so the two top radii meet exactly and the browser never has to
  shrink every corner to fit (which a large px radius would cause). The
  first declaration is the fallback where container units are unsupported.
*/
/*
  Square rather than tall: the theme photos are small landscape files
  (367x239), and a 4:5 frame stretched them about 1.4x and cropped away
  half of each picture. A square keeps the stretch near 1.1x.
*/
.theme-card__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--vt-radius-lg);
  border-radius: 50cqw 50cqw var(--vt-radius-lg) var(--vt-radius-lg);
  background-color: var(--vt-border);
  box-shadow: var(--vt-shadow);
  /* Keeps the rounded clip crisp while the photo scales in Safari */
  transform: translateZ(0);
}

.theme-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-card focal point for wide photos in the tall frame */
  object-position: var(--focus-x, 50%) center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-card:hover .theme-card__frame img,
.theme-card:focus-visible .theme-card__frame img {
  transform: scale(1.07);
}

/* Brand-coloured ring tracing the arch 6px outside it, shown on hover */
.theme-card__arch::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1.5px solid var(--vt-primary);
  border-radius: calc(var(--vt-radius-lg) + 6px);
  border-radius: calc(50cqw + 6px) calc(50cqw + 6px)
    calc(var(--vt-radius-lg) + 6px) calc(var(--vt-radius-lg) + 6px);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--vt-transition), transform var(--vt-transition-slow);
  pointer-events: none;
}

.theme-card:hover .theme-card__arch::after,
.theme-card:focus-visible .theme-card__arch::after {
  opacity: 1;
  transform: scale(1);
}

/* The arrow hangs off the right of the label, so the name stays centred */
.theme-card__label {
  position: relative;
  font-family: var(--vt-font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.theme-card__label i {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 0.4rem;
  font-size: 0.9rem;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity var(--vt-transition), transform var(--vt-transition);
}

.theme-card:hover .theme-card__label i,
.theme-card:focus-visible .theme-card__label i {
  opacity: 1;
  transform: translate(0, -50%);
}

/*
  --- Luxury train promo ---
  Kept compact on purpose: the card shares a grid row with the square theme
  cards, and if its content were taller it would stretch that row and hang
  below the labels beside it (it did at 1024px and 768px before).
*/
.train-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0.95rem 0.9rem 0.85rem;
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-dark);
  background-image: radial-gradient(
      120% 70% at 50% 0%,
      rgba(var(--vt-primary-light-rgb), 0.22) 0%,
      rgba(var(--vt-primary-light-rgb), 0) 62%
    ),
    radial-gradient(
      80% 60% at 100% 100%,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0) 70%
    );
  color: #ffffff;
  text-align: center;
  box-shadow: var(--vt-shadow);
}

.train-card__kicker {
  margin: 0 0 0.15rem;
  color: var(--vt-primary-light);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.train-slider {
  flex: 1 1 auto;
  width: 100%;
}

.train-slider .swiper-slide {
  display: flex;
  height: auto;
}

.train-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  padding: 0.15rem 0;
}

.train-slide__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.15rem;
  border: 1px solid rgba(var(--vt-primary-light-rgb), 0.4);
  border-radius: 50%;
  background-color: rgba(var(--vt-primary-light-rgb), 0.12);
  color: var(--vt-primary-light);
  font-size: 1.2rem;
}

.train-slide__name {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.25rem, 1.05rem + 0.45vw, 1.55rem);
}

.train-slide__tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.76rem;
  line-height: 1.4;
}

.train-slide__cta {
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-font-size: 0.85rem;
  margin-top: 0.4rem;
}

.train-card__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.55rem;
}

.train-nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.8rem;
  transition: background-color var(--vt-transition),
    border-color var(--vt-transition);
}

.train-nav:hover {
  border-color: var(--vt-primary);
  background-color: var(--vt-primary);
}

/*
  Swiper gives its bullet container full width for absolute placement.
  This one sits between the arrows, so it only needs its own width.
*/
.train-card .train-card__dots {
  display: flex;
  gap: 6px;
  width: auto;
}

.train-card__dots .swiper-pagination-bullet {
  margin: 0 !important;
  background-color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

.train-card__dots .swiper-pagination-bullet-active {
  background-color: var(--vt-primary-light);
}

/* ==========================================================================
   15. BROWSE BY DESTINATION

   One card per region: a framed photo carrying the region name and a place
   count, the places as chips, and a link to the whole region pinned to the
   bottom so cards of different lengths still line up. Phones get the cards
   as a swipe row; from md they sit three across.
   ========================================================================== */

/* --- Layout --- */
.region-grid {
  display: grid;
  grid-auto-columns: 84%;
  grid-auto-flow: column;
  gap: 16px;
  margin-inline: calc(var(--bs-gutter-x) * -0.5);
  /* Top padding leaves room for the hover lift inside the scroll box */
  padding: 8px calc(var(--bs-gutter-x) * 0.5) 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(var(--bs-gutter-x) * 0.5);
  scrollbar-width: none;
}

.region-grid::-webkit-scrollbar {
  display: none;
}

.region-grid > .region-card {
  scroll-snap-align: start;
}

@media (min-width: 576px) {
  .region-grid {
    grid-auto-columns: 58%;
  }
}

@media (min-width: 768px) {
  .region-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 1.25rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (min-width: 992px) {
  .region-grid {
    gap: 1.5rem;
  }
}

/* --- Card --- */
.region-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-bg);
  transition: transform var(--vt-transition-slow),
    box-shadow var(--vt-transition-slow), border-color var(--vt-transition);
}

.region-card:hover {
  border-color: transparent;
  box-shadow: var(--vt-shadow-lg);
  transform: translateY(-6px);
}

/* Photo sits inset inside the card, like a print in a mount */
.region-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--vt-radius);
  background-color: var(--vt-dark);
  isolation: isolate;
}

.region-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.region-card:hover .region-card__media img {
  transform: scale(1.06);
}

.region-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to top,
    rgba(var(--vt-dark-rgb), 0.8) 0%,
    rgba(var(--vt-dark-rgb), 0.2) 45%,
    rgba(var(--vt-dark-rgb), 0) 70%
  );
  pointer-events: none;
}

.region-card__title {
  position: absolute;
  left: 1.1rem;
  bottom: 0.9rem;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem);
  text-shadow: 0 2px 14px rgba(var(--vt-dark-rgb), 0.45);
}

/* Frosted count pill in the corner of the photo */
.region-card__count {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--vt-radius-pill);
  background-color: rgba(var(--vt-dark-rgb), 0.28);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.region-card__count i {
  color: var(--vt-primary-light);
  font-size: 0.8rem;
}

/* --- Places --- */
.region-card__places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 0.35rem 1.1rem;
}

.place-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-bg-alt);
  color: var(--vt-text);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color var(--vt-transition),
    border-color var(--vt-transition), color var(--vt-transition);
}

.place-chip:hover,
.place-chip:focus-visible {
  border-color: rgba(var(--vt-primary-rgb), 0.35);
  background-color: var(--vt-primary-soft);
  color: var(--vt-primary);
}

/* --- Region link, pinned to the bottom of the card --- */
.region-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: 0.85rem 0.45rem 0.35rem;
  border-top: 1px solid var(--vt-border);
  color: var(--vt-heading);
  font-size: 0.95rem;
  font-weight: 600;
}

.region-card__cta:hover,
.region-card__cta:focus-visible {
  color: var(--vt-primary);
}

.region-card__cta-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--vt-bg-alt);
  color: var(--vt-heading);
  font-size: 0.9rem;
  transition: background-color var(--vt-transition), color var(--vt-transition),
    transform var(--vt-transition-slow);
}

.region-card__cta:hover .region-card__cta-icon,
.region-card__cta:focus-visible .region-card__cta-icon {
  background-color: var(--vt-primary);
  color: #ffffff;
  transform: rotate(45deg);
}

/* ==========================================================================
   16. BROWSE BY DURATION

   One card per trip length. The dial around each number is a conic
   gradient filled to --days / --days-max, so a 10-day trip reads as a full
   ring and a 1-day trip as a sliver. The fill animates in when the grid is
   revealed; without JavaScript, or when printing, the dials simply show
   their final state.
   ========================================================================== */
.duration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

@media (min-width: 576px) {
  .duration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 992px) {
  .duration-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.duration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 1.5rem 1rem 1.25rem;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-bg);
  color: var(--vt-heading);
  text-align: center;
  transition: transform var(--vt-transition-slow),
    box-shadow var(--vt-transition-slow), border-color var(--vt-transition);
}

.duration-card:hover,
.duration-card:focus-visible {
  border-color: transparent;
  box-shadow: var(--vt-shadow-lg);
  color: var(--vt-heading);
  transform: translateY(-6px);
}

/* Registered so the fill can transition; unsupported browsers jump instead */
@property --dial-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.duration-card__dial {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(76px, 62px + 2vw, 92px);
  aspect-ratio: 1;
}

/*
  The ring is a pseudo-element so its mask cuts the hole without also
  hiding the number sitting inside the dial.
*/
.duration-card__dial::before {
  content: "";
  position: absolute;
  inset: 0;
  --dial-progress: calc(var(--days) / var(--days-max) * 100%);
  border-radius: 50%;
  background-image: conic-gradient(
    var(--vt-primary) var(--dial-progress),
    var(--vt-border) 0
  );
  -webkit-mask-image: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000000 calc(100% - 5px)
  );
  mask-image: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000000 calc(100% - 5px)
  );
  transition: --dial-progress 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  /* Each card starts a beat after the one before it */
  transition-delay: calc(var(--i, 0) * 90ms);
}

/*
  Empty dials only while waiting to be revealed on screen. Scoped to .js
  and to screen media, so no-JS visitors and printouts see full dials.
*/
@media screen {
  .js .duration-grid:not(.is-revealed) .duration-card__dial::before {
    --dial-progress: 0%;
  }
}

.duration-card__number {
  font-family: var(--vt-font-heading);
  font-size: clamp(1.75rem, 1.4rem + 0.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
  transition: color var(--vt-transition);
}

.duration-card:hover .duration-card__number,
.duration-card:focus-visible .duration-card__number {
  color: var(--vt-primary);
}

/* The arrow hangs off the right of the label, so the word stays centred */
.duration-card__label {
  position: relative;
  color: var(--vt-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color var(--vt-transition);
}

.duration-card__label i {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 0.35rem;
  font-size: 0.85rem;
  opacity: 0;
  transform: translate(-4px, -50%);
  transition: opacity var(--vt-transition), transform var(--vt-transition);
}

.duration-card:hover .duration-card__label,
.duration-card:focus-visible .duration-card__label {
  color: var(--vt-primary);
}

.duration-card:hover .duration-card__label i,
.duration-card:focus-visible .duration-card__label i {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ==========================================================================
   17. LATEST BLOG POSTS

   Two featured posts, six compact posts and a ranked "Trending Articles"
   list. From lg up a named grid puts both headings in the first row, so
   they line up even though they differ in size, and the trending list
   sticks beside the posts while they scroll past.
   ========================================================================== */

/* --- Layout --- */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.blog-layout__posts-head,
.blog-layout__trend-head {
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* Stacked: a gap before the trending block, which follows the posts */
.blog-layout__trend-head {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.blog-layout__title {
  margin-bottom: 0;
}

.blog-layout__title--side {
  font-size: var(--vt-fs-h3);
}

@media (min-width: 992px) {
  .blog-layout {
    grid-template-areas:
      "posts-head trend-head"
      "posts trend";
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: clamp(2rem, 1rem + 2vw, 3rem);
  }

  .blog-layout__posts-head {
    grid-area: posts-head;
    align-self: end;
  }

  .blog-layout__trend-head {
    grid-area: trend-head;
    align-self: end;
    margin-top: 0;
  }

  .blog-layout__posts {
    grid-area: posts;
  }

  /* align-self: start leaves the item room to stick inside its taller row */
  .blog-layout__trend {
    grid-area: trend;
    align-self: start;
    position: sticky;
    top: calc(78px + 1.5rem);
  }
}

/* --- Post grid --- */
.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* --- Post card --- */
.post-card {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-bg);
  transition: transform var(--vt-transition-slow),
    box-shadow var(--vt-transition-slow), border-color var(--vt-transition);
}

.post-card:hover {
  border-color: transparent;
  box-shadow: var(--vt-shadow-lg);
  transform: translateY(-4px);
}

/*
  The stretched title link covers the whole card, so the focus ring is
  drawn on the card instead of around the title text.
*/
.post-card .stretched-link:focus-visible {
  outline: none;
}

.post-card:has(.stretched-link:focus-visible) {
  outline: 2px solid var(--vt-primary);
  outline-offset: 3px;
}

.post-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--vt-bg-alt);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-card:hover .post-card__media img {
  transform: scale(1.06);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.post-card__title {
  margin: 0;
  line-height: 1.2;
}

.post-card__title a {
  color: var(--vt-heading);
  transition: color var(--vt-transition);
}

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

/* Excerpts are cut to two lines with a trailing ellipsis */
.post-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Featured: photo on top, larger title and a read-more hint */
.post-card--featured {
  flex-direction: column;
}

.post-card--featured .post-card__media {
  aspect-ratio: 16 / 10;
}

.post-card--featured .post-card__body {
  flex: 1 1 auto;
  padding: 1.1rem 1.25rem 1.2rem;
}

.post-card--featured .post-card__title {
  font-size: clamp(1.4rem, 1.25rem + 0.4vw, 1.65rem);
}

.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--vt-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.post-card__more i {
  transition: transform var(--vt-transition);
}

.post-card:hover .post-card__more i {
  transform: translateX(4px);
}

/* Compact: square thumbnail beside a two-line title and excerpt */
.post-card--compact {
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem;
}

.post-card--compact .post-card__media {
  flex: 0 0 96px;
  height: 96px;
  border-radius: var(--vt-radius);
}

.post-card--compact .post-card__body {
  gap: 0.25rem;
  padding-right: 0.35rem;
}

/*
  Three lines before the title is cut: the longest titles need them at the
  narrower card widths, and a clipped title reads worse than a taller row.
*/
.post-card--compact .post-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.2rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-card--compact .post-card__excerpt {
  font-size: 0.84rem;
}

/*
  Between lg and xl the posts column is at its narrowest, so the thumbnail
  gives up 20px to keep the longest titles within three lines.
*/
@media (min-width: 992px) and (max-width: 1199.98px) {
  .post-card--compact .post-card__media {
    flex-basis: 76px;
    height: 76px;
  }
}

/* --- Trending list --- */
.trending {
  padding: 0.5rem;
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-bg-alt);
}

.trending__list {
  display: grid;
  gap: 2px;
  margin: 0;
  counter-reset: trending;
}

/* Tablets: the list sits under the posts, so two columns use the width */
@media (min-width: 576px) and (max-width: 991.98px) {
  .trending__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.trending-item {
  counter-increment: trending;
}

.trending-item__link {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.75rem 0.7rem;
  border-radius: var(--vt-radius);
  color: inherit;
  transition: background-color var(--vt-transition),
    box-shadow var(--vt-transition);
}

.trending-item__link:hover,
.trending-item__link:focus-visible {
  background-color: var(--vt-bg);
  box-shadow: var(--vt-shadow-sm);
  color: inherit;
}

.trending-item__thumb {
  position: relative;
  flex: 0 0 72px;
}

.trending-item__thumb img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}

/* Rank badge: 01, 02, ... from the list counter */
.trending-item__thumb::before {
  content: counter(trending, decimal-leading-zero);
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-primary);
  box-shadow: 0 0 0 3px var(--vt-bg-alt);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  transition: box-shadow var(--vt-transition);
}

/* Match the ring to the white hover background */
.trending-item__link:hover .trending-item__thumb::before,
.trending-item__link:focus-visible .trending-item__thumb::before {
  box-shadow: 0 0 0 3px var(--vt-bg);
}

.trending-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.trending-item__category {
  color: var(--vt-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trending-item__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--vt-heading);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color var(--vt-transition);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.trending-item__link:hover .trending-item__title,
.trending-item__link:focus-visible .trending-item__title {
  color: var(--vt-primary);
}

/* ==========================================================================
   18. FAQS

   Two accordion columns of soft cards. The plus icon turns into a minus
   and the open card is outlined in the brand colour.
   ========================================================================== */

/* --- Columns --- */
.faq-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 992px) {
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
  }
}

.faq-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Item --- */
.faq-item {
  border: 1px solid transparent;
  border-radius: var(--vt-radius);
  background-color: var(--vt-bg);
  box-shadow: var(--vt-shadow-sm);
  transition: border-color var(--vt-transition),
    box-shadow var(--vt-transition-slow);
}

.faq-item:hover {
  box-shadow: var(--vt-shadow);
}

/* The open item is picked out while its answer is showing */
.faq-item:has(.faq-item__toggle[aria-expanded="true"]) {
  border-color: rgba(var(--vt-primary-rgb), 0.35);
  box-shadow: var(--vt-shadow);
}

.faq-item__heading {
  margin: 0;
}

.faq-item__toggle {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: var(--vt-radius);
  background: none;
  color: var(--vt-heading);
  font-family: var(--vt-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

/* Inset ring, so it stays inside the rounded card */
.faq-item__toggle:focus-visible {
  outline-offset: -2px;
}

.faq-item__q {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  height: 28px;
  border-radius: 8px;
  background-color: var(--vt-primary-soft);
  color: var(--vt-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.faq-item__question {
  flex: 1 1 auto;
  transition: color var(--vt-transition);
}

.faq-item__toggle:hover .faq-item__question,
.faq-item__toggle[aria-expanded="true"] .faq-item__question {
  color: var(--vt-primary);
}

/* Plus drawn from two bars; the upright bar turns flat to make a minus */
.faq-item__icon {
  position: relative;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--vt-bg-alt);
  transition: background-color var(--vt-transition);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--vt-heading);
  transform: translate(-50%, -50%);
  transition: transform var(--vt-transition), background-color var(--vt-transition);
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__toggle[aria-expanded="true"] .faq-item__icon {
  background-color: var(--vt-primary);
}

.faq-item__toggle[aria-expanded="true"] .faq-item__icon::before,
.faq-item__toggle[aria-expanded="true"] .faq-item__icon::after {
  background-color: #ffffff;
}

.faq-item__toggle[aria-expanded="true"] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Answer text lines up under the question, past the Q badge */
.faq-item__answer {
  padding: 0 1.1rem 1.1rem calc(1.1rem + 28px + 0.85rem);
  color: var(--vt-text);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ==========================================================================
   19. PLAN YOUR TRIP

   Closing call to action. The maroon card rests on the seam between two
   bands: the section paints its top half in the colour of the section above
   and its bottom half in the footer black, so the card appears to sit on
   the footer. Two thin round-topped arches, the same shape as the theme
   cards, frame the button like a doorway. Below lg the layout stacks and
   centres, with the doorway under the text.
   ========================================================================== */
.plan-trip {
  /* Colours of the neighbouring bands; update them if the page order changes */
  --plan-trip-above: var(--vt-bg-alt);
  --plan-trip-below: var(--vt-dark);
  background-image: linear-gradient(
    to bottom,
    var(--plan-trip-above) 50%,
    var(--plan-trip-below) 50%
  );
}

.plan-trip__card {
  --plan-trip-pad-x: clamp(1.5rem, 0.9rem + 3vw, 4rem);
  --plan-trip-pad-y: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  /* Width of the inner arch; the outer arch is 5rem wider */
  --plan-trip-arch: min(17rem, 100%);
  position: relative;
  display: grid;
  overflow: hidden;
  padding-inline: var(--plan-trip-pad-x);
  border-radius: calc(var(--vt-radius-lg) + 4px);
  background-color: var(--vt-primary);
  /* Brightens towards the doorway, like light coming through it */
  background-image: linear-gradient(
    115deg,
    var(--vt-primary) 35%,
    var(--vt-primary-dark) 100%
  );
  /* The hairline rim keeps the edge crisp where the card meets the black band */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--vt-shadow-lg);
  color: #ffffff;
  text-align: center;
}

/* --- Text --- */
.plan-trip__content {
  padding-top: var(--plan-trip-pad-y);
}

/* The em-based width always breaks the line after "your", at any size */
.plan-trip__title {
  max-width: 9.5em;
  margin: 0 auto 0.85rem;
  color: #ffffff;
  font-size: clamp(2.3rem, 1.75rem + 2.2vw, 3.5rem);
  line-height: 1.05;
}

.plan-trip__text {
  max-width: 34rem;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--vt-fs-lead);
  line-height: 1.7;
}

/* --- Doorway --- */
.plan-trip__action {
  position: relative;
  /* Keeps the arches above the card background but behind the button */
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 12.5rem;
  margin-top: 1.5rem;
  padding-bottom: 3rem;
}

/*
  Both arches are boxes with no bottom border, standing on the card's lower
  edge. Radii far larger than the box are scaled down until they fit, which
  leaves each top corner at exactly half the width: a true semicircle, as
  long as the arch is at least half as tall as it is wide.
*/
.plan-trip__action::before,
.plan-trip__action::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  translate: -50% 0;
  border: 1px solid;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  transition: border-color var(--vt-transition);
}

/* Inner arch: a faint glass panel the button stands in */
.plan-trip__action::before {
  width: var(--plan-trip-arch);
  height: calc(100% - 1.25rem);
  border-color: rgba(255, 255, 255, 0.3);
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.02)
  );
}

/* Outer arch: a fainter echo */
.plan-trip__action::after {
  width: calc(var(--plan-trip-arch) + 5rem);
  height: 100%;
  border-color: rgba(255, 255, 255, 0.14);
}

/* The doorway lights up while the button is hovered or focused */
.plan-trip__action:has(.plan-trip__btn:hover)::before,
.plan-trip__action:has(.plan-trip__btn:focus-visible)::before {
  border-color: rgba(255, 255, 255, 0.55);
}

.plan-trip__btn {
  --bs-btn-padding-x: 1.9rem;
  --bs-btn-padding-y: 0.9rem;
  --bs-btn-font-size: 1.0625rem;
}

.plan-trip__btn i {
  transition: transform var(--vt-transition);
}

.plan-trip__btn:hover i,
.plan-trip__btn:focus-visible i {
  transform: translateX(4px);
}

/* Side by side from lg: text on the left, doorway on the right */
@media (min-width: 992px) {
  .plan-trip__card {
    --plan-trip-arch: 18.5rem;
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: 3rem;
    text-align: left;
  }

  .plan-trip__content {
    align-self: center;
    padding-bottom: var(--plan-trip-pad-y);
  }

  .plan-trip__title,
  .plan-trip__text {
    margin-inline: 0;
  }

  /* Stretches to the full card height, so the arches stand on its edge */
  .plan-trip__action {
    align-items: center;
    min-height: 16rem;
    margin-top: 0;
    padding-bottom: 0;
  }

  .plan-trip__action::before {
    height: calc(100% - 2.75rem);
  }

  .plan-trip__action::after {
    height: calc(100% - 1rem);
  }
}

/* ==========================================================================
   20. FOOTER

   Dark close to the page that mirrors the topbar, so the layout is bookended
   by the same jet black.
   ========================================================================== */
.site-footer {
  background-color: var(--vt-dark);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9375rem;
}

.footer-main {
  padding-top: clamp(3rem, 2.25rem + 2.5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

/*
  The logo is dark artwork on a transparent ground, so it would disappear
  against the footer. A light plate keeps the brand colours intact instead
  of flattening the mark with a filter.
*/
.footer-brand {
  display: inline-flex;
  padding: 0.7rem 1rem;
  border-radius: var(--vt-radius);
  background-color: var(--vt-bg);
}

.footer-brand img {
  height: 46px;
  width: auto;
}

/* Column headings, each with a short brand-coloured rule beneath */
.footer-title {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-primary-light);
}

.footer-links li + li {
  margin-top: 0.6rem;
}

.footer-links a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--vt-transition), transform var(--vt-transition);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--vt-primary-light);
  transform: translateX(4px);
}

/* Short brand introduction under the logo */
.footer-about {
  max-width: 34rem;
  margin-top: 1.35rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* Contact rows under the brand */
.footer-contact {
  margin-top: 1.5rem;
}

.footer-contact li + li {
  margin-top: 0.65rem;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.78);
}

.footer-contact a:hover {
  color: var(--vt-primary-light);
}

.footer-contact i {
  color: var(--vt-primary-light);
  font-size: 1rem;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transition: background-color var(--vt-transition), color var(--vt-transition);
}

.footer-social a:hover {
  background-color: var(--vt-primary);
  color: #ffffff;
}

/* --- Accreditation badges --- */
.footer-members {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 1.75rem 0;
}

/* Centred trust bar: heading above, badges in a centred row beneath */
.footer-members__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

.footer-members__title {
  margin: 0;
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 700;
}

.footer-members__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

/*
  Rounded plates rather than circles: the source files are squares whose
  artwork reaches the edges, and a circular mask would clip the wording.
*/
.footer-badge {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 7px;
  border-radius: var(--vt-radius);
  background-color: var(--vt-bg);
}

.footer-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* White-on-transparent artwork, flipped so it reads on the light plate */
.footer-badge__invert {
  filter: invert(1);
}

/* --- Legal bar --- */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  /* A light lift, since a black overlay would not read on a near-black base */
  background-color: rgba(255, 255, 255, 0.035);
  padding: 1.1rem 0;
}

.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.footer-bottom__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
}

@media (max-width: 575.98px) {
  .footer-bottom__inner {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   21. SWIPER OVERRIDES
   ========================================================================== */
/*
  Swiper reads these to colour its own arrows, dots and progress bar.
  They sit on :root, not on .swiper, because controls are often rendered
  outside the .swiper element - the hero pagination is one such case, and
  scoping them to .swiper left it with the default Swiper blue.
*/
:root {
  --swiper-theme-color: var(--vt-primary);
  --swiper-pagination-color: var(--vt-primary);
  --swiper-pagination-bullet-inactive-color: var(--vt-border);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-navigation-size: 20px;
  --swiper-scrollbar-size: 4px;
  --swiper-scrollbar-border-radius: var(--vt-radius-pill);
  --swiper-scrollbar-bg-color: rgba(var(--vt-heading-rgb), 0.08);
  --swiper-scrollbar-drag-bg-color: var(--vt-primary);
}

/* The active dot stretches into a short bar */
.swiper-pagination-bullet-active {
  width: 26px;
  border-radius: var(--vt-radius-pill);
  transition: width var(--vt-transition);
}

/* Custom round arrows, positioned by each section that uses a slider */
.swiper-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--vt-border);
  border-radius: 50%;
  background-color: var(--vt-bg);
  color: var(--vt-heading);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color var(--vt-transition),
    border-color var(--vt-transition), color var(--vt-transition);
}

/* A disabled arrow (start or end of the track) must not light up on hover */
.swiper-nav:not(.swiper-button-disabled):hover {
  background-color: var(--vt-primary);
  border-color: var(--vt-primary);
  color: #ffffff;
}

.swiper-nav.swiper-button-disabled {
  opacity: 0.45;
  cursor: default;
}

/* Slides keep equal height so cards in a row line up */
.swiper-slide {
  height: auto;
}

/* ==========================================================================
   22. BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--vt-z-floating);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background-color: var(--vt-primary);
  color: #ffffff;
  font-size: 1.125rem;
  box-shadow: var(--vt-shadow);
  /* Hidden until main.js adds .is-visible */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--vt-transition), transform var(--vt-transition),
    visibility var(--vt-transition), background-color var(--vt-transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--vt-primary-dark);
}

/* ==========================================================================
   23. SCROLL REVEAL ANIMATION
   Add data-animate to any element and main.js adds .is-revealed when it
   scrolls into view. Optional data-animate-delay="200" staggers the effect.
   ========================================================================== */
/*
  Scoped to .js (added by an inline script in the head): without it, a failed
  script would leave every [data-animate] element permanently invisible.
*/
.js [data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--vt-transition-slow),
    transform var(--vt-transition-slow);
  transition-delay: var(--vt-animate-delay, 0ms);
}

.js [data-animate].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   24. ACCESSIBILITY AND PRINT
   ========================================================================== */

/* Respect the reduced-motion preference set by the visitor */
@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;
    scroll-behavior: auto !important;
  }

  /* Must match the .js scoping above, or the hidden state would win */
  .js [data-animate] {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .back-to-top,
  .swiper-nav {
    display: none !important;
  }

  /* The scroll observer never runs while printing, so show everything */
  .js [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    color: #000000;
  }
}