/* =========================================================
   Pages: Portfolio galleries + Airbnb-style room listings
   ========================================================= */

/* --- Placeholder photo tile (replace <img> later) --- */
.photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-alt);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo__label {
  padding: 0 16px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.photo--tall { aspect-ratio: 3 / 4; }

/* --- Portfolio gallery sections --- */
.gallery-section {
  padding: 56px 0;
}

.gallery-section:nth-child(even) {
  background: var(--surface);
}

.gallery-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.gallery-grid .photo--feature {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}

@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid--duo { grid-template-columns: repeat(2, 1fr); }
}

/* --- Section nav (anchor links for the floors) ---
   Geen chip-randen en geen onderrand meer (zie item 2, "alle strepen weg");
   de eigen --surface-vulling scheidt de balk al van wat eronder scrolt.
   top staat op --header-h zodat hij direct onder de vaste header plakt. */
.floor-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: 14px 0;
  background: var(--surface);
}

.floor-nav a {
  border-bottom: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .floor-nav a:hover {
    color: var(--accent);
  }
}

/* Het ruimteregister (.room-list, .room-listing, .room-price) is op
   24 augustus 2026 verwijderd samen met vergaderruimtes.html en de tarieven.
   De ruimtes staan nu als volle banden op ruimtes.html; zie .room-band
   onderaan dit bestand. */

/* ============================================================
   Bronnenpagina (bronnen.html)
   Verantwoording van het beeldmateriaal, een tabel per set. De rijen
   worden gegenereerd door tools/build-gallery.js uit data/photos.json,
   zodat de vermelding bij een foto en de vermelding op deze pagina niet
   uit elkaar kunnen lopen. ============================================ */
.bronnen > h2 {
  margin: var(--space-16) 0 var(--space-6);
}

.bronnen > h2:first-child {
  margin-top: 0;
}

.bronnen p {
  max-width: 68ch;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Een brede tabel mag nooit de hele pagina laten meeschuiven: de wrapper
   scrolt zelf. min-width houdt de kolommen leesbaar zolang er ruimte is,
   en dwingt daaronder de horizontale scroll binnen dit vlak af. */
.bronnen__table-wrap {
  margin: 0 0 var(--space-8);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.bronnen__table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--small);
  text-align: left;
}

.bronnen__table th,
.bronnen__table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.bronnen__table thead th {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--meta);
  font-variation-settings: "opsz" 8;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bronnen__table tbody th {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--body);
  font-weight: 600;
}

.bronnen__table td {
  color: var(--text-muted);
}

.bronnen__table td:nth-child(2) {
  white-space: nowrap;
}


/* ============================================================
   Ruimteband (.room-band)

   Eén strook per ruimte over de volle containerbreedte, om en om links en
   rechts. Verving het register van kaarten in drie kolommen: met zeven
   ruimtes en echte fotografie is een band de enige vorm waarin een foto
   groot genoeg staat om iets te laten zien. ============================ */
.room-bands {
  display: grid;
  gap: var(--space-section-tight);
}

/* De echte kamerfoto’s blijven volledig zichtbaar, ook de portretopnamen.
   Geen parallax op bediening; een klik op het beeld bladert zelf verder. */
.room-slideshow { position: relative; min-width: 0; }
.room-slideshow__frame {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface-alt);
}
.room-slideshow__slide { display: block; height: 100%; }
.room-slideshow__slide[hidden],
.room-slideshow [hidden] { display: none; }
.room-slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.room-slideshow__image-next {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.room-slideshow__controls {
  position: absolute;
  inset: 50% 0 auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
}
.room-slideshow__controls button {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: .5rem;
  border: 0;
  background: transparent;
  color: var(--blauw);
  font-family: var(--font-action);
  font-weight: var(--font-action-weight);
  letter-spacing: var(--font-action-tracking);
  font-size: 1rem;
  cursor: pointer;
  pointer-events: auto;
}
.room-slideshow__controls svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.room-slideshow__controls button:active { transform: scale(.97); }
.room-slideshow button:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; }
.room-slideshow [data-slide-count] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) {
  .room-slideshow__controls button:active { transform: none; }
}

