/* ------------------------------------------------------------------
   Site fixes — loaded after style.css so these win on equal specificity.

   Kept in a separate file (rather than edited into the 900KB theme
   stylesheet) so every project-specific responsive correction stays
   visible in one place and can be reverted on its own.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   1. Header row overflowed the viewport below 992px

   .milenia-header-items uses the usual negative-gutter pattern
   (-1rem on itself, +1rem on its children). That only balances while the
   row is inline-block and sized to its content. In the vertical-nav
   media queries the row and its children switch to display:block, so the
   row fills the container and the -1rem sides push it 16px past each
   edge — every page scrolled sideways by 16px under 992px.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .milenia-header-col--nav-vertical-md .milenia-header-items,
    .milenia-header-col--nav-vertical-md .milenia-header-items > div {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ------------------------------------------------------------------
   2. Menu toggle was unreachable on phones

   At <=767px the logo is position:absolute, centred and z-index:9999.
   The theme's -sm variant kept the toggle clear of it with
   margin-left:auto; the -md variant this header uses instead renders it
   inline-block (centred), which puts it directly beneath the logo — taps
   hit the logo link and navigate home instead of opening the menu.

   Restores the theme's own -sm placement, plus a stacking context above
   the logo so a partial overlap at any width still can't swallow taps.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .milenia-header-col--nav-vertical-md .milenia-mobile-nav-btn {
        display: flex;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 10000;
    }
}

/* ------------------------------------------------------------------
   3. Footer phone/email links were 17px tall

   Below the desktop layout these are the primary contact actions but sat
   well under the 24px WCAG 2.2 minimum target size. inline-flex keeps the
   text where it is and grows only the hit area.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    #milenia-footer address a[href^="tel:"],
    #milenia-footer address a[href^="mailto:"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------
   3b. BOOK NOW sat flush against the room description

   On the room detail page the button follows the description inside the
   same column, and .milenia-entity-footer carries no top spacing there,
   so the two touched (measured gap: 0px). Adds breathing room without
   altering the button or the surrounding layout.
   ------------------------------------------------------------------ */

.hotel-room-detail .milenia-entity-footer {
    margin-top: 1.75rem;
}

/* ------------------------------------------------------------------
   4. Page could be dragged sideways ~10px

   The tabbed carousel's arrows are absolutely positioned outside their
   container (right: -84.8px). Between roughly 768px and 1280px there is
   not enough room beside the section, so they pushed the document wider
   than the viewport and every page scrolled horizontally. The arrows are
   decorative and revealed on hover, so clipping that sliver is better
   than a page that drifts sideways. This also absorbs the 1-2px
   sub-pixel overhang seen at phone widths.
   ------------------------------------------------------------------ */

html,
body {
    overflow-x: hidden;
}

/* ------------------------------------------------------------------
   5. Trust badges collided with the logo and nav

   .hidebanner used Bootstrap 3's hidden-sm (gone in the current
   stylesheet) plus float + a negative top margin. Below ~1200px the
   five badges sat on top of the triangular logo and the menu toggle.
   Keep them on wide desktops only; the logo already carries the brand.
   ------------------------------------------------------------------ */

.hidebanner {
    float: right;
    position: relative;
    z-index: 50;
    margin-top: -80px;
    margin-right: 30px;
}

.hidebanner img {
    display: block;
    max-width: min(420px, 38vw);
    height: auto;
}

@media (max-width: 1199.98px) {
    .hidebanner {
        display: none;
    }
}

/* ------------------------------------------------------------------
   6. Main nav wrapped between 992px and 1200px

   Horizontal padding on each link assumed a 1400px row. At laptop /
   tablet-landscape widths the last items wrapped onto a second line
   under the logo. Keep type readable but tighter so the row still fits.
   ------------------------------------------------------------------ */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /*
     * There are ten editable menu items. With the theme's 0.3rem gap on
     * both sides, the final item (Contact) wrapped at 1024px even after
     * the link padding had been compacted. Tighten only the inter-item
     * gap; link text and its click area remain unchanged.
     */
    #main-ul.milenia-navigation > .menu-item {
        margin-left: 0.125rem;
        margin-right: 0.125rem;
    }

    .milenia-navigation > li > a {
        margin-right: 0;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-top: 0.35rem;
        padding-bottom: 0.45rem;
        font-size: 0.875rem;
        line-height: 1.15;
        letter-spacing: 0.04em;
    }
}

