/* Arabians Studio v1.61 — homepage booking section containment.
 * Component-width based, deliberately independent of WordPress body classes,
 * device-toolbar scaling, and the legacy 6-column mobile Figma rules.
 * Only applies to the booking-section enquiry card on constrained layouts. */
body main section.booking-section .enquiry-layout {
  container-name: arabians-booking;
  container-type: inline-size;
}

/* Fallback for browsers without container queries and for mobile layouts. */
@media screen and (max-width: 1100px) {
  body main section.booking-section .enquiry-layout { grid-template-columns: minmax(0, 1fr) !important; }
  body main section.booking-section form.inline-enquiry { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  body main section.booking-section form.inline-enquiry > .form-grid {
    display: flex !important; flex-flow: column nowrap !important; align-items: stretch !important;
    gap: 16px !important; grid-template-columns: none !important; min-width: 0 !important;
  }
  body main section.booking-section form.inline-enquiry > .form-grid > label {
    display: flex !important; flex-direction: column !important; flex: 0 0 auto !important;
    grid-column: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    font-size: 16px !important; line-height: 1.4 !important; gap: 8px !important; box-sizing: border-box !important;
  }
  body main section.booking-section form.inline-enquiry > .form-grid > label > :is(input,select,textarea) {
    display: block !important; width: 100% !important; min-width: 0 !important;
    max-width: 100% !important; box-sizing: border-box !important;
    font-size: 16px !important; line-height: 1.35 !important;
    min-height: 46px !important; padding: 10px 12px !important;
  }
  body main section.booking-section form.inline-enquiry > button[type="submit"] {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important; justify-content: center !important;
  }
}

/* Constrained card width is more dependable than media viewport with zoomed Figma imports. */
@container arabians-booking (max-width: 980px) {
  form.inline-enquiry { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  form.inline-enquiry > .form-grid {
    display: flex !important; flex-flow: column nowrap !important; align-items: stretch !important;
    gap: 16px !important; grid-template-columns: none !important; width: 100% !important; min-width: 0 !important;
  }
  form.inline-enquiry > .form-grid > label {
    display: flex !important; flex-direction: column !important; flex: 0 0 auto !important;
    grid-column: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    font-size: 16px !important; line-height: 1.4 !important; gap: 8px !important; box-sizing: border-box !important;
  }
  form.inline-enquiry > .form-grid > label > :is(input,select,textarea) {
    display: block !important; width: 100% !important; min-width: 0 !important;
    max-width: 100% !important; box-sizing: border-box !important;
    font-size: 16px !important; min-height: 46px !important; padding: 10px 12px !important;
  }
  form.inline-enquiry > button[type="submit"] {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important; justify-content: center !important;
  }
}