/*
 * layout.css — Layout utilities
 * Grailsome Design System — Section 4 (spacing tokens live in tokens.css)
 */

/* -------------------------------------------------------
   Containers
------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.container--narrow {
  width: 100%;
  max-width: var(--max-narrow);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.container--prose {
  width: 100%;
  max-width: var(--max-prose);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

/* -------------------------------------------------------
   Flex utilities
------------------------------------------------------- */

.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* -------------------------------------------------------
   Spacing utilities
------------------------------------------------------- */

.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }

.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

/* -------------------------------------------------------
   Icon utilities
------------------------------------------------------- */

.icon--muted { opacity: 0.3; }

/* -------------------------------------------------------
   Grid systems — Section 4.4
------------------------------------------------------- */

/* Feature grid — 3 columns */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-brand);
  gap: 0;
}

/* How-it-works — 4 columns */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--border-brand);
  gap: 0;
}

/* Pricing — 3 columns */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-brand);
  gap: 0;
}

/* Mobile fallback for all grids */
@media (max-width: 900px) {
  .feat-grid,
  .how-grid,
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------
   Mobile — containers
------------------------------------------------------- */

@media (max-width: 600px) {
  .container,
  .container--narrow,
  .container--prose {
    padding-inline: var(--space-4);
  }
}

/* -------------------------------------------------------
   Grain overlay — Section 8.1
------------------------------------------------------- */

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.022;
}

/* -------------------------------------------------------
   Section padding — Section 4.2
------------------------------------------------------- */

section {
  padding: 7rem 5rem;
}

.dense-section {
  padding: 2rem 5rem;
}

@media (max-width: 900px) {
  section {
    padding: 5rem 2rem;
  }

  .dense-section {
    padding: 2rem 2rem;
  }
}