/*
 * dear_tasmania.css
 * ─────────────────────────────────────────────────────────────
 * Single shared stylesheet for the Dear Tasmania website.
 * Linked on every page via:
 *   <link rel="stylesheet" href="./css/dear_tasmania.css">
 *
 * STRUCTURE:
 *   - CSS variables (design tokens)
 *   - Base reset
 *   - Layout containers
 *   - Section tone system
 *   - Typography
 *   - Buttons
 *   - Scroll reveal
 *   - Components 02-22 (header through sticky bar)
 *   - Responsive overrides
 *
 * COMMENTS:
 *   [SHARED] marks rules that are genuinely shared across pages.
 *   [PAGE-SPECIFIC] marks rules that belong in the page file.
 *   These annotations are for reference during the migration
 *   phase and can be stripped once the refactor is complete.
 *
 * CSS VARIABLES:
 *   See section 14 of DESIGN_SYSTEM.md for the full old-to-new
 *   variable name mapping. Do not use --content-* names here.
 * ─────────────────────────────────────────────────────────────
 */

/* ── [SHARED] CSS Variables ─────────────────────────────── */
:root {
    /* Brand teal */
    --teal-dark:        #062626;
    --teal-mid:         #0d3d3d;
    --teal-light:       #1a4d4d;
    --teal-accent:      #26a69a;
    --teal-accent-lt:   #4db6ac;
    --teal-pale:        rgba(38,166,154,0.08);

    /* Text */
    --text-dark:        #1a1a1a;
    --text-mid:         #4a4a4a;
    --text-muted:       #6a6a6a;

    /* Surfaces */
    --bg-white:         #ffffff;
    --bg-off:           #f5f7f6;
    --border:           #e0e5e4;

    /* Shadows */
    --shadow-sm:        rgba(13,61,61,0.08);
    --shadow-md:        rgba(13,61,61,0.12);
    --shadow-lg:        rgba(13,61,61,0.16);

    /* Animation */
    --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── [SHARED] Base reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: hidden; }
body {
    overflow-x: hidden;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    background: var(--bg-white);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── [SHARED] Layout containers ─────────────────────────── */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.container--wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── [SHARED] Section spacing and tone ────────────────────
   Section tone is set via modifier classes on the .section
   wrapper, NOT baked into individual components. This lets
   sections be reordered without breaking the alternating
   light/dark rhythm.

   Tones:
     (default)        white background
     .section--off    pale off-white background
     .section--dark   dark teal background
     .section--darker very dark teal background

   Two components keep their own baked-in background because
   it is structural to the design, not just tonal:
     .booking-section   (dark teal gradient with radial glow)
     .partner-ad        (dark teal full-width banner)
   These should not have a .section--* modifier added.
   ──────────────────────────────────────────────────────── */
.section         { padding: 2.5rem 0; background: var(--bg-white); --section-bg: var(--bg-white); }
.section--sm     { padding: 1.5rem 0; }
.section--lg     { padding: 3.5rem 0; }
.section--off    { background: var(--bg-off);    --section-bg: var(--bg-off); }
.section--dark   { background: var(--teal-mid);  --section-bg: var(--teal-mid); }
.section--darker { background: var(--teal-dark); --section-bg: var(--teal-dark); }

/* Typography overrides for dark sections.
   Components inside .section--dark or .section--darker inherit
   light text colours automatically so they do not need their
   own dark-mode CSS. */
.section--dark .section-heading,
.section--darker .section-heading       { color: #fff; }
.section--dark .section-sub,
.section--darker .section-sub           { color: rgba(255,255,255,0.72); }
.section--dark .section-label,
.section--darker .section-label         { color: var(--teal-accent-lt); }

/* ── [SHARED] Typography ─────────────────────────────────── */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal-accent);
    margin-bottom: 0.8rem;
}
.section-heading {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--teal-mid);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.section-sub {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-mid);
    max-width: 640px;
    margin-bottom: 2.5rem;
}
.text-white  { color: #fff; }
.text-center { text-align: center; }
.text-center .section-sub { margin-left: auto; margin-right: auto; }

/* ── [SHARED] Buttons ────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    letter-spacing: 0.02em;
}
.btn--primary {
    background: var(--teal-accent);
    color: #fff;
}
.btn--primary:hover {
    background: var(--teal-accent-lt);
    transform: translateY(-2px);
}
.btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.88);
}
.btn--ghost:hover {
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}
.btn--outline {
    background: transparent;
    border: 1.5px solid var(--teal-accent);
    color: var(--teal-accent);
}
.btn--outline:hover {
    background: var(--teal-accent);
    color: #fff;
}

/* ── [SHARED] Scroll reveal ──────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ════════════════════════════════════════════════════════════
   02. HEADER & NAV
   [SHARED]: move to dear_tasmania.css / inc/header_menu.inc
   ════════════════════════════════════════════════════════════ */
.header-main {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
    z-index: 1000;
}
.header-container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-logo a { display: block; line-height: 0; }
.header-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--teal-mid);
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    position: relative;
    z-index: 1002;
}
.header-menu-toggle .close-icon { display: none; }
.header-menu-toggle.active .close-icon { display: block; font-size: 40px; line-height: 0.8; }
.header-menu-toggle.active .menu-icon { display: none; }
.header-nav { flex: 1; display: flex; justify-content: flex-end; }
.header-nav-links {
    display: flex;
    list-style: none;
    gap: 2.3rem;
}
.header-nav-links a {
    color: var(--teal-mid);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.2s;
    position: relative;
}
.header-nav-links a:hover { color: var(--teal-accent); }
.header-nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0; right: 0;
    height: 2px;
    background: var(--teal-accent);
    transform: scaleX(0);
    transition: transform 0.2s;
}
.header-nav-links a:hover::after { transform: scaleX(1); }
.header-nav-links a.active { color: var(--teal-accent); pointer-events: none; }
.header-nav-links a.active::after { display: none; }
/* Dropdown */
.has-dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 1rem);
    left: 0;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 330px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 1000;
}
.has-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a { display: block; padding: 0.75rem 1.5rem; font-size: 15px; color: var(--teal-mid); }
.dropdown-menu a::after { display: none; }
.dropdown-menu a:hover { background: var(--bg-off); color: var(--teal-accent); }
.mobile-menu-logo { display: none; }

