/* Dining Page Styles - KrachtigSuccesHotel&Casino */

.hero {
  position: relative;
  min-height: 62vh;
  display: grid;
  align-items: end;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,26,0) 0%, rgba(10,15,26,0.65) 60%, rgba(10,15,26,0.9) 100%); }
.hero-content { position: relative; z-index: 1; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.hero-subtitle { max-width: 60ch; color: var(--color-text-muted); font-size: var(--font-size-lg); }
.hero-ctas { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

.section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.section-header { margin-bottom: var(--space-6); }

.searchbar { margin: var(--space-6) 0; }

.menu-grid .card { overflow: hidden; }
.dish-image { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-lg); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { background: rgba(201,169,97,0.12); color: var(--color-secondary); border: 1px solid rgba(201,169,97,0.3); padding: 0.25rem 0.5rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); }

.accordion details { background: var(--color-background-elevated); border: 1px solid rgba(201,169,97,0.18); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
.accordion summary { cursor: pointer; font-weight: var(--font-weight-semibold); padding: var(--space-3) 0; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion details[open] { border-color: rgba(201,169,97,0.36); box-shadow: var(--shadow-md); }
.accordion p { color: var(--color-text-muted); padding-bottom: var(--space-3); }

.list { display: grid; gap: var(--space-2); }

.form-status { margin-top: var(--space-4); min-height: 1.5rem; color: var(--color-secondary); }

@media (max-width: 768px) {
  .hero { min-height: 56vh; }
  .dish-image { height: 220px; }
}