/* ===== Casino Page Styles ===== */
#casino-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
  padding-block: var(--space-3xl) var(--space-4xl);
}

#casino-page section {
  min-width: 0;
}

/* Hero */
.casino-hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-4xl);
  overflow: hidden;
}

.casino-hero__surface {
  position: absolute;
  inset: 0;
  background-color: var(--color-pale-oak);
  border: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-card);
  transform: translateX(-24px);
  z-index: 0;
}

.casino-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: center;
}

.casino-hero__text {
  grid-column: 1 / 6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.casino-hero__eyebrow {
  margin-block-end: 0;
}

.casino-hero__heading {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: var(--leading-heading-1);
  font-weight: 500;
  margin-block-end: 0;
}

.casino-hero__lead {
  margin-block-end: 0;
  max-width: 42ch;
}

.casino-hero__cta {
  margin-block-start: var(--space-sm);
}

.casino-hero__figure {
  grid-column: 7 / 13;
  min-width: 0;
  margin: 0;
  position: relative;
  box-shadow: var(--shadow-floating-plate);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-default);
}

.casino-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: filter var(--transition-hover);
}

.casino-hero__figure:hover .casino-hero__image {
  filter: brightness(0.96);
}

.casino-hero__caption {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-ink);
  margin: 0;
  max-width: 70%;
}

/* Restaurant-First Identity */
.casino-identity {
  padding-block: var(--space-3xl);
}

.casino-identity__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.casino-identity__inner .eyebrow {
  margin-block-end: 0;
}

.casino-identity__inner h2 {
  margin-block-end: 0;
}

.casino-identity__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.casino-identity__copy p {
  margin-block-end: 0;
}

/* Real Casino Experience */
.casino-real {
  background-color: var(--color-gaming-felt);
  color: var(--color-linen-white);
  padding-block: var(--space-4xl);
  border-block-start: 4px solid var(--color-deep-merlot);
  border-block-end: 4px solid var(--color-deep-merlot);
}

.casino-real__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.casino-real__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 800px;
}

.casino-real__intro .eyebrow {
  margin-block-end: 0;
}

.casino-real__heading {
  color: var(--color-linen-white);
  margin-block-end: 0;
}

.casino-real__lead {
  margin-block-end: 0;
  color: var(--color-linen-white);
}

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

.casino-game-card {
  background-color: rgba(251, 249, 244, 0.06);
  border: 1px solid rgba(251, 249, 244, 0.25);
  border-radius: var(--radius-none);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  transition: background-color var(--transition-hover), border-color var(--transition-hover);
}

.casino-game-card:hover {
  background-color: rgba(251, 249, 244, 0.1);
  border-color: rgba(251, 249, 244, 0.4);
}

.casino-game-card__title {
  color: var(--color-linen-white);
  margin-block-end: 0;
}

.casino-game-card__copy {
  margin-block-end: 0;
  color: var(--color-linen-white);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}

/* Casino Interior */
.casino-interior {
  padding-block: var(--space-3xl);
}

.casino-interior__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: center;
}

.casino-interior__text {
  grid-column: 1 / 6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.casino-interior__text .eyebrow {
  margin-block-end: 0;
}

.casino-interior__text h2 {
  margin-block-end: 0;
}

.casino-interior__text p {
  margin-block-end: 0;
  max-width: 42ch;
}

.casino-interior__figure {
  grid-column: 7 / 13;
  min-width: 0;
  margin: 0;
  position: relative;
  border: var(--border-default);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.casino-interior__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: filter var(--transition-hover);
}

.casino-interior__figure:hover .casino-interior__image {
  filter: brightness(0.96);
}

.casino-interior__caption {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-ink);
  margin: 0;
  max-width: 70%;
}

/* Evening Flow */
.casino-flow {
  padding-block: var(--space-3xl);
}

.casino-flow__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.casino-flow__inner .eyebrow {
  margin-block-end: 0;
}

.casino-flow__inner h2 {
  margin-block-end: 0;
}

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

.casino-step-card {
  background-color: var(--color-pale-oak);
  border: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.casino-step-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-heading-2);
  line-height: 1;
  color: var(--color-persimmon-orange);
  font-weight: 500;
}

.casino-step-card__title {
  margin-block-end: 0;
}

.casino-step-card__copy {
  margin-block-end: 0;
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}

/* Practical Information */
.casino-practical {
  padding-block: var(--space-3xl);
}