/* ------------------------------------------------------------------
   7. Mobile header covered the hero and swallowed taps

   At <=767px the theme takes the header out of flow (position:fixed)
   so the fullscreen slider starts under it, and the logo is
   position:absolute over the hamburger. Sticky keeps the bar usable
   without hiding the first screen of content; the logo stays in the
   flex row so the menu button remains a 44px target.
   ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    #milenia-header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 100;
    }

    .logo-wrap {
        min-height: 72px;
        align-items: center;
    }

    .logo-wrap .milenia-logo,
    .milenia-logo {
        position: relative;
        width: auto;
        max-width: 168px;
        margin-inline: auto;
    }

    .logo-wrap .milenia-logo img {
        max-width: 100%;
        height: auto;
        padding-top: 6px;
    }

    .milenia-header-section--sticky-md {
        min-height: 52px;
    }
}

/* ------------------------------------------------------------------
   7b. Hamburger is centered below 992px and must actually open the menu

   A static <button> in the header made MonkeysanNav skip its click
   binding (it only wires the button it creates). The toggle is now
   created by the plugin; this CSS centers it and keeps the opened
   list visible. siteNav in footer.php is the click handler.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    #milenia-header,
    .milenia-header-col--nav-vertical-md,
    .milenia-header-col--nav-vertical-md .milenia-aligner-outer,
    .milenia-header-col--nav-vertical-md .milenia-aligner-inner,
    .milenia-header-col--nav-vertical-md .milenia-header-items,
    .milenia-navigation-container {
        overflow: visible;
    }

    .milenia-navigation-container {
        display: block;
        width: 100%;
        text-align: center;
    }

    .milenia-header-col--nav-vertical-md .milenia-mobile-nav-btn,
    .milenia-header-col--nav-vertical-sm .milenia-mobile-nav-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #3d342f;
        cursor: pointer;
        position: relative;
        z-index: 10000;
        float: none;
    }

    .milenia-header-col--nav-vertical-md .milenia-mobile-nav-btn::after,
    .milenia-header-col--nav-vertical-sm .milenia-mobile-nav-btn::after {
        font-family: inherit;
        content: "";
        display: block;
        width: 22px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
    }

    #main-ul #language,
    #main-ul .booking-mb {
        display: none !important;
    }

    #main-ul.milenia-navigation > .menu-item {
        line-height: 1.1;
        margin-top: 0;
        margin-bottom: 0;
    }

    #main-ul.milenia-navigation {
        margin-left: 0;
        margin-right: 0;
    }

    .milenia-navigation--vertical-md > li > a,
    .milenia-navigation--vertical-sm > li > a,
    #main-ul.milenia-navigation > .menu-item > a {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        font-size: 1.375rem;
        line-height: 1.1;
        letter-spacing: 0.06em;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 44px;
    }
}

/* ------------------------------------------------------------------
   7c. Phones use the same top bar as tablet

   Tablet already shows flags on the left and Book Now on the right,
   with the hamburger centered under the logo. The theme hid that bar
   below 768px and cloned both items into the slide-down menu. Keep
   the tablet chrome on phones instead.
   ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .mb-disable {
        display: block !important;
    }

    #milenia-header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .milenia-header-section--sticky-hidden {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .milenia-header-section--sticky-hidden > .mb-disable {
        flex: 0 1 auto;
        max-width: none;
    }

    .milenia-header-section--sticky-hidden > .mb-disable:first-child {
        text-align: left;
    }

    .milenia-header-section--sticky-hidden > .mb-disable:last-child {
        text-align: right;
    }

    .milenia-header-section--sticky-hidden .milenia-header-items,
    .milenia-header-section--sticky-hidden .milenia-header-items > div {
        margin-left: 0;
        margin-right: 0;
    }

    .milenia-header-section--sticky-hidden .milenia-header-col--padding-small > .milenia-aligner-outer > .milenia-aligner-inner {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .milenia-header-section--sticky-hidden,
    .milenia-header-section--sticky-hidden .milenia-aligner-outer,
    .milenia-header-section--sticky-hidden .milenia-aligner-inner {
        overflow: visible;
    }

    .milenia-header-section--sticky-hidden .fa-calendar-alt {
        display: none;
    }

    .milenia-header-section--sticky-hidden .booking-mb {
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
   8. Home hero had no fallback size before Revolution Slider inits

   #rev-slider-1 starts as .milenia-d-none. Until JS shows it the
   wrapper collapsed and the first screen was a blank band. A dark
   min-height keeps the layout stable; Revolution overwrites height
   once it is ready.
   ------------------------------------------------------------------ */

