.availability-page { padding-block: .75rem 1.75rem; }
.availability-page h1 { font-size: clamp(2rem, 3vw, 3rem); }
.availability-page > p { margin-top: .6rem; max-width: var(--reading); }
.availability-enquiry-action { margin-block:.85rem .9rem; }
.availability-terms, .calendar-help { color: var(--muted); font-size: 0.875rem; }
.availability-terms { max-width:var(--reading); margin-top:.6rem; }
.availability-terms p + p { margin-top:.35rem; }
.calendar-panel { max-width: 32rem; margin: 1rem auto; }
.calendar-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.calendar-heading h2 { white-space: nowrap; text-align: center; font-size: clamp(1.3rem, 4.7vw, 1.8rem); }
.calendar-arrow { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 2rem; text-decoration: none; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar-weekdays { text-align: center; font-size: 0.75rem; margin-bottom: 0.4rem; }
.calendar-day { aspect-ratio: 1; min-width: 0; position: relative; overflow:hidden; border: 1px solid var(--line); background-color:var(--paper); text-decoration: none; }
.calendar-occupancy-layer { position:absolute; z-index:0; inset:0; pointer-events:none; }
.calendar-occupancy-segment { position:absolute; inset:0; }
.calendar-occupancy-segment.departure { clip-path:polygon(0 0,100% 0,0 100%); }
.calendar-occupancy-segment.arrival { clip-path:polygon(100% 0,100% 100%,0 100%); }
.calendar-occupancy-segment.provisional { background-color:#ddd0ad; }
.calendar-occupancy-segment.booked { background-color:#687874; }
.day-number { position: absolute; z-index:2; left: 0.35rem; top: 0.1rem; font-size: 0.875rem; }
.top-booked .day-number,.bottom-booked .changeover-icon { color:#fff; }
.available { background-color: var(--paper); }
.provisional { background-color: #ddd0ad; }
.booked { background-color: #687874; color:#fff; border-color:#52615e; }
.calendar-day.historical { border-color: #d8dad8; background: #eceeec; color: #777d79; }
.calendar-day.changeover, .legend-cell.changeover { border-color: #819793; }
.calendar-day.changeover::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background-image:linear-gradient(to top left,transparent calc(50% - .75px),var(--calendar-diagonal,#819793b3) 50%,transparent calc(50% + .75px)); }
.calendar-day.top-booked.bottom-booked { --calendar-diagonal:#ffffffb3; }
.legend-cell.changeover { background-color:#edf1ec; background-image:linear-gradient(to top left,transparent calc(50% - .75px),#819793b3 50%,transparent calc(50% + .75px)); }
.changeover-icon { position: absolute; z-index:2; right: 0.2rem; bottom: 0; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--sea); }
a.calendar-day:hover, a.calendar-day:focus-visible { outline: 3px solid var(--sea); outline-offset: -3px; background-color: #e2ece7; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; font-size: 0.75rem; }
.calendar-legend li { display: flex; gap: 0.35rem; align-items: center; }
.legend-cell { position: relative; display: inline-block; width: 24px; height: 24px; border: 1px solid var(--line); text-align: center; }
.calendar-help { margin-top: 0.75rem; }
.stay-options { max-width: 38rem; margin: 1rem auto 0; }
.stay-options h2 { font-size: 1.6rem; }
.stay-option { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.65rem; width: 100%; min-height: 48px; padding: 0.25rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.stay-description { display: contents; }
.stay-duration, .stay-departure, .stay-price { white-space: nowrap; }
.stay-price { text-align: right; }
.stay-price span { font-size:.78em; font-weight:500; }
.stay-departure .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stay-enquire { min-height: 44px; padding: 0.5rem 0.75rem; white-space: nowrap; }
.stay-option:hover { background: #edf1ec; }
.stay-dialog { width: min(30rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: 0 1rem 4rem #172d2b33; overflow: hidden; }
.stay-dialog[open] { display: flex; flex-direction: column; }
.stay-dialog::backdrop { background: #172d2b80; }
.stay-dialog-toolbar { display: flex; justify-content: flex-end; flex: none; padding: 0.1rem 0.5rem 0; }
.stay-close { min-width: 44px; min-height: 44px; padding: 0.25rem 0.5rem; border: 0; background: transparent; color: var(--sea); font: inherit; cursor: pointer; }
.stay-close:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.stay-close span { font-size: 1.4rem; margin-left: 0.4rem; }
.stay-dialog-content { padding: 0 1rem 0.75rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; -webkit-overflow-scrolling: touch; }
.stay-dialog .stay-options { margin: 0; max-width: none; }
.stay-dialog h2 { font-size: 1.35rem; margin: 0 0 0.5rem; }
body.stay-modal-open { position: fixed; top: var(--stay-scroll-top); inset-inline: 0; overflow: hidden; }
@media (max-width: 39.999rem) {
    .availability-page { padding-block:.5rem 1.25rem; font-size:.9375rem; }
    .availability-page h1 { line-height:1.1; }
    .availability-page > p:first-of-type { margin-top:.35rem; font-size:.84rem; line-height:1.42; }
    .availability-enquiry-action { margin-block:.55rem .45rem; text-align:center; }
    .calendar-panel { margin:.5rem auto .65rem; }
    .calendar-heading { margin-bottom:.45rem; }
    .calendar-legend { margin-top:.65rem; gap:.35rem .75rem; }
    .stay-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); font-size: 0.9375rem; }
    .stay-dialog-content { padding: 0 0.75rem 0.65rem; }
    .stay-dialog h2 { font-size: 1.2rem; }
    .stay-option { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stay enquire" "price enquire"; column-gap: 0.75rem; row-gap: 0; min-height: 0; padding-block: 0.2rem; font-size: 0.875rem; line-height: 1.2; }
    .stay-description { display: flex; flex-wrap: wrap; grid-area: stay; align-items: baseline; gap: 0 0.35rem; min-width: 0; }
    .stay-price { grid-area: price; justify-self: start; }
    .stay-enquire { grid-area: enquire; align-self: stretch; justify-self: end; }
}
.price-components { font-size: 0.875rem; margin-block: 0.5rem; }
.price-components li { margin-top: 0.5rem; }
.price-components small { display: block; color: var(--muted); }