/* ═══════════════════════════════════════════════
   MAK PIK — Layout System
   Container, sections, grid utilities
   ═══════════════════════════════════════════════ */

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

.container--narrow {
  max-width: var(--container-narrow);
}

/* ═══ SECTIONS ═══ */
.section {
  padding-block: var(--section-padding);
  position: relative;
}

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

.section--maroon {
  background-color: var(--color-maroon);
  color: var(--color-text-light);
}

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

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

/* ═══ GRID SYSTEM ═══ */
.grid {
  display: grid;
  gap: var(--space-xl);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

.grid--5 {
  grid-template-columns: 1fr;
}

/* ═══ FLEX UTILITIES ═══ */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* ═══ SECTION FLOW ═══ */
.flow > * + * {
  margin-top: var(--space-xl);
}

.flow--sm > * + * {
  margin-top: var(--space-md);
}

.flow--lg > * + * {
  margin-top: var(--space-2xl);
}

/* ═══ SECTION DIVIDER — photo strip ═══ */
.photo-divider {
  width: 100%;
  height: clamp(80px, 15vw, 200px);
  overflow: hidden;
  position: relative;
}

.photo-divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-bg-dark-rgb), 0.3),
    rgba(var(--color-bg-dark-rgb), 0.1),
    rgba(var(--color-bg-dark-rgb), 0.3)
  );
}

/* ═══ SECTION CONTENT WRAPPER ═══ */
.section-body {
  margin-top: var(--space-md);
}

@media (min-width: 860px) {
  .section-body {
    margin-top: var(--space-xl);
  }
}

/* ═══ TWO COLUMN LAYOUT ═══ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 1024px) {
  .split {
    gap: var(--space-2xl);
  }
}

.split--reverse .split__media {
  order: -1;
}

.split__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.split__media img {
  width: 100%;
  height: auto;
  display: block;
}