/* Purpose: Layout primitives — container, section spacing, grid. Mobile-first. */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);   /* 20px — mobile */
}

/* Progressive side padding — tablet portrait → tablet → full Figma padding on lg+ */
@media (min-width: 600px)  { .container { padding-inline: 32px; } }   /* tablet portrait */
@media (min-width: 768px)  { .container { padding-inline: 40px; } }   /* tablet */
@media (min-width: 1024px) { .container { padding-inline: clamp(40px, 6vw, 96px); } }  /* tablet landscape / mini-laptop */
@media (min-width: 1440px) { .container { padding-inline: clamp(80px, 9vw, var(--container-pad)); } } /* laptop+ → full 130px */

.container--wide { max-width: 1680px; }

.section { padding-block: var(--space-10); }                          /* 40px — mobile */
@media (min-width: 600px)  { .section { padding-block: var(--space-12); } }  /* 48px */
@media (min-width: 1024px) { .section { padding-block: var(--space-12); } }  /* 48px */
@media (min-width: 1440px) { .section { padding-block: 56px; } }             /* 56px */

.grid { display: grid; gap: var(--grid-gap); }
.flow > * + * { margin-top: var(--space-4); }