/* ════════════════════════════════════════════════════════════
   CONTENT MAIN: offset for fixed header
   ════════════════════════════════════════════════════════════ */
.content-main { margin-top: 100px; }

/* ════════════════════════════════════════════════════════════
   03. HERO
   [SHARED base] hero, hero__title, hero__lead, hero__actions
   [PAGE-SPECIFIC] --hero-bg-image and --hero-bg-opacity per page
   ════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: calc(100dvh - 100px - 130px); /* viewport minus header (100px) minus facts-bar (~124px measured + 6px buffer) */
    display: flex;
    align-items: flex-end;
    background: var(--teal-mid);
    overflow: hidden;
    padding: 6rem 0 8rem;
}
/* Background image layer: set --hero-bg-image per page */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg-image, url('./images/placeholder_hero.jpg'));
    background-size: cover;
    background-position: center;
    opacity: var(--hero-bg-opacity, 0.68);
    z-index: 1;
}
/* Animated radial glow */
.hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 60%; height: 200%;
    animation: heroGlow 20s ease-in-out infinite;
    z-index: 2;
}
@keyframes heroGlow {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%       { transform: translate(-10%,5%) scale(1.1); }
}
.hero .container { position: relative; z-index: 3; }
/* Title */
.hero__title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.12;
    color: #fff;
    font-weight: 700;
    max-width: 860px;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    text-shadow:
        -1px -1px 0 var(--teal-dark),
         1px -1px 0 var(--teal-dark),
        -1px  1px 0 var(--teal-dark),
         1px  1px 0 var(--teal-dark),
        -2px -2px 0 var(--teal-dark),
         2px  2px 0 var(--teal-dark);
}
/* Lead */
.hero__lead {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.65;
    color: rgba(255,255,255,0.88);
    max-width: 680px;
    margin-bottom: 2.5rem;
    text-shadow: -1px -1px 0 var(--teal-dark), 1px 1px 0 var(--teal-dark);
}
/* CTA button row */
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
/* Scroll cue */
.hero__scroll-cue {
    position: absolute;
    bottom: 1.8rem; left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.scroll-line {
    width: 1px; height: 36px;
    background: rgba(255,255,255,0.5);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:0.3} 50%{opacity:0.9} }

/* ════════════════════════════════════════════════════════════
   04. QUICK FACTS BAR
   [SHARED]: appears on all tour and transport pages
   NOTE: Structural banded component with its own dark background.
   Sits directly below hero. Do not wrap in a .section.
   ════════════════════════════════════════════════════════════ */
.facts-bar {
    background: var(--teal-dark);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.fact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.2rem 2.5rem;
    border-right: 1px solid rgba(255,255,255,0.07);
    flex: 1 1 140px;
    gap: 0.25rem;
}
.fact-item:last-child { border-right: none; }
.fact-icon { font-size: 1rem; color: var(--teal-accent); margin-bottom: 0.15rem; }
.fact-value {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.fact-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

/* ════════════════════════════════════════════════════════════
   05. EDITORIAL INTRO (split layout)
   [SHARED]: all tour pages
   ════════════════════════════════════════════════════════════ */
.intro-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 820px) {
    .intro-split { grid-template-columns: 320px 1fr; gap: 3.5rem; }
}
.intro-chapter {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 5rem;
    color: var(--border);
    line-height: 1;
    font-weight: 300;
    margin-bottom: -0.3rem;
}
.intro-split .section-heading {
    font-size: clamp(2rem, 4vw, 3.4rem);
}
.intro-pull {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    line-height: 1.45;
    color: var(--teal-mid);
    margin-bottom: 1rem;
}
.intro-body { font-size: 1.05rem; line-height: 1.8; color: var(--text-mid); }
.intro-body p { margin-bottom: 1.1rem; }

/* ════════════════════════════════════════════════════════════
   06. HIGHLIGHT BAND (stat strip)
   [SHARED]: transport-services, some tour pages
   NOTE: Structural banded component with its own dark background.
   Do not wrap in a .section.
   ════════════════════════════════════════════════════════════ */
