/*==========================================================
    ROOMS PAGE
==========================================================*/



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

.rooms-hero{

    position:relative;

    height:100vh;

    min-height:850px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    color:#fff;

    background:#1e170a;

}


.rooms-hero .hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

        saturate(.82)

        brightness(.72);

}


.rooms-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(61,47,21,.32),

            rgba(30,23,10,.78)

        );

}


/*==========================================================
    CLAY MIST
    Ambient drifting light — same treatment as the tea-house
    forest-mist, tinted with the stay page's umber accent
==========================================================*/

.clay-mist{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:3;

    mix-blend-mode:screen;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(198,155,90,.16),
        transparent 40%),

        radial-gradient(circle at 80% 35%,
        rgba(255,255,255,.10),
        transparent 38%),

        radial-gradient(circle at 50% 100%,
        rgba(198,155,90,.12),
        transparent 55%);

    animation:clayMistFloat 18s ease-in-out infinite;

}


@keyframes clayMistFloat{

    0%{

        transform:translateY(0);

        opacity:.6;

    }

    50%{

        transform:translateY(-20px);

        opacity:.85;

    }

    100%{

        transform:translateY(0);

        opacity:.6;

    }

}


.rooms-hero .vertical-jp{

    color:rgba(230,200,150,.6);

}


.rooms-hero .container{

    position:relative;

    z-index:5;

}


.rooms-hero .hero-content{

    max-width:760px;

}


.rooms-hero h1{

    color:#fff;

    margin:1.5rem 0;

    font-size:clamp(4.5rem,8vw,7rem);

    line-height:.95;

}


.rooms-hero p{

    max-width:620px;

    color:rgba(255,255,255,.82);

    font-size:1.1rem;

}




/*==========================================================
    INTRODUCTION
==========================================================*/

.rooms-intro{

    position:relative;

    padding:9rem 0;

}


.rooms-intro .intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:6rem;

}


.rooms-intro .intro-content{

    position:relative;

}


.rooms-intro .intro-content h2{

    margin:1.5rem 0 2rem;

}


.rooms-intro .intro-content p{

    margin-bottom:1.75rem;

}


.rooms-intro .intro-image{

    overflow:hidden;

}


.rooms-intro .intro-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    border-radius:var(--radius-xl);

    transition:transform .8s ease;

}


.rooms-intro .intro-image:hover img{

    transform:scale(1.05);

}


.rooms-intro .vertical-jp{

    left:-5rem;

}




/*==========================================================
    SECTION HEADING
==========================================================*/

.signature-suites,

.room-collection,

.amenities,

.rooms-faq{

    position:relative;

    padding:9rem 0;

}


.section-heading{

    max-width:760px;

    margin:0 auto 5rem;

    text-align:center;

}


.section-heading h2{

    margin:1rem 0 1.75rem;

}


.section-heading p{

    max-width:620px;

    margin:0 auto;

}




/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .rooms-intro .intro-grid{

        gap:4rem;

    }

}


@media(max-width:992px){

    .rooms-intro .intro-grid{

        grid-template-columns:1fr;

    }

    .rooms-intro .intro-image{

        order:-1;

    }

    .rooms-intro .intro-image img{

        height:520px;

    }

}


@media(max-width:768px){

    .rooms-hero{

        min-height:75vh;

    }

    .rooms-hero h1{

        font-size:clamp(3.2rem,11vw,5rem);

    }

    .rooms-intro{

        padding:6rem 0;

    }

    .rooms-intro .intro-image img{

        height:380px;

    }

}
/*==========================================================
    SIGNATURE SUITES
==========================================================*/

.suite-showcase{

    display:flex;

    flex-direction:column;

    gap:9rem;

}


.suite-feature{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:5rem;

    align-items:center;

}


.suite-feature.reverse{

    grid-template-columns:.9fr 1.1fr;

}


.suite-feature.reverse .suite-image{

    order:2;

}


.suite-feature.reverse .suite-content{

    order:1;

}




/*==========================================================
    SUITE IMAGE
==========================================================*/

.suite-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

}


.suite-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.suite-feature:hover .suite-image img{

    transform:scale(1.05);

    filter:brightness(.97);

}




/*==========================================================
    SUITE CONTENT
==========================================================*/

.suite-content{

    max-width:540px;

}


.suite-content h3{

    margin:1rem 0 2rem;

}


