/* ROOMS PAGE STYLES - Snelle Oplossing Hotel */
.hero-rooms {
  background: linear-gradient(135deg, var(--color-neutral-100), #fff);
  padding-top: calc(var(--space-16) + var(--header-height));
}
.hero-grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.hero-copy h1 { margin-bottom: var(--space-4); }
.hero-copy p { color: var(--color-text-light); }
.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); }

.section-alt { background: var(--color-background-alt); }

.room-card .room-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); margin-top: var(--space-3); }

.feature-grid .card { height: 100%; }

.vip-split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) {
  .vip-split { grid-template-columns: 1fr 1fr; }
}
.vip-media img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); }

/* Tour modal */
.tour-wrap .tour-card { max-width: 1100px; margin: 0 auto; }
.tour-content { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .tour-content { grid-template-columns: 1fr 0.9fr; align-items: center; }
}
.tour-visual img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.tour-modal { position: fixed; inset: 0; background: var(--color-background-overlay); display: none; align-items: center; justify-content: center; padding: var(--space-6); z-index: var(--z-modal); }
.tour-modal[aria-hidden="false"] { display: flex; }
.tour-dialog { background: var(--color-background); width: min(960px, 100%); border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); overflow: hidden; }
.tour-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); }
.tour-body { padding: var(--space-6); }
.tour-embed { height: 56.25vw; max-height: 520px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: var(--radius-lg); box-shadow: var(--shadow-blue); }

/* Rates */
#rate-summary { color: var(--color-text-light); }

/* Utility for section spacing inside hero */
.hero-rooms + .section-sm { padding-top: var(--space-12); }