/* Card Quay Barrier Reef — Home page styles */

.home-main {
  overflow: hidden;
}

/* Shared section helpers */
.home-main .section-intro {
  max-width: 65ch;
}

.home-main .section-intro h2 {
  margin-block-end: var(--space-24);
}

.home-main .section-intro p {
  margin-block-end: var(--space-16);
}

.home-main .section-intro ul {
  margin-block-end: var(--space-24);
  padding-inline-start: var(--space-24);
}

.home-main .section-intro .btn {
  margin-block-start: var(--space-8);
}

/* Hero */
.hero-section {
  position: relative;
  padding-block: var(--space-96) var(--space-64);
}

.hero-container {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-48);
  align-items: center;
}

.hero-copy {
  min-width: 0;
}

.hero-heading {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-sand-warm);
  margin-block-end: var(--space-24);
  max-width: 12ch;
}

.hero-accent {
  color: var(--color-coral-action);
}

.hero-subheading {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  color: var(--color-off-white);
  max-width: 65ch;
  margin-block-end: var(--space-32);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-block-end: var(--space-24);
}

.hero-actions > * {
  min-width: 0;
}

.hero-microline {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-mineral-grey);
  margin-block-end: 0;
}

.hero-media {
  min-width: 0;
  margin-inline-start: -32px;
}

.hero-window {
  border-radius: var(--radius-irregular-a);
  border: var(--border-mineral);
  overflow: hidden;
  position: relative;
}

.hero-window img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.hero-window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(rgba(138, 154, 150, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 154, 150, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.hero-window:hover::after {
  opacity: 1;
}

/* Offline Poker */
.offline-poker-section {
  padding-block: var(--space-64);
}

.offline-poker-intro {
  margin-block-end: var(--space-48);
}

.offline-poker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-end: var(--space-48);
}

.poker-feature-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.poker-feature-card h3 {
  margin-block-end: 0;
}

.poker-feature-card p {
  margin-block-end: 0;
}

.poker-feature-card .card-link {
  margin-block-start: auto;
  font-family: var(--font-heading);
  font-size: var(--text-body-s);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-coral-action);
  transition: color var(--transition-fast);
}

.poker-feature-card .card-link:hover {
  color: var(--color-coral-deep);
}

.offline-poker-cta {
  display: flex;
  justify-content: center;
}

/* Poker Room */
.poker-room-section {
  padding-block: var(--space-64);
}

.poker-room-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  align-items: center;
}

.poker-room-copy {
  min-width: 0;
}

.poker-room-copy h2 {
  margin-block-end: var(--space-24);
}

.poker-room-copy p {
  max-width: 65ch;
  margin-block-end: var(--space-24);
}

.poker-room-features {
  margin-block-end: var(--space-32);
  padding-inline-start: var(--space-24);
}

.poker-room-media {
  min-width: 0;
  margin-inline-start: -24px;
}

.poker-room-window {
  border-radius: var(--radius-irregular-b);
  border: var(--border-mineral);
  overflow: hidden;
  position: relative;
}

.poker-room-window img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.poker-room-window::after,
.poker-tables-window::after,
.card-lounge-window::after,
.restaurant-window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(rgba(138, 154, 150, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 154, 150, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.poker-room-window:hover::after,
.poker-tables-window:hover::after,
.card-lounge-window:hover::after,
.restaurant-window:hover::after {
  opacity: 1;
}

/* Poker Tables */
.poker-tables-section {
  padding-block: var(--space-64);
}

.poker-tables-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  align-items: center;
}

.poker-tables-media {
  min-width: 0;
  margin-inline-end: -24px;
}

.poker-tables-window {
  border-radius: var(--radius-irregular-a);
  border: var(--border-mineral);
  overflow: hidden;
  position: relative;
}

.poker-tables-window img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.poker-tables-copy {
  min-width: 0;
}

.poker-tables-copy h2 {
  margin-block-end: var(--space-24);
}

.poker-tables-copy p {
  max-width: 65ch;
  margin-block-end: var(--space-24);
}

.poker-tables-details {
  margin-block-end: 0;
  padding-inline-start: var(--space-24);
}

/* Card Lounge */
.card-lounge-section {
  padding-block: var(--space-64);
}

.card-lounge-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  align-items: center;
}

.card-lounge-copy {
  min-width: 0;
}

.card-lounge-copy h2 {
  margin-block-end: var(--space-24);
}

.card-lounge-copy p {
  max-width: 65ch;
  margin-block-end: var(--space-24);
}

.card-lounge-features {
  margin-block-end: var(--space-32);
  padding-inline-start: var(--space-24);
}

.card-lounge-media {
  min-width: 0;
  margin-inline-start: -24px;
}

.card-lounge-window {
  border-radius: var(--radius-irregular-b);
  border: var(--border-mineral);
  overflow: hidden;
  position: relative;
}

