/* ============================================================
   Expeditions — hub page (.exp-*) and detail-page palettes
   Loaded after styles.css on expeditions.html, and after
   styles.css + destination.css on expedition.html.
   Uses the same tokens, easing and shadow language as the rest
   of the site; nothing here redefines a global.
   ============================================================ */

:root {
    --exp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --exp-navy: #0e2e4a;
    --exp-navy-deep: #071b2f;
}

/* ---------- Per-band palettes for expedition.html ----------
   These mirror the body.dt-* palettes in destination.css so the
   expedition detail template inherits the whole .dt- design
   language and only swaps the colour set. */

/* 8000m — high-altitude ice blue */
body.dt-exp-8000 {
    --dt-deep: #071b2f;         --dt-deep-rgb: 7, 27, 47;
    --dt-base: #0e2e4a;         --dt-base-rgb: 14, 46, 74;
    --dt-soft: #1c4d74;         --dt-soft-rgb: 28, 77, 116;
    --dt-accent: #3d7fb5;       --dt-accent-rgb: 61, 127, 181;
    --dt-accent-bright: #63a4d4; --dt-accent-bright-rgb: 99, 164, 212;
    --dt-mist: #e8f0f7;
    --dt-sand: #f4f7fa;
    --dt-cream: #fbfcfe;
    --dt-ink: #1a2735;
    --dt-muted: #5b6a79;
}

/* 7000m — granite violet */
body.dt-exp-7000 {
    --dt-deep: #191634;         --dt-deep-rgb: 25, 22, 52;
    --dt-base: #27234c;         --dt-base-rgb: 39, 35, 76;
    --dt-soft: #363168;         --dt-soft-rgb: 54, 49, 104;
    --dt-accent: #6a63ab;       --dt-accent-rgb: 106, 99, 171;
    --dt-accent-bright: #8b84c6; --dt-accent-bright-rgb: 139, 132, 198;
    --dt-mist: #eeecf7;
    --dt-sand: #f5f4fa;
    --dt-cream: #fcfbfe;
    --dt-ink: #24223a;
    --dt-muted: #64627e;
}

/* 6000m — alpine teal */
body.dt-exp-6000 {
    --dt-deep: #08241f;         --dt-deep-rgb: 8, 36, 31;
    --dt-base: #0f3b33;         --dt-base-rgb: 15, 59, 51;
    --dt-soft: #175245;         --dt-soft-rgb: 23, 82, 69;
    --dt-accent: #2b8f7b;       --dt-accent-rgb: 43, 143, 123;
    --dt-accent-bright: #45ae98; --dt-accent-bright-rgb: 69, 174, 152;
    --dt-mist: #e7f4f0;
    --dt-sand: #f1f8f6;
    --dt-cream: #fafdfc;
    --dt-ink: #1b2f2b;
    --dt-muted: #587069;
}

/* ============================================================
   HUB PAGE
   ============================================================ */

body.exp-body {
    background-color: var(--bg-light);
}

/* ---------- Hero ---------- */
.exp-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--exp-navy-deep);
}

.exp-hero-bg {
    position: absolute;
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    will-change: transform;
}

.exp-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(7, 27, 47, 0.78) 0%, rgba(7, 27, 47, 0.5) 42%, rgba(7, 27, 47, 0.92) 100%),
        radial-gradient(circle at 22% 42%, rgba(184, 134, 58, 0.22), transparent 58%);
}

.exp-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 9rem 1.5rem 4rem;
    color: var(--text-light);
}

.exp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.05rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.exp-hero-eyebrow svg {
    width: 15px;
    height: 15px;
    fill: var(--accent);
}

.exp-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: var(--weight-heading);
    line-height: 1.06;
    letter-spacing: var(--track-tight);
    max-width: 15ch;
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.4);
}

.exp-hero-title em {
    font-style: normal;
    color: var(--accent);
    display: block;
}

.exp-hero-sub {
    max-width: 62ch;
    margin-top: 1.35rem;
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.86);
}

.exp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.2rem;
}

/* ---------- Buttons ---------- */
.exp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.92rem 1.9rem;
    border: none;
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.exp-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.exp-btn--gold {
    background: linear-gradient(120deg, var(--accent-hover), var(--accent) 55%, #d9b566);
    color: var(--text-light);
    box-shadow: var(--shadow-gold);
}

.exp-btn--gold:hover,
.exp-btn--gold:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -12px rgba(184, 134, 58, 0.62);
    outline: none;
}

.exp-btn--gold:hover svg {
    transform: translateX(4px);
}

