/* ============================================================
   WANDSPIRIT — EXPERIENCES
   Layers on top of home.css, which supplies the tokens, nav,
   footer, buttons and the motion primitives.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
#exp-hero {
    position: relative;
    min-height: clamp(420px, 62svh, 660px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0 var(--pad) clamp(1.8rem, 4vw, 3.2rem);
}

.exp-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.exp-hero-img {
    position: absolute;
    top: -16%;
    left: 0;
    width: 100%;
    height: 132%;
    background: url(/static/img/calendar-bg.jpg) center/cover no-repeat;
}

.exp-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 11, 10, 0.72) 0%,
        rgba(11, 11, 10, 0.18) 38%,
        rgba(11, 11, 10, 0.78) 88%,
        var(--black) 100%
    );
}

.exp-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
    gap: 2rem;
}

.exp-hero-title {
    font-family: "Archivo", sans-serif;
    font-weight: 900;
    font-size: clamp(2.1rem, 6vw, 5.2rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--white);
}

.exp-hero-desc {
    max-width: 26ch;
    font-size: 0.74rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    text-align: right;
    padding-bottom: 0.5rem;
}

/* ============================================================
   WHY TRAVEL WITH US
   ============================================================ */
/* Sections carry no side padding: their rules run the full width of the
   viewport and the copy is inset from them by the page gutter. */
#why {
    padding: clamp(3rem, 6.5vw, 5.5rem) 0 0;
}

#why > .section-title,
.why-intro {
    padding-inline: var(--pad);
}

.why-intro {
    max-width: 68ch;
    margin: 1.4rem 0 clamp(3rem, 7vw, 6rem);
    font-size: 0.82rem;
    line-height: 1.85;
    color: var(--muted);
}

.why-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.why-list {
    border-right: 1px solid var(--line);
}

.why-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: clamp(1.1rem, 2.2vw, 1.7rem) var(--pad);
    border-bottom: 1px solid var(--line);
}

.why-item:last-child {
    border-bottom: none;
}

.why-item-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--white);
}

.why-item-desc {
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--muted);
}

/* the image is inset inside its cell, not flush to the rules */
.why-visual {
    position: relative;
    overflow: hidden;
    margin: clamp(1.4rem, 2.8vw, 2.4rem) var(--pad);
}

.why-img {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background: url(/static/img/hiking-trail.jpg) center/cover no-repeat;
}

/* ============================================================
   EXPERIENCE TYPES
   ============================================================ */
#types {
    padding: clamp(3rem, 7vw, 6rem) 0 0;
}

#types > .section-title {
    padding-inline: var(--pad);
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

/* 1px gaps over a rule-coloured bed draw the internal lines; the top and
   bottom rules run the full width, with no rule down the outer edges */
.type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.type-card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.8rem, 3.4vw, 2.8rem) var(--pad);
    background: var(--black);
    transition: background 0.5s var(--ease);
}

.type-card:hover {
    background: var(--panel);
}

.type-icon {
    display: block;
    width: 26px;
    height: 26px;
    color: var(--white);
    transition: color 0.45s var(--ease);
}

.type-card:hover .type-icon {
    color: var(--gold);
}

.type-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.type-title {
    margin-top: clamp(2rem, 4vw, 3.2rem);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--white);
}

.type-desc {
    margin-top: clamp(0.8rem, 1.6vw, 1.3rem);
    font-size: 0.74rem;
    line-height: 1.7;
    color: var(--muted);
}

/* ============================================================
   FULL-BLEED BAND
   ============================================================ */
.exp-bleed {
    position: relative;
    height: clamp(260px, 44vw, 540px);
    overflow: hidden;
}

.exp-bleed-img {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background: url(/static/img/discover-van.jpg) center 40% / cover no-repeat;
}

/* ============================================================
   DESTINATIONS
   ============================================================ */
#destinations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.dest {
    background: var(--black);
    padding: clamp(2.2rem, 4.5vw, 3.6rem) var(--pad);
}

.dest-title {
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--white);
}

.dest-body {
    margin-top: 1.1rem;
    font-size: 0.78rem;
    line-height: 1.85;
    color: var(--muted);
}

.dest-list {
    margin-top: clamp(2.2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.dest-item {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.dest-item-title {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--white);
}

.dest-item-desc {
    font-size: 0.73rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ============================================================
   YUKON
   ============================================================ */
#yukon {
    padding: clamp(3rem, 7vw, 6rem) 0 0;
}

.yukon-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: 0 var(--pad) clamp(2.5rem, 6vw, 5rem);
    border-bottom: 1px solid var(--line);
}

.yukon-badge {
    white-space: nowrap;
    font-style: italic;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.yukon-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
}

/* no padding here: the rule under the intro has to reach the column edge */
.yukon-panel {
    border-right: 1px solid var(--line);
}

.yukon-intro {
    padding: clamp(1.8rem, 3.6vw, 3rem) var(--pad);
    font-size: 0.78rem;
    line-height: 1.85;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.yukon-list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1.8rem, 3.6vw, 3rem) var(--pad);
}

.yukon-item {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.yukon-item-title {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--white);
}

.yukon-item-desc {
    font-size: 0.73rem;
    line-height: 1.6;
    color: var(--muted);
}

.yukon-visual {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    margin: clamp(1.4rem, 2.8vw, 2.4rem) var(--pad);
}

.yukon-img {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background: url("/static/img/lights-1 Medium.jpeg") center/cover no-repeat;
}

/* ============================================================
   CTA
   ============================================================ */
#exp-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(2.5rem, 6vw, 5rem) var(--pad);
    border-top: 1px solid var(--line);
}

#exp-cta .cta-title {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--white);
}

/* home.css right-aligns .cta-desc for the homepage CTA grid, and Chrome
   honours justify-self in block layout — reset it for this column */
#exp-cta .cta-desc {
    justify-self: start;
    max-width: 42ch;
    margin-top: 0.9rem;
    font-size: 0.76rem;
    line-height: 1.75;
    color: var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
    .type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-body {
        grid-template-columns: 1fr;
    }
    .why-visual {
        aspect-ratio: 16 / 9;
    }
    #destinations {
        grid-template-columns: 1fr;
    }
    .why-list {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .yukon-body {
        grid-template-columns: 1fr;
    }
    .yukon-panel {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .yukon-visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 760px) {
    .exp-hero-inner {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 1rem;
    }
    .exp-hero-desc {
        max-width: none;
        text-align: left;
        padding-bottom: 0;
    }

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

    .yukon-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    #exp-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}