/* Page-owned styles for /dining/ */

.dining-page {
  --dining-rotation-left: -1deg;
  --dining-rotation-right: 1deg;
  --dining-paper-texture: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.35), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(224, 216, 200, 0.18), transparent 40%);
}

/* Hero */
.dining-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-ink-navy);
}

.dining-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.dining-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dining-hero__content {
  position: relative;
  z-index: 2;
  width: min(600px, calc(100% - 2 * var(--space-lg)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  color: var(--color-text-on-blue);
}

.dining-hero__label {
  color: var(--color-sunset-peach);
  font-size: 1.5rem;
}

.dining-hero__title {
  color: var(--color-text-on-blue);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  margin-block-end: 0;
}

.dining-hero__text {
  color: var(--color-text-on-blue);
  max-width: 45ch;
  margin-block-end: 0;
  text-shadow: 0 2px 6px rgba(11, 27, 58, 0.45);
}

.dining-hero__scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--color-text-on-blue);
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
}

.dining-hero__scroll:hover {
  background-color: var(--color-aqua);
  border-color: var(--color-aqua);
  color: var(--color-ink-navy);
}

/* Wave divider */
.dining-wave-divider {
  width: 100%;
  height: 18px;
  margin-block-start: var(--space-xl);
  background-image: radial-gradient(circle at 10px 0, var(--color-aqua) 4px, transparent 5px),
    radial-gradient(circle at 30px 0, var(--color-sunset-peach) 4px, transparent 5px),
    radial-gradient(circle at 50px 0, var(--color-ocean-blue) 4px, transparent 5px),
    radial-gradient(circle at 70px 0, var(--color-aqua) 4px, transparent 5px),
    radial-gradient(circle at 90px 0, var(--color-sunset-peach) 4px, transparent 5px);
  background-size: 100px 18px;
  background-repeat: repeat-x;
  opacity: 0.55;
}

/* Introduction */
.dining-intro {
  padding-block: var(--space-xxl) var(--space-xl);
}