.exp-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: var(--text-light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.exp-btn--ghost:hover,
.exp-btn--ghost:focus-visible {
    background: var(--text-light);
    border-color: var(--text-light);
    color: var(--primary);
    transform: translateY(-3px);
    outline: none;
}

/* ---------- Statistics strip ---------- */
.exp-stats {
    position: relative;
    z-index: 5;
    max-width: var(--max-width);
    margin: -4.5rem auto 0;
    padding: 0 1.5rem;
}

.exp-stats-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-card-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
}

.exp-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.7rem 1.5rem;
    border-right: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
}

.exp-stat:last-child {
    border-right: none;
}

.exp-stat:hover {
    background: rgba(184, 134, 58, 0.07);
}

.exp-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--primary), var(--primary-light));
}

.exp-stat-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--accent-soft);
}

.exp-stat-value {
    display: block;
    font-family: var(--font-numbers);
    font-size: 1.5rem;
    font-weight: var(--weight-heading);
    line-height: 1.15;
    letter-spacing: var(--track-tight);
    color: var(--primary);
}

.exp-stat-label {
    display: block;
    font-size: 0.79rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- Sticky filter tabs ---------- */
.exp-filters {
    position: sticky;
    top: 72px;
    z-index: 500;
    padding: 1.6rem 0 1.2rem;
    background: linear-gradient(to bottom, var(--bg-light) 72%, rgba(247, 245, 240, 0));
}

.exp-filters-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* `min-width: 0` is load-bearing: as a flex item the tab strip defaults to
   min-width:auto, which is its full 4-tab width. Without this it refuses to
   shrink on a phone and drags the whole page into horizontal overflow
   instead of scrolling inside its own track. */
.exp-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-glass);
}

.exp-tabs::-webkit-scrollbar {
    display: none;
}

.exp-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.exp-tab:hover {
    color: var(--primary);
    background: var(--bg-light);
}

.exp-tab[aria-selected="true"] {
    background: linear-gradient(120deg, var(--accent-hover), var(--accent) 55%, #d9b566);
    color: var(--text-light);
    box-shadow: 0 8px 18px -8px rgba(184, 134, 58, 0.6);
}

.exp-tab-count {
    font-family: var(--font-numbers);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(14, 46, 74, 0.08);
    color: inherit;
}

.exp-tab[aria-selected="true"] .exp-tab-count {
    background: rgba(255, 255, 255, 0.24);
}

/* ---------- Range sections ---------- */
.exp-range {
    padding: 3.4rem 0 4.2rem;
    scroll-margin-top: 150px;
}

.exp-range--tint {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

.exp-range[hidden] {
    display: none;
}

.exp-range-head {
    max-width: 900px;
    margin: 0 auto 2.8rem;
    text-align: center;
}

.exp-eyebrow {
    display: inline-block;
    margin-bottom: 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.exp-eyebrow::before,
.exp-eyebrow::after {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    margin-bottom: 0.28em;
    background: var(--accent);
    vertical-align: middle;
}

.exp-eyebrow::before { margin-right: 0.7rem; }
.exp-eyebrow::after { margin-left: 0.7rem; }

.exp-range-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.6vw, 2.7rem);
    font-weight: var(--weight-heading);
    line-height: 1.16;
    letter-spacing: var(--track-tight);
    color: var(--primary);
}

.exp-range-sub {
    margin-top: 0.7rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.exp-range-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.3rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    background: rgba(184, 134, 58, 0.12);
    border: 1px solid rgba(184, 134, 58, 0.28);
    color: var(--accent-hover);
    font-size: 0.87rem;
    font-weight: 600;
}

.exp-range-count svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.exp-range-count strong {
    font-family: var(--font-numbers);
}

.exp-range-desc {
    max-width: 78ch;
    margin: 1.5rem auto 0;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-dark);
}

/* ---------- Expedition card grid ---------- */
.exp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 1.75rem;
}

.exp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.exp-card:hover,
.exp-card:focus-within {
    transform: translateY(-8px);
    border-color: rgba(184, 134, 58, 0.45);
    box-shadow: var(--shadow-premium);
}

.exp-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--primary-dark);
}

.exp-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.85s var(--exp-ease);
}

.exp-card:hover .exp-card-media img {
    transform: scale(1.08);
}

.exp-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 27, 47, 0.72) 0%, rgba(7, 27, 47, 0.05) 48%, transparent 100%);
    pointer-events: none;
}

.exp-badge {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #1f7a52;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-sm);
}

.exp-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #23935f;
    box-shadow: 0 0 0 3px rgba(35, 147, 95, 0.22);
}