.card-lounge-window img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Poker Experience Selector */
.poker-selector-section {
  padding-block: var(--space-64);
}

.selector-intro {
  margin-block-end: var(--space-48);
}

.selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-end: var(--space-48);
}

.selector-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: left;
  background-color: var(--color-off-white);
  color: var(--color-reef-deep);
  border: 2px solid transparent;
  border-radius: var(--radius-8);
  padding: var(--space-24);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.selector-item:hover {
  background-color: var(--color-sand-warm);
  border-color: var(--color-coral-action);
}

.selector-item.is-selected {
  border-color: var(--color-coral-action);
  background-color: var(--color-sand-warm);
}

.selector-number {
  font-family: var(--font-heading);
  font-size: var(--text-heading-m);
  letter-spacing: var(--tracking-heading);
  color: var(--color-coral-action);
}

.selector-label {
  font-family: var(--font-heading);
  font-size: var(--text-heading-m);
  letter-spacing: var(--tracking-heading);
  color: var(--color-reef-deep);
}

.selector-description {
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
  color: var(--color-reef-deep);
}

.selector-cta {
  display: flex;
  justify-content: center;
}

/* Poker Nights */
.poker-nights-section {
  padding-block: var(--space-64);
}

.poker-nights-intro {
  max-width: 65ch;
}

.poker-nights-expectations {
  margin-block-end: var(--space-32);
  padding-inline-start: var(--space-24);
}

/* Private Poker */
.private-poker-section {
  padding-block: var(--space-64);
}

.private-poker-intro {
  max-width: 65ch;
}

.private-poker-benefits {
  margin-block-end: var(--space-32);
  padding-inline-start: var(--space-24);
}

/* Restaurant */
.restaurant-section {
  padding-block: var(--space-64);
}

.restaurant-container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-48);
  align-items: center;
}

.restaurant-copy {
  min-width: 0;
}

.restaurant-copy h2 {
  margin-block-end: var(--space-24);
}

.restaurant-copy p {
  max-width: 65ch;
  margin-block-end: var(--space-24);
}

.restaurant-atmosphere {
  color: var(--color-mineral-grey);
}

.restaurant-media {
  min-width: 0;
  margin-inline-start: -16px;
}

.restaurant-window {
  border-radius: var(--radius-irregular-a);
  border: var(--border-mineral);
  overflow: hidden;
  position: relative;
}

.restaurant-window img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Menu */
.menu-section {
  padding-block: var(--space-64);
}

.menu-intro {
  max-width: 65ch;
}

.menu-highlights {
  margin-block-end: var(--space-32);
  padding-inline-start: var(--space-24);
}

/* Dining & Poker */
.dining-poker-section {
  padding-block: var(--space-64);
}

.dining-poker-intro {
  max-width: 65ch;
}

.dining-poker-seamless {
  color: var(--color-sand-warm);
  font-weight: 600;
}

/* Gallery */
.gallery-section {
  padding-block: var(--space-64);
}

.gallery-intro {
  margin-block-end: var(--space-48);
}

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

.gallery-item {
  min-width: 0;
  margin-block-end: 0;
}

.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.gallery-item figcaption {
  padding: var(--space-8) var(--space-12);
  background-color: var(--color-off-white);
  color: var(--color-reef-deep);
  text-align: center;
}

/* Contact */
.contact-section {
  padding-block: var(--space-64);
}

.contact-intro {
  max-width: 65ch;
}

.contact-intro a {
  color: var(--color-coral-action);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.contact-intro a:hover {
  color: var(--color-coral-deep);
}

.contact-visit {
  color: var(--color-sand-warm);
  font-weight: 600;
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .hero-media {
    margin-inline-start: 0;
  }

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

  .poker-room-container,
  .poker-tables-container,
  .card-lounge-container {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .poker-room-media,
  .poker-tables-media,
  .card-lounge-media {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .restaurant-container {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .restaurant-media {
    margin-inline-start: 0;
  }

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

/* Mobile */
@media (max-width: 768px) {
  .hero-section {
    padding-block: var(--space-64) var(--space-48);
  }

  .hero-heading {
    font-size: clamp(2rem, 10vw, 2.5rem);
    line-height: 1.05;
    max-width: 100%;
  }

  .hero-subheading {
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .offline-poker-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .selector-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .gallery-item img {
    aspect-ratio: 16 / 9;
  }

  .poker-room-window,
  .poker-tables-window,
  .card-lounge-window,
  .restaurant-window,
  .hero-window {
    border-radius: var(--radius-8);
  }
}

@media (max-width: 480px) {
  .hero-heading {
    font-size: 1.75rem;
  }

  .hero-microline {
    font-size: 0.6875rem;
  }

  .offline-poker-cta,
  .selector-cta {
    justify-content: stretch;
  }

  .offline-poker-cta .btn,
  .selector-cta .btn {
    width: 100%;
  }
}