/* ==========================================================
   EXPERIENCE - BAGIAN 6/9: ADVENTURE (SCROLL, ORNAMEN, FILTER)
   Dipecah dari css/experience.css. Urutan load = urutan angka (kaskade)
   ========================================================== */

/* =========================================
   ADVENTURE — SCROLL KOLOM INFORMASI
   Samakan perilaku dengan Tour & Travel
   ========================================= */

@media (min-width: 641px) {

    /* Panel tetap, tidak ikut scroll */
    #experienceDetail[data-experience-type="adventure"] {
        height: min(632px, calc(100dvh - 48px));
        max-height: calc(100dvh - 48px);
        min-height: 0;
        overflow: hidden;
        grid-template-rows: minmax(0, 1fr);
    }

    /* Foto kiri tetap diam */
    #experienceDetail[data-experience-type="adventure"]
    .experience-detail-visual {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    #experienceDetail[data-experience-type="adventure"]
    .experience-detail-visual > img {
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    /* Hanya kolom informasi kanan yang scroll */
    #experienceDetail[data-experience-type="adventure"]
    .experience-detail-content {
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }
}

/* =========================================
   ADVENTURE — ORNAMENT SCROLL FIX
   ========================================= */

#experienceDetail[data-experience-type="adventure"]
.experience-detail-content {
    background-color: #f5efdf;

    /* Ornament mengikuti tinggi konten yang di-scroll */
    background-image: url("../../../assets/ornaments/batikL2.png");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;

    background-blend-mode: normal;
}

/* Matikan ornament pseudo-element bawaan */
#experienceDetail[data-experience-type="adventure"]
.experience-detail-content::before {
    content: none;
}

/* =========================================
   ADVENTURE — ORNAMENT OPACITY
   ========================================= */

#experienceDetail[data-experience-type="adventure"]
.experience-detail-content {
    background-color: #f5efdf;

    background-image:
        linear-gradient(
            rgba(245, 239, 223, 0.93),
            rgba(245, 239, 223, 0.93)
        ),
        url("../../../assets/ornaments/batikL1.png");

    background-position:
        center top,
        center top;

    background-repeat:
        no-repeat,
        repeat-y;

    background-size:
        100% 100%,
        100% auto;

    background-blend-mode: normal, multiply;
}

/* Matikan ornament lama agar tidak double */
#experienceDetail[data-experience-type="adventure"]
.experience-detail-content::before {
    content: none;
}

/* =========================================
   ADVENTURE — FONT READABILITY
   ========================================= */

/* Judul utama */
#experienceDetail[data-experience-type="adventure"]
.experience-detail-content h3 {
    color: #30271e;
    font-weight: 500;
}

/* Label kecil di atas judul */
#experienceDetail[data-experience-type="adventure"]
.experience-detail-eyebrow {
    color: #554635;
    font-weight: 600;
}

/* Deskripsi */
#experienceDetail[data-experience-type="adventure"]
.experience-detail-description {
    color: #554b3e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.85;
}

/* Judul bagian destinasi */
#experienceDetail[data-experience-type="adventure"]
.experience-destination-area h4 {
    color: #30271e;
    font-weight: 700;
}

/* Nama destinasi */
#experienceDetail[data-experience-type="adventure"]
.experience-destination-info h5 {
    color: #30271e;
    font-weight: 600;
}

/* Deskripsi destinasi */
#experienceDetail[data-experience-type="adventure"]
.experience-destination-info p {
    color: #554b3e;
    font-weight: 500;
    line-height: 1.7;
}

/* Tombol kontak */
#experienceDetail[data-experience-type="adventure"]
.experience-detail-contact {
    color: #30271e;
    border-color: #6d6048;
    font-weight: 600;
}

/* ADVENTURE — TRAVEL TIME NOTE */
#experienceDetail[data-experience-type="adventure"]
.experience-destination-info p {
    font-weight: 600;
}

/* ADVENTURE — TRAVEL TIME DISCLAIMER */
#experienceDetail[data-experience-type="adventure"]
.experience-detail-content .experience-price-note {
    font-weight: 700 !important;
    color: #554b3e;
}


/* SPA & MASSAGE — FONT LEBIH TEBAL */
#experienceDetail[data-experience-type="spa"] 
.experience-detail-content h3,
#experienceDetail[data-experience-type="spa"] 
.experience-detail-content h4,
#experienceDetail[data-experience-type="spa"] 
.experience-detail-content h5 {
    font-weight: 700;
}

/* FIX: Discover Your Experience — normal capitalization */
.experience .experience-header h2 {
    text-transform: none !important;
    font-variant: normal !important;
    font-variant-caps: normal !important;
}



/* =========================================
   ADVENTURE — DESTINATION CATEGORY FILTERS
   ========================================= */
.experience-destination-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.experience-destination-filter {
    appearance: none;
    border: 1px solid #a69d7c88;
    border-radius: 999px;
    padding: 8px 13px;
    background: rgba(248, 243, 232, 0.82);
    color: #4a4b3d;
    font: inherit;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.experience-destination-filter:hover,
.experience-destination-filter.is-active {
    border-color: #65705e;
    background: #65705e;
    color: #fff;
}

.experience-destination-filter:focus-visible {
    outline: 2px solid #77764f;
    outline-offset: 3px;
}

.experience-destination-empty {
    margin: 0 0 14px;
    color: #747366;
    font-size: 12px;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .experience-destination-filters {
        gap: 6px;
        margin-bottom: 13px;
    }

    .experience-destination-filter {
        padding: 8px 11px;
        font-size: 10px;
    }
}

.experience .experience-header h2 {
    font-family: "Quicksand", sans-serif !important;
    font-size: clamp(38px, 4vw, 58px) !important;
    font-weight: 400 !important;
    font-style: normal !important;

    letter-spacing: 0.30em !important;
    line-height: 1.12;
    text-align: center;

    color: #80664e !important;
    opacity: 0.60;
}


/* TOUR & TRAVEL — CATEGORY TABS */

.experience-travel-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 24px 0;
    width: 100%;
}

.experience-travel-tabs[hidden] {
    display: none !important;
}

.experience-travel-tab {
    padding: 12px 8px;
    border: 1px solid rgba(128, 102, 78, 0.45);
    border-radius: 999px;
    background: transparent;
    color: #594938;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.experience-travel-tab:hover,
.experience-travel-tab.is-active {
    background: #80664E;
    border-color: #80664E;
    color: #fff;
}

/* MOTOR RENTAL CARDS */

.experience-motor-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.experience-motor-card {
    min-width: 0;
    padding: 18px 14px;
    border: 1px solid rgba(128, 102, 78, 0.3);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.3);
}

.experience-motor-card h4 {
    margin: 0 0 8px;
    color: #594938;
    font-size: 14px;
    line-height: 1.5;
}

.experience-motor-card-subtitle {
    margin: 0 0 12px;
    color: #80664E;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.experience-motor-card-description {
    margin: 0;
    color: #594938;
    font-size: 11px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.experience-travel-placeholder {
    margin: 0;
    color: #594938;
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 520px) {
    .experience-travel-tabs {
        gap: 5px;
    }

    .experience-travel-tab {
        padding: 10px 4px;
        font-size: 10px;
    }

    .experience-motor-cards {
        grid-template-columns: 1fr;
    }
}