/* =============================================================
   layout.css — Structural Layout System
   Siti Fatima Painter Portfolio
   ============================================================= */

/* ── Container ──────────────────────────────────────────────── */
.container {
  max-width: 1400px;
  margin:    0 auto;
  padding:   0 2.5rem;
  width:     100%;
}

/* ── Section Base ───────────────────────────────────────────── */
.section {
  padding: 3.5rem 0;
}

/* ── Section Themes ─────────────────────────────────────────── */
.section-dark {
  background: var(--color-bg-dark);
  color:      var(--color-text-light);
}

.section-light {
  background: var(--color-bg-cream);
}

/* ── Two-Column Grid ────────────────────────────────────────── */
.two-column {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--spacing-lg);
  align-items:           center;
}

/* ── Centered Content Block ─────────────────────────────────── */
.centered-content {
  max-width:  700px;
  margin:     0 auto;
  text-align: center;
}

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
  padding:        1.5rem 0 var(--spacing-md);
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
}

.page-header p,
.page-header .hero__subtitle,
.page-header .page-subtitle {
  color:          #2C2C3E !important;
  font-size:      1.15rem;
  line-height:    1.6;
  max-width:      600px;
  margin-top:     0.75rem;
  margin-left:    auto;
  margin-right:   auto;
  text-align:     center;
}

/* ── Flex Utilities ─────────────────────────────────────────── */
.flex-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

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

/* ── Spacing Utilities ──────────────────────────────────────── */
.mt-sm  { margin-top:    var(--spacing-sm); }
.mt-md  { margin-top:    var(--spacing-md); }
.mt-lg  { margin-top:    var(--spacing-lg); }
.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-md  { margin-bottom: var(--spacing-md); }
.mb-lg  { margin-bottom: var(--spacing-lg); }

/* ── Responsive: Tablet (768px) ─────────────────────────────── */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-sm);
  }

  .section {
    padding: var(--spacing-lg) 0;
  }

  .two-column {
    grid-template-columns: 1fr;
    gap:                   var(--spacing-md);
  }

  .page-header {
    padding: var(--spacing-lg) 0 var(--spacing-md);
  }
}

/* ── Responsive: Mobile (480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-sm);
  }

  .section {
    padding: var(--spacing-md) 0;
  }

  .centered-content {
    max-width: 100%;
  }
}