/*
 * layout.css — page structure, sections, responsive grid
 *
 * Mobile-first. Breakpoints:
 *   640px  — tablet
 *   1024px — desktop
 *   1280px — wide desktop
 *
 * → In NextJS: each section maps to its own layout wrapper or page.module.css
 */

/* ─── Site Header ────────────────────────────────────────────────────────── */

/* → nav.module.css */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: rgba(245, 240, 232, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-sage-light);
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

/* → hero.module.css */
#hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--nav-height);

  /*
   * ─── PHASE 2 PHOTO SWAP ─── one line change:
   * Replace:  background-image: var(--texture-linen);
   * With:     background-image: url('/assets/hero.jpg');
   * Also add: background-size: cover;
   *           background-position: center;
   */
  background-color: var(--color-cream);
  background-image: var(--texture-linen);
}

.hero__inner {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-6);
}

@media (min-width: 1024px) {
  .hero__inner {
    max-width: 780px;
  }
}

/* ─── Details ────────────────────────────────────────────────────────────── */

/* → details.module.css */
#details {
  background-color: var(--color-warm-white);
  background-image: var(--texture-linen);
  padding-block: var(--space-20) var(--space-24);
}

#details .container {
  text-align: center;
}

.details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  text-align: left;
}

@media (min-width: 640px) {
  .details__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ─── FAQ ────────────────────────────────────────────────────────────────── */

/* → faq.module.css */
#faq {
  background-color: var(--color-cream);
  background-image: var(--texture-linen);
  padding-block: var(--space-20) var(--space-24);
}

#faq .container {
  text-align: center;
}

.faq__list {
  text-align: left;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

/* → footer.module.css */
.footer {
  background-color: var(--color-warm-white);
  background-image: var(--texture-linen);
  border-top: 1px solid var(--color-sage-light);
  padding-block: var(--space-10);
  text-align: center;
}