/* ==========================================================================
   layout.css
   MR. MA RENOVATION - Container, sections and grid helpers.
   Depends on: tokens.css and base.css
   Breakpoints: mobile up to 599px, tablet 600-1023px, desktop 1024px+
   ========================================================================== */

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

@media (min-width: 600px) {
  .container {
    padding-inline: var(--space-4); /* 24px */
  }
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--section-padding);
}

.section--white {
  background-color: var(--color-white);
}

.section--sand {
  background-color: var(--color-sand);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--color-white);
}

.section--navy .label {
  color: var(--color-gold);
}

/* ---------- Section heading block ---------- */
.section-heading {
  margin-bottom: var(--space-6);
}

.section-heading .label {
  margin-bottom: var(--space-2);
}

/* ---------- Grid helpers ---------- */
.grid {
  display: grid;
  gap: var(--space-4);
}

/* Mobile: 1 column by default */

/* Tablet: 2 columns */
@media (min-width: 600px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns for grid--3 */
@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid {
    gap: var(--space-5);
  }
}

/* ---------- Simple vertical rhythm helper ---------- */
.stack > * + * {
  margin-top: var(--space-3);
}