/* Mobile content grid, measured from the Home About block.
   Own only section boundaries here; card padding, Heroes, overlays and
   TravelLine search widgets retain their component-specific layout. */
@media (max-width: 767px) {
    :root {
        --mobile-container-padding: 12px;
        --mobile-container-max-width: 430px;
        --mobile-content-width: min(var(--mobile-container-max-width), calc(100% - (2 * var(--mobile-container-padding))));
    }

    .site-main .container,
    .site-main :is(
        .home-about__container,
        .home-offers__container,
        .home-conference__container,
        .home-restaurants__header-container,
        .home-restaurants__venue-inner,
        .home-partners__container,
        .home-contacts__container,
        .home-rooms__inner,
        .single-room-gallery__slider-wrap
    ),
    .page-contacts .contacts-map-section,
    .site-footer__container {
        width: var(--mobile-content-width);
        max-width: var(--mobile-container-max-width);
        margin-inline: auto;
    }

    /* The booking page owns its outer padding; the provider owns the iframe. */
    .site-main.booking-page {
        padding-inline: max(var(--mobile-container-padding), calc((100% - var(--mobile-container-max-width)) / 2));
    }

    /* Keep the existing mobile header controls within the same content guides. */
    .site-header { --header-bar-width: var(--mobile-content-width); }
    .site-header .site-header__bar { padding-inline: 0; }
}