/* Restaurant page styles */

.restaurant-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--charcoal-900);
  overflow: hidden;
}

.restaurant-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.restaurant-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--transition-fast);
}

.restaurant-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(14, 15, 13, 0.40);
}

.restaurant-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.restaurant-hero__eyebrow {
  color: var(--burgundy-600);
  margin-block-end: 0;
}

.restaurant-hero__title {
  max-width: var(--measure-display);
  margin-block-end: 0;
  color: var(--bone-100);
}

.restaurant-hero__supporting {
  max-width: 50%;
  color: var(--bone-300);
  margin-block-end: 0;
}

@media (max-width: 767px) {
  .restaurant-hero {
    min-height: 78vh;
    flex-direction: column;
    align-items: stretch;
  }

  .restaurant-hero__media {
    position: relative;
    height: 45vh;
    flex: 0 0 auto;
  }

  .restaurant-hero__content {
    padding-block: var(--space-6);
    gap: var(--space-3);
  }

  .restaurant-hero__supporting {
    max-width: 100%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .restaurant-hero__media img:hover {
    opacity: 0.92;
  }
}

.dining-concept__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-7);
  align-items: start;
}

.dining-concept__text {
  min-width: 0;
}

.dining-concept__text p {
  max-width: var(--measure-body);
}

.dining-concept__text .eyebrow {
  margin-block-end: var(--space-3);
}

.dining-concept__media {
  min-width: 0;
}

.dining-concept__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

@media (max-width: 767px) {
  .dining-concept__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .dining-concept__media {
    order: -1;
  }
}

.atmosphere {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--charcoal-900);
  overflow: hidden;
}

.atmosphere__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.atmosphere__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.atmosphere__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(14, 15, 13, 0.45);
}

.atmosphere__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.atmosphere__eyebrow {
  color: var(--brass-200);
  margin-block-end: 0;
}

.atmosphere__content h2 {
  margin-block-end: 0;
}

.atmosphere__content p {
  max-width: 50%;
  color: var(--bone-300);
  margin-block-end: 0;
}

@media (max-width: 767px) {
  .atmosphere {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .atmosphere__media {
    position: relative;
    height: 45vh;
    flex: 0 0 auto;
  }

  .atmosphere__content {
    padding-block: var(--space-6);
    gap: var(--space-3);
  }

  .atmosphere__content p {
    max-width: 100%;
  }
}

.menu-highlights__header {
  margin-block-end: var(--space-6);
}

.menu-highlights__header .eyebrow {
  margin-block-end: var(--space-3);
}

.menu-highlights__intro {
  max-width: var(--measure-body);
  color: var(--bone-300);
  margin-block-end: 0;
}

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

.menu-highlight-card {
  background-color: var(--charcoal-800);
  border: var(--border-dark);
  border-radius: var(--radius-2);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  transition: background-color var(--transition-fast);
}

.menu-highlight-card:hover {
  background-color: var(--charcoal-700);
}

.menu-highlight-card__category {
  font-family: var(--body-font);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  color: var(--burgundy-600);
  margin-block-end: 0;
}

.menu-highlight-card__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.menu-highlight-card__name {
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-tracking);
  font-weight: 500;
  color: var(--bone-100);
  flex: 0 1 auto;
  min-width: 0;
  margin-block-end: 0;
}

.menu-highlight-card__dots {
  flex: 1 1 auto;
  border-block-end: 1px dotted var(--bone-300);
  min-width: var(--space-4);
  align-self: flex-end;
  margin-block-end: 0.35em;
}

.menu-highlight-card__price {
  font-family: var(--heading-font);
  font-size: var(--h4-size);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-tracking);
  font-weight: var(--h4-weight);
  color: var(--bone-100);
  flex: 0 1 auto;
}

.menu-highlight-card__description {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line-height);
  letter-spacing: var(--body-sm-tracking);
  font-weight: var(--body-sm-weight);
  color: var(--bone-300);
  max-width: 40ch;
  margin-block-end: 0;
}

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

.dining-options__header {
  margin-block-end: var(--space-6);
}

.dining-options__header .eyebrow {
  color: var(--brass-200);
  margin-block-end: var(--space-3);
}