.suite-content p{

    margin-bottom:2rem;

}




/*==========================================================
    FEATURE LIST
==========================================================*/

.suite-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1rem 2rem;

    list-style:none;

    margin:2.5rem 0;

    padding:0;

}


.suite-features li{

    position:relative;

    padding-left:1.3rem;

    color:var(--color-text);

}


.suite-features li::before{

    content:"";

    position:absolute;

    left:0;

    top:.6rem;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--color-accent);

}




/*==========================================================
    SUITE FOOTER
==========================================================*/

.suite-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:2.5rem;

    padding-top:2rem;

    border-top:1px solid rgba(0,0,0,.08);

}


.suite-size{

    font-family:var(--font-heading);

    font-size:1.3rem;

    letter-spacing:.08em;

    color:var(--color-heading);

}




/*==========================================================
    HOVER EFFECT
==========================================================*/

.suite-feature{

    transition:transform .4s ease;

}


.suite-feature:hover{

    transform:translateY(-6px);

}




/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .suite-feature{

        gap:3rem;

    }

}


@media(max-width:992px){

    .suite-feature,

    .suite-feature.reverse{

        grid-template-columns:1fr;

    }

    .suite-feature.reverse .suite-image,

    .suite-feature.reverse .suite-content{

        order:initial;

    }

    .suite-image img{

        height:520px;

    }

    .suite-content{

        max-width:100%;

    }

}


@media(max-width:768px){

    .suite-showcase{

        gap:6rem;

    }

    .suite-image img{

        height:360px;

    }

    .suite-features{

        grid-template-columns:1fr;

    }

    .suite-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:1.5rem;

    }

}
/*==========================================================
    ROOM COLLECTION
==========================================================*/

.room-collection{

    position:relative;

    overflow:hidden;

}


.rooms-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2.5rem;

}




/*==========================================================
    ROOM CARD
==========================================================*/

.room-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:var(--radius-xl);

    background:var(--color-surface);

    box-shadow:var(--shadow-md);

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


.room-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}


.room-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:

        transform .9s ease,

        filter .9s ease;

}


.room-card:hover img{

    transform:scale(1.06);

    filter:brightness(.97);

}




/*==========================================================
    ROOM CONTENT
==========================================================*/

.room-card-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:2.2rem;

}


.room-card-content h3{

    margin:1rem 0 1.25rem;

    min-height:80px;

}


.room-card-content p{

    flex:1;

    margin-bottom:2rem;

}




/*==========================================================
    ROOM META
==========================================================*/

.room-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

    padding-top:1.5rem;

    border-top:1px solid rgba(0,0,0,.08);

}


.room-meta span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:.65rem 1rem;

    border-radius:999px;

    background:rgba(0,0,0,.045);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}




/*==========================================================
    CARD DECORATION
==========================================================*/

.room-card::after{

    content:"";

    width:42px;

    height:2px;

    margin:0 auto 2rem;

    background:var(--color-accent);

    transition:width .4s ease;

}


.room-card:hover::after{

    width:90px;

}




/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px){

    .rooms-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:992px){

    .room-card img{

        height:300px;

    }

}


@media(max-width:768px){

    .room-collection{

        padding:6rem 0;

    }

    .rooms-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .room-card img{

        height:260px;

    }

    .room-card-content{

        padding:2rem;

    }

    .room-card-content h3{

        min-height:auto;

    }

    .room-meta{

        flex-wrap:wrap;

        gap:1rem;

    }

}
/*==========================================================
    AMENITIES
==========================================================*/

.amenities{

    position:relative;

    overflow:hidden;

}


.amenities-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}


.amenity-card{

    position:relative;

    padding:3rem;

    border-radius:var(--radius-xl);

    background:var(--color-surface);

    box-shadow:var(--shadow-md);

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


.amenity-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


.amenity-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--color-accent);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .45s ease;

}


.amenity-card:hover::before{

    transform:scaleX(1);

}


.amenity-card h3{

    margin-bottom:1.2rem;

}


.amenity-card p{

    margin:0;

}




/*==========================================================
    FAQ
==========================================================*/

.rooms-faq{

    position:relative;

}


.faq-wrapper{

    max-width:900px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}




/*==========================================================
    FAQ ITEM
==========================================================*/

.faq-item{

    background:var(--color-surface);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}


.faq-item:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


