/* =========================================================
   home.css  (Luxe Theme)
   ---------------------------------------------------------
   TABLE OF CONTENTS
   1) BASE / UTILITIES
   3) ABOUT US
   4) ROOMS (and Shared Background)
   5) ROOMS – CARDS
   6) HOTEL AMENITIES
   8) MEDIA QUERIES
   ========================================================= */


/* =========================
   1) BASE / UTILITIES
========================= */
body {
    background-color: white;
    min-height: var(--min-height-body);
}

.card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--border-radius-secondary);
    background-color: var(--background-tertiary);
    border: var(--border-primary);
    box-shadow: var(--box-shadow-primary);
}


/* =========================
   3) ABOUT US
========================= */
#aboutus{
    min-height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    gap: 2rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: var(--margin-page-negative);
    background-color: var(--background-tertiary);
}

/* Image block */
.about-us__image img {
    width: 40rem;
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Details block */
.about-us__details {
    display: flex;
    flex-direction: column;
    width: 100%;                 /* Take full width */
    max-width: 32rem;            /* But limit it for readability */
    background: var(--background-secondary);
    justify-content: center;
    padding: 2rem;
    gap: 2rem;
    border-radius: 0.625rem;
    box-sizing: border-box;
    margin-left: -5rem;
}

.about-lead {
    font-family: var(--font-family-primary);
    color: var(--brand-primary-color);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-lg);
}

.about-us__details .button {
    width: 12rem;
    box-shadow: var(--box-shadow-primary);
}


/* =========================
   4) ROOMS (and Shared Background)
========================= */
.rooms,
.gallery,
.testimonials {
    min-height: 95vh;
    padding-bottom: 2rem;
    margin: var(--margin-page-negative);
}

.rooms,
.gallery,
.testimonials,
.amenities__description {
    background: linear-gradient(rgba(246, 246, 246, 0.96), rgba(246, 246, 246, 0.96)), var(--background-image);
    background-size: var(--background-image-size);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
    background-color: #f6f6f6;
}

.rooms__header,
.gallery__header,
.amenities__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5625rem;
    margin: var(--margin-page);
}

.rooms__header p {
    width: 50rem;
    text-align: center;
}

/* =========================
   6) HOTEL AMENITIES
========================= */
.amenities {
    padding: 2rem 0;
    min-height: 95vh;
    align-content: center;
}

.amenities__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1rem;
}

.amenities__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.625rem;
    box-shadow: var(--box-shadow-primary);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    height: 5rem;
}

.amenities__item:hover,
.amenities__item:active,
.amenities__item.active {
    box-shadow: var(--box-shadow-hover);
    background-color: var(--brand-primary-accent-color);
}

.amenities__description {
    margin-top: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: left;
    align-items: center;
    box-shadow: var(--box-shadow-primary);
}

.amenities__description img {
    left: 0;
    height: 18.75rem;
    border-radius: 0.3125rem 0 0 0.3125rem;
    box-shadow: var(--box-shadow-primary);
}

.amenities__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.amenities__list button,
.gallery__buttons button {
    position: relative;
    margin-bottom: 1.25rem;
}

.amenities__list button::after,
.gallery__buttons button::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1.25rem;
    width: 0;
    height: 0;
    border-left: 0.9375rem solid transparent;
    border-right: 0.9375rem solid transparent;
    border-top: 0.9375rem solid var(--brand-primary-color);
    transform: translateX(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
}

.amenities__list button.active::after,
.gallery__buttons button.active::after {
    opacity: 1;
}


/* =========================
   8) MEDIA QUERIES
========================= */
@media (max-width: 1024px) {

    /* About us */
    .about-us {
        margin: var(--margin-page-negative) !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100vw;
        align-items: center;
        justify-content: center;
    }

    .about-us__details {
        display: flex;
        margin: 0;
        margin-top: -5rem;
        width: 95%;
    }

    /* Room Details */
    .rooms__header p,
    .rooms__header h2 {
        width: 100vw;
        padding: 0 1rem;
        text-align: left;
    }

    .rooms__header h2 {
        padding-bottom: 2rem;
    }

    /* Amenities */
    .amenities {
        margin: var(--margin-page-negative) !important;
    }

    .amenities__header p,
    .amenities__header h2 {
        width: 100vw;
        padding: 0 1rem;
        text-align: left;
    }

    .amenities__header h2 {
        padding-bottom: 2rem;
    }

    .amenities__list button.active::after {
        opacity: 0;
    }

    .amenities__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        padding: 1rem;
    }

    .amenities__item,
    .amenities__item--active {
        all: unset;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #f1f1f1 !important;
        border-radius: 0.5rem;
        padding: 0.75rem;
        font-size: 0.95rem;
        color: #333;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        pointer-events: none;        /* 🔒 Disable click/tap */
        cursor: default;             /* ❌ No pointer */
    }

    .amenities__item i {
        color: var(--brand-primary-color);
        font-size: 1.2rem;
    }

    .amenities__description {
        display: none;
    }
}