/* Dining Page Styles - builds on base.css palette and utilities */
.hero-dining {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
}
.hero-dining .hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-dining .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05) brightness(0.8);
  transform: scale(1.02);
}
.hero-dining .hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,22,40,0.1) 0%, rgba(10,22,40,0.6) 40%, rgba(10,22,40,0.9) 100%);
}
.hero-dining .hero-content {
  position: relative;
  text-align: center;
  z-index: 1;
}
.hero-dining h1 {
  text-shadow: 0 3px 16px rgba(0,0,0,0.6);
}
.hero-dining .hero-subtext {
  margin: var(--space-4) auto var(--space-6);
  max-width: 60ch;
  color: var(--color-gray-200);
}
.hero-dining .hero-ctas {
  display: inline-flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.section-padding {
  padding: var(--space-16) 0;
}
.section-accent {
  background: linear-gradient(180deg, var(--color-navy-light) 0%, var(--color-navy) 100%);
  border-top: 1px solid var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-700);
}
.section-related {
  background: var(--color-navy-light);
}

/* Promo list */
.promo-points ul {
  list-style: none;
  padding-left: 0;
}
.promo-points li {
  position: relative;
  padding-left: calc(var(--space-6) + 6px);
  margin-bottom: var(--space-3);
}
.promo-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  box-shadow: var(--shadow-glow-gold);
}

/* Reservation card tweaks */
.section-reservation .card {
  border-color: var(--color-gold);
}
.section-reservation .card:hover {
  border-color: var(--color-gold-light);
}

/* Accessibility & small refinements */
.card-title { text-wrap: balance; }
.hero-subtext { text-wrap: pretty; }

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