/* =========================================================
   PRICING PAGE — pricing.css
   Page-specific styles only. Depends on components.css
   (ba-section, ba-hero--compact, ba-price-table, ba-saving).
   ========================================================= */


/* ─── TRUST STRIP ─────────────────────────────────────── */
.ba-trust-strip {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 1.5rem 0;
}

.ba-trust-strip__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 480px) {
    .ba-trust-strip__inner {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 1rem;
    }
}

@media (min-width: 768px) {
    .ba-trust-strip__inner {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
}

.ba-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .ba-trust-item {
        border-right: 1px solid rgba(0, 0, 0, 0.07);
        padding: 0.5rem 1.5rem;
    }
    .ba-trust-item:last-child { border-right: none; }
    .ba-trust-item:first-child { padding-left: 0; }
}

.ba-trust-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    font-size: 1.15rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.ba-trust-item strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0.15rem;
}

.ba-trust-item span {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}


/* ─── ANCHOR NAV ──────────────────────────────────────────
 * Horizontal pill nav that sticks under the main header.
 * Mobile: tight pills, scrollable with fade-mask hint.
 * Desktop (≥ 768px): roomier pills, usually fits without scrolling.
 * ───────────────────────────────────────────────────────── */
.ba-anchor-nav {
    position: sticky;
    top: var(--ba-header-h);    /* single source of truth — see tokens.css */
    z-index: 90;
    /* Same surface as the main bar: as a white strip it read as a stray
       floating band rather than a second row of navigation. */
    background: var(--color-header);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Rides with the header when it retracts (see html.is-header-hidden
       below) — same curve as #ba-header so the two move as one unit. */
    transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* No fade mask: over a dark strip it read as a smeared white smudge.
       A chevron carries the same "there is more" message cleanly — see
       .ba-anchor-nav__inner::after. */
}

/* No breakpoint override for `top`: --ba-header-h is itself responsive
   (see tokens.css / header.css). The old hardcoded 70px was taller than the
   60px mobile bar, which is where the gap between the two came from. */

/* Retract in step with the main bar by moving the sticky offset, NOT with a
   transform. A transform applies whether or not the element is currently
   stuck, so while the strip was still in normal flow it slid upward over the
   section above it and stayed there. Changing `top` is inert until the
   element actually sticks, so the strip only moves once it has reached the
   header — which is the behaviour asked for. */
@media (max-width: 991.98px) {
    html.is-header-hidden .ba-anchor-nav {
        top: 0;
    }
}

/* Jump-link targets clear BOTH sticky bars (header + this pill nav), so a
 * clicked section's title is never tucked under them. The header may already
 * have retracted by the time the scroll ends — then the title just sits a
 * little lower, which is better than clipped. */
.page-template-page-pricing {
    --ba-anchor-nav-h: 3.1rem;   /* rendered pill bar ≈ 49px */
}

.page-template-page-pricing [id] {
    scroll-margin-top: calc(var(--ba-header-h) + var(--ba-anchor-nav-h) + 1rem);
}

.ba-anchor-nav::-webkit-scrollbar { display: none; }

.ba-anchor-nav__inner {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    min-width: max-content;
}

/* "More this way" chevron. A sticky flex item rather than an absolutely
   positioned one: inside a horizontal scroller, absolute would scroll away
   with the pills. js/main.js adds .has-more only while there is actually
   something further right, so it disappears at the end of the strip. */
.ba-anchor-nav__inner::after {
    content: '';
    position: sticky;
    /* right: 0 pins the chip flush INSIDE the scrollport. A negative offset
       (to cancel the inner's padding) pushed it past the edge and clipped
       most of the chevron off-screen. */
    right: 0;
    flex: 0 0 auto;
    align-self: stretch;
    width: 40px;
    /* Chevron over a short fade in the strip's OWN colour, so the pill
       underneath is masked without the white smear the old mask produced.
       The gradient's transparent stop must name the header colour
       explicitly — plain `transparent` is rgba(0,0,0,0) and fades through
       grey in Safari. Keep in step with --color-header. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.85'/%3E%3C/svg%3E")
            no-repeat right 4px center / 8px 14px,
        linear-gradient(to right, rgba(53, 56, 57, 0), rgb(53, 56, 57) 55%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.ba-anchor-nav.has-more .ba-anchor-nav__inner::after {
    opacity: 1;
}

.ba-anchor-nav__pill {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    /* Light-on-dark now that the strip matches the header */
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

@media (min-width: 768px) {
    .ba-anchor-nav {
        /* Fits without scrolling on desktop — drop the fade */
        mask-image: none;
        -webkit-mask-image: none;
    }
    .ba-anchor-nav__inner {
        gap: 0.4rem;
        padding: 0.6rem 1rem;
        justify-content: center;
    }
    .ba-anchor-nav__pill {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }
}

.ba-anchor-nav__pill:hover,
.ba-anchor-nav__pill:focus,
.ba-anchor-nav__pill--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    text-decoration: none;
}


