/* ==========================================================================
   Khusi Jewelers — Layout
   Grid system (design.md §5), section spacing rules (§4), full-bleed utility (§1.3).
   Depends on: tokens.css
   ========================================================================== */

/* ---- Container (§5) ---- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px; /* Mobile 320–479 */
}

@media (min-width: 480px) {
  .container { padding-inline: 24px; } /* Large mobile */
}

@media (min-width: 640px) {
  .container {
    width: 92%;
    padding-inline: 32px; /* Tablet */
  }
}

@media (min-width: 1024px) {
  .container {
    width: 100%;
    max-width: calc(1200px + 96px);
    padding-inline: 48px; /* Laptop */
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: calc(1360px + 160px);
    padding-inline: 80px; /* Desktop */
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: calc(1520px + 240px);
    padding-inline: 120px; /* Large desktop */
  }
}

/* ---- 12-column grid (§5: 4 cols mobile, 8 tablet, 12 laptop+) ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1440px) {
  .grid { gap: 32px; }
}

/* ---- Full-bleed sections (§1.3/§5) — escape container, touch viewport edge ---- */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---- Section rhythm (§4 rule of thumb) ---- */
.section {
  padding-block: var(--space-12); /* mobile */
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-20); } /* desktop standard→hero-adjacent */
}

.section--major {
  padding-block: var(--space-12);
}

@media (min-width: 1024px) {
  .section--major { padding-block: var(--space-24); } /* major section-to-section */
}

/* Homepage macro-section breaks — space.32 (§4, §14.6) */
.section--macro-break {
  margin-block: var(--space-16);
}

@media (min-width: 1024px) {
  .section--macro-break { margin-block: var(--space-32); }
}

/* Reading measures (§13 — About 640px, Privacy/Terms 720px, editorial 480px) */
.measure-editorial { max-width: 480px; }
.measure-reading { max-width: 640px; }
.measure-legal { max-width: 720px; }