/* Page-owned styles for Restaurant page */
.restaurant-page {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-2xs);
  padding-block: var(--space-sm);
}

/* Hero section */
.hero-ticket {
  display: flex;
  flex-direction: column;
}

.hero-ticket .ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xs);
}

.hero-ticket .ticket-number,
.hero-ticket .ticket-time {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
}

.hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
}

.hero-body p {
  max-width: 65ch;
  margin-inline: auto;
}

.hero-body .chef-note {
  max-width: 65ch;
  margin-inline: auto;
}

.btn-stub {
  border-right: 3px dashed var(--color-warm-white);
  padding-right: var(--space-2xs);
}

/* Section headings */
.restaurant-page section > h2 {
  margin-block-end: var(--space-xs);
  text-align: left;
}

/* Concept grid */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.concept-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  min-width: 0;
}

.concept-card p,
.concept-card ul {
  max-width: 45ch;
}

.concept-card-dark {
  border-color: var(--color-charcoal);
}

.concept-card-red {
  border-color: var(--color-tomato-red);
}

/* Atmosphere grid */
.atmosphere-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.atmosphere-day,
.atmosphere-evening {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  min-width: 0;
}

.atmosphere-evening img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: var(--border-width) solid var(--color-charcoal);
  border-radius: 0;
  filter: grayscale(1) sepia(0.1);
  transition: filter 0.3s ease;
}

.atmosphere-evening img:hover {
  filter: grayscale(0) sepia(0.2);
}

.atmosphere-day p,
.atmosphere-evening p,
.atmosphere-day ul,
.atmosphere-evening ul {
  max-width: 50ch;
}

/* Interior grid */
.interior-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.interior-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  min-width: 0;
}

.interior-card p,
.interior-card ul {
  max-width: 55ch;
}

.interior-card-mint {
  border-color: var(--color-mint-green);
}

/* Kitchen grid */
.kitchen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.kitchen-image-column,
.kitchen-text-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  min-width: 0;
}

.kitchen-image-column img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: var(--border-width) solid var(--color-charcoal);
  border-radius: 0;
  filter: grayscale(1) sepia(0.1);
  transition: filter 0.3s ease;
}

.kitchen-image-column img:hover {
  filter: grayscale(0) sepia(0.2);
}

.kitchen-image-column p,
.kitchen-text-column p,
.kitchen-image-column ul,
.kitchen-text-column ul {
  max-width: 50ch;
}

/* Casino section */
.casino-section {
  background-color: var(--color-charcoal);
  padding: var(--space-sm);
  margin-inline: calc(-1 * var(--space-2xs));
  margin-block-end: var(--space-sm);
  border-radius: var(--radius-ticket-top) var(--radius-ticket-top) 0 0;
}

.casino-section h2 {
  color: var(--color-warm-white);
  margin-block-end: var(--space-xs);
}

.casino-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.casino-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  min-width: 0;
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

.casino-card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: var(--border-width) solid var(--color-steel-gray);
  border-radius: 0;
  filter: grayscale(1) sepia(0.1) brightness(0.8);
  transition: filter 0.3s ease;
}

.casino-card img:hover {
  filter: grayscale(0) sepia(0.2) brightness(1);
}

.casino-card p,
.casino-card ul {
  max-width: 45ch;
}

.casino-card-mint {
  border-color: var(--color-mint-green);
}

/* Signature grid */
.signature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.signature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  min-width: 0;
}

.signature-card p {
  max-width: 40ch;
}

.signature-card-dark {
  border-color: var(--color-charcoal);
}

.signature-card-mint {
  border-color: var(--color-mint-green);
}

/* Location grid */
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.location-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  min-width: 0;
}

.location-card p,
.location-card ul {
  max-width: 45ch;
}

.location-card-red {
  border-color: var(--color-tomato-red);
}

/* Reserve section */
.reserve-section {
  display: flex;
  justify-content: center;
  margin-block-end: var(--space-sm);
}

.reserve-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  max-width: 600px;
  width: 100%;
}

.reserve-card .ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
}

.reserve-card p {
  max-width: 60ch;
  margin-inline: auto;
}

.reserve-card .btn-stub {
  margin-inline: auto;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .concept-grid,
  .interior-grid,
  .casino-grid,
  .signature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atmosphere-grid,
  .kitchen-grid,
  .location-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .restaurant-page {
    padding-inline: var(--space-2xs);
    padding-block: var(--space-xs);
  }

  .hero-body {
    padding-block: var(--space-2xs);
  }

  .hero-body p,
  .hero-body .chef-note {
    max-width: 100%;
  }

  .concept-grid,
  .interior-grid,
  .casino-grid,
  .signature-grid,
  .atmosphere-grid,
  .kitchen-grid,
  .location-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .casino-section {
    margin-inline: calc(-1 * var(--space-2xs));
    padding: var(--space-2xs);
  }

  .concept-card,
  .interior-card,
  .casino-card,
  .signature-card,
  .atmosphere-day,
  .atmosphere-evening,
  .kitchen-image-column,
  .kitchen-text-column,
  .location-card,
  .reserve-card {
    padding: var(--space-2xs);
  }

  .concept-card p,
  .concept-card ul,
  .interior-card p,
  .interior-card ul,
  .casino-card p,
  .casino-card ul,
  .signature-card p,
  .atmosphere-day p,
  .atmosphere-evening p,
  .atmosphere-day ul,
  .atmosphere-evening ul,
  .kitchen-image-column p,
  .kitchen-text-column p,
  .kitchen-image-column ul,
  .kitchen-text-column ul,
  .location-card p,
  .location-card ul,
  .reserve-card p {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .restaurant-page {
    padding-inline: var(--space-3xs);
  }

  .casino-section {
    margin-inline: calc(-1 * var(--space-3xs));
  }

  .hero-ticket .ticket-header,
  .reserve-card .ticket-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4xs);
  }

  .btn-stub {
    width: 100%;
    display: block;
  }
}