.faq-item summary{

    position:relative;

    list-style:none;

    cursor:pointer;

    padding:1.75rem 2rem;

    font-family:var(--font-heading);

    font-size:1.25rem;

    color:var(--color-heading);

    user-select:none;

}


.faq-item summary::-webkit-details-marker{

    display:none;

}




/*==========================================================
    FAQ ICON
==========================================================*/

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:2rem;

    top:50%;

    transform:translateY(-50%);

    font-size:1.8rem;

    color:var(--color-accent);

    transition:transform .3s ease;

}


.faq-item[open] summary::after{

    content:"−";

}




/*==========================================================
    FAQ CONTENT
==========================================================*/

.faq-item p{

    padding:0 2rem 2rem;

    margin:0;

    color:var(--color-text);

    max-width:90%;

}




/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .amenities-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:768px){

    .amenities,

    .rooms-faq{

        padding:6rem 0;

    }

    .amenities-grid{

        grid-template-columns:1fr;

    }

    .amenity-card{

        padding:2.25rem;

    }

    .faq-item summary{

        padding:1.5rem;

        padding-right:4rem;

        font-size:1.1rem;

    }

    .faq-item summary::after{

        right:1.5rem;

    }

    .faq-item p{

        padding:0 1.5rem 1.5rem;

        max-width:100%;

    }

}
/*==========================================================
    RESERVATION CTA
==========================================================*/

.reservation-cta{

    position:relative;

    overflow:hidden;

    padding:10rem 0;

    text-align:center;

    color:#fff;

    background:
        linear-gradient(
            rgba(15,15,15,.58),
            rgba(15,15,15,.58)
        ),
        url("../images/image24.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}


.reservation-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.08),
            transparent 45%
        );

    pointer-events:none;

}


.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:0 auto;

}


.cta-content h2{

    color:#fff;

    margin:1.5rem 0 2rem;

}


.cta-content p{

    max-width:620px;

    margin:0 auto 2.5rem;

    color:rgba(255,255,255,.84);

}


.reservation-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:1.5rem;

    flex-wrap:wrap;

}




/*==========================================================
    CTA BUTTONS
==========================================================*/

.reservation-cta .btn{

    min-width:210px;

}


.reservation-cta .btn-secondary{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    color:#fff;

    border:1px solid rgba(255,255,255,.25);

}


.reservation-cta .btn-secondary:hover{

    background:rgba(255,255,255,.18);

}




/*==========================================================
    PAGE SPACING
==========================================================*/

.signature-suites{

    overflow:hidden;

}


.room-collection{

    overflow:hidden;

}


.amenities{

    overflow:hidden;

}


.rooms-faq{

    overflow:hidden;

}




/*==========================================================
    FOOTER
==========================================================*/

.site-footer{

    padding-top:6rem;

}


.footer-brand p{

    max-width:340px;

}


.footer-links a{

    transition:

        color .3s ease,

        padding-left .3s ease;

}


.footer-links a:hover{

    padding-left:.4rem;

}




/*==========================================================
    SMALL VISUAL DETAILS
==========================================================*/

.room-card,

.amenity-card,

.suite-image,

.intro-image{

    will-change:transform;

}


.room-card img,

.suite-image img,

.intro-image img{

    backface-visibility:hidden;

}




/*==========================================================
    LARGE DESKTOPS
==========================================================*/

@media(min-width:1500px){

    .rooms-hero h1{

        font-size:8rem;

    }

    .suite-image img{

        height:820px;

    }

    .rooms-grid{

        gap:3rem;

    }

}




/*==========================================================
    TABLETS
==========================================================*/

@media(max-width:992px){

    .reservation-cta{

        padding:8rem 0;

        background-attachment:scroll;

    }

}




/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

    .reservation-cta{

        padding:6rem 0;

    }

    .reservation-cta .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .reservation-cta .btn{

        width:100%;

        max-width:320px;

    }

    .cta-content h2{

        font-size:clamp(2.5rem,9vw,4rem);

    }

    .cta-content p{

        font-size:1rem;

    }

}




/*==========================================================
    EXTRA SMALL DEVICES
==========================================================*/

@media(max-width:480px){

    .rooms-hero h1{

        font-size:3rem;

    }

    .suite-image img{

        height:280px;

    }

    .room-card img{

        height:220px;

    }

    .amenity-card{

        padding:2rem;

    }

    .faq-item summary{

        font-size:1rem;

    }

}