.dining-intro__container {
  width: min(800px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.dining-intro__badge {
  align-self: flex-start;
}

.dining-intro__title {
  margin-block-end: 0;
}

.dining-intro__text {
  max-width: 70ch;
  margin-block-end: 0;
}

/* Main dining room */
.dining-main-room {
  padding-block: var(--space-xl);
}

.dining-main-room__card {
  width: min(1000px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: 0;
  overflow: hidden;
  transform: rotate(var(--dining-rotation-left));
  background-image: var(--dining-paper-texture);
}

.dining-main-room__media {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.dining-main-room__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--surface-image-radius);
}

.dining-main-room__caption {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  color: var(--color-text-on-blue);
  background-color: rgba(11, 27, 58, 0.55);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--surface-badge-radius);
}

.dining-main-room__content {
  min-width: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

.dining-main-room__title {
  margin-block-end: 0;
}

.dining-main-room__text {
  max-width: 60ch;
  margin-block-end: 0;
}

/* Specialty restaurants */
.dining-specialty {
  padding-block: var(--space-xxl);
}

.dining-specialty__heading {
  width: min(800px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.dining-specialty__badge {
  align-self: flex-start;
}

.dining-specialty__title {
  margin-block-end: 0;
}

.dining-specialty__intro {
  max-width: 70ch;
  margin-block-end: 0;
}

.dining-specialty__grid {
  width: min(1100px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.dining-specialty__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  background-image: var(--dining-paper-texture);
}

.dining-specialty__card--steak {
  transform: rotate(var(--dining-rotation-left));
}

.dining-specialty__card--italian {
  transform: rotate(0deg);
}

.dining-specialty__card--asian {
  transform: rotate(var(--dining-rotation-right));
}

.dining-specialty__stamp {
  align-self: flex-start;
}

.dining-specialty__card-title {
  margin-block-end: 0;
}

.dining-specialty__card-text {
  max-width: 50ch;
  margin-block-end: 0;
}

/* Casual dining */
.dining-casual {
  padding-block: var(--space-xl);
}

.dining-casual__card {
  width: min(1000px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: 0;
  overflow: hidden;
  transform: rotate(var(--dining-rotation-right));
  background-image: var(--dining-paper-texture);
}

.dining-casual__content {
  min-width: 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-md);
}

.dining-casual__label {
  color: var(--color-ocean-blue);
}

.dining-casual__title {
  margin-block-end: 0;
}

.dining-casual__text {
  max-width: 60ch;
  margin-block-end: 0;
}

.dining-casual__media {
  min-width: 0;
  display: flex;
}

.dining-casual__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--surface-image-radius);
}

/* Dietary needs */
.dining-dietary {
  padding-block: var(--space-xxl);
}

.dining-dietary__container {
  width: min(800px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.dining-dietary__badge {
  align-self: flex-start;
}

.dining-dietary__title {
  margin-block-end: 0;
}

.dining-dietary__text {
  max-width: 70ch;
  margin-block-end: 0;
}

.dining-dietary__list {
  margin-block-end: 0;
  width: 100%;
}

/* Dress codes */
.dining-dress {
  padding-block: var(--space-xl);
}

.dining-dress__container {
  width: min(800px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.dining-dress__title {
  margin-block-end: 0;
}

.dining-dress__text {
  max-width: 70ch;
  margin-block-end: 0;
}

.dining-dress__list {
  margin-block-end: 0;
  width: 100%;
}

/* Tips */
.dining-tips {
  padding-block: var(--space-xxl);
  background-color: rgba(0, 255, 255, 0.08);
}

.dining-tips__container {
  width: min(800px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.dining-tips__badge {
  align-self: flex-start;
}

.dining-tips__title {
  margin-block-end: 0;
}

.dining-tips__text {
  max-width: 70ch;
  margin-block-end: 0;
}

.dining-tips__list {
  margin-block-end: 0;
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dining-tips__list li {
  margin-block-end: 0;
}

/* Explore more */
.dining-explore {
  padding-block: var(--space-xxl);
}

.dining-explore__heading {
  width: min(800px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.dining-explore__title {
  margin-block-end: 0;
}

.dining-explore__intro {
  max-width: 60ch;
  margin-block-end: 0;
}

.dining-explore__grid {
  width: min(1100px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.dining-explore__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--space-sm);
  background-image: var(--dining-paper-texture);
  color: var(--color-ink-navy);
}

.dining-explore__card:nth-child(1) {
  transform: rotate(var(--dining-rotation-left));
}

.dining-explore__card:nth-child(2) {
  transform: rotate(var(--dining-rotation-right));
}

.dining-explore__card:nth-child(3) {
  transform: rotate(var(--dining-rotation-left));
}

.dining-explore__card:nth-child(4) {
  transform: rotate(var(--dining-rotation-right));
}

.dining-explore__card:hover {
  color: var(--color-ink-navy);
}

.dining-explore__stamp {
  align-self: center;
}

.dining-explore__card-title {
  margin-block-end: 0;
}

.dining-explore__card-text {
  max-width: 40ch;
  margin-block-end: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .dining-main-room__card,
  .dining-casual__card {
    grid-template-columns: 1fr;
    transform: none;
  }

  .dining-main-room__media,
  .dining-casual__media {
    order: -1;
  }

  .dining-main-room__image,
  .dining-casual__image {
    aspect-ratio: 16 / 9;
  }

  .dining-specialty__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dining-specialty__card--steak,
  .dining-specialty__card--italian,
  .dining-specialty__card--asian {
    transform: none;
  }

  .dining-explore__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dining-explore__card:nth-child(1),
  .dining-explore__card:nth-child(2),
  .dining-explore__card:nth-child(3),
  .dining-explore__card:nth-child(4) {
    transform: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .dining-hero {
    height: 70vh;
    min-height: 460px;
  }

  .dining-hero__content {
    align-items: flex-start;
    text-align: left;
    width: calc(100% - 2 * var(--space-md));
  }

  .dining-hero__text {
    max-width: 100%;
  }

  .dining-specialty__grid {
    grid-template-columns: 1fr;
  }

  .dining-explore__grid {
    grid-template-columns: 1fr;
  }

  .dining-main-room__card,
  .dining-casual__card {
    width: calc(100% - 2 * var(--space-md));
  }

  .dining-main-room__content,
  .dining-casual__content {
    padding: var(--space-md);
  }

  .dining-intro,
  .dining-specialty,
  .dining-dietary,
  .dining-tips,
  .dining-explore {
    padding-block: var(--space-xl);
  }
}

@media (max-width: 480px) {
  .dining-hero {
    height: 65vh;
    min-height: 420px;
  }

  .dining-hero__title {
    font-size: clamp(1.9rem, 8vw, 2.25rem);
  }

  .dining-hero__label {
    font-size: 1.25rem;
  }

  .dining-main-room__image,
  .dining-casual__image {
    aspect-ratio: 4 / 3;
  }

  .dining-main-room__caption {
    bottom: var(--space-sm);
    left: var(--space-sm);
    font-size: 1rem;
  }
}