.highlight-band {
    background: var(--teal-mid);
    padding: 0;
}
.highlight-band-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}
.highlight-stat {
    flex: 1 1 180px;
    text-align: center;
    padding: 1.2rem 2rem;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.highlight-stat:last-child { border-right: none; }
.highlight-stat-num {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--teal-accent-lt);
    margin-bottom: 0.25rem;
}
.highlight-stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.55); }

/* ════════════════════════════════════════════════════════════
   07. TIMELINE / TOUR SCHEDULE
   [SHARED]: all tour pages
   ════════════════════════════════════════════════════════════ */
.timeline-section { /* background set via section modifier */ }
.timeline-header { margin-bottom: 3rem; }
.timeline-spine { position: relative; padding-left: 2rem; }
.timeline-spine::before {
    content: '';
    position: absolute;
    left: 0.5rem; top: 0; bottom: 0;
    width: 1px;
    background: var(--teal-accent);
}
@media (min-width: 700px) {
    .timeline-spine { padding-left: 0; }
    .timeline-spine::before { left: 50%; transform: translateX(-0.5px); }
}
.tl-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 3rem;
}
@media (min-width: 700px) {
    .tl-item { gap: 0; }
    .tl-item:nth-child(odd)  { padding-right: calc(50% + 2.5rem); }
    .tl-item:nth-child(even) { flex-direction: row-reverse; padding-left: calc(50% + 2.5rem); }
}
.tl-dot {
    position: absolute;
    left: -2.4rem;
    top: 1.4rem;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--teal-accent);
    /* Border colour matches the section background so the dot
       appears to sit on top of the spine. Override per section
       if needed. */
    border: 3px solid var(--section-bg, var(--bg-off));
    box-shadow: 0 0 0 2px var(--teal-accent);
    z-index: 1;
}
@media (min-width: 700px) {
    .tl-dot { left: 50%; transform: translateX(-50%); }
}
.tl-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 16px var(--shadow-sm);
    transition: box-shadow 0.2s;
}
.tl-card:hover { box-shadow: 0 6px 24px var(--shadow-md); }
.tl-time {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-accent);
    margin-bottom: 0.4rem;
}
.tl-card h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--teal-mid);
    margin-bottom: 0.6rem;
}
.tl-card p { font-size: 0.95rem; color: var(--text-mid); line-height: 1.7; }
.tl-card-img {
    width: 100%;
    border-radius: 8px;
    margin-top: 1rem;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--bg-off);
}

/* Timeline tags: small pills below the card description.
   Used for surfacing metadata like "Photo stop", "Historic site".
   Inherits visual treatment from .badge--subtle. */
.tl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}
.section--dark .tl-tag,
.section--darker .tl-tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

/* Timeline card highlight modifier: emphasises a card that contains
   a paid inclusion or other notable stop. */
.tl-card--highlight {
    border: 1px solid var(--teal-accent);
    box-shadow: 0 4px 20px var(--shadow-sm), 0 0 0 3px var(--teal-pale);
}

/* ════════════════════════════════════════════════════════════
   08. INCLUSIONS GRID
   [SHARED]: all tour pages
   ════════════════════════════════════════════════════════════ */
.includes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.include-card {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    /* Card background contrasts with whatever section bg is set.
       Default: pale on white sections. Overridden below for other tones. */
    background: var(--bg-off);
    border-radius: 10px;
    padding: 1.4rem;
    transition: box-shadow 0.2s;
}
.section--off .include-card    { background: var(--bg-white); }
.section--dark .include-card,
.section--darker .include-card { background: rgba(255,255,255,0.05); }
.section--dark .include-text h4,
.section--darker .include-text h4 { color: #fff; }
.section--dark .include-text p,
.section--darker .include-text p  { color: rgba(255,255,255,0.7); }
.include-card:hover { box-shadow: 0 4px 20px var(--shadow-sm); }

/* Featured inclusion card: emphasises a paid-entry or otherwise notable
   inclusion. Parallel to .tl-card--highlight on the timeline. */
.include-card--featured {
    border: 1px solid var(--teal-accent);
    box-shadow: 0 4px 20px var(--shadow-sm), 0 0 0 3px var(--teal-pale);
}
.include-card--featured .include-icon {
    background: var(--teal-accent);
    color: #fff;
}
.include-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--teal-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-accent);
    font-size: 1rem;
    flex-shrink: 0;
}
.include-text h4 { font-size: 0.95rem; font-weight: 600; color: var(--teal-mid); margin-bottom: 0.3rem; }
.include-text p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; }
.includes-note {
    margin-top: 1.5rem;
    font-size: 0.88rem;
    color: var(--text-mid);
    padding: 1rem 1.5rem;
    background: var(--bg-off);
    border-radius: 6px;
    border: 1px solid var(--border);
    text-align: center;
}
.section--off .includes-note    { background: var(--bg-white); }
.section--dark .includes-note,
.section--darker .includes-note { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }

/* ════════════════════════════════════════════════════════════
   09. PULL QUOTE (standalone)
   [SHARED]: some tour pages, about page
   NOTE: This component is designed to read against a dark
   background. Pair it with .section--dark or .section--darker.
   ════════════════════════════════════════════════════════════ */