.dining-options__rail {
  overflow-x: auto;
  padding-block-end: var(--space-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--charcoal-700) transparent;
}

.dining-options__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.dining-option {
  background-color: var(--felt-700);
  border: var(--border-dark);
  border-radius: var(--radius-2);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.dining-option__label {
  font-family: var(--body-font);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  color: var(--brass-200);
  margin-block-end: 0;
}

.dining-option__text {
  color: var(--bone-300);
  max-width: 50ch;
  margin-block-end: 0;
}

@media (max-width: 767px) {
  .dining-options__track {
    grid-template-columns: repeat(3, 280px);
    gap: var(--space-4);
    padding-inline-end: var(--space-4);
  }

  .dining-options__rail {
    margin-inline: calc(-1 * var(--container-gutter-mobile));
    padding-inline: var(--container-gutter-mobile);
  }
}

.reservations__panel {
  background-color: var(--charcoal-800);
  border: var(--border-dark);
  border-radius: var(--radius-2);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  min-width: 0;
}

.reservations__info {
  min-width: 0;
}

.reservations__info .eyebrow {
  color: var(--burgundy-600);
  margin-block-end: var(--space-3);
}

.reservations__info p {
  max-width: var(--measure-body);
  color: var(--bone-300);
}

.reservations__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.reservations__contacts a {
  color: var(--bone-100);
  text-decoration-color: var(--brass-400);
}

.reservations__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  min-width: 0;
}

.reservations__cta p {
  color: var(--bone-300);
  margin-block-end: 0;
}

.reservations__button {
  border-color: var(--burgundy-600);
  color: var(--bone-100);
}

.reservations__button:hover {
  background-color: var(--burgundy-600);
  border-color: var(--burgundy-600);
  color: var(--bone-100);
}

@media (max-width: 767px) {
  .reservations__panel {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
  }
}

.hours__panel {
  background-color: var(--charcoal-700);
  border: var(--border-dark);
  border-radius: var(--radius-2);
  padding: var(--space-6);
  min-width: 0;
}

.hours__panel .eyebrow {
  color: var(--brass-200);
  margin-block-end: var(--space-3);
}

.hours__intro {
  max-width: var(--measure-body);
  color: var(--bone-300);
  margin-block-end: var(--space-5);
}

.hours__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.hours__table th,
.hours__table td {
  text-align: left;
  padding-block: var(--space-3);
  border-block-end: var(--border-dark);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-tracking);
  font-weight: 400;
  color: var(--bone-100);
  max-width: 30ch;
  overflow-wrap: break-word;
}

.hours__table thead th {
  font-family: var(--body-font);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  color: var(--bone-300);
}

.hours__table tbody tr:last-child th,
.hours__table tbody tr:last-child td {
  border-block-end: none;
}

.connection-to-poker {
  background-color: var(--felt-700);
  padding-block: var(--space-9);
}

.connection-to-poker__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 60%;
  min-width: 0;
}

.connection-to-poker__eyebrow {
  color: var(--brass-200);
  margin-block-end: 0;
}

.connection-to-poker__content h2 {
  margin-block-end: 0;
}

.connection-to-poker__content p {
  max-width: var(--measure-body);
  color: var(--bone-300);
  margin-block-end: 0;
}

.connection-to-poker__link {
  color: var(--brass-400);
  text-decoration: underline;
  text-decoration-color: var(--brass-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--transition-fast), text-decoration-thickness var(--transition-fast);
}

.connection-to-poker__link:hover {
  color: var(--brass-200);
  text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
  .connection-to-poker__content {
    max-width: 100%;
    gap: var(--space-3);
  }
}

.closing-statement__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
  padding-block-start: var(--space-7);
  border-block-start: 1px solid var(--brass-400);
}

.closing-statement__eyebrow {
  color: var(--brass-200);
  margin-block-end: 0;
}

.closing-statement__content h2 {
  max-width: 40ch;
  margin-block-end: 0;
}

.closing-statement__content p {
  max-width: 40ch;
  color: var(--bone-300);
  margin-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  .restaurant-hero__media img,
  .menu-highlight-card {
    transition: none;
  }
}