/* Alleen de ruimtepagina: één materiaal, typografie en rustige agenda. */
.rooms-page .page-main,
.rooms-page .page-main > section { background: var(--ivoor); }
/* Uitzondering: de rondleidingsband is bewust blauw, zie ruimtes.html. */
.rooms-page .page-main > section.cta-band { background: var(--accent); margin-bottom: 0; }
.rooms-page .room-slideshow,
.rooms-page .room-slideshow__frame { background: transparent; }
.rooms-page .room-slideshow__frame { aspect-ratio: 3 / 4; margin-inline: 2.75rem; }
.rooms-page .room-slideshow__slide img {
  box-shadow: 0 18px 38px -22px rgba(26, 26, 24, .34), 0 2px 8px -4px rgba(26, 26, 24, .2);
}
.rooms-page .meeting-room__header { margin-bottom: 1.5rem; }
.rooms-page .office-room { display: block; }
.rooms-page .office-room__header { max-width: 42rem; }
.rooms-page .office-room__layout { display: grid; gap: 2rem; align-items: start; }
.rooms-page .office-room__copy { padding-top: 1rem; }
.rooms-page .office-room__header h3 { margin: .5rem 0 1rem; color: var(--blauw); font-size: clamp(1.75rem, 3vw, 2.5rem); }
.rooms-page .office-room__copy h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.rooms-page .office-room__copy .room-band__intro { font-size: var(--body); line-height: 1.65; }
@media (min-width: 1000px) {
  .rooms-page .meeting-room__layout,
  .rooms-page .office-room__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
  .rooms-page .meeting-room--flip .meeting-room__story { grid-column: 2; grid-row: 1; }
  .rooms-page .meeting-room--flip .booking-panel { grid-column: 1; grid-row: 1; }
}
.rooms-page .booking-panel--inline { padding-top: .25rem; }
.rooms-page .booking-panel--inline .booking-group { padding-block: 1.25rem; }
.rooms-page .booking-panel--inline .booking-group:first-of-type > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rooms-page .booking-panel--inline .booking-when { margin-top: 0; gap: 1.25rem; }
.rooms-page .booking-panel--inline .field-row { margin-top: .75rem; }
.rooms-page .booking-panel--inline .field input { min-height: 44px; padding-inline: 0; background: transparent; }
.rooms-page .booking-panel--inline .booking-summary { margin-block: .25rem 1rem; gap: .75rem; }
.rooms-page .booking-panel--inline .booking-summary__meta { text-transform: none; letter-spacing: 0; }
.rooms-page .booking-panel--inline .slot { background: transparent; border-color: transparent; border-bottom-color: var(--rule); min-height: 3.5rem; }
.rooms-page .booking-panel--inline .slot.is-selected { background: var(--blauw); color: var(--ivoor); border-radius: .35rem; }
.rooms-page .booking-panel--inline .slot:disabled { color: var(--text-muted); opacity: .55; }
.rooms-page .booking-panel--inline .slot:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.rooms-page .booking-panel--inline .v-mark-link { border: 0; padding-left: 0; }
.calendar-native-date { display: none; }
.room-calendar { min-width: 0; }
.room-calendar__toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.room-calendar__month { color: var(--blauw); font-size: 1.35rem; font-weight: 600; text-transform: capitalize; }
.room-calendar__navigation { display: flex; align-items: center; }
.room-calendar button {
  appearance: none; border: 0; background: transparent; color: var(--blauw);
  font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation;
  min-height: 44px; min-width: 44px; padding: .35rem;
}
.room-calendar__navigation button { display: grid; place-items: center; }
.room-calendar__navigation svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.room-calendar__weekdays,
.room-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.room-calendar__weekdays { color: var(--text-muted); font-size: .875rem; margin-bottom: .35rem; }
.room-calendar__day { position: relative; justify-self: center; width: 44px; height: 44px; border-radius: 50%; font-variant-numeric: tabular-nums; }
.room-calendar__day.has-request::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; bottom: 5px; left: calc(50% - 1.5px); }
.room-calendar .is-outside { color: var(--text-muted); }
.room-calendar [aria-current="date"] { box-shadow: inset 0 0 0 1px var(--blauw); }
.room-calendar [aria-pressed="true"] { background: var(--blauw); color: var(--ivoor); }
.room-calendar button:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
.room-calendar button:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.room-calendar button:active:not(:disabled) { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .room-calendar button:hover:not(:disabled):not([aria-pressed="true"]) { background: color-mix(in srgb, var(--blauw) 7%, transparent); border-radius: 50%; }
}
@media (max-width: 360px) {
  .room-calendar button { min-width: 36px; }
  .room-calendar__day { width: 36px; }
  .room-calendar__month { font-size: 1.125rem; }
  .rooms-page .room-slideshow__frame { margin-inline: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .room-calendar button:active { transform: none; }
  .rooms-page .room-slideshow__frame { transform: none !important; }
}
@media (prefers-contrast: more) {
  .room-calendar button:disabled { opacity: 1; text-decoration: line-through; }
}