/* ==========================================================
   ROOM
   Noclegi u Boguszów
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root{
    --room-bg:#FBFAF8;
    --room-border:#F2EEE7;
    --room-text:#555555;
    --room-heading:#2E2D28;
    --room-accent:#D2AE67;
    --room-card:#FFFFFF;
}


/* ==========================================================
   MAIN
========================================================== */

#room-main{
    padding:14px 0;
    background-color: #fdfdfd;
}

#room-main > .e-con-inner{
    display:flex;
    align-items:flex-start;
    gap:0;
}


/* ==========================================================
   PHOTO
========================================================== */

#room-photo{
    flex:0 0 50%;
}

.room-main-image img{
    display:block;
    width:100%;
    height:auto;
    border-radius:6px;
}


/* ==========================================================
   INFO
========================================================== */

#room-info{
    flex:1;
    display:flex;
    flex-direction:column;
}


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

.room-heading{
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:48px;
    font-weight:500;
    line-height:1.05;
    color:var(--room-heading);
}
.room-heading h2{
    display: inline-block;
    position: relative;
    margin: 0 0 38px;
    font-family: "Cormorant Garamond",serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.05;
    color: #2E2D28;
}


/* ==========================================================
   DIVIDER
========================================================== */

.room-divider{
    width:42px !important;
    height:2px !important;
    background:var(--room-accent);
}

.room-divider span{
	border: none;
	border-block-start: none !important;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.room-description{
    margin-bottom:42px;
}

.room-description p{
    margin:0;
    font-family:"Inter",sans-serif;
    font-size:17px;
    line-height:1.9;
    color:var(--room-text);
}


/* ==========================================================
   PRICE CARD
========================================================== */

.room-price-card{
    background:#f9f8f6;
    border:none;
    padding:34px;
}


/* ==========================================================
   PRICE HEADER
========================================================== */

.room-price-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.room-price-icon{
    color:var(--room-accent);
    font-size:22px;
}

.room-price-title{
    margin:0;
    font-family:"Inter",sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#6A6A6A;
}

/* ==========================================================
   PRICE
========================================================== */

.room-price{
    margin:0 0 14px;
    font-family:"Cormorant Garamond",serif;
    font-size:54px;
    font-weight:500;
    line-height:1;
    color:#2E2D28;
}

.room-price span{
    font-size:22px;
    color:#8B8B8B;
}

/* ==========================================================
   PRICE NOTE
========================================================== */

.room-price-note{
    margin-bottom:34px;
}

.room-price-note p{
    margin:0;
    font-family:"Inter",sans-serif;
    font-size:14px;
    line-height:1.8;
    color:#7B7B7B;
}

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

.room-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.room-buttons .elementor-button{
    width:100%;
}

/* ==========================================================
   FEATURES
========================================================== */

#room-features{
    padding:0;
    background:#f9f8f6;
    border:none;
}

#room-features h2,
#room-gallery h2{
	margin:0;
	padding-top:20px;
	font:500 28px/1 "Cormorant Garamond",serif;
	color:#2F2C28;
}


/* ==========================================================
   SECTION TITLE
========================================================== */

#room-features .room-section-title{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:40px;

    font-weight:500;

    line-height:1.05;

    color:var(--room-heading);

}

#room-features .room-divider{
    margin: 0;
}


/* ==========================================================
   GRID
========================================================== */

.room-features-grid{

    display:grid;

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

    column-gap:42px;

    row-gap:34px;

}


/* ==========================================================
   FEATURE ITEM
========================================================== */

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}


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

.feature-icon{

    flex:0 0 34px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#758269;

}

.feature-icon i{

    font-size:28px;

    line-height:1;

}

.feature-icon svg{

    width:28px;

    height:28px;

}


/* ==========================================================
   TEXT
========================================================== */

.feature-content{

    display:flex;

    flex-direction:column;

    gap:6px;

}


/* ==========================================================
   TITLE
========================================================== */

#room-features .feature-title p{
    margin: 0 0 0 10px;
    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:600;
    line-height:1.4;
    color:#383838;
}

/* ==========================================================
   DESCRIPTION
========================================================== */

.feature-text{

    margin:0;

    font-family:"Inter",sans-serif;

    font-size:14px;

    line-height:1.7;

    color:#7A7A7A;

}


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

.feature-item{

    transition:.25s ease;

}

.feature-item:hover{

    transform:translateY(-2px);

}

