/* ==========================================================================
   FIF website — layout.css
   Container, section rhythm, grids. Mobile-first: base = mobile,
   then 640px (large phone / small tablet), 900px (tablet), 1200px (desktop).
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* ---------- Section blocks ---------- */
.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}
.section--paper { background: var(--paper); }
.section--tint { background: var(--green-tint); }
.section--green { background: var(--fif-green); color: var(--color-on-green); }
.section--lime { background: var(--fif-lime); color: var(--ink); }
.section--magenta { background: var(--brac-magenta); color: var(--white); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-4); font-size: var(--text-lg); line-height: 1.55; }
.section-head .lead { color: var(--color-text-muted); }
.section--green .section-head .lead { color: var(--color-on-green-muted); }

/* ---------- Grids ---------- */
.grid {
  display: grid;
  gap: var(--space-5);
}
.grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid { gap: var(--space-6); }
}
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* Two-column split (text + visual) */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .split--wide-left { grid-template-columns: 7fr 5fr; }
  .split--wide-right { grid-template-columns: 5fr 7fr; }
  .split--reverse > :first-child { order: 2; }
  .split--top { align-items: start; }
}

/* Stack — vertical rhythm helper */
.stack > * + * { margin-top: var(--space-5); }
.stack--lg > * + * { margin-top: var(--space-7); }

/* ---------- Header layout ---------- */
.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.25rem;
}
@media (min-width: 1000px) {
  .site-header__inner { gap: var(--space-5); }
}

/* ---------- Agenda layout ---------- */
.agenda {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
  .agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}