.availability-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:start}
.availability-intro p{color:var(--muted)}
.availability-calendar{padding:clamp(14px,3vw,28px);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ink-2);min-width:0}
.availability-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:22px}
.availability-nav h3{margin:0;font:500 clamp(21px,3vw,30px)/1.2 var(--serif);text-align:center}
.availability-nav button{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--cream);cursor:pointer}
.availability-nav button:disabled{opacity:.3;cursor:default}
.availability-week,.availability-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.availability-week{margin-bottom:8px;text-align:center;color:var(--muted);font-size:12px}
.availability-day{min-height:59px;min-width:0;border:1px solid var(--line-2);border-radius:7px;background:#ffffff06;color:var(--cream);cursor:pointer;padding:5px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.availability-day small{font:400 9px/1.4 var(--sans);margin-top:4px}
.availability-day[data-state=available]{color:#c2e1c9;background:#2f654f40;border-color:#62987780}
.availability-day[data-state=limited]{color:#ffe4a1;background:#8c661540;border-color:#d4a44699}
.availability-day[data-state=booked]{color:#b6b4b0;background:#77777725;text-decoration:line-through}
.availability-day[data-state=past],.availability-day[data-state=tooEarly]{opacity:.3}
.availability-day:disabled{cursor:default}
.availability-day[aria-pressed=true]{outline:2px solid var(--cream);outline-offset:1px}
.availability-day[aria-current=date]>span{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.availability-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:22px 0;font-size:12px;color:var(--muted)}
.availability-legend span{display:flex;align-items:center;gap:7px}
.availability-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#f2eadc66}
.availability-legend .available{background:#8ec49c}.availability-legend .limited{background:#e3b853}.availability-legend .booked{background:#8c8c8c}
.availability-selection{font-size:15px;min-height:3.4em;margin:18px 0 10px}
.availability-selection:empty{min-height:0;margin:8px 0 0}
.availability-selection[data-state=limited]{color:#ffe4a1}
.availability-calendar .button{margin-top:4px;width:100%}
#availability-freshness{font-size:12px;color:var(--muted);margin:16px 0 0}
@media(max-width:800px){.availability-layout{grid-template-columns:1fr}.availability-calendar{max-width:620px;width:100%;margin-inline:auto}}
@media(max-width:380px){.availability-calendar{padding:10px}.availability-day{min-height:53px}.availability-day small{font-size:8px}}

/* Booking carousel: calendar, then the inquiry form, with a way back */
.book-carousel{min-width:0}
.book-slides{display:grid;gap:24px}
.book-slide{min-width:0}
.book-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.book-top em{font:italic 400 clamp(18px,2.4vw,22px)/1.3 var(--serif);color:var(--gold)}
.book-slide form{display:grid;gap:16px;padding:clamp(18px,3vw,28px)}
.book-slide form button:disabled{opacity:.6;cursor:wait}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.availability-calendar .button:disabled{opacity:.4;cursor:not-allowed}
.is-carousel .book-slides{gap:0;overflow:hidden;margin:-4px;padding:4px}
.is-carousel .book-slide{grid-area:1/1;transform:translateX(calc((var(--i) - var(--cur,0))*110%));transition:transform .5s var(--ease),opacity .4s}
.is-carousel .book-slide:nth-child(1){--i:0}.is-carousel .book-slide:nth-child(2){--i:1}
.is-carousel .book-slide[inert]{opacity:0;pointer-events:none}
/* The hidden slide leaves the layout, so the box is only as tall as the slide in view: the calendar no longer
   reserves the long form's height (the empty gap above the FAQ on phones). */
.is-carousel .book-slides{position:relative}
.is-carousel .book-slide[inert]{position:absolute;inset:0 0 auto}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.is-carousel .book-slide{transition:none}}

/* Desktop: a shorter enquiry form (owner request 2026-10-16). Fields flow two to a row in reading order
   (name, email / phone, date / venue, event / hours, notes), the notes box starts one line tall, and spacing is a
   little tighter. Phones and tablets keep the existing tall layout (owner: "one for desktop, one for mobile"). */
@media(min-width:981px){
  .book-slide form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .book-slide form>*{grid-column:1/-1}
  .book-slide form .field-row{display:contents}
  .book-slide form .field{grid-column:auto;gap:6px}
  .book-slide form textarea{min-height:0;height:calc(1.7em + 26px);resize:vertical}
  .book-slide form input,.book-slide form select,.book-slide form textarea{padding-block:12px}
  .book-slide form .fine{line-height:1.5}
  .book-slide form .fine+.fine{margin-top:-8px}
}

/* iPhone: Safari gives date inputs a native minimum width and centres the value, so the event-date box ran past the
   form's right edge. Drop the native look so it obeys width:100%, and left-align the value like the other fields. */
input[type="date"]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:calc(1.7em + 30px)}
input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.enquiry-sent{margin:0 0 18px;padding:14px 18px;border:1px solid var(--gold);border-radius:var(--radius);background:#d9b98014;color:var(--cream);font-size:15px}