/* Full-width page layout with the existing 16 px side gutters. */
.site-container {
    width: calc(100% - 32px);
    max-width: none;
}

/* The original desktop calendar was 1180 - 360 - 32 = 788 px wide.
   Keep that maximum and give additional desktop space to the request form. */
@media (min-width: 981px) {
    .booking-layout {
        grid-template-columns: minmax(0, 788px) minmax(360px, 1fr);
    }
}

.booking-layout > * {
    min-width: 0;
}

.booking-layout > aside {
    container-type: inline-size;
}

.booking-request {
    position: static;
}

.booking-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.booking-request fieldset[hidden] {
    display: none;
}

.booking-fields,
.booking-extras,
.booking-declarations {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1.25rem;
}

.booking-fields > label {
    min-width: 0;
}

.booking-field-wide {
    grid-column: 1 / -1;
}

.booking-request fieldset {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(126, 211, 33, .25);
    border-radius: 4px;
}

.booking-request .checkbox-label {
    align-items: flex-start;
}

.booking-request .checkbox-label input {
    flex: 0 0 auto;
    margin-top: .25rem;
}

.booking-request .requirements-list {
    columns: 1;
}

.booking-request .requirements-list li {
    break-inside: avoid;
}

/* Respond to the form's width, including on tablets with a stacked layout. */
@container (min-width: 420px) {
    .booking-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 560px) {
    .booking-extras,
    .booking-declarations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-request .requirements-list {
        columns: 2;
    }
}