/* Page-owned styles for casino-lounge page */

#casino-lounge-main {
  --page-space-1: var(--space-1);
  --page-space-2: var(--space-2);
  --page-space-3: var(--space-3);
  --page-space-4: var(--space-4);
  --page-space-5: var(--space-5);
  --page-space-6: var(--space-6);
  --page-space-7: var(--space-7);
  --page-space-8: var(--space-8);
  --page-space-9: var(--space-9);
  --page-space-10: var(--space-10);
}

#casino-lounge-main .section-index {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-block-end: var(--space-2);
}

/* Lounge Overview */
.lounge-overview {
  padding-block: var(--space-8) var(--space-7);
  background-color: var(--bg-base);
}

.lounge-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.lounge-overview__text {
  min-width: 0;
  position: relative;
  border-inline-start: var(--border-focus) solid var(--accent);
  padding-inline-start: var(--space-5);
  padding-block: var(--space-4);
  background-color: rgba(26, 42, 58, 0.4);
  border-radius: var(--radius-1);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.lounge-overview__text:hover {
  background-color: rgba(44, 62, 80, 0.6);
  border-color: var(--accent-soft);
}

.lounge-overview__text h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: var(--leading-h1);
  margin-block-end: var(--space-3);
}

.lounge-overview__age-tag {
  margin-block-end: var(--space-4);
}

.lounge-overview__lead {
  max-width: 65ch;
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--text-primary);
  margin-block-end: var(--space-4);
}

.lounge-overview__details {
  border-block-start: var(--border-thin) solid var(--surface-2);
  padding-block-start: var(--space-4);
  margin-block-end: var(--space-4);
}

.lounge-overview__details p {
  max-width: 65ch;
  margin-block-end: 0;
}

.lounge-overview__facts {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-strong);
  margin-block-end: 0;
}

.lounge-overview__media {
  min-width: 0;
  border-radius: var(--radius-1);
  overflow: hidden;
  border: var(--border-thin) solid var(--accent-soft);
  box-shadow: var(--shadow-panel);
}

.lounge-overview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
  transition: transform 300ms ease-out;
}

.lounge-overview__media:hover img {
  transform: scale(1.02);
}

/* Table Formats */
.table-formats {
  padding-block: var(--space-7);
  background-color: var(--surface-1);
  border-block: var(--border-thin) solid var(--surface-2);
}

.table-formats__header {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  margin-block-end: var(--space-6);
}

.table-formats__header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: 0;
}

.table-formats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.game-card {
  min-width: 0;
  background-color: var(--surface-1);
  border: var(--border-thin) solid var(--surface-2);
  border-radius: var(--radius-1);
  padding: var(--space-5);
  position: relative;
  box-shadow: var(--shadow-panel);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.game-card:nth-child(2) {
  transform: translateY(var(--space-3));
}

.game-card:hover {
  background-color: var(--surface-2);
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-panel), var(--shadow-glow-soft);
}

.game-card__status {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--status-ok);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
  transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.game-card:hover .game-card__status {
  background-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 191, 255, 0.7);
}

.game-card h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-3);
  padding-inline-end: var(--space-5);
}

.game-card p {
  max-width: 75ch;
  margin-block-end: 0;
}

/* Dining Integration */
.dining-integration {
  padding-block: var(--space-7);
  background-color: var(--bg-base);
}

.dining-integration__header {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  margin-block-end: var(--space-6);
}

.dining-integration__header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: 0;
}

.dining-integration__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.dining-integration__unit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.dining-integration__unit--text-left {
  grid-template-areas: "text media";
}

.dining-integration__unit--text-right {
  grid-template-areas: "media text";
}

.dining-integration__text {
  min-width: 0;
  grid-area: text;
  padding: var(--space-4);
  border-inline-start: var(--border-focus) solid var(--accent);
  background-color: rgba(26, 42, 58, 0.3);
  border-radius: var(--radius-1);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.dining-integration__unit--text-right .dining-integration__text {
  border-inline-start: none;
  border-inline-end: var(--border-focus) solid var(--accent);
}

.dining-integration__text:hover {
  border-color: var(--accent-soft);
  background-color: rgba(44, 62, 80, 0.5);
}

.dining-integration__text h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-3);
}

.dining-integration__text p {
  max-width: 65ch;
  margin-block-end: 0;
}

.dining-integration__media {
  min-width: 0;
  grid-area: media;
  border-radius: var(--radius-1);
  overflow: hidden;
  border: var(--border-thin) solid var(--accent-soft);
  box-shadow: var(--shadow-panel);
}

