/* ==========================================================
   EXPERIENCE - BAGIAN 7/9: TOUR & TRAVEL - SEWA MOTOR/MOBIL
   Dipecah dari css/experience.css. Urutan load = urutan angka (kaskade)
   ========================================================== */

/* =========================================
   TANÉA — TOUR & TRAVEL TABS REFINEMENT
   ========================================= */

.experience-travel-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    width: 100%;
    margin: 28px auto 30px;
    padding: 0;

    border: none;
    background: transparent;
}

.experience-travel-tab {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 10px 17px;

    border: 1px solid rgba(128, 102, 78, 0.35);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.16);
    color: #594938;

    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.3;

    white-space: nowrap;
    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.experience-travel-tab:hover {
    border-color: #80664E;
    background: rgba(128, 102, 78, 0.09);
    color: #594938;
}

.experience-travel-tab.is-active {
    border-color: #65705E;
    background: #65705E;
    color: #F8F3E8;
}

.experience-travel-tab:focus-visible {
    outline: 2px solid #80664E;
    outline-offset: 3px;
}

/* HIDDEN STATE */

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

/* MOBILE */

@media (max-width: 600px) {
    .experience-travel-tabs {
        gap: 6px;
        margin: 22px auto 24px;
    }

    .experience-travel-tab {
        min-height: 35px;
        padding: 9px 12px;
        font-size: 9px;
    }
}


/* =========================================
   TANÉA — MOTOR RENTAL IMAGE CARDS
   ========================================= */

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

.experience-motor-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;

    border: 1px solid rgba(128, 102, 78, 0.28);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.25);
    color: #594938;
    text-align: left;
    font: inherit;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.experience-motor-card:hover {
    transform: translateY(-3px);
    border-color: #80664E;
    box-shadow: 0 8px 20px rgba(70, 55, 40, 0.09);
}

.experience-motor-card.is-selected {
    border-color: #65705E;
    background: rgba(101, 112, 94, 0.09);
    box-shadow: 0 0 0 1px #65705E;
}

.experience-motor-card:focus-visible {
    outline: 2px solid #80664E;
    outline-offset: 3px;
}

.experience-motor-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.experience-motor-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 13px;
}

.experience-motor-card-eyebrow {
    margin-bottom: 7px;
    color: #80664E;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.experience-motor-card-subtitle {
    margin: 0 0 9px;
    color: #594938;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.experience-motor-card-description {
    margin: 0 0 17px;
    color: #6f6558;
    font-size: 11px;
    line-height: 1.7;
}

.experience-motor-card-link {
    margin-top: auto;
    color: #80664E;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.experience-motor-card.is-selected .experience-motor-card-link {
    color: #65705E;
}

@media (max-width: 520px) {
    .experience-motor-cards {
        gap: 10px;
    }

    .experience-motor-card-content {
        padding: 12px 10px;
    }

    .experience-motor-card-subtitle {
        font-size: 12px;
    }

    .experience-motor-card-description {
        font-size: 10px;
    }
}


/* MOTOR RENTAL — PRICE */

.experience-motor-card-price {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin: 0 0 17px;
    padding-top: 12px;
    border-top: 1px solid rgba(128, 102, 78, 0.22);
}

.experience-motor-card-price-label {
    color: #80664E;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.experience-motor-card-price-value {
    color: #65705E;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}


/* =========================================
   TANÉA — CAR RENTAL CARD FINISHING
   ========================================= */

/* Samakan tinggi dan struktur kartu mobil */
.experience-motor-cards:has(.experience-motor-card img[src*="7seat"]),
.experience-motor-cards:has(.experience-motor-card img[src*="5seat"]) {
    align-items: stretch;
}

.experience-motor-card:has(img[src*="7seat"]),
.experience-motor-card:has(img[src*="5seat"]) {
    height: 100%;
}

/* Foto mobil konsisten */
.experience-motor-card img[src*="7seat"],
.experience-motor-card img[src*="5seat"] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

/* Area isi kartu */
.experience-motor-card:has(img[src*="7seat"]) .experience-motor-card-content,
.experience-motor-card:has(img[src*="5seat"]) .experience-motor-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 13px;
}

/* Tombol WhatsApp selalu di bagian bawah */
.experience-motor-card:has(img[src*="7seat"]) .experience-motor-card-link,
.experience-motor-card:has(img[src*="5seat"]) .experience-motor-card-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 12px;
    text-decoration: none;
    transition: color 0.25s ease;
}

.experience-motor-card:has(img[src*="7seat"]) .experience-motor-card-link:hover,
.experience-motor-card:has(img[src*="5seat"]) .experience-motor-card-link:hover {
    color: #65705E;
}

/* Tampilan mobile */
@media (max-width: 520px) {
    .experience-motor-card:has(img[src*="7seat"]) .experience-motor-card-content,
    .experience-motor-card:has(img[src*="5seat"]) .experience-motor-card-content {
        padding: 12px 10px;
    }
}