/* Page-owned styles for Fortuneparlourclub home page */
/* Scoped to #home-main and its descendants */

#home-main {
  --home-section-padding: var(--space-8);
  --home-card-gap: var(--space-4);
  --home-card-padding: var(--space-5);
  --home-border: 1px solid var(--color-border);
  --home-border-strong: 1px solid var(--color-border-strong);
  --home-transition: var(--transition-base);
  --home-shadow: var(--shadow-card);
  --home-shadow-hover: var(--shadow-modal);
  --home-radius-sm: var(--surface-radius-sm);
  --home-radius-md: var(--surface-radius-md);
  --home-radius-lg: var(--surface-radius-lg);
  --home-max-content: 75rem;
  --home-max-narrow: 52rem;
  --home-gutter-mobile: var(--space-gutter-mobile);
  --home-gutter-desktop: var(--space-gutter-desktop);
}

/* Section base spacing */
#home-main .section-lg {
  padding-block: var(--home-section-padding);
}

#home-main .home-section-title {
  margin-block-end: var(--space-4);
}

#home-main .home-section-lead {
  margin-block-end: var(--space-5);
  color: var(--color-text-muted);
}

/* Hero */
#home-main .home-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding-block: var(--space-8);
}

#home-main .home-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#home-main .home-hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  border: none;
  filter: sepia(0.3) saturate(0.8) brightness(0.8) contrast(1.05);
}

#home-main .home-hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26, 26, 46, 0.75), rgba(26, 26, 46, 0.92));
}

#home-main .home-hero-container {
  position: relative;
  z-index: 1;
}

#home-main .home-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: center;
  min-width: 0;
}

#home-main .home-hero-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

#home-main .home-hero-title {
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  font-weight: var(--text-display-weight);
  letter-spacing: var(--text-display-tracking);
  color: var(--color-text);
  margin-block-end: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

#home-main .home-hero-lead {
  max-width: 37.5rem;
  color: var(--color-text-muted);
  margin-block-end: 0;
}

#home-main .home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-start: var(--space-2);
}

#home-main .home-hero-actions > * {
  min-width: 0;
}

#home-main .home-hero-image {
  min-width: 0;
  border: var(--home-border-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--home-shadow);
}

#home-main .home-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: none;
  filter: sepia(0.35) saturate(0.9) brightness(0.95) contrast(1.05);
}

/* Introduction */
#home-main .home-intro {
  background: var(--color-surface);
  border-top: var(--home-border);
  border-bottom: var(--home-border);
}

#home-main .home-intro-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline: var(--home-gutter-mobile);
}

@media (min-width: 48rem) {
  #home-main .home-intro-container {
    padding-inline: var(--home-gutter-desktop);
  }
}

#home-main .home-intro .home-section-title,
#home-main .home-intro-copy {
  max-width: 55ch;
}

#home-main .home-intro-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#home-main .home-intro-copy p {
  margin-block-end: 0;
}

/* Fine Dining */
#home-main .home-dining {
  background: var(--color-bg);
}

#home-main .home-dining-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#home-main .home-dining-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

#home-main .home-dining-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
  padding: var(--home-card-padding);
  min-width: 0;
  background: var(--color-surface);
  border: var(--home-border);
  border-radius: var(--home-radius-md);
  box-shadow: var(--home-shadow);
  transition: transform var(--home-transition), box-shadow var(--home-transition), border-color var(--home-transition);
}

#home-main .home-dining-card:hover {
  transform: scale(1.02);
  box-shadow: var(--home-shadow-hover);
  border-color: var(--color-border-strong);
}

#home-main .home-dining-icon {
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.08);
  flex-shrink: 0;
}

#home-main .home-dining-card-title {
  margin-block-end: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-tracking);
}

#home-main .home-dining-card-text {
  margin-block-end: 0;
  max-width: 18.75rem;
  color: var(--color-text-muted);
}

/* Offline Poker Lounge */
#home-main .home-poker {
  background: var(--color-surface);
  border-top: var(--home-border);
  border-bottom: var(--home-border);
}

