/*
* Template Name: Theme Luxury One
* Author: Gavin
* Designed & Coding by : Gavin
*/

@media (max-width: 1440px) {
    .common-wrapper .common-content,
    .common-footer-content{
        max-width: var(--breakpoint-l);
    }
}
@media (max-width: 1280px) {}
@media (max-width: 1024px) {

/*-------------------------------------*/
/* HEMBURGER */
/*-------------------------------------*/
.common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger{
        display: block;
        width: 50%;
    }

    .common-navbar .common-navbar-main .main_nav.fix_menu .hamburger_box .menu_text:before,
    .main_nav.fix_menu .hamburger_box .menu_text:after {
        color: #000;
    }

    .common-navbar .common-navbar-main .main_nav.fix_menu .hamburger_inner,
    .common-navbar .common-navbar-main .main_nav.fix_menu .hamburger_inner::before,
    .common-navbar .common-navbar-main .main_nav.fix_menu .hamburger_inner::after {
        background-color: #000;
    }

    .common-navbar .common-navbar-main .hamburger_box .menu_text:before,
    .common-navbar .common-navbar-main .hamburger_box .menu_text:after {
        color: #000;
    }

    .common-navbar .common-navbar-main .hamburger_inner,
    .common-navbar .common-navbar-main .hamburger_inner::before,
    .common-navbar .common-navbar-main .hamburger_inner::after {
        background-color: #000;
    }

/*-------------------------------------*/
/* COMMON MAIN NAV */
/*-------------------------------------*/
.common-navbar{
    background-color: #fff;
}
.common-navbar .common-navbar-main{
    padding: 0 0 0 20px;
}
.common-navbar .common-navbar-main .common-navbar-container.common-navbar-fixed,
.common-navbar-fixed.active .common-navbar-button{
    display: none;
}

.common-navbar .common-navbar-main .common-logo{
    width: 50%;
}

/*-------------------------------------*/
/* SLIDESHOW */
/*-------------------------------------*/
.common-slider-primary .uk-cover-container{
    height: 40vh;
}
.common-slider-primary .uk-cover-container img{
    height: 40vh !important;
}
.common-slider-primary .position-nav-center{
    top: -35%;
    width: auto;
    background: transparent;
}
.common-slider-primary .position-nav-center .uk-icon{
    background-color: #fff;
    padding: 10px 20px;
}
.common-slider-primary .position-nav-center .uk-position-small{
    margin: 0;
}
.common-slider-content .uk-icon svg{
    width: 10px;
    display: block;
}
/*-------------------------------------*/
/* CARD CONTENT */
/*-------------------------------------*/
.common-card-content .uk-slider-container-offset .uk-child-width-1-3\@s > * {
    width: calc(100% * 1 / 2.001);
}

}
@media (max-width: 980px) {
    .common-lightbox .uk-child-width-1-4\@m > * {
        width: 50%;
    }
    .common-slider-default .uk-slider-items{
        min-height: calc(40vh) !important;
    }
    .common-amenities-list ul{
        column-count: 3;
        -webkit-column-count: 3;
        -moz-column-count: 3;
    }
}
@media (max-width: 960px) {
    .common-blog .uk-width-3-4,
    .common-blog .uk-width-1-4{
        width: 100%;
    }
    .common-sidebar-wrapper{
        position: relative !important;
        top: 0 !important;
        width: auto !important;
    }
    .uk-sticky-placeholder{
        height: auto !important;
        width: auto !important;
        margin: 0px !important;
    }
}
@media (max-width: 768px) {
    /* h1/h2, h3, slideshow-title/sub-title, header-title, and (further
       below in this block) heading-large: font-size overrides removed
       - each is now a fluid clamp() in main.css that covers this whole
       range (and below) without a breakpoint jump. See main.css for
       the before/after values. */
    .common-wrapper .common-content .common-row {
        padding: 50px 0;
    }
    .common-footer-content .uk-navbar{
        text-align: center;
        display: block;
    }
    .common-footer-content .uk-navbar-nav{
        display: inline-flex;
        gap: 10px;
    }
    .common-footer-content .uk-navbar-left,
    .common-footer-content .uk-navbar-right{
        display: block;
    }
    .common-footer-content .uk-width-1-3{
        width: calc(100% * 1 / 1);
        text-align: center;
    }
    .common-footer .common-footer-content ul{
        padding: 20px 0 0;
    }
    .common-card-content .uk-position-small {
        top: 20%;
    }
    .common-blog .header-intro .uk-flex,
    .common-card-content .breadcrumb-end-content.uk-flex{
        display: block;

    }
    .common-blog .header-intro .uk-breadcrumb,
    .common-card-content .uk-breadcrumb{
        padding-left: 0;
    }
    .common-card-content .breadcrumb-end-content{
        padding: 30px;
    }
    .common-wrapper .common-content .common-row .articles{
        padding: 50px 30px;
    }
    /* MAIN HERO SLIDESHOW (part-mainslide.php - the top-of-homepage/
       page hero, .common-slideshow) - distinct component from
       .common-slider-primary (the accommodation room slider on the
       homepage, addressed separately above/elsewhere in this file).
       Height: <ul uk-height-viewport> (part-mainslide.php:16, :84)
       has UIkit JS assign an inline height aiming for ~full viewport
       height on every screen size - main.css's own
       ".common-slideshow .uk-slideshow-items{aspect-ratio:auto!important}"
       only cancels any competing aspect-ratio, it doesn't cap the
       height, so mobile got the same near-100vh height as desktop.
       Overriding height here with !important is one of the few things
       that can beat an inline style, so this wins over the JS-assigned
       value. Each <li> is UIkit's own position:absolute;inset:0
       (uikit.css:3886-3898), so it - and the <img uk-cover> and
       .common-slideshow-intro text block inside it - all resize to
       match automatically, no separate per-element height needed.
       uk-cover keeps managing the image's own cover-fit sizing/
       cropping via its own JS regardless of the container's height,
       so this doesn't risk distortion. 65vh sits in the requested
       60-70vh range. */
    .common-slideshow .uk-slideshow-items{
        height: 65vh !important;
    }
    /* Text position - rebuilt on flexbox instead of fighting UIkit's
       absolute-positioning utility property-by-property.
       Root cause of the previous attempt not fully working: uikit.css
       :9092-9101 has "[class*='uk-position-top'], ... ,
       [class*='uk-position-center']{ position:absolute !important; ... }"
       - an attribute selector that matches on SUBSTRING, so it also
       catches our uk-position-center-left element (its class attribute
       contains "uk-position-center"). That !important forces
       position:absolute no matter what a plain (non-!important) rule
       sets left/transform to - the box was still being pulled out of
       normal flow and positioned via UIkit's own left/transform math
       to whatever degree our override didn't fully match it, rather
       than participating in simple centered flow layout.
       Fix: instead of overriding left/top/transform to fight that
       absolute positioning, this cancels position back to static
       (needs !important specifically to beat the uikit.css !important
       above) so the box drops into normal flow, then centers it with
       flexbox on the parent .common-slideshow-intro - a method that
       doesn't care about left/top/transform at all, so there's nothing
       left for the old declarations (main.css:385's desktop left:50px,
       or UIkit's own left:0/transform rules) to still apply to or
       conflict with once position:static wins. main.css:385's left:50px
       is left in place for desktop (that's still the intended "middle-
       left" desktop layout) rather than deleted outright - it's simply
       inert at this breakpoint now, since left only affects positioned
       elements and this element is no longer one of them here. */
    .common-slideshow .common-slideshow-intro{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .common-slideshow .common-slideshow-intro .uk-position-center-left{
        position: static !important;
        left: auto;
        top: auto;
        transform: none;
        text-align: center;
        width: 90%;
        max-width: 90%;
    }
}
@media (max-width: 640px) {
    .common-slider-primary .uk-width-3-4{
        width: 100%;
    }
    .common-slider-primary .uk-cover-container{
        height: 30vh;
    }
    .common-slider-primary .uk-cover-container img{
        height: 30vh !important;
    }
    .common-slider-primary .position-nav-center{
        top: -45%;
    }
    
    .common-navbar .common-navbar-main .common-logo{
        width: 30%;
    }
    .common-navbar .common-navbar-main .common-logo img {
        padding: 20px 0 0;
        width: 100px;
    }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger{
        width: 70%;
    }
    .common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a{
        padding: 10px;
    }
    .common-switch-places-content .uk-card-body{
        padding: 30px 0;
    }
    .common-switch-places-content .uk-grid-collapse:last-child .uk-card-body{
        padding: 30px 0 0 0;
    }
    .common-switch-places-content .uk-grid-collapse .uk-card-body{
        text-align: center;
    }
    .common-card-content .uk-slider-container-offset .uk-child-width-1-3\@s > * {
        width: calc(100% * 1 / 1);
    }
    .common-slider-default .uk-width-3-4{
        width: 100%;
    }
    .common-slider-default .uk-slider-items{
        min-height: calc(29vh) !important;
    }
    .common-list-flex .entry-wrap{
        width: 50%;
    }
    .common-list-flex .entry-wrap:nth-child(2){
        border-right: none;
    }
    .common-amenities-list ul{
        column-count: 2;
        -webkit-column-count: 2;
        -moz-column-count: 2;
    }

}
/* HERO SLIDER - aspect-ratio instead of vh below 480px
   part-home-accommodation.php:14's <ul uk-height-viewport> sets an
   inline height via UIkit JS aiming for ~viewport height, independent
   of screen width; combined with the 640px tier's flat 30vh image
   height above, this left a growing gap of empty background beneath
   a comparatively short image on narrow/tall phone viewports - the
   slide's own visual content (image + text) no longer filled the
   JS-computed row height, so the whole hero felt disproportionately
   tall relative to what was actually showing. vh is also brittle on
   mobile browsers where the address bar changes the visible viewport
   height while scrolling. Switching to aspect-ratio ties the image's
   height to its own column width instead - deterministic, and exactly
   the "aspect-ratio based sizing" alternative this was flagged for.
   4:3 reuses the same ratio already established for Facilities row
   images (style-custom.css) rather than introducing a new one.
   height:auto!important on .uk-slider-items overrides the uk-height-
   viewport-assigned inline style (the one case !important CSS can
   still beat an inline style) so the <ul> shrinks back down to match
   its now aspect-ratio-sized content instead of staying near-viewport-
   tall underneath it. */
@media (max-width: 480px){
    .common-slider-primary .uk-cover-container{
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .common-slider-primary .uk-cover-container img{
        height: 100% !important;
    }
    .room-slider-home .uk-slider-items{
        height: auto !important;
    }
}
@media (max-width: 414px) {
    .common-card-content .common-icon-set ul{
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    }
    /* .header-title font-size override removed - now a fluid clamp()
       in main.css, see the 768px block comment above. */
}
@media (max-width: 320px) {}