/* Dining page — component styles derived from base.css variables & tokens */

/* HERO */
.dining-hero {
  padding: var(--space-12) 0;
  text-align: center;
  background: linear-gradient(180deg, rgba(10,22,40,0.02), rgba(10,22,40,0.01));
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}

.dining-hero h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
  color: var(--color-primary-900);
}

.dining-hero .intro {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
}

.dining-hero .meta {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
}

/* RESTAURANTS GRID */
.restaurants {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (max-width: 1024px) {
  .restaurants {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .restaurants {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .dining-hero {
    padding: var(--space-8) 0;
  }
}

/* DINING CARD */
.dining-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.dining-card .card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--color-border-light);
  transition: transform var(--transition-base) var(--ease-luxury);
}

.dining-card:hover .card-img {
  transform: scale(1.03);
}

.dining-card .card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dining-card h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
}

.dining-card .lead {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-3);
}

.dining-card .meta-list {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  list-style: none;
  padding-left: 0;
}

.dining-card .meta-list li {
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Make CTA stick to bottom */
.dining-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* INFO / DETAILS CARDS */
.dining-info .card-body h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  color: var(--color-primary-700);
}

.hours-card .card-body,
.contact-card .card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 768px) {
  .hours-card .card-body,
  .contact-card .card-body {
    grid-template-columns: 1fr;
  }
}

/* GALLERY */
.gallery-card {
  margin-top: var(--space-8);
}

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.grid-gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base) var(--ease-out), box-shadow var(--transition-base) var(--ease-out);
}

.grid-gallery img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 1024px) {
  .grid-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-gallery img {
    height: 120px;
  }
}

/* SPECIFIC ELEMENTS */
.dining-hero,
.card.card-luxury,
.card.hours-card,
.card.contact-card {
  border: 1px solid var(--color-border-light);
}

/* subtle divider for sections inside cards */
.card .card-body > h2,
.card .card-body > h3 {
  border-bottom: 1px dashed var(--color-border-default);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

/* FOOTER SPACING OVERRIDE (ensure roomy footer on dining page) */
.smh-footer {
  margin-top: var(--space-12);
}

/* UTILITY ADJUSTMENTS */
.dining-card .badge {
  margin-bottom: var(--space-2);
}

/* Accessibility */
.dining-card .card-img[alt=""] {
  outline: 2px dashed var(--color-border-default);
}

/* END */