.dining-integration__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  transition: transform 300ms ease-out;
}

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

/* Atmosphere & Design */
.atmosphere-design {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-8);
  overflow: hidden;
  background-color: var(--bg-base);
}

.atmosphere-design__background {
  position: absolute;
  inset: 0;
  background-image: url('/public/media/atmosphere-background.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 0;
}

.atmosphere-design__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  text-align: center;
}

.atmosphere-design__content .section-index {
  text-align: center;
}

.atmosphere-design__content h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: var(--space-4);
}

.atmosphere-design__statement {
  max-width: 75ch;
  margin-inline: auto;
  margin-block-end: var(--space-6);
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
}

.atmosphere-design__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

.highlight-card {
  min-width: 0;
  background-color: rgba(26, 42, 58, 0.8);
  border: var(--border-thin) solid var(--surface-2);
  border-radius: var(--radius-1);
  padding: var(--space-4);
  text-align: left;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.highlight-card:hover {
  background-color: var(--surface-2);
  border-color: var(--accent-soft);
}

.highlight-card__icon {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--accent);
  margin-block-end: var(--space-3);
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
}

.highlight-card p {
  max-width: 35ch;
  margin-block-end: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

/* Responsible Play */
.responsible-play {
  padding-block: var(--space-7);
  background-color: var(--surface-1);
  border-block: var(--border-thin) solid var(--surface-2);
}

.responsible-play__header {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  margin-block-end: var(--space-6);
}

.responsible-play__header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: 0;
}

.responsible-play__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.responsible-play__commitment,
.responsible-play__resources {
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--surface-1);
  border: var(--border-thin) solid var(--surface-2);
  border-inline-start: var(--border-focus) solid var(--status-warn);
  border-radius: var(--radius-1);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.responsible-play__commitment:hover,
.responsible-play__resources:hover {
  border-color: var(--status-warn);
  background-color: var(--surface-2);
}

.responsible-play__commitment .tag {
  margin-block-end: var(--space-4);
}

.responsible-play__commitment h3,
.responsible-play__resources h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-3);
}

.responsible-play__commitment p {
  max-width: 65ch;
  margin-block-end: 0;
}

.responsible-play__resources ul {
  margin-block-end: 0;
}

/* Private Gaming Areas */
.private-gaming {
  padding-block: var(--space-7);
  background-color: var(--bg-base);
}

.private-gaming__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.private-gaming__text {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-thin) solid var(--surface-2);
  border-inline-start: var(--border-focus) solid var(--accent);
  border-radius: var(--radius-1);
  background-color: rgba(26, 42, 58, 0.4);
}

.private-gaming__text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: var(--space-3);
}

.private-gaming__text p {
  max-width: 75ch;
  margin-block-end: 0;
}

.private-gaming__cta {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.private-gaming__cta .btn {
  min-width: 200px;
}

/* Reservation & Entry */
.reservation-entry {
  padding-block: var(--space-7);
  background-color: var(--surface-1);
  border-block: var(--border-thin) solid var(--surface-2);
}

.reservation-entry__header {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  margin-block-end: var(--space-6);
}

.reservation-entry__header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: 0;
}

.reservation-entry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.reservation-entry__block {
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--surface-1);
  border: var(--border-thin) solid var(--surface-2);
  border-radius: var(--radius-1);
}

.reservation-entry__block h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-3);
}

.reservation-entry__block p {
  max-width: 65ch;
  margin-block-end: 0;
}

.reservation-entry__block a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reservation-entry__block a:hover {
  color: var(--text-strong);
}

/* Visual Log Teaser */
.visual-log-teaser {
  padding-block: var(--space-7);
  background-color: var(--bg-base);
}

.visual-log-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.visual-log-teaser__text {
  min-width: 0;
}

.visual-log-teaser__text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: var(--space-3);
}

.visual-log-teaser__text p {
  max-width: 75ch;
  margin-block-end: var(--space-4);
}

.visual-log-teaser__link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-block-end: var(--border-focus) solid var(--accent);
  padding-block-end: var(--space-2);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.visual-log-teaser__link:hover {
  color: var(--text-strong);
  border-color: var(--text-strong);
}

.visual-log-teaser__media {
  min-width: 0;
  max-width: 300px;
  justify-self: end;
  border-radius: var(--radius-1);
  overflow: hidden;
  border: var(--border-thin) solid var(--accent-soft);
  box-shadow: var(--shadow-panel);
}

.visual-log-teaser__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
  transition: transform 300ms ease-out;
}

.visual-log-teaser__media:hover img {
  transform: scale(1.03);
}

