/* ============================================================
   layout.css — container, grid utilities, page-level structure
   Mobile-first. Desktop overrides via @media (min-width: 1024px).
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--pg-container);
  margin-inline: auto;
  padding-inline: var(--pg-page-pad-x);
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--pg-sp-10); }
}

.section {
  padding-block: var(--pg-sp-12) var(--pg-sp-12);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--pg-sp-20) var(--pg-sp-20); }
}

.section--dark {
  background: var(--pg-bg-dark);
  color: var(--pg-text-on-dark);
}
.section--gradient-violet {
  background: linear-gradient(135deg, var(--pg-color-deep) 0%, var(--pg-ink-700) 60%, var(--pg-ink-800) 100%);
  color: var(--pg-text-on-dark);
}

/* Grid utilities — minimal */
.row { display: flex; flex-direction: column; gap: var(--pg-sp-6); }
@media (min-width: 1024px) {
  .row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pg-sp-12); align-items: center; }
  .row--reverse-lg .row__media { order: -1; }
}

.stack > * + * { margin-block-start: var(--pg-sp-4); }
.stack-lg > * + * { margin-block-start: var(--pg-sp-6); }