.pullquote-section {
    /* No background of its own; pair with .section--dark */
    position: relative;
    overflow: hidden;
}
.pullquote-section::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -10%;
    width: 40%; height: 80%;
    pointer-events: none;
}
.pullquote {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.pullquote__mark {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 8rem;
    line-height: 1;
    color: var(--teal-accent);
    opacity: 0.3;
    margin-bottom: -3rem;
}
.pullquote__text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.3rem, 3vw, 2.1rem);
    line-height: 1.5;
    color: #fff;
    font-style: italic;
    margin-bottom: 1.8rem;
}
.pullquote__cite {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teal-accent-lt);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ════════════════════════════════════════════════════════════
   10. SERVICE CARDS
   [SHARED]: transport-services, tours pages
   ════════════════════════════════════════════════════════════ */
.service-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
@media (min-width: 560px) { .service-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .service-cards { grid-template-columns: repeat(3,1fr); } }
.service-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.8rem;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.service-card:hover { box-shadow: 0 6px 24px var(--shadow-md); transform: translateY(-3px); }
.service-card h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--teal-mid);
    margin-bottom: 0.6rem;
}
.service-card p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.65; }
.service-card-price {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--teal-accent);
}
.section--dark .service-card,
.section--darker .service-card    { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.section--dark .service-card h3,
.section--darker .service-card h3 { color: #fff; }
.section--dark .service-card p,
.section--darker .service-card p  { color: rgba(255,255,255,0.7); }

/* ════════════════════════════════════════════════════════════
   11. SPLIT FEATURE (image + copy)
   [SHARED]: tours, transport, some tour pages
   ════════════════════════════════════════════════════════════ */
.split-feature { /* background set via section modifier */ }
.split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 820px) { .split-grid { grid-template-columns: 1fr 1fr; } }
.split-grid--reversed { direction: rtl; }
.split-grid--reversed > * { direction: ltr; }
.split-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-md);
    aspect-ratio: 4/3;
    background: var(--border);
}
.split-img img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder for missing images */
.split-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
}
.split-features-list { list-style: none; margin-top: 1.5rem; }
.split-features-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.95rem;
    color: var(--text-mid);
    margin-bottom: 0.6rem;
}
.split-features-list li i { color: var(--teal-accent); margin-top: 0.2rem; flex-shrink: 0; }
.section--dark .split-features-list li,
.section--darker .split-features-list li { color: rgba(255,255,255,0.78); }

/* ════════════════════════════════════════════════════════════
   12. GALLERY (grid + lightbox)
   [SHARED]: 16 pages
   NOTE: The gallery reads well against both light and dark sections.
   Set the section tone explicitly. The standard pairing is
   .section--darker for the editorial dark look.
   ════════════════════════════════════════════════════════════ */
.gallery-section { /* background set via section modifier */ }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: calc((min(100vw, 1200px) - 4rem - 0.5rem) / 2);
    gap: 0.5rem;
    margin-top: 2.5rem;
}
@media (min-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc((min(100vw, 1200px) - 4rem - 1rem) / 3);
    }
}
@media (min-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: calc((min(100vw, 1200px) - 4rem - 1.5rem) / 4);
    }
}
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    background: var(--teal-mid);
    /* Height comes from grid-auto-rows, not aspect-ratio */
}
/* Wide variant, spans 2 columns.
   Height is locked by grid-auto-rows above, matching standard items. */
.gallery-item--wide {
    grid-column: span 2;
}
@media (max-width: 599px) {
    .gallery-item--wide { grid-column: span 1; }
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s var(--ease-out), filter 0.3s; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,38,38,0.4);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-zoom { color: #fff; font-size: 1.4rem; }
/* Image placeholder for template */
.gallery-placeholder {
    width:100%; height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--teal-light);
    color: rgba(255,255,255,0.3);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-img { max-width: 90vw; max-height: 82vh; border-radius: 4px; object-fit: contain; }
.lightbox-caption {
    position: absolute;
    bottom: -2rem;
    left: 0; right: 0;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.22); }
.lightbox-close { top: -3rem; right: 0; }
.lightbox-prev  { left: -3.5rem; }
.lightbox-next  { right: -3.5rem; }

/* ════════════════════════════════════════════════════════════
   13. TESTIMONIAL CAROUSEL
   [SHARED]: 9 tour pages
   ════════════════════════════════════════════════════════════ */
.testi-section { /* background set via section modifier */ }
.testi-track-wrap { overflow: hidden; margin-top: 2.5rem; }
.testi-track {
    display: flex;
    transition: transform 0.45s var(--ease-out);
}
.testi-card { flex: 0 0 100%; padding: 0 0.5rem; }
.testi-body {
    background: #fff;
    border-radius: 14px;
    padding: 2.2rem;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow-sm);
    position: relative;
}
.section--dark .testi-body,
.section--darker .testi-body { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.section--dark .testi-quote-text,
.section--darker .testi-quote-text { color: rgba(255,255,255,0.78); }
.section--dark .testi-name,
.section--darker .testi-name { color: #fff; }
.testi-quote-mark {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--teal-accent);
    opacity: 0.25;
    margin-bottom: -0.8rem;
}
.testi-quote-text { font-size: 1.05rem; line-height: 1.75; color: var(--text-mid); font-style: italic; margin-bottom: 1.5rem; }
.testi-author-row { display: flex; align-items: center; gap: 1rem; }
.testi-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--teal-mid);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.testi-name { font-weight: 600; color: var(--teal-mid); font-size: 0.95rem; }
.testi-stars { color: var(--teal-accent); letter-spacing: 0.1em; font-size: 0.9rem; }
.testi-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.testi-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: none;
    color: var(--teal-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}