/* ─── PHOTO DIVE CARDS ────────────────────────────────── */
/*
 * Mobile  : horizontal scroll carousel — images visible, 88% card width
 *           so next card peeks at right edge (swipe hint).
 *           CSS scroll-snap for buttery native touch scrolling.
 * Desktop : standard 3-column row (≥ 900px).
 */
.ba-dive-cards {
    display: flex;
    /* Carousel: horizontal scroll with centre snap */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.75rem;
    /* Side padding lets first/last card centre in the track */
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 1rem;
    /* Fade mask — peek dissolves at edges instead of hard-clipping */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 3%,
        #000 97%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 3%,
        #000 97%,
        transparent 100%
    );
}

.ba-dive-cards::-webkit-scrollbar { display: none; }

.ba-dive-card {
    flex: 0 0 88%;          /* 88% → ~6% sliver of neighbour on each side */
    scroll-snap-align: center;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s, box-shadow 0.22s;
}

.ba-dive-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.13);
}

.ba-dive-card--featured {
    box-shadow: 0 8px 40px rgba(59, 130, 246, 0.28);
    border: 2px solid var(--color-primary);
    position: relative;
    z-index: 1;
}

@media (min-width: 900px) {
    /* Desktop: revert to standard 3-column row, restore images */
    .ba-dive-cards {
        overflow-x: visible;
        scroll-snap-type: none;
        align-items: stretch;
        gap: 1.5rem;
        padding: 0;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .ba-dive-card {
        flex: 1 1 0;
        min-width: 0;
        scroll-snap-align: none;
    }

    .ba-dive-card--featured {
        box-shadow: 0 16px 56px rgba(59, 130, 246, 0.30);
    }

    .ba-dive-card--featured:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 64px rgba(59, 130, 246, 0.36);
    }
}

/* Featured card body — deep ocean blue */
.ba-dive-card--featured .ba-dive-card__body {
    background: var(--gradient-ocean);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ba-dive-card--featured .ba-dive-card__title {
    color: #fff;
    text-align: center;
}

.ba-dive-card--featured .ba-dive-card__desc {
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
}

.ba-dive-card--featured .ba-dive-card__includes {
    background: rgba(255, 255, 255, 0.10);
}

.ba-dive-card--featured .ba-dive-card__includes li {
    color: rgba(255, 255, 255, 0.82);
}

.ba-dive-card--featured .ba-dive-card__includes .bi {
    color: #93c5fd;
}

/* Orange CTA on featured card — stands out against ocean gradient,
   matches the brand's action colour used on the Exploration badge */
.ba-dive-card--featured .btn-primary {
    --bs-btn-bg:                  var(--color-orange);
    --bs-btn-border-color:        var(--color-orange);
    --bs-btn-color:               #fff;
    --bs-btn-hover-bg:            var(--color-orange-dark);
    --bs-btn-hover-border-color:  var(--color-orange-dark);
    --bs-btn-hover-color:         #fff;
    --bs-btn-active-bg:           var(--color-orange-dark);
    --bs-btn-active-border-color: var(--color-orange-dark);
    --bs-btn-active-color:        #fff;
}

.ba-dive-card__img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
    /* Fallback when image fails to load or is still fetching */
    background-color: #1a4a7a;
}

.ba-dive-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.ba-dive-card:hover .ba-dive-card__img {
    transform: scale(1.05);
}

.ba-dive-card__type-badge {
    position: absolute;
    bottom: 0.85rem;
    left: 0.85rem;
    background: rgba(0, 0, 0, 0.52);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ba-dive-card__popular-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
}

