/* Home page */
body > main { overflow: hidden; }
.site-footer { margin-top: 0; }
body > main > section { position: relative; padding: clamp(3.5rem, 7vw, 7rem) var(--container-padding); }
body > main > section > * { width: min(100%, 1200px); margin-inline: auto; }
body > main h2 { font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.12; letter-spacing: -0.025em; }
body > main h3 { color: var(--color-primary); }
body > main p { max-width: 64ch; }

/* Shared split layouts */
.hero-grid, .concept-grid, .philosophy-grid, .signature-grid, .casino-grid,
.poker-grid, .roulette-grid, .blackjack-grid, .private-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
}
.hero-text-block, .concept-text-block, .philosophy-text-block, .signature-text-block,
.casino-text-block, .poker-text-block, .roulette-text-block, .blackjack-text-block,
.private-text-block, .hero-image-block, .concept-image-block, .philosophy-image-block,
.signature-image-block, .casino-image-block, .poker-image-block, .roulette-image-block,
.blackjack-image-block, .interior-image-block { min-width: 0; }
.hero-image-block, .concept-image-block, .philosophy-image-block, .signature-image-block,
.casino-image-block, .poker-image-block, .roulette-image-block, .blackjack-image-block,
.interior-image-block { position: relative; }
.hero-image-block img, .concept-image-block img, .philosophy-image-block img,
.signature-image-block img, .casino-image-block img, .poker-image-block img,
.roulette-image-block img, .blackjack-image-block img, .interior-image-block img {
  width: 100%; object-fit: cover; border-radius: var(--radius-medium);
  box-shadow: 0 18px 50px rgba(26, 26, 26, 0.14);
}
.concept-image-block img, .signature-image-block img, .poker-image-block img,
.blackjack-image-block img { aspect-ratio: 1; }
.philosophy-image-block img, .casino-image-block img, .roulette-image-block img,
.interior-image-block img { aspect-ratio: 4 / 3; }

.concept-unit, .philosophy-unit, .signature-unit, .casino-unit, .poker-unit,
.roulette-unit, .blackjack-unit, .private-unit {
  position: relative; padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--color-accent); margin-block-start: var(--space-lg);
}
.concept-unit h3, .philosophy-unit h3, .signature-unit h3, .casino-unit h3,
.poker-unit h3, .roulette-unit h3, .blackjack-unit h3, .private-unit h3 { margin-block-end: var(--space-sm); }
.concept-unit > :last-child, .philosophy-unit > :last-child, .signature-unit > :last-child,
.casino-unit > :last-child, .poker-unit > :last-child, .roulette-unit > :last-child,
.blackjack-unit > :last-child, .private-unit > :last-child { margin-block-end: 0; }