.testi-btn:hover { border-color: var(--teal-accent); background: var(--teal-pale); }
.testi-dots-row { display: flex; gap: 0.5rem; align-items: center; }
.testi-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal-accent-lt);
    opacity: 0.3;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: opacity 0.2s, width 0.2s;
}
.testi-dot.active {
    opacity: 1;
    width: 20px;
    border-radius: 999px;
}

/* ════════════════════════════════════════════════════════════
   14. (REMOVED) ROUTE MAP: component removed from template
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   15. PARTNER AD BANNER
   [SHARED]: transport-services, some tour pages
   NOTE: Structural banded component. Keeps its own dark
   background and padding. Do not wrap in a .section.
   ════════════════════════════════════════════════════════════ */
.partner-ad {
    background: var(--teal-mid);
    padding: 4rem 0;
    text-align: center;
}
.partner-ad .section-heading { color: #fff; margin-bottom: 2rem; }
.partner-ad-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 700px) { .partner-ad-inner { grid-template-columns: 1fr 1fr; text-align: left; } }
.partner-ad-logo {
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.partner-ad-copy p { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 1rem; }

/* ════════════════════════════════════════════════════════════
   16. FAQ ACCORDION
   [SHARED]: tours, some other pages
   ════════════════════════════════════════════════════════════ */
.faq-section { /* background set via section modifier */ }
.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2.5rem;
    border-top: 1px solid var(--border);
}
@media (min-width: 700px) { .faq-grid { grid-template-columns: 1fr 1fr; } }
details.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 0;
}
details.faq-item[open] { background: var(--bg-off); }
.section--off details.faq-item[open]    { background: var(--bg-white); }
.section--dark details.faq-item,
.section--darker details.faq-item       { border-bottom-color: rgba(255,255,255,0.12); }
.section--dark details.faq-item[open],
.section--darker details.faq-item[open] { background: rgba(255,255,255,0.05); }
.section--dark .faq-grid,
.section--darker .faq-grid              { border-top-color: rgba(255,255,255,0.12); }
.section--dark details.faq-item summary,
.section--darker details.faq-item summary { color: #fff; }
.section--dark .faq-body,
.section--darker .faq-body              { color: rgba(255,255,255,0.7); }
details.faq-item summary {
    padding: 1.3rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--teal-mid);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    color: var(--teal-accent);
    flex-shrink: 0;
    transition: transform 0.2s;
}
details.faq-item[open] summary::after { content: '−'; }
.faq-body {
    padding: 0 1.5rem 1.3rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-mid);
}

/* ════════════════════════════════════════════════════════════
   17. BOOKING / CONTACT FORM (full)
   [SHARED]: 12 pages: candidate for contact_cta.inc
   NOTE: This component keeps its own dark teal gradient
   background because it is structural to the design (the
   white form card sits against it for contrast). Do not
   add a .section--* modifier to this section.
   ════════════════════════════════════════════════════════════ */
.booking-section {
    background: var(--teal-mid);
    position: relative;
    overflow: hidden;
}
.booking-section::before {
    content: '';
    position: absolute;
    bottom: -40%; right: -20%;
    width: 60%; height: 100%;
    pointer-events: none;
}
.booking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}
@media (min-width: 860px) { .booking-grid { grid-template-columns: 1fr 1fr; } }
.booking-text h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #fff;
    line-height: 1.25;
    margin-bottom: 1rem;
}
.booking-text p { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.75; margin-bottom: 1rem; }
/* Price box within booking text */
.price-box {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 1.5rem 0;
    padding: 1.2rem 1.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}
