/* Bookings keeps the Request a Call form component, but gives the page its own composition. */
.booking-editorial-layout { display:block; min-height:auto; }

.booking-editorial-layout .call-main {
    min-height:0;
    padding:clamp(76px, 9vw, 156px) clamp(34px, 8vw, 150px) clamp(84px, 9vw, 154px);
    background:
        linear-gradient(90deg, rgba(8, 9, 8, .99), rgba(11, 12, 10, .94)),
        url("Images/Bookings.jpeg") center / cover;
}

.booking-editorial-layout .call-intro {
    max-width:950px;
    margin:0 auto;
}

.booking-editorial-layout .call-intro h1 {
    max-width:860px;
    font-size:clamp(48px, 5.1vw, 84px);
}

.booking-editorial-layout .call-form {
    width:min(960px, 100%);
    margin:58px auto 0;
}

.booking-travel-fields { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:25px 20px; margin:0; padding:10px 0 3px; }
.booking-travel-fields[hidden] { display:none; }
.booking-mobility-fields, .booking-mobility-details { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:25px 20px; margin:8px 0 2px; padding:28px 0 3px; }
.booking-mobility-fields[hidden], .booking-mobility-details[hidden] { display:none; }
#mobilityServiceField[hidden] { display:none !important; }
.booking-mobility-details .call-field[hidden] { display:none !important; }

.booking-mobility-fields { margin:0; padding:0; }
.booking-mobility-details { margin:0; padding:12px 0 3px; }
.booking-travel-fields .call-field:has(input[type="date"]) > span,
.booking-mobility-details .call-field:has(input[type="date"]) > span { top:0; font-size:12px; transform:none; }
.booking-travel-fields input[type="date"],
.booking-mobility-details input[type="date"] { min-height:48px; padding-top:20px; }

.booking-editorial-layout .call-aside {
    display:none;
}

.booking-editorial-layout .call-aside-panel {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(260px, .78fr);
    gap:clamp(38px, 8vw, 160px);
    max-width:1180px;
    margin:0 auto;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    transform: none;
}

.booking-editorial-layout .call-next > h2::before {
    display: block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .62);
    font: 600 10px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: .25em;
    text-transform: uppercase;
    content: "What happens after you enquire";
}

.booking-editorial-layout .call-next > h2 { max-width:350px; }
.booking-editorial-layout .call-testimonial { align-self:end; margin:0; }
.booking-editorial-layout .call-testimonial-slides { min-height:115px; }

@media (max-width: 800px) {
    .booking-editorial-layout .call-aside {
        min-height:0;
    }

    .booking-editorial-layout .call-aside-panel { grid-template-columns:1fr; }

}

/* Prevent the retired booking markup from rendering or reserving space. */
body.call-page > div[hidden] {
    display: none !important;
}

/* Every conditional booking field uses the same full-width rule as the main form. */
.booking-travel-fields,
.booking-mobility-fields,
.booking-mobility-details {
    grid-template-columns: minmax(0, 1fr);
}

.booking-travel-fields > .call-field,
.booking-mobility-fields > .call-field,
.booking-mobility-details > .call-field {
    grid-column: 1 / -1;
    width: 100%;
}

/* Conditional fields keep the same full-width underline on small screens. */
@media (max-width: 700px) {
    .booking-editorial-layout .booking-travel-fields,
    .booking-editorial-layout .booking-mobility-fields,
    .booking-editorial-layout .booking-mobility-details,
    .booking-editorial-layout .booking-travel-fields > .call-field,
    .booking-editorial-layout .booking-mobility-fields > .call-field,
    .booking-editorial-layout .booking-mobility-details > .call-field {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    /* The phone pair is a desktop row. On mobile each field gets the
       same full-length underline as every other booking field. */
    .booking-editorial-layout .call-phone-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-editorial-layout .call-phone-group > .call-field {
        width: 100%;
        min-width: 0;
    }
}