/* =========================================================================
   KAAYA GLOW — LUXURY PACKAGES SHOWCASE
   Single-item, auto-rotating package spotlight. One package is shown at a
   time (name, description, tags, stat card) and crossfades to the next
   every 5 seconds (see lp-luxury-packages.js), cycling through all
   packages in $kgPackages. A left-hand stepper lists every package and
   doubles as a progress indicator for the current slide.

   THEME (client feedback: "not visible — make that section dark theme,
   card light theme"): the section was transparent, so the dark card sat
   directly on the pale green page and the whole block read as one floating
   slab with nothing separating it from the sections above and below. The
   polarity is now flipped — the SECTION is a full-bleed dark band and the
   CARD inside it is light. The band gives the showcase an edge on both
   sides so it's obvious where it starts and stops, and the light card
   lifts clearly out of it.
   ========================================================================= */
.lp-section {
    position: relative;
    padding: 96px 0 110px;
    /* Full-bleed dark band. The radial sits top-right, behind the card's
       own top-right corner, so the band doesn't read as flat black. */
    background:
        radial-gradient(circle at 88% 8%, rgba(142, 182, 155, 0.14), transparent 38%),
        linear-gradient(152deg, var(--kaaya-black) 0%, var(--kaaya-charcoal) 58%, var(--kaaya-deep) 100%);
    color: var(--kaaya-ivory);
}

