/* grid.css — minimal shared CSS for all themed sites.
   Only reset + container + CSS Grid utilities + CTA structure. */

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }

/* ─── CONTAINER ─── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: 900px; }
.container--wide { max-width: 1400px; }

/* ─── GRID UTILITIES ─── */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .container { padding: 0 1.5rem; }
}

/* ─── CTA BLOCK STRUCTURE ─── */
.cta-block { margin: 2rem 0; }
.cta-block--button { text-align: center; }
.cta-block--banner .cta-banner { padding: 1.5rem 2rem; text-align: center; }
.cta-block--text-link { text-align: center; }