.price-from { font-size: 0.78rem; color: rgba(255,255,255,0.5); align-self: center; }
.price-amount {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.price-unit { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
/* Contact option button */
.contact-options { margin: 1.5rem 0 0.5rem; }
.contact-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    color: rgba(255,255,255,0.8);
    font-size: 0.88rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.contact-option:hover { border-color: rgba(255,255,255,0.7); color: #fff; }
/* Form card */
.booking-form-card {
    background: #fff;
    border-radius: 14px;
    padding: 2.2rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.booking-form-card h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.25rem;
    color: var(--teal-mid);
    margin-bottom: 1.5rem;
}
.bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 540px) { .bk-form-row { grid-template-columns: 1fr; } }
.bk-form-group { display: flex; flex-direction: column; margin-bottom: 1rem; }
.bk-form-group label { font-size: 0.8rem; font-weight: 600; color: var(--teal-mid); margin-bottom: 0.4rem; }
.bk-form-group input,
.bk-form-group select,
.bk-form-group textarea {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-dark);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.bk-form-group input:focus,
.bk-form-group select:focus,
.bk-form-group textarea:focus {
    outline: none;
    border-color: var(--teal-accent);
    box-shadow: 0 0 0 3px rgba(38,166,154,0.1);
}
.bk-form-group textarea { resize: vertical; min-height: 90px; }
.bk-submit {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: var(--teal-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 0.5rem;
}
.bk-submit:hover { background: var(--teal-accent-lt); transform: translateY(-1px); }
/* Inline social proof blockquote inside form */
.form-social-proof {
    margin: 0.5rem 0 1rem;
    padding: 1rem 1.1rem;
    background: var(--teal-pale);
    border-left: 3px solid var(--teal-accent);
    border-radius: 0 6px 6px 0;
}
.form-social-proof p { font-size: 0.82rem; line-height: 1.65; color: var(--text-mid); font-style: italic; margin: 0 0 0.5rem; }
.form-social-proof cite { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.02em; font-style: normal; }

/* ════════════════════════════════════════════════════════════
   18. CTA BAND (full-width dark band)
   [SHARED]: tours, transport, some tour pages
   NOTE: Structural banded component with its own dark background.
   Uses .section only for padding inheritance. Do not add
   .section--* modifiers.
   ════════════════════════════════════════════════════════════ */
.cta-band {
    background: var(--teal-dark);
    text-align: center;
}
.cta-band .section-heading { color: #fff; max-width: 540px; margin-left: auto; margin-right: auto; }
.cta-band .section-sub    { margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.65); }
.cta-band .section-label  { justify-content: center; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* ════════════════════════════════════════════════════════════
   19. SOCIAL PROOF STRIP (about page pattern)
   [SHARED]: about_us
   NOTE: Structural banded component with its own dark background.
   Do not wrap in a .section.
   ════════════════════════════════════════════════════════════ */
.social-proof-strip {
    background: var(--teal-mid);
    padding: 3rem 0;
}
.social-proof-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.social-proof-quote {
    flex: 1 1 280px;
    max-width: 360px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1.5rem;
}
.social-proof-stars { color: var(--teal-accent-lt); letter-spacing: 0.1em; font-size: 0.85rem; margin-bottom: 0.5rem; }
.social-proof-text { font-size: 0.92rem; color: rgba(255,255,255,0.8); font-style: italic; line-height: 1.65; margin-bottom: 0.8rem; }
.social-proof-cite { font-size: 0.78rem; color: rgba(255,255,255,0.45); }

/* ════════════════════════════════════════════════════════════
   20. UTILITY / PLAIN TEXT CONTENT
   [SHARED]: privacy_policy, terms_and_conditions, diea, about_us
   ════════════════════════════════════════════════════════════ */
.policy-container { max-width: 800px; margin: 0 auto; padding: 0 2rem; }
.policy-intro { margin-bottom: 3rem; }
.policy-intro p { font-size: 1.05rem; color: var(--text-mid); line-height: 1.8; }
.policy-section { margin-bottom: 2.5rem; }
.policy-section h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.3rem;
    color: var(--teal-mid);
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.policy-section p, .policy-section li { font-size: 0.95rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 0.6rem; }
.policy-section ul { padding-left: 1.5rem; }
.signature-box {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--bg-off);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.section--off .signature-box    { background: var(--bg-white); }
.section--dark .signature-box,
.section--darker .signature-box { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); }
.section--dark .policy-section h2,
.section--darker .policy-section h2 { color: #fff; border-bottom-color: rgba(255,255,255,0.12); }
.section--dark .policy-section p,
.section--dark .policy-section li,
.section--dark .policy-intro p,
.section--darker .policy-section p,
.section--darker .policy-section li,
.section--darker .policy-intro p   { color: rgba(255,255,255,0.78); }

/* ════════════════════════════════════════════════════════════
   21. FOOTER
   [SHARED]: all pages, move to inc/footer.inc
   ════════════════════════════════════════════════════════════ */
.footer-main {
    background: var(--teal-mid);
    color: rgba(255,255,255,0.88);
    padding: 4rem 0 0;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 50% 25% 25%;
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-section h3 {
    color: var(--teal-accent-lt);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-family: 'Source Serif 4', Georgia, serif;
}
.footer-section p { margin-bottom: 0.9rem; font-size: 0.92rem; line-height: 1.65; }
.footer-section img { border-radius: 6px; margin-bottom: 1rem; }
.footer-section a { color: #fff; text-decoration: none; }
.footer-section a:hover { color: var(--teal-accent-lt); }
.footer-section table { margin-top: 1rem; }
.footer-bottom {
    background: var(--teal-dark);
    padding: 1.2rem 0;
    text-align: center;
}
.footer-bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.5); max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ════════════════════════════════════════════════════════════
   22. STICKY MOBILE CTA BAR
   [SHARED]: all tour pages
   NOTE: Two naming variants exist across pages (sticky-bar vs
   sticky-cta-bar). Standardised here as .sticky-bar.
   ════════════════════════════════════════════════════════════ */
.sticky-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--teal-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem;
    padding-bottom: max(0.9rem, calc(0.9rem + env(safe-area-inset-bottom)));
    z-index: 900;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
    transform: translateY(100%);
    transition: transform 0.35s var(--ease-out);
}
.sticky-bar.visible { transform: translateY(0); }
.sticky-price { display: flex; align-items: baseline; gap: 0.3rem; }
.sticky-price .from  { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.sticky-price .amount { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #fff; }
.sticky-price .pp    { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.sticky-bar .btn--primary { padding: 0.7rem 1.5rem; font-size: 0.88rem; }
/* Padding so sticky bar doesn't cover last content (mobile only) */
@media (max-width: 768px) {
    .sticky-pad { padding-bottom: 5rem; }
}

/* ════════════════════════════════════════════════════════════
   24. FEATURED STRIP
   [SHARED]: tours, transport pages
   Sits directly below the hero. Small icon row, dark band.
   ════════════════════════════════════════════════════════════ */
.featured-strip {
    background: var(--teal-dark);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 2rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
}
.featured-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.featured-strip i { color: var(--teal-accent); }

/* ════════════════════════════════════════════════════════════
   25. TOUR CARD GRID
   [SHARED]: tours page
   Grid of tour preview cards. Each card has an image with optional
   badge, meta line (duration + group size), heading, description,
   price, and Learn More CTA.
   ════════════════════════════════════════════════════════════ */
.tour-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (min-width: 600px) { .tour-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tour-cards-grid { grid-template-columns: repeat(3, 1fr); } }
.tour-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}
.tour-card:hover { box-shadow: 0 6px 24px var(--shadow-md); transform: translateY(-3px); }
.tour-card-img {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
}
.tour-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}
.tour-card:hover .tour-card-img img { transform: scale(1.05); }
/* ── [SHARED] Badge component ───────────────────────────────
   Small pill-shaped label used across several components.

   Variants:
     .badge              Base: solid teal accent, uppercase, white text.
                         Used for "Most Popular", "Entry Included",
                         "New", and other emphasis labels.
     .badge--subtle      Pale background, dark teal text, no uppercase.
                         Used for soft metadata tags like "Photo stop"
                         or "Historic site".

   Positioning modifiers:
     .badge--corner      Absolutely positioned in the top-right of a
                         relatively-positioned parent. Used on tour
                         card images.

   Aliases below (.tour-badge, .tl-included-badge, .tl-tag) are
   kept for backward compatibility with existing pages and apply
   the same visual treatment as their .badge equivalents.

   Usage examples:
     <span class="badge badge--corner">Most Popular</span>
     <span class="badge"><i class="fa fa-ticket"></i> Entry Included</span>
     <span class="badge badge--subtle"><i class="fa fa-camera"></i> Photo stop</span>
   ──────────────────────────────────────────────────────── */
.badge,
.tour-badge,
.tl-included-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--teal-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}
.badge--subtle,
.tl-tag {
    background: var(--teal-pale);
    color: var(--teal-mid);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
}
.badge--subtle i,
.tl-tag i { color: var(--teal-accent); font-size: 0.7rem; }
.badge--corner,
.tour-badge {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
}
/* Inline included badge sits at top of highlight card, needs bottom margin */
.tl-included-badge { margin-bottom: 0.6rem; }
.tour-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tour-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}
.tour-card-meta i { color: var(--teal-accent); margin-right: 0.3rem; }
.tour-card-body h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--teal-mid);
    margin-bottom: 0.6rem;
}
.tour-card-body p {
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.65;
    margin-bottom: 1.2rem;
    flex: 1;
}
.tour-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.tour-price {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--teal-mid);
}
.tour-price small {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--text-muted);
}
/* Dark section overrides */
.section--dark .tour-card,
.section--darker .tour-card    { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.section--dark .tour-card-body h3,
.section--darker .tour-card-body h3 { color: #fff; }
.section--dark .tour-card-body p,
.section--darker .tour-card-body p  { color: rgba(255,255,255,0.7); }
.section--dark .tour-card-footer,
.section--darker .tour-card-footer  { border-top-color: rgba(255,255,255,0.1); }
.section--dark .tour-price,
.section--darker .tour-price        { color: #fff; }

/* ════════════════════════════════════════════════════════════
   26. CUSTOM TOUR BANNER
   [SHARED]: tours page, possibly others
   Full-width banner linking to the contact form. Icon left, copy
   middle, arrow right. Renders as a single clickable card.
   ════════════════════════════════════════════════════════════ */
.custom-tour-banner {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-top: 2rem;
}
.custom-tour-banner-link {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--teal-mid);
    color: #fff;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    transition: background 0.2s, transform 0.2s;
}
.custom-tour-banner:hover .custom-tour-banner-link {
    background: var(--teal-light);
    transform: translateY(-2px);
}
.custom-tour-left {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 1;
}
.custom-tour-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--teal-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.custom-tour-text h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.3rem;
}
.custom-tour-text p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.55;
    margin: 0;
}
.custom-tour-arrow {
    font-size: 1.3rem;
    color: var(--teal-accent-lt);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.custom-tour-banner:hover .custom-tour-arrow { transform: translateX(4px); }
@media (max-width: 600px) {
    .custom-tour-banner-link { flex-direction: column; text-align: center; gap: 1rem; }
}

/* ════════════════════════════════════════════════════════════
   27. ICONS STRIP
   [SHARED]: tours page, possibly others
   Grid of circular icons with a label and a short description
   below. Used for "what's included" or feature explanations.
   ════════════════════════════════════════════════════════════ */
.icons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}
@media (min-width: 600px) { .icons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .icons-grid { grid-template-columns: repeat(3, 1fr); } }
.icon-item {
    text-align: center;
    padding: 0 1rem;
}
.icon-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--teal-pale);
    color: var(--teal-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 1rem;
}
.icon-item-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--teal-mid);
    margin-bottom: 0.5rem;
}
.icon-item-desc {
    font-size: 0.88rem;
    color: var(--text-mid);
    line-height: 1.65;
}
.section--dark .icon-circle,
.section--darker .icon-circle    { background: rgba(255,255,255,0.08); color: var(--teal-accent-lt); }
.section--dark .icon-item-title,
.section--darker .icon-item-title { color: #fff; }
.section--dark .icon-item-desc,
.section--darker .icon-item-desc  { color: rgba(255,255,255,0.7); }

/* ════════════════════════════════════════════════════════════
   28. SIMPLE STICKY BAR (no price)
   [SHARED]: tours, transport pages
   Variant of .sticky-bar without the price block. Just a tagline
   and a CTA button. Use .sticky-bar--simple as a modifier.
   ════════════════════════════════════════════════════════════ */
.sticky-bar--simple .sticky-tagline {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
}
/* ════════════════════════════════════════════════════════════
   29. CHOICE ROW
   [SHARED]: off-season page; available for any two-option
   decision moment. Two equal buttons side-by-side with an
   "OR" divider. Clicking one toggles .choice--selected.
   Accessibility: role="radiogroup" / role="radio" / aria-checked.
   ════════════════════════════════════════════════════════════ */
.choice-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
}
.choice {
    flex: 1;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-dark);
    padding: 28px 24px;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    transition: all 160ms ease;
    font-family: inherit;
}
.choice:hover {
    border-color: var(--text-dark);
}
.choice--selected {
    background: var(--teal-mid);
    color: #fff;
    border-color: var(--teal-mid);
}
.choice .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 10px;
}
.choice .title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.choice .detail {
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.72;
    line-height: 1.5;
}
.choice .meta {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
}
.choice .meta .duration { opacity: 0.6; }
.choice .meta .price    { font-size: 14px; }