.rev_slider_wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-height: 200px;
    background-color: #1c1c1c;
}

@media (max-width: 767.98px) {
    .rev_slider_wrapper {
        min-height: 180px;
    }
}

@media (min-width: 768px) {
    .rev_slider_wrapper.fullscreenbanner-container {
        min-height: clamp(315px, 30vw, 520px);
    }
}

/* ------------------------------------------------------------------
   9. Home "Room Suites" heading used non-breaking spaces for indent
   ------------------------------------------------------------------ */

.home-rooms-heading {
    padding-left: 1.5rem;
}

.milenia-section-title--style-4 {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    font-size: clamp(1.35rem, 6.4vw, 2.5rem);
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .home-rooms-heading {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        text-align: center;
    }
}

/* ------------------------------------------------------------------
   10. Room tabbed-carousel arrows sat outside the viewport

   Thumbs use 5rem side padding and arrows at left/right: -5.3rem.
   Below 992px those arrows are clipped by overflow-x:hidden (fix 4)
   so guests cannot change rooms. Pull padding in and keep the arrows
   inside the thumb row. Thumb images are a fixed 146px — cap them.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .milenia-tabbed-carousel-thumbs {
        padding-left: 2.75rem;
        padding-right: 2.75rem;
    }

    .milenia-tabbed-carousel-thumbs .owl-carousel.owl-carousel--nav-edges.owl-carousel--nav-small .owl-prev {
        left: 0;
    }

    .milenia-tabbed-carousel-thumbs .owl-carousel.owl-carousel--nav-edges.owl-carousel--nav-small .owl-next {
        right: 0;
    }
}

@media (max-width: 575.98px) {
    .milenia-tabbed-carousel-thumbs {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }

    .milenia-tabbed-carousel-thumb-image {
        width: 100%;
        max-width: 146px;
        height: 96px;
        background-size: cover;
        background-position: center;
    }

    .milenia-tabbed-carousel-thumb-caption {
        padding: 0.6rem 0.4rem 0;
        font-size: 0.8rem;
        line-height: 1.15;
    }
}

/* Room card copy and CTAs on a stacked (image-then-text) layout. */
@media (max-width: 991.98px) {
    .milenia-entities--style-15 .milenia-entity-content .milenia-aligner-inner {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .milenia-entities--style-15 .milenia-entity-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .milenia-entities--style-15 .milenia-entity-footer .milenia-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------
   11. Meetings / dining 50/50 split squeezed copy on tablets

   Style-3 stays row layout until 768px, with 4.9rem side padding in
   each half. Between 768 and 992 that left ~200px for body text.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .milenia-entities--style-3 .milenia-entity,
    .milenia-entities--style-16 .milenia-entity {
        flex-direction: column;
        height: auto;
    }

    .milenia-entities--style-3 .milenia-entity-media,
    .milenia-entities--style-16 .milenia-entity-media,
    [class*="milenia-section--stretched-content"] .milenia-entities--style-3 .milenia-entity-media,
    [class*="milenia-section--stretched-content"] .milenia-entities--style-16 .milenia-entity-media {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        min-height: 18.75rem;
        height: 18.75rem;
    }

    .milenia-entities--style-3 .milenia-entity--format-slideshow .milenia-entity-media .owl-carousel--vadaptive,
    .milenia-entities--style-16 .milenia-entity--format-slideshow .milenia-entity-media .owl-carousel--vadaptive,
    .milenia-entities--style-3 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-stage-outer,
    .milenia-entities--style-3 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-stage,
    .milenia-entities--style-3 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-item,
    .milenia-entities--style-16 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-stage-outer,
    .milenia-entities--style-16 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-stage,
    .milenia-entities--style-16 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-item {
        height: 100% !important;
        min-height: 18.75rem;
    }

    .milenia-entities--style-3 .milenia-entity-slide,
    .milenia-entities--style-16 .milenia-entity-slide {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .milenia-entities--style-3 .milenia-entity-content,
    .milenia-entities--style-16 .milenia-entity-content,
    [class*="milenia-section--stretched-content"] .milenia-entities--style-3 .milenia-entity-content,
    [class*="milenia-section--stretched-content"] .milenia-entities--style-16 .milenia-entity-content {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        padding: 2.5rem 1.5rem;
    }
}

/* ------------------------------------------------------------------
   12. Home map iframe collapsed when the 8/4 columns stacked

   The embed used height="100%" without .milenia-gmap, so once the
   nearby column wrapped under the map the parent had no height and
   the iframe shrank to the 150px replaced-element default.
   ------------------------------------------------------------------ */

.home-map-embed {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: 0;
}

.home-nearby-map .milenia-multicolor-col-md-8,
.home-nearby-map .milenia-multicolor-col-md-8 .milenia-aligner-inner {
    min-height: 280px;
}

/* A 2/3 + 1/3 split leaves the nearby-location copy too narrow on tablets. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-nearby-map {
        flex-direction: column;
    }

    .home-nearby-map .milenia-multicolor-col-md-8,
    .home-nearby-map .milenia-multicolor-col-md-4 {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .home-map-embed {
        height: 320px;
        min-height: 320px;
    }

    .home-nearby-map .milenia-multicolor-col-md-8,
    .home-nearby-map .milenia-multicolor-col-md-8 .milenia-aligner-inner {
        min-height: 320px;
    }

    .home-nearby-map .milenia-multicolor-col-md-4 {
        padding: 3rem 2rem;
    }
}

@media (max-width: 767.98px) {
    .home-map-embed {
        height: 240px;
        min-height: 240px;
    }

    .home-nearby-map .milenia-multicolor-col-md-8,
    .home-nearby-map .milenia-multicolor-col-md-8 .milenia-aligner-inner {
        min-height: 240px;
    }

    .home-nearby-map .milenia-multicolor-col-md-4 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ------------------------------------------------------------------
   13. Home intro / offers / buttons on small phones
   ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .milenia-section--py-huge {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .milenia-section-title,
    .milenia-section-subtitle,
    .milenia-entity-title,
    .milenia-dropcap,
    .milenia-dropcap p,
    .home-rooms-heading {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }

    .milenia-section-title,
    .milenia-section-subtitle,
    .milenia-entity-title,
    .milenia-dropcap,
    .milenia-dropcap p,
    .home-rooms-heading {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }

    .milenia-section-title {
        font-size: 1.75rem;
        line-height: 1.25;
        margin-bottom: 1.25rem;
    }

    .milenia-section-subtitle {
        letter-spacing: 0.12em;
    }

    .milenia-section .col-lg-6 {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .milenia-pricing-table-media img {
        width: 100%;
        height: auto;
    }

    .milenia-entities--style-3 .milenia-entity-footer .milenia-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .milenia-content img,
    .milenia-pricing-table-media img,
    #milenia-footer img {
        max-width: 100%;
        height: auto;
    }

    .milenia-dropcap p {
        overflow-wrap: anywhere;
    }
}

/* ------------------------------------------------------------------
   14. Accommodation actions on narrow phones

   The two room actions are wider than the available content column
   below 400px. Give each full width there, so they remain balanced,
   tappable, and do not wrap as two narrow left-aligned buttons.
   ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .hotel-rooms-list .milenia-entity-footer {
        width: 100%;
    }

    .hotel-rooms-list .milenia-entity-footer .milenia-btn {
        margin-right: 0;
    }
}

@media (max-width: 399.98px) {
    .hotel-rooms-list .milenia-entity-footer .milenia-btn {
        flex-basis: 100%;
        width: 100%;
    }
}

/* ------------------------------------------------------------------
   15. Room detail content
   ------------------------------------------------------------------ */

.hotel-room-detail .icon-ao {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.hotel-room-detail .icon-ao span {
    min-width: 0;
    font-family: catamaran, sans-serif;
}

.hotel-room-detail .icon-ao i {
    flex: 0 0 auto;
    color: #c7a96d !important;
    font-size: 2.1875rem;
}

.hotel-room-detail .milenia-section--py-medium {
    padding-bottom: 3.5rem;
}

.hotel-room-detail .milenia-section--py-medium + .milenia-section[class*="milenia-colorizer--scheme-"]:not(.milenia-section--no-py).milenia-section--py-medium {
    padding-top: 3.5rem;
}

@media (max-width: 991.98px) {
    .hotel-room-detail .milenia-section--py-medium {
        padding-bottom: 2.5rem;
    }

    .hotel-room-detail .milenia-section--py-medium + .milenia-section[class*="milenia-colorizer--scheme-"]:not(.milenia-section--no-py).milenia-section--py-medium {
        padding-top: 2.5rem;
    }

    .hotel-room-detail .milenia-section > .row > [class*="col-lg"]:not([class*="col-md"]):not([class*="col-sm"]):not([class*="col-xs"]):not(:last-child) {
        margin-bottom: 1.5rem;
    }

}

/* ------------------------------------------------------------------
   16. Room slider caption on tablets

   The theme overlays the title/price block over a short tablet slider.
   Put that block directly below the image at tablet widths, retaining a
   solid background and in-flow navigation so the room photograph stays
   fully visible.
   ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1199.98px) {
    .milenia-rev-slider-wrapper .milenia-section--breadcrumb {
        position: relative;
    }

    .milenia-rev-slider-wrapper .milenia-section--breadcrumb.milenia-colorizer--scheme-dark .milenia-colorizer-bg-color {
        opacity: 1 !important;
    }

    .milenia-rev-slider-wrapper .milenia-section--breadcrumb .milenia-action-buttons {
        position: absolute;
        right: 1rem;
        bottom: 100%;
        left: auto;
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
   17. Room gallery lightbox trigger
   ------------------------------------------------------------------ */

.milenia-rev-slider-wrapper .rev_slider_wrapper {
    position: relative;
}

.room-gallery-lightbox-trigger {
    position: absolute;
    z-index: 25;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 0;
    color: #fff;
    background-color: rgba(28, 28, 28, 0.72);
    font: inherit;
    line-height: 1;
    cursor: zoom-in;
}

.room-gallery-lightbox-trigger:hover,
.room-gallery-lightbox-trigger:focus-visible {
    color: #fff;
    background-color: #1c1c1c;
}

.room-gallery-lightbox-trigger:focus-visible {
    outline: 3px solid #c7a96d;
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .room-gallery-lightbox-trigger {
        top: 0.75rem;
        right: 0.75rem;
        min-width: 44px;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .room-gallery-lightbox-trigger span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Touch screens do not have hover to reveal Fancybox's side controls. */
@media (max-width: 767.98px) {
    .fancybox-container .fancybox-navigation {
        position: absolute;
        z-index: 100000;
        inset: 0;
        pointer-events: none;
    }

    .fancybox-container .fancybox-navigation .fancybox-button {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

/* ------------------------------------------------------------------
   18. Interior page covers

   The breadcrumb used a fixed 357px height that crowded phones and
   left a dead band on wide screens. Keep the photograph full-bleed
   and scale the band with the viewport.
   ------------------------------------------------------------------ */

.hotel-page-cover {
    width: 100%;
    height: clamp(160px, 28vw, 357px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hotel-page .milenia-entity-header,
.hotel-page .milenia-entity-title,
.hotel-page .milenia-pricing-table-title,
.hotel-page .milenia-icon-box-title {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.hotel-page .milenia-content img,
.hotel-page .milenia-pricing-table-media img,
.hotel-page .milenia-gallery-new img {
    max-width: 100%;
    height: auto;
}

.hotel-page .milenia-gallery-new {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 20px);
    max-width: none;
    margin-left: -10px;
    margin-right: -10px;
}

.hotel-page .milenia-gallery-new .gl-item {
    box-sizing: border-box;
}

@media (max-width: 575.98px) {
    .hotel-page--facilities .milenia-gallery-new .gl-item,
    .hotel-page--gallery .milenia-gallery-new .gl-item,
    .hotel-page--meeting-amp-events .milenia-gallery-new .gl-item {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

.hotel-page .milenia-gallery-item-link {
    min-height: 44px;
}

.hotel-page .milenia-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hotel-meeting-intro,
.hotel-event-gallery,
.hotel-dining-list {
    margin-top: 2rem;
}

.hotel-meeting-intro,
.hotel-cms-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.hotel-meeting-intro table,
.hotel-cms-scroll table {
    width: 100%;
}

@media (max-width: 1024px) {
    .hotel-meeting-intro table,
    .hotel-cms-scroll table {
        min-width: 40rem;
    }

    /*
     * Charts / CMS graphics with baked-in text stay at natural size
     * so lettering stays readable; the wrapper scrolls sideways.
     */
    .hotel-page .hotel-meeting-intro img,
    .hotel-page .hotel-cms-scroll img,
    .hotel-page .milenia-entity-body img,
    .hotel-room-detail .hotel-cms-scroll img {
        max-width: none;
        width: auto;
        height: auto;
        display: block;
    }

    .hotel-meeting-intro,
    .hotel-cms-scroll,
    .hotel-page .milenia-entity-body,
    .hotel-room-detail .col-lg-9 {
        padding-bottom: 0.4rem;
    }
}

.hotel-event-gallery {
    margin-top: 3.5rem;
}

/* ------------------------------------------------------------------
   19. Dining detail slideshow

   Style-4 + owl-carousel--vadaptive sized the media to height:100% of
   a parent that had no height. Slides were position:absolute empty
   background divs, so the carousel collapsed to 1px and the large
   restaurant photos never appeared. Real <img> tags plus a defined
   media box keep the photos visible even before Owl initialises.
   ------------------------------------------------------------------ */

.hotel-page--dining-detail .milenia-entity-media {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hotel-page--dining-detail .milenia-entity-media > img,
.hotel-page--dining-detail .hotel-dining-slideshow img {
    display: block;
    width: 100%;
    height: auto;
}

.hotel-page--dining-detail .hotel-dining-slideshow .owl-stage-outer {
    height: auto !important;
}

.hotel-dining-slideshow:not(.owl-loaded) .milenia-entity-slide:not(:first-child) {
    display: none;
}

.hotel-page--dining-detail .milenia-entities--style-4 .milenia-entity::after,
.hotel-page--dining-detail .milenia-entities--style-4 .milenia-simple-slideshow::after,
.hotel-page--dining-detail .milenia-entities--style-4 .milenia-simple-slideshow::before,
.hotel-page--dining-detail .milenia-entities--style-4 .milenia-simple-slideshow > .owl-stage-outer::before {
    content: none;
}

.hotel-page--dining-detail .hotel-dining-slideshow .owl-nav .owl-prev,
.hotel-page--dining-detail .hotel-dining-slideshow .owl-nav .owl-next {
    min-width: 44px;
    min-height: 44px;
}

.hotel-page--dining-detail .milenia-sidebar .milenia-entity {
    margin-bottom: 1.25rem;
}

.hotel-page--dining-detail .milenia-sidebar img {
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .hotel-page--dining-detail .milenia-sidebar {
        margin-top: 1.5rem;
    }

    .hotel-page--dining-detail .milenia-entities--style-4 .milenia-entity::after {
        top: 1rem;
        right: 1rem;
        bottom: -1rem;
        left: 1rem;
    }
}

/* ------------------------------------------------------------------
   20. Special offers / dining listing cards
   ------------------------------------------------------------------ */

.hotel-page--special-offers .milenia-pricing-table {
    height: auto;
}

.hotel-page--special-offers .milenia-pricing-table-media a {
    display: block;
}

.hotel-page--dining .milenia-entities--style-14 .milenia-entity-media img {
    width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    .hotel-page .milenia-icon-boxes {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .hotel-page--facilities .milenia-grid--cols-6:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item {
        flex: 0 1 33.33333%;
        max-width: 33.33333%;
    }

    .hotel-page--meeting-amp-events .milenia-grid--cols-5:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item {
        flex: 0 1 33.33333%;
        max-width: 33.33333%;
    }
}

@media (max-width: 767.98px) {
    .hotel-page .milenia-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .hotel-page h1.milenia-entity-header {
        font-size: clamp(1.35rem, 6.2vw, 2.25rem);
        line-height: 1.2;
        white-space: normal;
    }

    .hotel-page--facilities .milenia-grid--cols-6:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item,
    .hotel-page--meeting-amp-events .milenia-grid--cols-5:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item {
        flex: 0 1 50%;
        max-width: 50%;
    }

    .hotel-page--contact .milenia-grid--cols-3:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item {
        flex: 0 1 100%;
        max-width: 100%;
    }

    .hotel-page .milenia-pricing-table-title:not(:last-child) {
        font-size: 1.35rem;
        line-height: 1.3;
    }
}

@media (max-width: 575.98px) {
    .hotel-page--facilities .milenia-grid--cols-6:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item,
    .hotel-page--meeting-amp-events .milenia-grid--cols-5:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item {
        flex: 0 1 50%;
        max-width: 50%;
    }

    .hotel-page .milenia-icon-box-title {
        font-size: 1rem;
    }

    .hotel-page--meeting-amp-events .milenia-icon-box-title {
        font-size: 0.9rem;
        line-height: 1.25;
    }
}

@media (max-width: 767.98px) {
    .hotel-page--meeting-amp-events .hotel-meeting-intro {
        margin-top: 1.25rem;
        margin-bottom: 1rem;
    }

    .hotel-page--facilities .milenia-icon-boxes,
    .hotel-page--meeting-amp-events .milenia-icon-boxes {
        padding: 0;
        margin-bottom: 1.75rem;
    }

    .hotel-page--facilities .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-grid:not(.owl-carousel):not(.milenia-grid--no-gutters) {
        margin-top: -0.35rem;
        margin-left: -0.4rem;
        margin-right: -0.4rem;
    }

    .hotel-page--facilities .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-grid:not(.owl-carousel):not(.milenia-grid--no-gutters) > .milenia-grid-item,
    .hotel-page--facilities .milenia-grid--cols-6:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item {
        flex: 0 1 50%;
        max-width: 50%;
        padding: 0.9rem 0.4rem 0.2rem;
    }

    .hotel-page--facilities .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-icon-box {
        padding: 0.25rem 0.2rem 0.4rem;
        height: 100%;
    }

    .hotel-page--facilities .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-icon-box-title,
    .hotel-page--facilities .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-icon-box-title:not(:last-child) {
        font-size: 0.8125rem;
        line-height: 1.3;
        letter-spacing: 0;
        margin-bottom: 0;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .hotel-page--facilities .milenia-icon-box .milenia-sign {
        margin-bottom: 0.3rem;
    }

    .hotel-page--facilities .milenia-icon-box .milenia-sign img {
        width: 2.75rem;
        height: auto;
    }

    .hotel-page--meeting-amp-events .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-grid:not(.owl-carousel):not(.milenia-grid--no-gutters) {
        margin-top: -0.35rem;
        margin-left: -0.4rem;
        margin-right: -0.4rem;
    }

    .hotel-page--meeting-amp-events .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-grid:not(.owl-carousel):not(.milenia-grid--no-gutters) > .milenia-grid-item,
    .hotel-page--meeting-amp-events .milenia-grid--cols-5:not(.milenia-grid--isotope):not(.owl-carousel) .milenia-grid-item {
        flex: 0 1 50%;
        max-width: 50%;
        padding: 0.9rem 0.4rem 0.2rem;
    }

    .hotel-page--meeting-amp-events .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-icon-box {
        padding: 0.25rem 0.2rem 0.4rem;
        height: 100%;
    }

    .hotel-page--meeting-amp-events .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-icon-box-title,
    .hotel-page--meeting-amp-events .milenia-icon-boxes.milenia-icon-boxes--style-2 .milenia-icon-box-title:not(:last-child) {
        font-size: 0.8125rem;
        line-height: 1.3;
        letter-spacing: 0;
        margin-bottom: 0;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .hotel-page--meeting-amp-events .milenia-icon-box .milenia-sign {
        margin-bottom: 0.3rem;
    }

    .hotel-page--meeting-amp-events .milenia-icon-box .milenia-sign img {
        width: 2.25rem;
        height: auto;
    }
}

/* ------------------------------------------------------------------
   21. Contact map and form
   ------------------------------------------------------------------ */

.hotel-contact-map {
    margin-top: 2.5rem;
    margin-bottom: 0;
}

.hotel-contact-map iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 450px;
    border: 0;
}

.hotel-contact-intro {
    overflow: hidden;
    max-width: 100%;
}

.hotel-page--contact .hotel-contact-intro > .milenia-section,
.hotel-page--contact .hotel-contact-intro > main {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.hotel-page--contact .hotel-contact-intro .milenia-grid:not(.owl-carousel):not(.milenia-grid--no-gutters),
.hotel-page--contact .milenia-icon-boxes .milenia-grid:not(.owl-carousel):not(.milenia-grid--no-gutters) {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}

.hotel-page--contact .hotel-contact-intro img {
    max-width: 100%;
    height: auto;
}

.hotel-contact-map iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 450px;
    border: 0;
}

.hotel-contact-form {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}

.hotel-contact-form-intro {
    margin-bottom: 1.75rem;
}

.hotel-contact-form .hotel-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1.5rem;
    align-items: start;
    position: relative;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.hotel-contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.hotel-contact-field--full,
.hotel-contact-field--actions {
    grid-column: 1 / -1;
}

.hotel-contact-form .hotel-contact-field > label {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: #3a3a3a;
    text-align: left;
}

.hotel-contact-form .honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hotel-contact-form .form-control,
.hotel-contact-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.hotel-contact-form textarea.form-control {
    min-height: 10rem;
    resize: vertical;
}

.hotel-contact-field--actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.25rem;
}

.hotel-contact-form .hotel-contact-field--actions .milenia-btn {
    min-width: 10.5rem;
}

.hotel-page--contact .milenia-icon-box img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .hotel-contact-map iframe {
        height: 240px;
    }

    .hotel-contact-form {
        padding-top: 2rem;
    }

    .hotel-contact-form .hotel-contact-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hotel-contact-form .col-lg-10 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Meeting room slideshows keep a visible photo at every width. */
.hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity-media {
    min-height: 18.75rem;
}

.hotel-page--meeting-amp-events .milenia-entity-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*
 * Tablet (768–991): keep the style-3 zigzag instead of stacking.
 * Site-fixes stacks style-3 below 992 because 4.9rem padding squeezed copy;
 * that also left odd rooms as text-then-image. Restore 50/50 with compact
 * padding so odd = text | photo, even = photo | text.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity {
        flex-direction: row;
        align-items: stretch;
        height: auto;
        min-height: 20rem;
    }

    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity-media,
    [class*="milenia-section--stretched-content"] .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity-media {
        flex: 1 1 50%;
        max-width: 50%;
        width: 50%;
        min-height: 20rem;
        height: auto;
        position: relative;
    }

    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity--format-slideshow .milenia-entity-media .owl-carousel--vadaptive,
    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-stage-outer,
    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-stage,
    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity--format-slideshow .owl-carousel--vadaptive .owl-item {
        height: 100% !important;
        min-height: 20rem;
    }

    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity--format-slideshow .milenia-entity-media .owl-carousel--vadaptive {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity-content,
    [class*="milenia-section--stretched-content"] .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity-content {
        flex: 1 1 50%;
        max-width: 50%;
        width: 50%;
        padding: 2rem 1.5rem;
        display: flex;
        align-items: center;
    }

    .hotel-page--meeting-amp-events .milenia-entities--style-3 .milenia-entity-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }
}

/* ------------------------------------------------------------------
   22. FAQ accordion and blog listing
   ------------------------------------------------------------------ */

.hotel-empty-note {
    text-align: center;
    margin: 2rem 0 0;
}

.hotel-faq-intro,
.hotel-blog-intro {
    margin-bottom: 2rem;
}

.hotel-faq-item {
    border-bottom: 1px solid #e5ddd2;
}

.hotel-faq-item summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.85rem 2.5rem 0.85rem 0;
    cursor: pointer;
    list-style: none;
    font-family: "Old Standard TT", serif;
    font-size: 1.15rem;
    line-height: 1.35;
    position: relative;
}

.hotel-faq-item summary::-webkit-details-marker {
    display: none;
}

.hotel-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: #8f1405;
}

.hotel-faq-item[open] summary::after {
    content: "−";
}

.hotel-faq-answer {
    padding: 0 0 1.25rem;
}

.hotel-blog-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 1.5rem;
}

.hotel-blog-card {
    background: #fff;
    border: 1px solid #eee;
}

.hotel-blog-card-media {
    display: block;
}

.hotel-blog-card-media img,
.hotel-blog-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.hotel-blog-card-body {
    padding: 1.25rem 1.25rem 1.5rem;
}

.hotel-blog-card-body time,
.hotel-blog-date {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6e625a;
}

.hotel-blog-card-title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
    line-height: 1.25;
}

.hotel-blog-card-title a {
    color: inherit;
}

.hotel-blog-back {
    margin-bottom: 0.75rem;
}

.hotel-blog-hero {
    margin: 1.5rem 0 1.75rem;
}

@media (max-width: 767.98px) {
    .hotel-blog-list {
        grid-template-columns: 1fr;
    }

    .hotel-faq-item summary {
        font-size: 1.05rem;
    }
}

/* ------------------------------------------------------------------
   23. Hide theme loaders (page-transition circle, spinner GIFs, slider spinner)
   ------------------------------------------------------------------ */

.milenia-preloader,
.milenia-preloader-circle,
.tp-loader,
.hotel-page [class*="milenia-section--stretched"].milenia-section--loading::after,
.hotel-page .milenia-grid--tabbed-loading::after,
.hotel-page .milenia-fullscreen-area:not(.milenia-fullscreen-area--ready)::after,
.hotel-page .milenia-gallery .ifw-container-loading::before {
    display: none !important;
}