/* Foto en beschrijving links, de eigen planner direct ernaast. */
.meeting-rooms { display: grid; gap: var(--space-section); }
.meeting-room__header { max-width: 42rem; margin-bottom: 2rem; }
.meeting-room { scroll-margin-top: calc(var(--header-h) + 2rem); }
.meeting-room__header h3 { margin: .5rem 0 1rem; color: var(--blauw); font-size: clamp(1.75rem, 3vw, 2.5rem); }
.meeting-room__header p { margin: 0; }
.meeting-room__layout { display: grid; gap: 2rem; align-items: start; }
.meeting-room__story { min-width: 0; }
.meeting-room__story .room-band__specs { margin-top: 1.5rem; }
.room-coming-soon { margin: 2.5rem 0 0; color: var(--text-muted); }
#kamers .room-bands { margin-top: 2.5rem; }
@media (min-width: 1000px) {
  .meeting-room__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
}

.room-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-block);
  align-items: center;
}

@media (min-width: 900px) {
  .room-band {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
  }

  /* Omkeren met order, niet met een tweede raster of tweede markup. De
     kolomverhouding kantelt mee, anders zou het beeld in de smalle track
     landen en de tekst in de brede. */
  .room-band--flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .room-band--flip .room-band__media { order: 2; }
  .room-band--flip .room-band__copy  { order: 1; }
}

/* --- Twee ruimtes naast elkaar (.room-bands--paar) --------------------------

   De volle band is de juiste vorm zolang er iets te vertellen valt per ruimte.
   Voor de twee kamers te huur is dat niet zo: er zijn geen maten en geen
   capaciteit, dus de band vroeg een schermlengte scrollen voor twee regels
   tekst. Naast elkaar ziet de bezoeker beide kamers in een blik en kan hij
   meteen kiezen; dat is hier het hele doel van de pagina.

   De band wordt daarbinnen een kolom: beeld boven, tekst eronder. --flip
   staat bewust niet op deze twee, want die kantelt een kolomverhouding die in
   deze rij niet bestaat. De specificiteit (0,2,0) wint van de bandregels
   hierboven, dus de volgorde in dit bestand doet er niet toe. */
.room-bands--paar {
  gap: var(--space-block);
}

@media (min-width: 760px) {
  .room-bands--paar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-gutter);
    align-items: start;
  }

  .room-bands--paar .room-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

/* De rij sluit direct op de paginakop aan: de h1 is de kop van deze rij, dus
   er staat geen tweede sectieafstand tussen. */
.page-hero__links + .room-bands {
  margin-top: var(--space-block);
}

/* Afsluitende actie onder een rij ruimtes, op dezelfde afstand als tussen een
   opener en zijn inhoud, zodat de knop bij de sectie erboven hoort. */
.room-bands + .v-mark-link {
  margin-top: var(--space-block);
}

.room-band__copy > .eyebrow {
  margin-bottom: 12px;
}

.room-band__copy h3 {
  margin: 0;
  color: var(--blauw);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 600;
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

.room-band__intro {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
  font-size: var(--small);
  line-height: var(--leading-body);
}

/* Specificaties in dezelfde labelstijl als de eyebrow: Newsreader op
   opsz 8, kapitalen, ruime tracking. Geen tweede lettertype en geen iconen. */
.room-band__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: var(--space-6) 0 0;
}

.room-band__specs > div {
  display: grid;
  gap: 4px;
}

.room-band__specs dt {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--meta);
  font-weight: 500;
  font-variation-settings: "opsz" 8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.room-band__specs dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: 1.35;
}

/* Staat op de plek waar vroeger de prijs stond. Beschikbaar in het blauw,
   de terughoudender statussen in de gedempte tekstkleur. */
.room-band__status {
  margin: var(--space-6) 0 0;
  max-width: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--meta);
  font-weight: 500;
  font-variation-settings: "opsz" 8;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.room-band__status--vrij {
  color: var(--blauw);
}

.room-band__copy .v-mark-link {
  margin-top: var(--space-6);
}

/* --- Gedeelde voorzieningen, één strook in plaats van herhaling per kamer -- */
.voorzieningen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .voorzieningen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .voorzieningen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.voorzieningen li {
  border-top: var(--rule-w) solid var(--rule);
  padding-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--small);
  line-height: var(--leading-body);
}

.voorzieningen strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--body);
  font-weight: 600;
  font-variation-settings: "opsz" 24;
}