/* Hero */
.hero-section {
  isolation: isolate; min-height: min(780px, calc(100vh - 72px)); display: grid; align-items: center;
  background: radial-gradient(circle at 8% 20%, rgba(251,188,5,.18), transparent 27rem),
    linear-gradient(135deg, var(--color-background) 0 57%, #f1e8d2 57% 100%);
}
.hero-section::after { content: ""; position: absolute; z-index: -1; inset: auto 4% 7% auto;
  width: 11rem; aspect-ratio: 1; border: 1px solid rgba(0,71,171,.18); border-radius: 50%; }
.hero-text-block h1 { max-width: 12ch; font-size: clamp(2.8rem, 5.7vw, 5.25rem); line-height: .98;
  letter-spacing: -.045em; color: var(--color-primary); margin-block-end: var(--space-lg); }
.hero-text-block > p { max-width: 58ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: #41463b; margin-block-end: var(--space-lg); }
.hero-cta-group, .final-cta-group { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero-cta-group .btn, .final-cta-group .btn, .menu-link-block .btn, .private-cta-block .btn {
  padding: .85rem 1.5rem; font-weight: var(--font-weight-bold); }
.btn-secondary { color: var(--color-primary); background: transparent; border: 1px solid currentColor; }
.btn-secondary:hover { border-color: var(--color-accent); }
.hero-image-block::before { content: ""; position: absolute; inset: -1rem 1.5rem 1rem -1rem;
  z-index: -1; border: 2px solid var(--color-accent); border-radius: var(--radius-medium); }
.hero-image-block img { min-height: 440px; aspect-ratio: 4 / 3; }

/* Restaurant story */
.concept-section, .signature-section, .roulette-section { background-color: var(--color-surface); }
.concept-section::before, .philosophy-section::before, .signature-section::before,
.poker-section::before, .roulette-section::before, .blackjack-section::before {
  content: ""; position: absolute; inset-block: 12%; left: 50%; width: 4px;
  border-radius: 3px; background-color: #8b5a2b; opacity: .7; transform: translateX(-50%);
}
.concept-grid, .philosophy-grid, .signature-grid, .poker-grid, .roulette-grid,
.blackjack-grid { position: relative; z-index: 1; }
.content-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.content-list li { padding: .35rem .75rem; color: var(--color-primary);
  background: rgba(0,71,171,.08); border-radius: 999px; font-weight: var(--font-weight-semibold); }
.philosophy-section { background: linear-gradient(180deg, var(--color-background), #f5ecd8); }

/* Menu cards */
.menu-section { background-color: #f2e9d6; }
.menu-section > h2, .interior-section > h2 { text-align: center; max-width: 850px;
  margin-inline: auto; margin-block-end: var(--space-xl); }
.menu-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.menu-card { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem); background-color: var(--color-surface);
  border-block-start: 5px solid var(--color-accent); border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
.menu-card:nth-child(even) { border-color: var(--color-primary); }
.menu-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(26,26,26,.1); }
.menu-card p { margin: 0; }
.menu-link-block { margin-block-start: var(--space-xl); text-align: center; }

/* Interior gallery */
.interior-section { background-color: var(--color-background); }
.interior-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg); align-items: stretch; }
.interior-text-block { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.5rem); background-color: var(--color-surface); border-radius: var(--radius-medium); }
.interior-text-block p { margin-block-end: 0; }
.interior-image-block img { height: 100%; min-height: 330px; }
.interior-grid > :nth-child(3) { grid-column: 2; grid-row: 2; }
.interior-grid > :nth-child(4) { grid-column: 1; grid-row: 2; }
.interior-text-full { grid-column: 1 / -1; text-align: center; align-items: center; }

/* After Dark */
.casino-section { color: var(--color-text-on-surface-accent);
  background: radial-gradient(circle at 80% 15%, rgba(251,188,5,.12), transparent 28rem), var(--color-surface-accent); }
.casino-section h2, .casino-section h3 { color: var(--color-text-on-surface-accent); }
.casino-section::before { content: ""; position: absolute; inset-block: 12%; left: 50%;
  width: 4px; background: var(--color-accent); opacity: .75; }
.casino-unit { border-color: var(--color-accent); }
.casino-image-block img { border: 1px solid rgba(255,255,255,.15); }
.poker-section, .blackjack-section { background-color: #f5ecd8; }

/* Reservation and closing CTA */
.private-section { background-color: var(--color-background); }
.private-grid { padding: clamp(2rem, 5vw, 4.5rem); color: var(--color-text-on-primary);
  background-color: var(--color-primary); border-radius: var(--radius-medium);
  box-shadow: 0 20px 50px rgba(0,71,171,.18); }
.private-grid h2, .private-grid h3 { color: var(--color-text-on-primary); }
.private-unit { border-color: var(--color-accent); }
.private-cta-block { text-align: center; }
.private-cta-block .btn { color: var(--color-text-on-accent); background-color: var(--color-accent); }
.private-cta-block .btn:hover { color: var(--color-primary); background-color: var(--color-surface); }
.final-cta-section { background: linear-gradient(rgba(26,26,26,.72), rgba(26,26,26,.72)),
  url("/src/media/hero-dining-room.webp") center / cover; }
.final-cta-block { max-width: 760px; text-align: center; color: white; }
.final-cta-block h2 { color: white; }
.final-cta-block p { margin-inline: auto; font-size: 1.1rem; }
.final-cta-group { justify-content: center; }
.final-cta-group .btn-secondary { color: white; }

/* Scroll animation hooks used by home.js */
.fade-in-on-scroll { opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease; }
.fade-in-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .menu-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid, .concept-grid, .philosophy-grid, .signature-grid, .casino-grid,
  .poker-grid, .roulette-grid, .blackjack-grid { gap: var(--space-xl); }
}

@media (max-width: 760px) {
  body > main > section { padding-block: var(--space-xl); }
  .hero-section { min-height: auto; background: var(--color-background); }
  .hero-grid, .concept-grid, .philosophy-grid, .signature-grid, .casino-grid,
  .poker-grid, .roulette-grid, .blackjack-grid, .private-grid, .interior-grid {
    grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero-text-block h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .hero-image-block img { min-height: 0; }
  .concept-section::before, .philosophy-section::before, .signature-section::before,
  .casino-section::before, .poker-section::before, .roulette-section::before,
  .blackjack-section::before { display: none; }
  .concept-image-block, .philosophy-image-block, .signature-image-block, .casino-image-block,
  .poker-image-block, .blackjack-image-block, .roulette-image-block { order: -1; }
  .menu-card-grid { grid-template-columns: 1fr; }
  .interior-grid > :nth-child(3), .interior-grid > :nth-child(4), .interior-text-full {
    grid-column: auto; grid-row: auto; }
  .interior-grid > :nth-child(4) { order: 3; }
  .interior-grid > :nth-child(3) { order: 4; }
  .interior-text-full { order: 5; }
  .private-cta-block { text-align: left; }
}

@media (max-width: 480px) {
  .hero-cta-group, .final-cta-group { flex-direction: column; }
  .hero-cta-group .btn, .final-cta-group .btn, .private-cta-block .btn { width: 100%; }
  .hero-image-block::before { inset: -.5rem .75rem .5rem -.5rem; }
  .interior-text-block, .private-grid { padding: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-on-scroll { opacity: 1; transform: none; transition: none; }
  .menu-card { transition: none; }
  .philosophy-image-block img { transform: none !important; }
}