.choice-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    position: relative;
}
.choice-divider .choice-divider-line {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: var(--border);
}
.choice-divider .choice-divider-label {
    position: relative;
    background: var(--bg-white);
    padding: 6px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--text-muted);
}

/* Dark-section overrides */
.section--dark .choice,
.section--darker .choice {
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}
.section--dark .choice:hover,
.section--darker .choice:hover {
    border-color: rgba(255,255,255,0.7);
}
.section--dark .choice--selected,
.section--darker .choice--selected {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.6);
}
.section--dark .choice-divider-line,
.section--darker .choice-divider-line  { background: rgba(255,255,255,0.2); }
.section--dark .choice-divider-label,
.section--darker .choice-divider-label { background: var(--teal-mid); color: rgba(255,255,255,0.6); }
.section--darker .choice-divider-label { background: var(--teal-dark); }

/* Responsive: stack vertically on small screens */
@media (max-width: 600px) {
    .choice-row        { flex-direction: column; }
    .choice-divider    { flex-direction: row; padding: 12px 0; }
    .choice-divider .choice-divider-line {
        top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px;
    }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .header-main { height: 80px; }
    .content-main { margin-top: 80px; }
    .header-menu-toggle { display: block; }
    .header-nav {
        position: fixed;
        inset: 0;
        background: #fff;
        z-index: 1001;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }
    body.menu-open .header-nav { opacity: 1; visibility: visible; }
    body.menu-open { overflow: hidden; }
    .mobile-menu-logo { display: block; height: 70px; width: auto; margin-bottom: 2.5rem; }
    .header-nav-links { flex-direction: column; gap: 1.8rem; text-align: center; }
    .header-nav-links a { font-size: 22px; font-weight: 600; }
    .header-nav-links a::after { display: none; }
    .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; max-height: 0; overflow: hidden; transition: max-height 0.3s; }
    .has-dropdown.open .dropdown-menu { max-height: 400px; }
    .dropdown-menu a { font-size: 18px; color: var(--text-mid); padding: 0.4rem 2rem; }

    .footer-content { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.2rem; }
    .container, .container--wide { padding: 0 1.2rem; }

    .lightbox-prev { left: -1rem; }
    .lightbox-next { right: -1rem; }

    .bk-form-row { grid-template-columns: 1fr; }

    .highlight-band-inner { display: grid; grid-template-columns: 1fr 1fr; }
    .highlight-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .highlight-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
    .highlight-stat:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 819px) {
    .facts-bar { display: grid; grid-template-columns: 1fr 1fr; }
    .fact-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .fact-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.07); }
    .fact-item:nth-last-child(-n+2) { border-bottom: none; }
}