.exp-card-alt {
    position: absolute;
    right: 0.9rem;
    bottom: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(7, 27, 47, 0.66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--accent-soft);
    font-family: var(--font-numbers);
    font-size: 0.76rem;
    font-weight: 600;
}

.exp-card-alt svg {
    width: 13px;
    height: 13px;
    fill: var(--accent);
}

.exp-card-region {
    position: absolute;
    left: 0.9rem;
    bottom: 0.85rem;
    z-index: 2;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.exp-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.4rem 1.4rem 1.5rem;
}

.exp-card-title {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: var(--weight-heading);
    line-height: 1.28;
    letter-spacing: var(--track-snug);
    color: var(--primary);
    transition: color var(--transition-fast);
}

.exp-card:hover .exp-card-title {
    color: var(--accent-hover);
}

.exp-card-desc {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.68;
    color: var(--text-muted);
}

.exp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.1rem 0 1.3rem;
    padding-top: 1.05rem;
    border-top: 1px solid var(--border-color);
}

.exp-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--border-radius-sm);
    background: var(--bg-light);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-dark);
}

.exp-meta-item svg {
    width: 14px;
    height: 14px;
    fill: var(--accent);
    flex-shrink: 0;
}

.exp-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: auto;
}

.exp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.72rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.exp-action svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}

.exp-action--inquiry {
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    color: var(--primary);
}

.exp-action--inquiry:hover,
.exp-action--inquiry:focus-visible {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--text-light);
    outline: none;
}

.exp-action--book {
    border: 1px solid transparent;
    background: linear-gradient(120deg, var(--accent-hover), var(--accent) 55%, #d9b566);
    color: var(--text-light);
    box-shadow: 0 8px 18px -10px rgba(184, 134, 58, 0.7);
}

.exp-action--book:hover,
.exp-action--book:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(184, 134, 58, 0.8);
    outline: none;
}

/* ---------- "Why choose" premium trio ---------- */
.exp-why {
    margin-top: 3.4rem;
    padding: 3rem 2.4rem 3.2rem;
    border-radius: var(--border-radius-lg);
    background:
        linear-gradient(150deg, rgba(14, 46, 74, 0.97), rgba(7, 27, 47, 0.99)),
        radial-gradient(circle at 82% 12%, rgba(184, 134, 58, 0.3), transparent 55%);
    box-shadow: var(--shadow-premium);
}

.exp-why-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.4rem;
}

.exp-why-head .exp-eyebrow {
    color: var(--accent-soft);
}

.exp-why-head .exp-eyebrow::before,
.exp-why-head .exp-eyebrow::after {
    background: var(--accent-soft);
}

.exp-why-title {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    font-weight: var(--weight-heading);
    letter-spacing: var(--track-tight);
    line-height: 1.22;
    color: var(--text-light);
}

.exp-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 1.4rem;
}

.exp-why-card {
    padding: 1.85rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform var(--transition-normal), border-color var(--transition-normal), background-color var(--transition-normal);
}

.exp-why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 134, 58, 0.55);
    background: rgba(255, 255, 255, 0.1);
}

.exp-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--accent-hover), var(--accent));
    box-shadow: var(--shadow-gold);
    transition: transform var(--transition-fast);
}

.exp-why-card:hover .exp-why-icon {
    transform: rotate(-6deg) scale(1.06);
}

.exp-why-icon svg {
    width: 25px;
    height: 25px;
    fill: var(--text-light);
}

.exp-why-card h3 {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: var(--weight-heading);
    letter-spacing: var(--track-snug);
    color: var(--text-light);
    margin-bottom: 0.55rem;
}

.exp-why-card p {
    font-size: 0.92rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.76);
}

/* ---------- Closing CTA band ---------- */
.exp-cta {
    position: relative;
    margin-top: 1rem;
    padding: 5rem 0;
    overflow: hidden;
    background-color: var(--exp-navy-deep);
}

.exp-cta-bg {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    opacity: 0.32;
}

.exp-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    color: var(--text-light);
}

.exp-cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: var(--weight-heading);
    line-height: 1.2;
    letter-spacing: var(--track-tight);
}

.exp-cta-text {
    margin: 1.1rem auto 2rem;
    font-size: 1.03rem;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.84);
}

.exp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ---------- Scroll reveal ---------- */
[data-exp-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--exp-ease), transform 0.7s var(--exp-ease);
    transition-delay: var(--exp-delay, 0s);
}

[data-exp-reveal].exp-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-exp-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .exp-card-media img,
    .exp-hero-bg {
        transition: none;
    }
}