.lp-eyebrow-outer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.lp-eyebrow-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 3px;
    border-radius: 50%;
    /* now on the dark band, so this flips from dark-chip/light-text to
       light-chip/dark-text to stay visible */
    background: var(--kaaya-sage, #8EB69B);
    color: var(--kaaya-black, #051F20);
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.lp-eyebrow {
    /* FIX: letter-spacing was 0.14em, a shade off the 0.16em every other
       section's eyebrow uses (.kg-eyebrow, .kg-so-eyebrow, .kg-mem2-eyebrow) */
    display: inline-flex;
    align-items: center;
    color: var(--kaaya-taupe, #B4D3BC);
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lp-eyebrow::before {
    display: inline-block;
    width: 26px;
    height: 1px;
    margin-right: 10px;
    background: var(--kaaya-gold);
    content: '';
}

.lp-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    /* Light card on the dark band. A near-flat cream, not the green wash
       used earlier: with the photo now inset rather than bleeding to the
       edge, the card is a visible surface in its own right and a gradient
       across it competes with the image. */
    background: linear-gradient(135deg, #FAFBF7 0%, #F2F4EE 100%);
    border: 1px solid rgba(218, 241, 222, 0.14);
    box-shadow: 0 44px 96px -42px rgba(0, 0, 0, 0.62);
    /* The section sets color:ivory for the dark band; reset it here so
       anything inside the card without an explicit colour inherits a dark
       value instead of near-invisible ivory-on-ivory. */
    color: var(--kaaya-deep, #163832);
}

.lp-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1fr);
    min-height: 560px;
}

/* ---------------- Left: copy + stepper ---------------- */
.lp-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 56px 48px 56px 56px;
}

.lp-copy-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lp-copy-eyebrow span:first-child {
    color: var(--kaaya-moss, #235347);
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lp-index {
    color: rgba(22, 56, 50, 0.55);
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.lp-heading-block {
    position: relative;
    min-height: 168px;
}

.lp-pane {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--kg-speed-slow) var(--kg-ease), transform var(--kg-speed-slow) var(--kg-ease);
    pointer-events: none;
}

.lp-pane.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lp-pkg-name {
    /* FIX: was clamp(32px, 3vw, 42px) — the lowest max of any section
       headline on the page. Raised to sit alongside Memberships (44px)
       instead of trailing noticeably behind every other section. */
    margin: 0 0 14px;
    color: var(--kaaya-black);
    font-family: var(--kg-heading-font);
    font-size: clamp(32px, 3.2vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.lp-pkg-desc {
    margin: 0 0 20px;
    max-width: 360px;
    color: var(--kaaya-deep, #163832);
    font-family: var(--kg-body-font);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.75;
}

.lp-pkg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.lp-pkg-tag {
    padding: 6px 12px;
    border: 1px solid rgba(35, 83, 71, 0.24);
    border-radius: 999px;
    background: rgba(142, 182, 155, 0.14);
    color: var(--kaaya-moss, #235347);
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
}

.lp-pkg-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.lp-pkg-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 13px 22px;
    /* On the old dark card this was sage-on-dark. Sage on a light card
       measures barely 1.6:1, so the fill flips to the deep green and the
       label to white. */
    border: 1px solid var(--kaaya-deep, #163832);
    border-radius: 999px;
    color: var(--kaaya-white);
    background: var(--kaaya-deep, #163832);
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), gap var(--kg-speed-fast) var(--kg-ease);
}

.lp-pkg-cta:hover {
    gap: 14px;
    background: transparent;
    color: var(--kaaya-deep, #163832);
}

.lp-pkg-cta svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Secondary, quieter action — a plain underline-style link so it reads as
   "learn more" rather than competing with the primary booking CTA. */
.lp-pkg-details {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kaaya-moss, #235347);
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(35, 83, 71, 0.35);
    transition: color var(--kg-speed-fast) var(--kg-ease), gap var(--kg-speed-fast) var(--kg-ease);
}

.lp-pkg-details svg { width: 12px; height: 12px; flex-shrink: 0; }

.lp-pkg-details:hover {
    gap: 9px;
    color: var(--kaaya-deep, #163832);
    text-decoration-color: currentColor;
}

/* The dark bottom scrim the old layout needed is gone: the stat card is
   fully opaque now, so nothing has to be darkened underneath it, and on a
   light card the scrim only made the photo look muddy. */

/* stepper (also doubles as slide progress) */
.lp-stepper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid rgba(35, 83, 71, 0.16);
}

.lp-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    /* Each row is ruled off, so the list reads as a menu rather than a
       loose stack. The rule doubles as the progress track (below). */
    border: none;
    border-bottom: 1px solid rgba(35, 83, 71, 0.12);
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--kg-body-font);
}

.lp-stepper .lp-step:last-child {
    border-bottom: none;
}

.lp-step-dot {
    position: relative;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(35, 83, 71, 0.26);
    transition: border-color var(--kg-speed-fast) var(--kg-ease), background var(--kg-speed-fast) var(--kg-ease);
}

.lp-step.is-active .lp-step-dot {
    border-color: var(--kaaya-deep, #163832);
    background: var(--kaaya-deep, #163832);
}

.lp-step-label {
    flex: 1;
    color: rgba(22, 56, 50, 0.52);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color var(--kg-speed-fast) var(--kg-ease);
}

.lp-step.is-active .lp-step-label {
    color: var(--kaaya-black);
    font-weight: 700;
}

.lp-step-track {
    position: absolute;
    left: 0;
    /* -1px so the fill rides exactly on top of the row's border-bottom
       instead of floating above it. The track itself is transparent now —
       the border is the resting state of the line. */
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: transparent;
    overflow: hidden;
}

.lp-step-fill {
    display: block;
    width: 0%;
    height: 100%;
    background: var(--kaaya-deep, #163832);
}

.lp-step.is-active .lp-step-fill {
    animation: lpFill var(--lp-interval, 5000ms) linear forwards;
}

.lp-section.is-paused .lp-step.is-active .lp-step-fill {
    animation-play-state: paused;
}

@keyframes lpFill {
    from { width: 0%; }
    to { width: 100%; }
}

/* ---------------- Right: image + floating stat card ---------------- */
/* The photo is inset inside the card rather than bleeding to its edges,
   so the cream surface frames it on all four sides and the card reads as
   one object instead of two halves butted together. */
.lp-media {
    position: relative;
    overflow: hidden;
    margin: 30px 30px 30px 0;
    border-radius: 24px;
    background: #E7EAE4;
}

.lp-media-frame {
    position: absolute;
    inset: 0;
}

.lp-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity var(--kg-speed-slow) var(--kg-ease), transform 5400ms var(--kg-ease);
    filter: saturate(0.94);
}

.lp-media-img.is-active {
    opacity: 1;
    transform: scale(1);
}

.lp-stat-card {
    position: absolute;
    left: 38px;
    bottom: 30px;
    right: auto;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 30px;
    padding: 22px 32px;
    border-radius: 20px;
    /* Opaque warm beige — it sits straight on the photo now with no scrim
       behind it, so it can't rely on a darkened backdrop for contrast. */
    background: #EFE8E3;
    box-shadow: 0 24px 46px -22px rgba(11, 43, 38, 0.45);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--kg-speed-slow) var(--kg-ease) 120ms, transform var(--kg-speed-slow) var(--kg-ease) 120ms;
}

.lp-stat-card.is-active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.lp-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lp-stat-value {
    color: var(--kaaya-black);
    font-family: var(--kg-heading-font);
    font-size: 27px;
    font-weight: 500;
    line-height: 1.05;
    white-space: nowrap;
}

.lp-stat-label {
    color: #6a776d;
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.lp-stat-divider {
    width: 1px;
    height: 42px;
    background: rgba(11, 43, 38, 0.16);
}

.lp-stat-details {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--kaaya-deep, #163832);
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: gap var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease);
}

.lp-stat-details svg { width: 12px; height: 12px; flex-shrink: 0; }

.lp-stat-details:hover {
    gap: 10px;
    color: var(--kaaya-gold);
}

@media (prefers-reduced-motion: reduce) {
    .lp-pane,
    .lp-media-img,
    .lp-stat-card,
    .lp-step-fill {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 960px) {
    .lp-section {
        padding: 78px 0 88px;
    }

    .lp-copy {
        padding: 48px 36px;
    }
}

@media (max-width: 860px) {
    .lp-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .lp-copy {
        padding: 44px 28px 36px;
    }

    .lp-media {
        /* stacked under the copy now, so the inset moves to the sides and
           bottom and the top edge closes up against the text above */
        margin: 0 22px 22px;
        min-height: 320px;
    }

    .lp-stat-card {
        left: 18px;
        right: 18px;
        bottom: 18px;
        gap: 18px;
        padding: 16px 20px;
    }

    .lp-stat-value {
        font-size: 22px;
    }

    .lp-stat-divider {
        height: 32px;
    }
}