/* Responsive additions. Desktop rules intentionally remain in the existing stylesheet. */

/* Base safety */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
iframe,
video {
    max-width: 100%;
}

img {
    height: auto;
}

/* Revealed only in the Rooms-list mobile layout. */
.room-rate {
    display: none;
}

.mobile-contact-actions {
    display: none;
}

@media (max-width: 1279px) {
    .mobile-contact-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-contact-actions a {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        color: #ffffff;
    }

    .mobile-contact-actions .material-symbols-outlined {
        font-size: 22px;
    }

    .mobile-contact-actions svg {
        width: 21px;
        height: 21px;
    }
}

/* Home accommodations: keep the three desktop room cards equal in width. */
@media (min-width: 1024px) {
    #rooms-scroll-track > .min-w-\[400px\] {
        flex: 0 0 calc((100% - 48px) / 3);
        min-width: 0;
    }
}

input,
textarea,
select,
button {
    max-width: 100%;
}

@media (max-width: 1023px) {
    .px-margin-desktop {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 767px) {
    /* Shared mobile menu: a solid light panel keeps every destination readable. */
    #mobile-menu-panel {
        background-color: #ffffff !important;
    }

    #mobile-menu-panel a {
        color: #1c1b1b !important;
    }

    #mobile-menu-panel a[href^="/rooms/"] {
        color: #4e4639 !important;
    }

    #mobile-menu-panel .nav-link.is-active {
        color: #775a19 !important;
        border-color: #775a19 !important;
    }

    /* Rooms listing: attach each tariff to its room image on mobile. */
    html body .room-rate {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.94);
        color: #1c1b1b;
        font-family: Montserrat, sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    html body .room-rate strong {
        font-family: 'Bodoni Moda', serif;
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
    }

    html body .rooms-tariff {
        display: none;
    }

    /* Tailwind's runtime CSS is generated after this file; these rules deliberately
       use higher specificity to keep mobile adjustments in effect. */
    html body .px-margin-desktop,
    html body .px-margin-mobile {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    html body main > section.py-section-gap {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    html body .p-margin-desktop {
        padding: 48px 20px !important;
    }

    html body .text-display-lg {
        font-size: clamp(42px, 11vw, 56px) !important;
        line-height: 1.08 !important;
    }

    /* Home room cards: image edge-to-edge, readable content inset. */
    html body #rooms-scroll-track {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body #rooms-scroll-track .min-w-\[400px\] {
        min-width: 100vw !important;
    }

    html body #rooms-scroll-track .min-w-\[400px\] > .mt-stack-md {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Home offer imagery stays full-bleed; heading and overlay copy stay inset. */
    html body .home-offers {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html body .home-offers > .text-center {
        padding-left: 20px;
        padding-right: 20px;
    }

    html body .home-offers .grid.grid-cols-12 > :first-child .absolute.bottom-0 {
        padding: 24px 20px !important;
    }

    html body .home-editorial .p-margin-desktop {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Content containers */
    .px-margin-desktop,
    .px-margin-mobile {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Full-bleed media remains outside padded content. */
    main > header,
    main > section.relative.overflow-hidden:first-child,
    main > section.relative.h-screen {
        width: 100%;
        max-width: 100%;
    }

    /* Header and mobile navigation */
    #site-nav {
        padding: 8px 20px;
    }

    #site-logo {
        height: 56px;
    }

    #mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    #mobile-menu-panel {
        padding: 88px 20px 24px;
    }

    #mobile-menu-panel nav {
        gap: 18px;
    }

    #mobile-menu-panel a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Desktop twelve-column layouts become a readable single column. */
    .grid.grid-cols-12 {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid.grid-cols-12 > [class*="col-span-"],
    .grid.grid-cols-12 > [class*="col-start-"] {
        grid-column: auto;
        grid-column-start: auto;
    }

    /* Keep horizontal card rails inside the viewport and make each card usable. */
    .min-w-\[400px\] {
        min-width: calc(100vw - 40px);
    }

    /* Fixed-height editorial media can scale down without changing its desktop size. */
    .h-\[700px\] {
        height: 440px;
    }

    .h-\[600px\] {
        height: 420px;
    }

    .h-\[500px\] {
        height: 360px;
    }

    .h-\[400px\] {
        height: 320px;
    }

    .text-display-lg {
        font-size: clamp(40px, 11vw, 60px);
        line-height: 1.08;
    }

    .text-headline-lg {
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.15;
    }

    .text-headline-md {
        font-size: clamp(27px, 7vw, 34px);
        line-height: 1.2;
    }

    /* Room detail labels need to wrap instead of forcing the second column off-screen. */
    .grid.grid-cols-\[9rem_1fr\] {
        grid-template-columns: minmax(0, 7.25rem) minmax(0, 1fr);
        gap: 12px;
    }

    /* Form fields and card content must never overflow their column. */
    .input-luxury,
    input,
    textarea,
    select {
        width: 100%;
        box-sizing: border-box;
    }

    /* Footer links retain a compact two-column arrangement. */
    [data-footer-grid] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 40px;
    }

    [data-footer-grid] > :first-child,
    [data-footer-grid] > :last-child {
        grid-column: 1 / -1;
    }

    footer .h-\[350px\] {
        height: 260px;
    }
}

@media (max-width: 480px) {
    html body .px-margin-desktop,
    html body .px-margin-mobile {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body .p-margin-desktop {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body main > section.py-section-gap {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    html body .text-display-lg {
        font-size: clamp(40px, 11vw, 48px) !important;
    }

    html body #rooms-scroll-track .min-w-\[400px\] > .mt-stack-md,
    html body .home-offers > .text-center,
    html body .home-offers .grid.grid-cols-12 > :first-child .absolute.bottom-0,
    html body .home-editorial .p-margin-desktop {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .px-margin-desktop,
    .px-margin-mobile {
        padding-left: 16px;
        padding-right: 16px;
    }

    #site-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    #mobile-menu-panel {
        padding-left: 16px;
        padding-right: 16px;
    }

    .min-w-\[400px\] {
        min-width: calc(100vw - 32px);
    }

    .grid.grid-cols-\[9rem_1fr\] {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .grid.grid-cols-\[9rem_1fr\] > * {
        min-width: 0;
    }

    .h-\[700px\] {
        height: 380px;
    }

    .h-\[600px\] {
        height: 360px;
    }

    .h-\[500px\] {
        height: 320px;
    }

    .h-\[400px\] {
        height: 280px;
    }
}