/* ============================================================
   DETAIL PAGE additions (expedition.html)
   ============================================================ */

/* Expedition heroes use high-key snow photography — far brighter than the
   trek imagery .dt-hero-overlay was tuned for. Deepen the scrim and add a
   text shadow so the sub-line and breadcrumbs stay legible over white ice. */
body[class*="dt-exp-"] .dt-hero-overlay {
    background: linear-gradient(180deg,
        rgba(var(--dt-deep-rgb), 0.74) 0%,
        rgba(var(--dt-deep-rgb), 0.5) 42%,
        rgba(var(--dt-deep-rgb), 0.9) 100%);
}

body[class*="dt-exp-"] .dt-hero-title,
body[class*="dt-exp-"] .dt-hero-sub,
body[class*="dt-exp-"] .dt-hero-crumbs {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Expedition overviews run to two paragraphs; the trek pages only ever
   have one, so the shared rule carries no bottom margin. */
.dt-overview-text + .dt-overview-text {
    margin-top: 1.1rem;
}

/* Breadcrumb above the detail hero title */
.dt-hero-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
}

.dt-hero-crumbs a {
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--transition-fast);
}

.dt-hero-crumbs a:hover {
    color: var(--dt-gold);
}

.dt-hero-crumbs svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    opacity: 0.6;
}

/* "Bookings open" pill reused on the detail hero */
.dt-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 0.6rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: rgba(35, 147, 95, 0.2);
    border: 1px solid rgba(90, 200, 150, 0.45);
    color: #b9f0d5;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* Sibling peaks strip at the foot of a detail page */
.exp-siblings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 1.2rem;
}

.exp-sibling {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.exp-sibling:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 134, 58, 0.45);
    box-shadow: var(--shadow-lg);
}

.exp-sibling img {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.exp-sibling-name {
    display: block;
    font-size: 0.96rem;
    font-weight: var(--weight-heading);
    line-height: 1.3;
    color: var(--dt-base, var(--primary));
}

.exp-sibling-meta {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-numbers);
    font-size: 0.79rem;
    color: var(--text-muted);
}

/* Not-found state on the template.
   The [hidden] rule has to be spelled out: a bare `display: flex` outranks
   the UA stylesheet's `[hidden] { display: none }`, which would leave this
   panel stacked above every expedition that *did* resolve. */
.exp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 8rem 1.5rem 4rem;
    text-align: center;
    color: var(--text-muted);
}

.exp-loading[hidden] {
    display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Keep in step with the nav drawer breakpoint in styles.css — below it the
   header collapses to the hamburger bar and loses six pixels of height. */
@media (max-width: 1200px) {
    .exp-filters {
        top: 66px;
    }
}

@media (max-width: 992px) {
    .exp-stats-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exp-stat:nth-child(2) {
        border-right: none;
    }

    .exp-stat:nth-child(1),
    .exp-stat:nth-child(2) {
        border-bottom: 1px solid var(--border-color);
    }

    .exp-why {
        padding: 2.4rem 1.6rem 2.6rem;
    }
}

@media (max-width: 768px) {
    .exp-hero {
        min-height: 78vh;
    }

    .exp-hero-content {
        padding: 7.5rem 1.5rem 3.5rem;
    }

    .exp-hero-title {
        max-width: none;
    }

    .exp-hero-actions .exp-btn {
        flex: 1 1 100%;
    }

    .exp-stats {
        margin-top: -3rem;
    }

    .exp-stat {
        padding: 1.25rem 1rem;
        gap: 0.8rem;
    }

    .exp-stat-icon {
        width: 40px;
        height: 40px;
    }

    .exp-stat-value {
        font-size: 1.25rem;
    }

    .exp-filters {
        padding: 1.2rem 0 0.9rem;
    }

    .exp-filters-inner {
        justify-content: flex-start;
        padding: 0 1rem;
    }

    .exp-tabs {
        border-radius: var(--border-radius-md);
    }

    .exp-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .exp-range {
        padding: 2.6rem 0 3.2rem;
        scroll-margin-top: 120px;
    }

    .exp-grid {
        gap: 1.35rem;
    }

    .exp-cta {
        padding: 3.6rem 0;
    }

    .exp-cta-actions .exp-btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 520px) {
    .exp-stats-inner {
        grid-template-columns: 1fr;
    }

    .exp-stat {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .exp-stat:last-child {
        border-bottom: none;
    }

    .exp-card-actions {
        grid-template-columns: 1fr;
    }

    .exp-sibling img {
        width: 56px;
        height: 56px;
    }
}