.casino-practical__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.casino-practical__inner .eyebrow {
  margin-block-end: 0;
}

.casino-practical__inner h2 {
  margin-block-end: 0;
}

.casino-practical__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block-start: var(--border-hairline);
}

.casino-practical__item {
  padding-block: var(--space-lg);
  border-block-end: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.casino-practical__label {
  margin-block-end: 0;
  color: var(--color-manuka-green);
}

.casino-practical__copy {
  margin-block-end: 0;
}

/* A Note on the Restaurant */
.casino-note {
  padding-block: var(--space-3xl);
  background-color: var(--color-alpine-ivory);
  border-block-start: var(--border-hairline);
  border-block-end: var(--border-hairline);
}

.casino-note__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.casino-note__inner .eyebrow {
  margin-block-end: 0;
}

.casino-note__inner h2 {
  margin-block-end: 0;
}

.casino-note__inner p {
  margin-block-end: 0;
}

/* Call to Action */
.casino-cta {
  background-color: var(--color-manuka-green);
  color: var(--color-linen-white);
  padding-block: var(--space-4xl);
  border-radius: var(--radius-none);
}

.casino-cta__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-2xl);
  align-items: center;
}

.casino-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.casino-cta__text .eyebrow {
  margin-block-end: 0;
}

.casino-cta__heading {
  color: var(--color-linen-white);
  margin-block-end: 0;
}

.casino-cta__copy {
  margin-block-end: 0;
  color: var(--color-linen-white);
}

.casino-cta__contact {
  margin-block-end: 0;
  color: var(--color-linen-white);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}

.casino-cta__contact a {
  color: var(--color-linen-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.casino-cta__contact a:hover {
  color: var(--color-glacier-blue);
}

.casino-cta__action {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.casino-cta__button {
  background-color: var(--color-persimmon-orange);
  border-color: var(--color-persimmon-orange);
  color: var(--color-linen-white);
}

.casino-cta__button:hover {
  background-color: #C45B2F;
  border-color: #C45B2F;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  #casino-page {
    gap: var(--space-3xl);
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .casino-hero__inner {
    gap: var(--space-xl);
  }

  .casino-hero__text {
    grid-column: 1 / 7;
  }

  .casino-hero__figure {
    grid-column: 7 / 13;
  }

  .casino-hero__heading {
    font-size: clamp(2rem, 4.5vw, 3rem);
  }

  .casino-interior__inner {
    gap: var(--space-xl);
  }

  .casino-interior__text {
    grid-column: 1 / 7;
  }

  .casino-interior__figure {
    grid-column: 7 / 13;
  }

  .casino-real__cards,
  .casino-flow__steps {
    gap: var(--space-md);
  }

  .casino-game-card,
  .casino-step-card {
    padding: var(--space-lg);
  }

  .casino-cta__inner {
    gap: var(--space-xl);
  }
}

/* Mobile */
@media (max-width: 767px) {
  #casino-page {
    gap: var(--space-2xl);
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .casino-hero {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .casino-hero__surface {
    transform: translateX(-12px);
  }

  .casino-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .casino-hero__text {
    grid-column: 1;
    gap: var(--space-md);
  }

  .casino-hero__heading {
    font-size: clamp(2rem, 8vw, 2.75rem);
    max-width: 100%;
  }

  .casino-hero__lead {
    max-width: 100%;
  }

  .casino-hero__figure {
    grid-column: 1;
    order: -1;
  }

  .casino-hero__caption {
    left: var(--space-md);
    bottom: var(--space-md);
    max-width: 80%;
  }

  .casino-identity,
  .casino-interior,
  .casino-flow,
  .casino-practical,
  .casino-note {
    padding-block: var(--space-2xl);
  }

  .casino-real {
    padding-block: var(--space-3xl);
  }

  .casino-real__cards,
  .casino-flow__steps {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .casino-interior__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .casino-interior__text {
    grid-column: 1;
  }

  .casino-interior__figure {
    grid-column: 1;
    order: -1;
  }

  .casino-interior__caption {
    left: var(--space-md);
    bottom: var(--space-md);
    max-width: 80%;
  }

  .casino-cta {
    padding-block: var(--space-3xl);
  }

  .casino-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .casino-cta__action {
    justify-content: flex-start;
  }

  .casino-cta__button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .casino-hero__heading {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .casino-game-card,
  .casino-step-card {
    padding: var(--space-lg);
  }

  .casino-hero__caption,
  .casino-interior__caption {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
  }
}