/*
 * TRIP PAGE LAYOUT
 * Shared Wildex product-page structure
 * Load AFTER css/custom.css
 *
 * Departure layout:
 * Desktop: Date | Availability | Book Now
 * Mobile:  Date
 *          Availability | Book Now
 */

/* ==========================================
   GENERAL PAGE LAYOUT
   ========================================== */

html {
    scroll-behavior: smooth;
}

.trip-page-layout {
    padding: 0;
}

.trip-product-main {
    max-width: 1120px;
}

/* ==========================================
   TRIP HERO
   ========================================== */

.trip-product-hero {
    min-height: 460px;
    display: flex;
    align-items: center;
}

.trip-product-hero .page-header-box {
    text-align: left;
    max-width: 960px;
}

.trip-hero-summary {
    font-size: clamp(1rem, 2vw, 1.3rem);
    max-width: 680px;
    color: #fff;
}

/* Temporary trip-specific hero image.
   Move this to individual trip pages later. */

.page-header.trip-product-hero {
    /* Background image should be assigned by each trip page's hero markup. */
}

.trip-fact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.trip-fact-strip li {
    padding: 10px 17px;
    background: rgba(0, 0, 0, 0.42);
    border-radius: 8px;
    color: #fff;
}

.trip-fact-strip strong,
.trip-fact-strip span {
    display: block;
    color: inherit;
}

.trip-fact-strip span {
    font-size: 12px;
    opacity: 0.85;
}

.trip-hero-button {
    display: inline-block;
    background: var(--brand-action-bg);
    color: var(--brand-action-text) !important;
    padding: 12px 22px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 750;
}

/* ==========================================
   TRIP CONTENT SECTIONS
   ========================================== */

.trip-block {
    padding: 65px 0;
    border-bottom: 1px solid #e4e8e5;
    scroll-margin-top: 100px;
}

.trip-block h2 {
    margin: 0 0 20px;
}

.trip-block h3 {
    font-size: 1.24rem;
}

.trip-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-eyebrow);
    font-weight: 700;
}

.trip-block-title {
    margin-bottom: 25px;
}

/* ==========================================
   DEPARTURES AND AVAILABILITY
   ========================================== */

.trip-operator-group {
    padding: 22px 0;
    border-top: 1px solid #e5e5e5;
}

.trip-operator-group h3 {
    margin-bottom: 15px;
}

.trip-date-notice {
    font-size: 0.92rem;
}

/*
 * Three-column departure layout.
 * The row-main wrapper must use display: contents
 * so its two children become independent grid items.
 */

.trip-v2-row,
.bliss-booking .trip-v2-row {
    display: grid !important;
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(160px, 1fr)
        auto !important;
    align-items: center;
    column-gap: 20px;
    row-gap: 4px;
    padding: 6px 14px;
    border-bottom: 1px solid #e3e7e8;
    width: 100%;
}

.trip-v2-row:nth-child(odd) {
    background: #f7f9f6;
}

/*
 * Critical rule:
 * Prevent the date and availability from
 * stacking inside their shared wrapper.
 */

.trip-v2-row-main,
.bliss-booking .trip-v2-row-main {
    display: contents !important;
}

/* Departure dates */

.trip-v2-date,
.bliss-booking .trip-v2-date {
    grid-column: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--brand-heading);
}

/* Availability */

.trip-v2-status,
.bliss-booking .trip-v2-status {
    grid-column: 2;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

/* Availability colours */

.trip-v2-status[data-state="full"],
.bliss-booking .trip-v2-status[data-state="full"] {
    color: #076638;
}

.trip-v2-status[data-state="partial"],
.bliss-booking .trip-v2-status[data-state="partial"] {
    color: #B66A16;
}

.trip-v2-status[data-state="low"],
.bliss-booking .trip-v2-status[data-state="low"] {
    color: #C52B2B;
}

.trip-v2-status[data-state="sold"],
.bliss-booking .trip-v2-status[data-state="sold"] {
    color: #8B2525;
    font-weight: 600;
}

.trip-v2-status[data-state="unknown"] {
    color: #666;
}

/* Booking buttons */

.trip-v2-action,
.bliss-booking .trip-v2-action {
    grid-column: 3;
    justify-self: end;
    min-width: 110px;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--brand-button-radius);
    background-color: var(--brand-booking-bg);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.trip-v2-action:not(:disabled):hover,
.bliss-booking .trip-v2-action:not(:disabled):hover {
    background-color: var(--brand-booking-hover);
    color: #fff;
}

.trip-v2-action:disabled,
.bliss-booking .trip-v2-action:disabled {
    background-color: #90989B;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

/* ==========================================
   CHECKFRONT BOOKING FORM
   ========================================== */

.trip-booking-form {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #cddbd1;
    border-radius: 10px;
    background: #fff;
}

.trip-booking-form[hidden] {
    display: none !important;
}

.trip-booking-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.trip-close-button {
    border: 0;
    padding: 8px 13px;
    align-self: start;
}

/* ==========================================
   VALUE PROPOSITIONS AND FAQs
   ========================================== */

.trip-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.trip-value-grid article,
.trip-open-faq article {
    padding: 22px;
    border: 1px solid #e4e8e5;
    border-radius: 9px;
}

.trip-open-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* ==========================================
   EDITOR NOTES AND FINAL CTA
   ========================================== */

.trip-editor-note {
    color: #9a4e13;
    font-size: 0.87rem;
    border-left: 3px solid #bb803e;
    padding-left: 12px;
    margin-top: 16px;
}

.trip-final-cta {
    background: var(--brand-soft-surface);
    padding: 48px 30px;
    text-align: center;
    margin: 55px 0;
}

.trip-info-box,
.trip-adventure-box {
    width: 100%;
    max-width: none;
}

.trip-page-layout .trip-adventure-body {
    max-width: none;
}

/* ==========================================
   TABLET AND MOBILE
   ========================================== */

@media (max-width: 767px) {

    .trip-product-hero {
        min-height: 410px;
    }

    .trip-fact-strip {
        gap: 7px;
    }

    .trip-fact-strip li {
        flex: 1 1 42%;
        padding: 8px;
    }

    .trip-block {
        padding: 40px 0;
        scroll-margin-top: 75px;
    }

    .trip-value-grid,
    .trip-open-faq {
        grid-template-columns: 1fr;
    }

    .trip-final-cta {
        margin: 35px 0;
        padding: 32px 16px;
    }
}

/* ==========================================
   NARROW MOBILE DEPARTURE LAYOUT
   ========================================== */

@media (max-width: 650px) {

    .trip-v2-row,
    .bliss-booking .trip-v2-row {
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        column-gap: 12px;
        row-gap: 5px;
        padding: 10px 8px;
    }

    .trip-v2-date,
    .bliss-booking .trip-v2-date {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 15px;
    }

    .trip-v2-status,
    .bliss-booking .trip-v2-status {
        grid-column: 1;
        grid-row: 2;
        font-size: 15px;
    }

    .trip-v2-action,
    .bliss-booking .trip-v2-action {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        min-width: 96px;
        padding: 8px 12px;
        font-size: 14px;
    }

    .trip-booking-form {
        padding: 14px;
    }

    .trip-booking-heading {
        flex-direction: column;
    }
}
.trip-booking-price {
    padding: 22px 26px;
    margin: 20px 0 28px;
    background: #eaf1ed;
    border-left: 4px solid var(--brand-primary, #477765);
    border-radius: 8px;
}

.trip-booking-price-label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.trip-booking-price-amount {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    color: #183d36;
}

.trip-booking-price p {
    margin: 8px 0;
}

.trip-booking-price a {
    font-weight: 600;
}