/* Page-specific components for Views/Book/Index.cshtml (/book). The form itself is the shared
   _BookingForm partial (.booking-form-card in site-theme.css). */

/* Desktop: intro + details on the left, form on the right. Phones: intro, then the form, then details —
   people arrive here to book, so the form comes before the practical info. */
.book-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"intro form" "details form";gap:0 clamp(28px,4vw,56px);align-items:start}
.book-intro{grid-area:intro}
.book-form{grid-area:form}
.book-details{grid-area:details}
.book-ratings{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.book-facts{display:flex;flex-direction:column;gap:18px;margin-top:30px;max-width:30em}
.book-facts dt{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:4px}
.book-facts dt i{color:var(--color-brand);font-size:13px}
.book-facts dd{font-size:16px;line-height:1.55;color:var(--color-text-secondary)}
.book-facts a{color:var(--color-brand-dark);font-weight:600}
@media (max-width:860px){.book-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"intro" "form" "details";row-gap:28px}.book-facts{margin-top:4px}}