.feature-item:hover .feature-icon{

    color:var(--room-accent);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .room-features-grid{

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

        column-gap:34px;

        row-gap:30px;

    }

}


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

@media (max-width:767px){

    #room-features{

        padding:56px 0;

    }

    #room-features .room-section-title{

        font-size:34px;

    }

    .room-features-grid{

        grid-template-columns:1fr;

        row-gap:24px;

    }

    .feature-item{

        gap:16px;

    }

}

/* ==========================================================
   ROOM GALLERY
========================================================== */

#room-gallery{

    padding:0 0 24px;

    background:#FBFAF8;

    overflow:hidden;

}

#room-gallery > .e-con-inner{

    max-width:1140px;

    margin:0 auto;

}


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

#room-gallery .room-section-title{

    text-align:left;

    margin-bottom:0;

}

#room-gallery .room-divider{

    margin:14px 0 34px;

}

#room-gallery .elementor-divider-separator{

    width:42px !important;

}


/* ==========================================================
   SLIDER
========================================================== */

#room-gallery .room-gallery-slider{

    width:100%;

}

#room-gallery .elementor-image-carousel-wrapper{

    overflow:hidden;

}

#room-gallery .swiper{

    overflow:hidden;

    padding-bottom:46px;

}

#room-gallery .swiper-wrapper{

    align-items:stretch;

}


/* ==========================================================
   SLIDES
========================================================== */

#room-gallery .swiper-slide{

    height:auto;

}

#room-gallery .swiper-slide figure{

    margin:0;

}

#room-gallery .swiper-slide-image{

    display:block;

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    border-radius:8px;

    transition:transform .35s ease;

}

#room-gallery .swiper-slide:hover .swiper-slide-image{

    transform:scale(1.03);

}


/* ==========================================================
   ARROWS
========================================================== */

#room-gallery .elementor-swiper-button{

    width:48px;

    height:48px;

    border:1px solid #E9E3D8;

    border-radius:50%;

    background:#FFF;

    color:#758269;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 28px rgba(0,0,0,.06);

    transition:.25s ease;

}

#room-gallery .elementor-swiper-button:hover{

    background:#758269;

    border-color:#758269;

    color:#FFF;

}

#room-gallery .elementor-swiper-button-prev{

    left:-24px;

}

#room-gallery .elementor-swiper-button-next{

    right:-24px;

}

#room-gallery .elementor-swiper-button i{

    font-size:16px;

}


/* ==========================================================
   PAGINATION
========================================================== */

#room-gallery .swiper-pagination{

    bottom:0 !important;

}

#room-gallery .swiper-pagination-bullet{

    width:8px;

    height:8px;

    margin:0 5px !important;

    background:#DDD6CA;

    opacity:1;

    transition:.25s ease;

}

#room-gallery .swiper-pagination-bullet-active{

    width:24px;

    border-radius:20px;

    background:#D2AE67;

}


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

@media (max-width:1024px){

    #room-gallery{

        padding:60px 0 80px;

    }

    #room-gallery .room-section-title h2{

        font-size:36px;

    }

    #room-gallery .elementor-swiper-button-prev{

        left:-14px;

    }

    #room-gallery .elementor-swiper-button-next{

        right:-14px;

    }

}

@media (max-width:767px){

    #room-gallery{

        padding:50px 0 70px;

    }

    #room-gallery .room-section-title{

        text-align:center;

    }

    #room-gallery .room-divider{

        display:flex;

        justify-content:center;

    }

    #room-gallery .room-section-title h2{

        font-size:30px;

    }

    #room-gallery .elementor-swiper-button{

        display:none;

    }

}



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

#room-cta{

    padding:70px 0;

    background:#758269;

    overflow:hidden;

}


/* ==========================================================
   CTA GRID
========================================================== */

#room-cta>.e-con-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}


/* ==========================================================
   LEFT
========================================================== */

.room-cta-left{

    flex:1;

}

.room-cta-title{

    margin:0 0 18px;

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    font-weight:500;

    line-height:1.05;

    color:#FFFFFF;

}

.room-cta-text{

    margin:0;

    max-width:620px;

    font-family:"Inter",sans-serif;

    font-size:16px;

    line-height:1.9;

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

}


/* ==========================================================
   RIGHT
========================================================== */

.room-cta-right{

    display:flex;

    flex-direction:column;

    gap:16px;

    min-width:250px;

}


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

