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

/* @media (max-width: 1440px) — REMOVED.
   It used to re-cap the two page containers:
       .common-wrapper .common-content,
       .common-footer-content { max-width: var(--breakpoint-l); }  (1200px)
   on top of their main.css:486 / :1089 base of var(--breakpoint-xl) (1440px).

   Because the query bound was max-width:1440px — the same number as the base
   cap — the two values swapped at exactly one pixel of viewport:
       viewport 1440px -> container 1200px, 120px of gutter each side
       viewport 1441px -> container 1440px, 0.5px of gutter each side
   a 240px jump in content width across 1px of resize, with 1440px itself
   landing on the narrow side. That is the "site looks broken at 1440px"
   report: at that exact width every section rendered ~17% narrower than it
   does one pixel wider, while the full-bleed hero slideshow
   (.common-slideshow, main.css:346 — no .common-content, so no cap) stayed
   edge to edge, which is what made the hero look mismatched against
   everything below it.

   Deleting the override lets the single base cap do the whole job: the
   container is fluid up to 1440px and centred beyond it, with no step
   anywhere. Nothing changes at or below 1200px (the viewport is narrower than
   either cap, so the container fills it either way) and nothing changes at
   1441px and above (the base 1440px cap already applied there). Only the
   1201-1440px band changes, from a fixed 1200px to fluid. */
@media (max-width: 1280px) {}
@media (max-width: 1199px) {
    /* slideshow-title / header-title font-size removed — main.css now uses
       clamp(24px, 4.6vw - 8px, 48px) directly, no breakpoint override needed. */
    .common-slideshow .common-slideshow-intro .slideshow-sub-title,
    .common-header-cover .common-header-intro .header-sub-title{
        font-size: 16px;
        line-height: 22px;
    }
}
@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: var(--white-color);
    }

    .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: var(--white-color);
    }

    .common-navbar .common-navbar-main .hamburger_box .menu_text:before,
    .common-navbar .common-navbar-main .hamburger_box .menu_text:after {
        color: var(--white-color);
    }

    .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: var(--white-color);
    }

/*-------------------------------------*/
/* 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 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-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{
        font-size: 2rem !important;
    }
    h3 {
        font-size: 1.5rem;
    }
    /* slideshow-title / header-title font-size removed — main.css now uses
       clamp(24px, 4.6vw - 8px, 48px) directly, no breakpoint override needed. */
    .common-slideshow .common-slideshow-intro .slideshow-sub-title,
    .common-header-cover .common-header-intro .header-sub-title{
        font-size: 14px;
        line-height: 20px;
    }
    .common-wrapper .common-content .common-row {
        padding: 50px 0;
    }
    .common-lightbox .uk-child-width-1-4\@m > * {
        width: 50%;
    }
    /* Accommodation slider (part-home-accommodation.php): 75% (uk-width-3-4)
       is too wide for tablet portrait — show most of one slide with a small
       peek of the next instead. Full-width comes at 480px below. */
    .common-slider-primary .uk-width-3-4 {
        width: 90%;
    }
    .common-slider-primary .details {
        margin-top: 36px !important;
    }
    /* Center nav prev/next: UIkit's slidenav JS renders the uk-icon class
       directly on the <a>, so this sizes the actual tap target — floors it
       at the ~44px recommended minimum regardless of the icon glyph's own
       10px size (main.css:595, unchanged). */
    .common-slider-primary .position-nav-center .uk-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 14px;
    }
    /* Offers slider (part-home-offers.php): 1 card per row instead of
       UIkit's own uk-child-width-1-2@s (50% from 640px up) — each card
       carries an image, heading, description and buttons, which reads
       cramped at ~344px (half of a 768px column minus padding/gap). */
    .common-slider-content .uk-child-width-1-2\@s > * {
        width: 100%;
    }
    /* Ribbon badge ("Best Deal"/"Hot Deal"): scaled to ~75% of its desktop
       geometry. The right offset keeps the same ratio to width as the
       desktop rule (-70px is -35% of 200px) so the diagonal ribbon still
       lands in the image's top-right corner instead of over/undershooting
       it — worth a visual check once live. */
    .common-slider-content .position-items-img .ribbon-inner {
        width: 150px;
        top: 20px;
        right: -52px;
        font-size: 0.65rem;
        padding: 8px;
    }
    .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 .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 .details .heading-intro .heading-large{
        font-size: 7rem;
    }
    .common-wrapper .common-content .common-row .articles{
        padding: 50px 30px;
    }
   
  
}
@media (max-width: 640px) {
    .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 {
        width: 75px;
    }
    .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;
    }

}
@media (max-width: 480px) {
    /* Icon count in the FOLLOW US bar is admin-controlled (social_link_footer
       repeater) — inline-flex with no wrap (line 154 above) can overflow on
       very narrow phones if there are several icons, so allow wrapping and
       tighten the gap here specifically. */
    .common-footer-content .uk-navbar-nav{
        flex-wrap: wrap;
        gap: 8px;
    }
    /* Stay at 2 columns (~150px thumbnails at this width, comparable to
       Instagram's own native app grid density) rather than dropping to 1 —
       just tighten the gap, which comes from .uk-inline's padding since
       uk-grid-collapse (part-home-instagram.php) zeroes UIkit's own gutter. */
    .common-lightbox .uk-child-width-1-4\@m > * {
        width: 50%;
    }
    .common-lightbox .uk-inline {
        padding: 3px;
    }
    /* Accommodation slider: full-width slides, tighter top gap under the
       30vh-tall image (screen.css:214, unchanged), tap target held at the
       same ~44px floor as 768px. */
    .common-slider-primary .uk-width-3-4 {
        width: 100%;
    }
    .common-slider-primary .details {
        margin-top: 26px !important;
    }
    .common-slider-primary .position-nav-center .uk-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }
    /* Offers slider: 1 card per row (same reasoning as 768px). */
    .common-slider-content .uk-child-width-1-2\@s > * {
        width: 100%;
    }
    /* Ribbon badge scaled further — same -35%-of-width right offset as the
       768px rule, kept proportionate to the smaller card. */
    .common-slider-content .position-items-img .ribbon-inner {
        width: 120px;
        top: 16px;
        right: -42px;
        font-size: 0.6rem;
        padding: 6px;
    }
    .common-slideshow .common-slideshow-intro .slideshow-sub-title,
    .common-header-cover .common-header-intro .header-sub-title{
        font-size: 12px;
        line-height: 20px;
    }
    
    .wp-block-paragraph {
        font-size: 12px;
        line-height: 1.5rem;
    }

}
@media (max-width: 414px) {
    .common-card-content .common-icon-set ul{
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    }
}
@media (max-width: 320px) {}