/* Landing heroes: large logo only (same ballpark as .mid-header-wrap .site-logo max-width: 200px) */

.landing-hero-top.landing-hero-top--logo-only {
    display: block;
    margin-bottom: 1.25rem;
}

.landing-hero-top__brand {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}

.landing-hero-top__brand:hover {
    opacity: 0.95;
}

/* Light tray so logo reads clearly on dark photography */
.landing-hero-top__logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.landing-hero-top--light .landing-hero-top__logo-wrap {
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.06);
}

.landing-hero-top__logo {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

@media (min-width: 992px) {
    .landing-hero-top__logo {
        max-width: 150px;
    }
}

@media (max-width: 575px) {
    .landing-hero-top__logo {
        max-width: min(150px, 78vw);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   reCAPTCHA RESPONSIVE FIX — all landing pages
   ───────────────────────────────────────────────────────────────────
   Problem:
     Google's reCAPTCHA v2 widget has a hard-coded 304 × 78 px iframe.
     CSS transform: scale() shrinks it VISUALLY but does NOT shrink its
     layout footprint — the browser still reserves 304 px of horizontal
     space, causing the page to overflow on phones.

   Solution (two-part):
   1. overflow: hidden  on the wrapper div (HTML change) clips the visible
      bleed so nothing pokes outside the card.
   2. Negative margin-right on .g-recaptcha collapses the surplus layout
      space left after scaling, so the browser treats the element as only
      (304 × scale) px wide in the flow.

   Formula:
     scale S  →  visible width = 304·S px
                 surplus       = 304·(1−S) px
                 margin-right  = −304·(1−S) px
                 height        = 78·S px  (prevents layout gap below)
   ═══════════════════════════════════════════════════════════════════ */

/* Base: clip overflow (wrapper handles this, but add here as safety net) */
.g-recaptcha {
    transform-origin: top left;
    max-width: 100%;
}

/* ── 640 px – 1279 px : medium tablet / landscape phone
      scale = 0.90  →  visible = 274 px, surplus = 30 px              */
@media (max-width: 1279px) and (min-width: 640px) {
    .g-recaptcha {
        transform: scale(0.90);
        height: 70px;              /* 78 × 0.90 */
        margin-right: -30px;       /* −304 × 0.10 */
    }
}

/* ── ≤ 639 px : portrait phone (most common breakpoint)
      scale = 0.82  →  visible = 249 px, surplus = 55 px              */
@media (max-width: 639px) {
    .g-recaptcha {
        transform: scale(0.82);
        height: 64px;              /* 78 × 0.82 */
        margin-right: -55px;       /* −304 × 0.18 */
    }
}

/* ── ≤ 400 px : compact phones (iPhone SE, Galaxy A series)
      scale = 0.74  →  visible = 225 px, surplus = 79 px              */
@media (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.74);
        height: 58px;              /* 78 × 0.74 */
        margin-right: -79px;       /* −304 × 0.26 */
    }
}

/* ── ≤ 360 px : very small phones
      scale = 0.68  →  visible = 207 px, surplus = 97 px              */
@media (max-width: 360px) {
    .g-recaptcha {
        transform: scale(0.68);
        height: 53px;              /* 78 × 0.68 */
        margin-right: -97px;       /* −304 × 0.32 */
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FORM PANEL PADDING FIX — all 5 landing pages
   Tailwind p-8 (32 px) + container px-8 (32 px) = 64 px each side,
   leaving only ~247 px for content on a 375 px phone.
   Reduce to 20 px on mobile.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

    /* baby-seat / wheelchair / group — dark Tailwind glass panel */
    .backdrop-blur-2xl.p-8 {
        padding: 1.25rem !important;
    }

    /* airport-transfer — white glass panel */
    .backdrop-blur-md.p-8 {
        padding: 1.25rem !important;
    }

    /* maxi-cab Bootstrap booking-card */
    .booking-card {
        padding: 0.75rem !important;
    }

    /* Outer container horizontal padding */
    .container.mx-auto.px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}