/**
 * site-layout.css — additive layout chassis for Online Rummy.
 * Load AFTER style.css (and after home.css on home). Do not replace game.css.
 * Scope: shared chrome, content prose, overflow, EN/HI text, mid-width header.
 */
:root {
  --layout-gutter: 16px;
  --layout-section-y: clamp(28px, 5vw, 56px);
  --layout-stack: 1.2rem;
  --layout-prose: 68ch;
}

@media (min-width: 768px) {
  :root {
    --layout-gutter: 24px;
  }
}

/* —— Global overflow & media safety (EN + HI) —— */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  min-width: 320px;
}

/* Content/marketing images only — never touch game table / card / ornament assets */
.prose img,
.page img:not(.logo-mark):not(.logo-emblem),
.hero img,
.section img,
.shots-grid img,
.feature-card img,
.mode-card img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4,
.btn,
.nav a,
.lead,
.prose,
.faq summary,
.faq p,
.india-badge {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Devanagari: prefer longer line-height; avoid fixed height clipping */
html[lang^="hi"] h1,
html[lang^="hi"] h2,
html[lang^="hi"] .btn,
html[lang^="hi"] .nav a {
  line-height: 1.35;
}

/* —— Content pages: readable measure & stack —— */
.page .prose p,
.page .prose li,
.prose p,
.prose li {
  max-width: var(--layout-prose);
}

.page .prose > * + *,
.prose > * + * {
  margin-top: var(--layout-stack);
}

body:not(.home):not(.play) .page > .wrap {
  padding-bottom: var(--layout-section-y);
}

body:not(.home):not(.play) .page > .wrap > h1 {
  line-height: 1.2;
}

/* Cards / grids: prevent flex/grid children from overflowing */
.feature-card,
.mode-card,
.var-card,
.guide-card,
.shot-card,
.faq details {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

.feature-grid,
.mode-grid,
.variants-grid,
.shots-grid,
.cta-row {
  min-width: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: stretch;
}

.cta-row .btn {
  max-width: 100%;
}

/* —— Header mid-width: allow wrap instead of crush —— */
@media (max-width: 1100px) and (min-width: 768px) {
  .site-header > .wrap.header-row {
    gap: 8px 12px;
  }

  .site-header .nav a {
    padding-inline: 8px;
    font-size: 0.9rem;
  }

  .site-header .nav-play.btn,
  .site-header .nav-dl.btn {
    padding-inline: 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 767px) {
  .cta-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* —— Home: keep intro column from forcing overflow —— */
body.home .hero-intro,
body.home .hero-actions {
  min-width: 0;
  max-width: 100%;
}

/* —— Rummy SEO blocks below table: clear table stacking; leave battle CSS alone —— */
body.play .demo-format,
body.play .after-play,
body.play .faq,
body.play .game-help-block {
  clear: both;
  position: relative;
  z-index: 1;
}

body.play .demo-format,
body.play .after-play {
  min-width: 0;
}

/* —— Footer —— */
.site-footer {
  position: relative;
  z-index: 1;
  clear: both;
}

.site-footer a {
  overflow-wrap: break-word;
}

/* —— FAQ —— */
.faq details {
  margin-block: 8px;
}

.faq details + details {
  margin-top: 10px;
}

.faq summary {
  cursor: pointer;
  line-height: 1.4;
}

/* —— Sticky CTA: don't spill past viewport —— */
#sticky-play-now,
.sticky-cta {
  max-width: 100%;
}

/* —— Landmarks: contain 100vw-style children —— */
.hero,
.site-header,
.site-footer,
.page,
main {
  max-width: 100%;
}