/* booking.css — page-only rules, every selector prefixed .booking- (design-system.md §8.1).
   Page: header → gradient page-title band → one form card → footer (booking.md §2). */

/* §2.3 the booking form’s Gravity Forms stylesheet sets its own required/error red
   (#gform_2 .gfield_required_text{color:#ff4d4f}); the shared --c-danger keeps the
   Gravity Forms default used on the contact form. Scope the brighter red to this page. */
.page-booking{--c-danger:#ff4d4f}

/* §2.1 page-title band: the original band is 157px tall at 1440 (30px padding + 88px line box + 9px)
   and 97px at 390 (0 padding + 88px + 9px); the title line-height stays 88px at both sizes. */
.booking-title{padding:35px 10px 34px}   /* 157px band: glyphs sit 5px lower in the 88px line box than the shared band */
.booking-title h1{line-height:88px;font-weight:600}

/* §2.2 form section: transparent on the #f1f1f1 page background; card centred, max 825px wide.
   Net distances measured on the original: band → card 52px, card → footer 62px (desktop). */
.booking-main{padding:52px 0 62px}
.booking-card{width:100%;max-width:825px;margin:0 auto}

/* Field grid: three equal columns with 20px gaps (Gravity Forms gfield--width-third). */
.booking-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* Three-column range only: make each field a subgrid of the label / input / error rows so a
   label that wraps on a narrow column (“Amount of Students(Required)” below ~850px) keeps every
   input on the same baseline instead of stepping one row down. */
@media (min-width:768px){
  .booking-fields{grid-template-rows:auto auto auto;row-gap:0}
  .booking-fields .form-field{display:grid;grid-template-rows:subgrid;grid-row:span 3}
}

@media (max-width:1366px){
  .booking-main{padding:52px 20px 62px}
}

@media (max-width:768px){
  .booking-card .form-card{padding:30px 20px}
}

@media (max-width:767px){
  .page-title.booking-title{padding:4px 10px 5px}   /* 97px band; beats the shared ≤767 .page-title{padding:10px} in responsive.css */
  .booking-main{padding:44px 20px 40px}
  .booking-fields{grid-template-columns:minmax(0,1fr)}
}