.ba-dive-card__popular-badge--gold   { background: #c8920a; color: #fff; }
.ba-dive-card__popular-badge--orange { background: var(--color-orange); color: #fff; }

.ba-dive-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

/* Non-featured: subtle blue warmth at the top — creates desire without
   overwhelming the content. Think Apple product page tint, not banner ad. */
.ba-dive-card:not(.ba-dive-card--featured) .ba-dive-card__body {
    background: linear-gradient(180deg, rgba(91, 156, 234, 0.07) 0%, #fff 90px);
}

.ba-dive-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0 0 0.35rem;
    line-height: 1.25;
}

.ba-dive-card__desc {
    font-size: 0.83rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
}

/* Includes — stacked column, tinted pill creates a checklist feel.
   margin-top:auto pushes it to the card bottom for height alignment. */
.ba-dive-card__includes {
    list-style: none;
    margin: 0;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-radius: 0.6rem;
    margin-top: auto;
}

/* Non-featured: ice-blue tinted checklist box */
.ba-dive-card:not(.ba-dive-card--featured) .ba-dive-card__includes {
    background: rgba(59, 130, 246, 0.05);
}

.ba-dive-card__includes li {
    font-size: 0.78rem;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ba-dive-card__includes .bi {
    color: var(--color-primary);
    font-size: 0.85rem;
}

/* Mobile: compact CTA inside carousel card — prevents jumbo pill
   caused by w-100 + large padding + text wrapping to 2 lines */
.ba-dive-card .btn {
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-font-size: 0.875rem;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .ba-dive-card .btn {
        --bs-btn-padding-y: 0.85rem;
        --bs-btn-font-size: 1rem;
        white-space: normal;
    }
}

/* Footer note — small italic line below the CTA */
.ba-dive-card__note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.ba-dive-card--featured .ba-dive-card__note {
    color: rgba(255, 255, 255, 0.65);
}


/* ─── CAROUSEL DOT INDICATORS ────────────────────────── */
.ba-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0 0.75rem;
}

.ba-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    transition: width 0.25s ease, background 0.25s ease;
    flex-shrink: 0;
}

.ba-carousel-dot--active {
    width: 18px;
    background: var(--color-primary);
}

/* Hide on desktop — carousel doesn't exist there */
@media (min-width: 900px) {
    .ba-carousel-dots { display: none; }
}


/* ─── DISCOVER SCUBA CARDS ────────────────────────────── */
.ba-discover-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .ba-discover-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ba-discover-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    padding: 1.75rem;
}

.ba-discover-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ba-discover-card__header .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    font-size: 1.25rem;
    color: var(--color-primary);
    line-height: 1;
}

.ba-discover-card__header h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
    color: var(--color-dark);
}

.ba-discover-card__desc {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}


/* ─── STANDALONE PRICE TABLES AS CARDS ─────────────────
   Bare rows floating on the section background read as empty
   space on wide screens. Boxing them adds contrast and caps
   the name→price gap. Nested tables (discover cards, lodge
   card, courses accordion) keep their plain style. */
.ba-price-split__content > .ba-price-table {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    padding: 0.5rem 1.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    max-width: 920px;
    margin-inline: auto;
}

.ba-price-split__content > .ba-price-table .ba-price-row:first-child {
    border-top: none;
}

.ba-price-split__content > .ba-price-table .ba-price-row:last-child {
    border-bottom: none;
}

.ba-section--dark .ba-price-split__content > .ba-price-table {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

/* Headers above the boxed tables centre to match */
.ba-price-split > .ba-section__header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Courses accordion shares the same width cap for rhythm */
.ba-faq-accordion {
    max-width: 920px;
    margin-inline: auto;
}

/* ─── SECTION EXTRAS ──────────────────────────────────── */

/* Centered footnote under a price table */
.ba-pricing-footnote {
    text-align: center;
    margin-top: 1.5rem;
}

/* Second header block inside the dark snorkeling/extras section */
.ba-equipment-row .ba-section__header {
    margin-top: 3.5rem;
}

/* ─── COURSES LINK ────────────────────────────────────── */
.ba-courses-link {
    margin-top: 2.5rem;
    text-align: center;
}


/* ─── ACCOMMODATION CARD ──────────────────────────────── */
.ba-lodge-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ba-lodge-card {
        grid-template-columns: 1fr 1fr;
    }
}

.ba-lodge-card__img-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

@media (min-width: 768px) {
    .ba-lodge-card__img-wrap {
        aspect-ratio: unset;
    }
}

.ba-lodge-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ba-lodge-card__body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.ba-lodge-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0.35rem 0 0.75rem;
}

.ba-lodge-card__desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.ba-lodge-card .ba-price-row:first-child {
    border-top: none;
    padding-top: 0;
}

/* ── Day trips — price + pickup-fee note ─────────────────────────────────────
 * The fee note sits under the price; it may wrap on narrow screens but the
 * price itself never does. */
.ba-day-trip__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.ba-day-trip__fee {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    opacity: 0.7;
    white-space: normal;
    max-width: 16rem;
}

@media (min-width: 576px) {
    .ba-day-trip__price {
        align-items: flex-end;
        text-align: right;
    }
}