#home-main .home-poker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  min-width: 0;
}

#home-main .home-poker-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#home-main .home-poker-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#home-main .home-poker-subtitle {
  margin-block-end: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-tracking);
}

#home-main .home-poker-block p {
  margin-block-end: 0;
  max-width: 31.25rem;
}

#home-main .home-poker-image {
  min-width: 0;
  border: var(--home-border-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--home-shadow);
}

#home-main .home-poker-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: none;
  filter: sepia(0.35) saturate(0.9) brightness(0.95) contrast(1.05);
}

/* Art Deco Ambiance */
#home-main .home-ambiance {
  background: var(--color-bg);
}

#home-main .home-ambiance-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}

#home-main .home-ambiance-text {
  max-width: 43.75rem;
  margin-inline: auto;
  margin-block-end: 0;
  color: var(--color-text-muted);
}

/* Gallery Preview */
#home-main .home-gallery {
  background: var(--color-surface);
  border-top: var(--home-border);
  border-bottom: var(--home-border);
}

#home-main .home-gallery-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#home-main .home-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

#home-main .home-gallery-item {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#home-main .home-gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: var(--home-border-strong);
  border-radius: 0;
  filter: sepia(0.35) saturate(0.9) brightness(0.95) contrast(1.05);
  transition: transform var(--home-transition), box-shadow var(--home-transition);
}

#home-main .home-gallery-item img:hover {
  transform: scale(1.02);
  box-shadow: var(--home-shadow);
}

#home-main .home-gallery-item figcaption {
  text-align: center;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-text-muted);
  max-width: 12.5rem;
  margin-inline: auto;
  margin-block-start: 0;
}

/* Events and Tournaments */
#home-main .home-events {
  background: var(--color-bg);
}

#home-main .home-events-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: start;
  min-width: 0;
}

#home-main .home-events-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#home-main .home-event-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#home-main .home-event-title {
  margin-block-end: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-tracking);
}

#home-main .home-event-item p {
  margin-block-end: 0;
  max-width: 31.25rem;
}

#home-main .home-events-decor {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

#home-main .home-events-decor-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 12rem;
}

#home-main .home-events-decor-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-border-strong);
}

#home-main .home-events-decor-diamond {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border-strong);
  transform: rotate(45deg);
  background: rgba(212, 175, 55, 0.08);
}

/* Membership Benefits */
#home-main .home-membership {
  background: var(--color-surface);
  border-top: var(--home-border);
  border-bottom: var(--home-border);
}

#home-main .home-membership-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 37.5rem;
  margin-inline: auto;
}

#home-main .home-membership-list {
  list-style: none !important;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#home-main .home-membership-list li {
  padding-inline-start: var(--space-4);
  position: relative;
  color: var(--color-text-muted);
}

#home-main .home-membership-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.75em;
  top: 0.35em;
}

#home-main .home-membership-list strong {
  color: var(--color-text);
}

/* Testimonials */
#home-main .home-testimonials {
  background: var(--color-bg);
}

#home-main .home-testimonials-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#home-main .home-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

#home-main .home-testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--home-card-padding);
  min-width: 0;
  background: var(--color-surface);
  border: var(--home-border);
  border-radius: var(--home-radius-md);
  box-shadow: var(--home-shadow);
  transition: transform var(--home-transition), box-shadow var(--home-transition), border-color var(--home-transition);
  margin: 0;
  border-inline-start: 3px solid var(--color-accent);
}

#home-main .home-testimonial-card:hover {
  transform: scale(1.02);
  box-shadow: var(--home-shadow-hover);
  border-color: var(--color-border-strong);
}

#home-main .home-testimonial-card p {
  margin-block-end: 0;
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 25rem;
}

#home-main .home-testimonial-card cite {
  font-style: normal;
  font-size: var(--text-small-size);
  color: var(--color-accent);
  letter-spacing: var(--text-small-tracking);
  text-transform: uppercase;
  margin-block-start: auto;
}

