/*
 * Responsive fixes.
 *
 * Everything here was measured on the running site rather than guessed: each
 * block names the width it was found at and what it was doing.
 *
 * Logical properties throughout, so one file serves the LTR and RTL
 * stylesheets alike.
 */

/* ---- Horizontal overflow --------------------------------------------- */

/*
 * /destination scrolled 9px wider than the window at every width below lg.
 *
 * `.row.gx-5` sets a 48px gutter, which Bootstrap implements as -24px side
 * margins on the row. The container only has 15px of padding, so the row hung
 * 9px past it on each side. A 48px gutter is far too wide for a phone anyway;
 * 30px gives -15px margins, exactly cancelling the container padding.
 */
@media (max-width: 991.98px) {
    .container > .row.gx-5,
    .container > div > .row.gx-5 {
        --bs-gutter-x: 1.875rem;
    }
}

/*
 * /about scrolled 30px wider at tablet width.
 *
 * The partner slider's arrows are positioned at -45px, outside the slider, so
 * they sit in the container's side margin. Once the container goes full width
 * that margin is gone and the right arrow lands past the viewport edge. Keep
 * them inside the track below the width where there is room for them.
 */
@media (max-width: 1199.98px) {
    .client-slider .slick-prev {
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
    }

    .client-slider .slick-next {
        inset-inline-end: 0 !important;
        inset-inline-start: auto !important;
    }
}

/* ---- Tap targets ------------------------------------------------------ */

/*
 * The mobile menu trigger -- the only way to navigate the site on a phone --
 * measured 17px tall, because `.slicknav_menu .slicknav_btn` zeroes its
 * padding. Pad it out to a 44px target without moving the bar it sits in: the
 * padding is vertical, and the row is centred, so the icon stays put.
 */
@media (max-width: 991.98px) {
    .slicknav_menu .slicknav_btn {
        align-items: center;
        display: flex;
        min-height: 44px;
        padding-block: 0;
        padding-inline: 4px;
    }
}

/*
 * Footer links sat on 17-22px line boxes, so on a phone they were a row of
 * targets smaller than a fingertip and close enough together to hit the wrong
 * one. Space them out; this is the footer only, so it does not touch inline
 * links in body copy.
 */
@media (max-width: 991.98px) {
    .site-footer .menu li a,
    .site-footer .widget ul li a {
        display: inline-block;
        padding-block: 7px;
    }

    .site-footer .widget ul li + li {
        margin-top: 2px;
    }
}

/* ---- Readability ------------------------------------------------------ */

/*
 * Nothing on a phone should be under 12px. These were the only two places
 * measured below it.
 */
@media (max-width: 575.98px) {
    .mobile-booking-bar__label {
        font-size: 12px;
    }

    .detail-card small,
    .booking-step small {
        font-size: 12px;
    }
}

/* ---- Page banner ------------------------------------------------------ */

/*
 * The banner at the top of all 27 inner pages.
 *
 * Its height came entirely from fixed padding on the content -- 120px above
 * and 135px below -- so it measured the same 431px at 576px wide as at 2560px.
 * On a tablet that is 42% of the screen before any content shows; on a wide
 * monitor the same 431px is a letterbox slice of the photo. The title had one
 * breakpoint, jumping 30px to 60px at 575px with nothing in between.
 *
 * Height and type now scale with the viewport. The padding stays as breathing
 * room around the title rather than being what sets the height, and the
 * content centres itself in whatever height the clamp lands on.
 */
.inner-baner-container {
    align-items: center;
    display: flex;
    justify-content: center;
    /*
     * Header height plus a band for the title, rather than one flat number.
     * The fixed header overlays the banner and banner-offset.js pads for it;
     * on a tablet that header wraps to two rows and 164px of a 259px banner
     * was header, leaving 95px for the title. The band is now never under
     * 140px at any width, and the fallback keeps this sane if the script
     * has not run yet.
     */
    min-height: calc(var(--banner-header-offset, 110px) + clamp(140px, 14vw + 60px, 310px));
}

.inner-baner-container .inner-banner-content,
.inner-baner-container .inner-banner-content.container {
    padding-bottom: 24px;
    padding-top: 24px;
    width: 100%;
}

.inner-baner-container .page-title {
    /* Reaches the original 60px around 1900px and eases down from there. */
    font-size: clamp(28px, 2.2vw + 18px, 60px);
    /* A long destination name should wrap inside the banner, not widen it. */
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    /* Overrides the 80px the theme sets at this width. */
    .inner-baner-container .inner-banner-content {
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .inner-baner-container .page-title {
        font-size: clamp(26px, 7vw, 34px);
    }
}