/* Contact & Location */
.contact-location {
  padding-block: var(--space-7);
  background-color: var(--surface-1);
  border-block-start: var(--border-thin) solid var(--surface-2);
}

.contact-location__header {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  margin-block-end: var(--space-6);
}

.contact-location__header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block-end: 0;
}

.contact-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-6);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.contact-location__details {
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--surface-1);
  border: var(--border-thin) solid var(--surface-2);
  border-radius: var(--radius-1);
}

.contact-location__details h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-3);
}

.contact-location__details p {
  max-width: 65ch;
  margin-block-end: var(--space-4);
}

.contact-location__details ul {
  margin-block-end: 0;
}

.contact-location__details a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-location__details a:hover {
  color: var(--text-strong);
}

.contact-location__map {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-1);
  border: var(--border-thin) solid var(--accent-soft);
  aspect-ratio: 16 / 9;
  background-color: var(--surface-2);
}

.contact-location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .lounge-overview__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .lounge-overview__text {
    padding-inline-start: var(--space-4);
  }

  .lounge-overview__media img {
    aspect-ratio: 16 / 9;
  }

  .table-formats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .game-card:nth-child(2) {
    transform: none;
  }

  .dining-integration__unit {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .dining-integration__unit--text-left,
  .dining-integration__unit--text-right {
    grid-template-areas: "text" "media";
  }

  .dining-integration__unit--text-right .dining-integration__text {
    border-inline-start: var(--border-focus) solid var(--accent);
    border-inline-end: none;
  }

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

  .private-gaming__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .private-gaming__cta {
    justify-content: flex-start;
  }

  .visual-log-teaser__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .visual-log-teaser__media {
    max-width: 100%;
    justify-self: start;
  }

  .contact-location__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 768px) {
  .lounge-overview {
    padding-block: var(--space-6) var(--space-5);
  }

  .lounge-overview__grid {
    padding-inline: var(--space-4);
  }

  .lounge-overview__lead {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .table-formats {
    padding-block: var(--space-6);
  }

  .table-formats__header,
  .dining-integration__header,
  .responsible-play__header,
  .reservation-entry__header,
  .contact-location__header {
    padding-inline: var(--space-4);
  }

  .table-formats__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-inline: var(--space-4);
  }

  .dining-integration {
    padding-block: var(--space-6);
  }

  .dining-integration__grid {
    gap: var(--space-5);
    padding-inline: var(--space-4);
  }

  .dining-integration__unit {
    gap: var(--space-4);
  }

  .atmosphere-design {
    min-height: 40vh;
    padding-block: var(--space-6);
  }

  .atmosphere-design__content {
    padding-inline: var(--space-4);
  }

  .atmosphere-design__statement {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .atmosphere-design__highlights {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .responsible-play {
    padding-block: var(--space-6);
  }

  .responsible-play__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-inline: var(--space-4);
  }

  .private-gaming {
    padding-block: var(--space-6);
  }

  .private-gaming__grid {
    padding-inline: var(--space-4);
  }

  .private-gaming__cta .btn {
    width: 100%;
  }

  .reservation-entry {
    padding-block: var(--space-6);
  }

  .reservation-entry__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-inline: var(--space-4);
  }

  .visual-log-teaser {
    padding-block: var(--space-6);
  }

  .visual-log-teaser__grid {
    padding-inline: var(--space-4);
  }

  .contact-location {
    padding-block: var(--space-6);
  }

  .contact-location__grid {
    padding-inline: var(--space-4);
  }

  .contact-location__map {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .lounge-overview__grid,
  .table-formats__grid,
  .dining-integration__grid,
  .responsible-play__grid,
  .private-gaming__grid,
  .reservation-entry__grid,
  .visual-log-teaser__grid,
  .contact-location__grid {
    padding-inline: var(--space-3);
  }

  .lounge-overview__text {
    padding-inline-start: var(--space-3);
    padding-block: var(--space-3);
  }

  .game-card,
  .dining-integration__text,
  .responsible-play__commitment,
  .responsible-play__resources,
  .private-gaming__text,
  .reservation-entry__block,
  .contact-location__details {
    padding: var(--space-4);
  }

  .atmosphere-design__content {
    padding-inline: var(--space-3);
  }

  .contact-location__map {
    aspect-ratio: 1 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lounge-overview__media img,
  .dining-integration__media img,
  .visual-log-teaser__media img {
    transition: none;
  }

  .lounge-overview__media:hover img,
  .dining-integration__media:hover img,
  .visual-log-teaser__media:hover img {
    transform: none;
  }

  .game-card:nth-child(2) {
    transform: none;
  }
}