.room-cta-right .elementor-button{

    width:100%;

}


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

.room-leaf{

    position:absolute;

    right:-40px;

    bottom:-30px;

    opacity:.12;

    pointer-events:none;

    width:260px;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    #room-gallery{

        padding:70px 0;

    }

    #room-cta>.e-con-inner{

        gap:40px;

    }

}


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

@media (max-width:767px){

    #room-gallery{

        padding:60px 0;

    }

    #room-gallery .room-section-title{

        font-size:34px;

    }

    #room-cta{

        padding:60px 0;

    }

    #room-cta>.e-con-inner{

        flex-direction:column;

        align-items:flex-start;

    }

    .room-cta-title{

        font-size:34px;

    }

    .room-cta-right{

        width:100%;

    }

}

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

/* ==========================================================
   DESKTOP LARGE
========================================================== */

@media (min-width:1440px){

    #room-main>.e-con-inner,
    #room-features>.e-con-inner,
    #room-gallery>.e-con-inner,
    #room-cta>.e-con-inner{

        max-width:1180px;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    #room-main{

        padding:56px 0;

    }

    #room-main>.e-con-inner{

        gap:42px;

    }

    .room-heading{

        font-size:42px;

    }

    .room-price{

        font-size:48px;

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    /* MAIN */

    #room-main>.e-con-inner{

        flex-direction:column;

        gap:48px;

    }

    #room-photo,
    #room-info{

        flex:1 1 auto;

        width:100%;

    }

    /* PRICE */

    .room-price-card{

        padding:30px;

    }

    .room-price{

        font-size:44px;

    }

    /* FEATURES */

    .room-features-grid{

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

        gap:28px 36px;

    }

    /* CTA */

    #room-cta>.e-con-inner{

        gap:40px;

    }

}


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

@media (max-width:767px){

    /* MAIN */

    #room-main{

        padding:44px 0;

    }

    .room-heading{

        font-size:34px;

    }

    .room-description p{

        font-size:16px;

    }

    .room-divider{

        margin:16px 0 24px;

    }

    /* PRICE */

    .room-price-card{

        padding:24px;

    }

    .room-price{

        font-size:38px;

    }

    .room-price span{

        font-size:18px;

    }

    .room-buttons{

        gap:12px;

    }

    /* FEATURES */

    #room-features{

        padding:56px 0;

    }

    .room-features-grid{

        grid-template-columns:1fr;

        row-gap:22px;

    }

    .feature-item{

        gap:14px;

    }

    .feature-icon{

        flex:0 0 30px;

    }

    .feature-icon i{

        font-size:24px;

    }

    /* GALLERY */

    #room-gallery{

        padding:56px 0;

    }

    .room-gallery-slider img{

        border-radius:6px;

    }

    .room-gallery-slider .swiper-button-prev,
    .room-gallery-slider .swiper-button-next{

        display:none;

    }

    /* CTA */

    #room-cta{

        padding:56px 0;

    }

    #room-cta>.e-con-inner{

        flex-direction:column;

        align-items:flex-start;

    }

    .room-cta-title{

        font-size:34px;

    }

    .room-cta-text{

        font-size:15px;

    }

    .room-cta-right{

        width:100%;

    }

}


/* ==========================================================
   ANIMATIONS
========================================================== */

.room-main-image img,
.room-price-card,
.feature-item,
.room-gallery-slider img{

    transition:all .30s ease;

}

.room-main-image:hover img{

    transform:scale(1.01);

}

.room-price-card:hover{

    border-color:#EAE3D8;

    box-shadow:0 18px 36px rgba(0,0,0,.05);

}

.feature-item:hover{

    transform:translateY(-2px);

}

.room-gallery-slider a:hover img{

    transform:scale(1.03);

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

.room-heading,
.room-section-title,
.room-cta-title{

    text-wrap:balance;

}

.room-description p,
.feature-text,
.room-price-note p,
.room-cta-text{

    text-wrap:pretty;

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.room-buttons .elementor-button:focus-visible,
.room-gallery-slider a:focus-visible{

    outline:2px solid #D2AE67;

    outline-offset:3px;

}


/* ==========================================================
   UTILITIES
========================================================== */

.room-hidden{

    display:none!important;

}

.room-center{

    text-align:center;

}

.room-mt-0{

    margin-top:0!important;

}

.room-mb-0{

    margin-bottom:0!important;

}