/* ============================================================
   Layout — Container, grid, section spacing
   ============================================================ */

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

.apoh-container--narrow {
  max-width: 800px;
}

.apoh-container--wide {
  max-width: 1400px;
}

/* --- Section spacing --- */
.apoh-section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.apoh-section--sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.apoh-section--lg {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.apoh-section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Background variants --- */
.apoh-section--white { background: var(--bg-surface); }
.apoh-section--subtle { background: var(--bg-subtle); }
.apoh-section--page { background: var(--bg-page); }
.apoh-section--blue { background: var(--apoh-blue); color: var(--fg-on-blue); }
.apoh-section--dark { background: #1a1a2e; color: #fff; }

.apoh-section--blue h2,
.apoh-section--blue h3,
.apoh-section--dark h2,
.apoh-section--dark h3 { color: #fff; }

.apoh-section--blue .apoh-section-label,
.apoh-section--dark .apoh-section-label { color: rgba(255, 255, 255, 0.7); }
.apoh-section--blue .apoh-section-label--green,
.apoh-section--dark .apoh-section-label--green { color: var(--apoh-green); }

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

.apoh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.apoh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.apoh-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Two-column feature layout --- */
.apoh-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.apoh-feature--reverse .apoh-feature__media { order: -1; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .apoh-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --fs-display: 2.5rem;
    --fs-h1:      2rem;
    --fs-h2:      1.5rem;
    --fs-h3:      1.25rem;
    --container-padding: 20px;
  }

  .apoh-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .apoh-section--lg {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .apoh-grid--2,
  .apoh-grid--3,
  .apoh-grid--4 {
    grid-template-columns: 1fr;
  }

  .apoh-feature {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .apoh-feature--reverse .apoh-feature__media { order: 0; }
}

@media (max-width: 480px) {
  :root {
    --fs-display: 2rem;
    --fs-h1:      1.75rem;
    --container-padding: 16px;
  }
}