/* Location and Contact */
#home-main .home-contact {
  background: var(--color-surface);
  border-top: var(--home-border);
  border-bottom: var(--home-border);
}

#home-main .home-contact-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#home-main .home-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

#home-main .home-contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  min-width: 0;
  background: var(--color-bg);
  border: var(--home-border);
  border-radius: var(--home-radius-md);
}

#home-main .home-contact-icon {
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.08);
  flex-shrink: 0;
}

#home-main .home-contact-title {
  margin-block-end: 0;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  font-weight: var(--text-h4-weight);
  letter-spacing: var(--text-h4-tracking);
}

#home-main .home-contact-item p {
  margin-block-end: 0;
  max-width: 18.75rem;
}

#home-main .home-contact-note {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

/* Booking CTA */
#home-main .home-booking {
  background: var(--color-bg);
}

#home-main .home-booking-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  border: var(--home-border-strong);
  border-radius: var(--home-radius-lg);
  background: var(--color-surface);
  box-shadow: var(--home-shadow);
}

#home-main .home-booking-text {
  max-width: 37.5rem;
  margin-inline: auto;
  margin-block-end: 0;
  color: var(--color-text-muted);
}

#home-main .home-booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block-start: var(--space-2);
}

/* Responsive: Tablet (max-width: 64rem / 1024px) */
@media (max-width: 64rem) {
  #home-main .home-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  #home-main .home-hero-text {
    align-items: center;
    text-align: center;
  }

  #home-main .home-hero-lead {
    margin-inline: auto;
  }

  #home-main .home-hero-actions {
    justify-content: center;
  }

  #home-main .home-hero-image {
    max-width: none;
    width: 100%;
    grid-column: 1 / -1;
    margin-inline: auto;
  }

  #home-main .home-dining-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #home-main .home-poker-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  #home-main .home-poker-image {
    max-width: none;
    width: 100%;
    grid-column: 1 / -1;
    margin-inline: auto;
  }

  #home-main .home-events-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  #home-main .home-events-decor {
    display: none;
  }

  #home-main .home-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #home-main .home-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive: Mobile (max-width: 48rem / 768px) */
@media (max-width: 48rem) {
  #home-main .section-lg {
    padding-block: var(--space-6);
  }

  #home-main .home-hero {
    padding-block: var(--space-6);
  }

  #home-main .home-hero-title {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
  }

  #home-main .home-hero-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  #home-main .home-hero-actions .btn {
    width: 100%;
  }

  #home-main .home-dining-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  #home-main .home-dining-card {
    padding: var(--space-4);
  }

  #home-main .home-poker-grid {
    gap: var(--space-4);
  }

  #home-main .home-gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  #home-main .home-testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  #home-main .home-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  #home-main .home-contact-item {
    padding: var(--space-4);
  }

  #home-main .home-booking-container {
    padding: var(--space-4);
  }

  #home-main .home-booking-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  #home-main .home-booking-actions .btn {
    width: 100%;
  }
}

/* Small mobile refinement (max-width: 30rem / 480px) */
@media (max-width: 30rem) {
  #home-main .home-hero-title {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
  }

  #home-main .home-hero-lead {
    font-size: var(--text-body-size);
  }

  #home-main .home-dining-card-text,
  #home-main .home-poker-block p,
  #home-main .home-event-item p,
  #home-main .home-ambiance-text,
  #home-main .home-booking-text {
    font-size: var(--text-body-size);
  }
}

/* mobile-photo-center */
@media (max-width: 56.25rem) {
  img,
  video {
    object-position: center !important;
  }

  .image-frame,
  .media-frame,
  .card__media,
  [class*='__media'] {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    justify-self: stretch;
    overflow: hidden;
  }

  .image-frame img,
  .media-frame img,
  .media-frame video,
  .card__media img,
  [class*='__media'] img,
  [class*='hero'] img,
  [class*='hero__image'] {
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center !important;
  }
}
