/* Rooms page styles (modular, complementing base.css) */

/* Hero */
.hero {
  background: radial-gradient(1200px 500px at 10% -10%, rgba(46,107,255,0.15), transparent 60%),
              radial-gradient(900px 400px at 90% 0%, rgba(57,255,20,0.12), transparent 55%),
              linear-gradient(180deg, var(--color-surface), transparent 30%);
}
.hero-inner { display: grid; place-items: center; min-height: 320px; }
.hero-copy { text-align: center; max-width: 900px; }
.hero-cta { display: inline-flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* Alternate surface helper */
.alt-surface { background: color-mix(in oklab, var(--color-surface) 60%, var(--color-background)); }

/* Filter chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.chip {
  border: 1px solid var(--gray-300);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.45em 0.85em;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) linear, transform var(--duration-fast) var(--ease-spring);
}
.chip:hover { transform: translateY(-1px); }
.chip.is-active { background: color-mix(in oklab, var(--color-primary) 15%, var(--color-surface)); border-color: var(--color-primary); }

/* Rooms grid */
.rooms-grid .room-card { overflow: hidden; padding: 0; }
.room-card .room-media { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.room-card .card-header { padding: var(--space-5) var(--space-6) 0 var(--space-6); }
.room-card .room-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-6) 0 var(--space-6); }
.room-card .card-actions { padding: var(--space-6); }

/* Badges */
.badge {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: 0.25em 0.6em;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-accent) 20%, var(--color-surface));
  border: 1px solid color-mix(in oklab, var(--color-accent) 60%, var(--gray-300));
  color: var(--color-text);
}

/* Tours */
.tour-card { padding: 0; overflow: hidden; }
.tour-card img { aspect-ratio: 16/9; }
.tour-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); }

/* Features */
.feature-item i { color: var(--color-primary); margin-right: var(--space-2); }

/* Contact form grid helpers */
.contact-form .grid-col-span-1 { grid-column: span 1; }
.contact-form .grid-col-span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .contact-form .grid-col-span-1 { grid-column: 1 / -1; }
}

/* Modals */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6);
  display: grid; place-items: center;
  padding: var(--space-6);
}
.modal-content {
  width: min(100%, 880px);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--gray-200); }
.modal-body { padding: var(--space-6); display: grid; gap: var(--space-4); }

/* Small utility */
.tours-grid { align-items: stretch; }

.rooms-grid {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }