/* ==========================================================================
   layout.css — Containers, sections, grid helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

section { padding-block: var(--section-pad); }

/* Alternating section backgrounds for gentle rhythm */
.section--soft { background: var(--bg-soft); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack > * + * { margin-top: var(--space-4); }

.flow { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.flow--center { justify-content: center; align-items: center; }

.divider { height: 1px; background: var(--line); border: 0; }

/* Contextual mini-CTA that closes many sections */
.context-cta {
  margin-top: var(--space-7);
  text-align: center;
}
.context-cta a {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--accent-dark);
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease);
}
.context-cta a:hover { border-color: var(--accent-dark); }
.context-cta a .arrow { display: inline-block; transition: transform var(--speed) var(--ease); }
.context-cta a:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .context-cta a:hover .arrow { transform: translateX(-4px); }