/* Papillon Reizen — utilities: layout primitives, spacing */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

/* ─── Stack (vertical flow) ───────────────────────────────── */
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
.stack-2  { --stack-gap: var(--space-2); }
.stack-3  { --stack-gap: var(--space-3); }
.stack-4  { --stack-gap: var(--space-4); }
.stack-5  { --stack-gap: var(--space-5); }
.stack-6  { --stack-gap: var(--space-6); }
.stack-7  { --stack-gap: var(--space-7); }

/* ─── Cluster (horizontal, wraps) ─────────────────────────── */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: center;
}
.cluster-2 { --cluster-gap: var(--space-2); }
.cluster-4 { --cluster-gap: var(--space-4); }
.cluster-5 { --cluster-gap: var(--space-5); }

/* ─── Grid primitives ─────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-5));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ─── Main + aside split (used on /book, /contact) ─────────── */
.grid-main-aside {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .grid-main-aside {
    gap: var(--space-7);
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

/* ─── Sections ────────────────────────────────────────────── */
.section {
  padding-block: clamp(var(--space-7), 6vw, var(--space-9));
}
.section--tight { padding-block: clamp(var(--space-6), 4vw, var(--space-8)); }
.section--lg    { padding-block: clamp(var(--space-8), 8vw, var(--space-10)); }

.section--cream    { background: var(--color-bg); }
.section--subtle   { background: var(--color-bg-subtle); }
.section--elevated { background: var(--color-bg-elevated); }
.section--deep     {
  background: var(--color-bg-deep);
  color: var(--color-text-inverse);
}
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--color-text-inverse); }
.section--ink {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* ─── Display / flow ─────────────────────────────────────── */
.flow-center { text-align: center; }
.flow-center p { margin-inline: auto; }

.center { margin-inline: auto; }

.block-center {
  display: grid;
  place-items: center;
  min-height: 100%;
}

.full-bleed {
  margin-inline: calc(var(--container-pad) * -1);
}

/* ─── Aspect ratios ──────────────────────────────────────── */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-4x5  { aspect-ratio: 4 / 5; }

/* ─── Visibility ──────────────────────────────────────────── */
.hide { display: none !important; }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: initial; } .hide-desktop { display: none; } }

/* ─── Text utilities ─────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-muted  { color: var(--color-text-muted); }
.text-soft   { color: var(--color-text-soft); }
.text-accent { color: var(--color-accent); }
.text-deep   { color: var(--color-deep); }

.text-xs   { font-size: var(--fs-12); }
.text-sm   { font-size: var(--fs-14); }
.text-base { font-size: var(--fs-16); }
.text-lg   { font-size: var(--fs-18); }
.text-xl   { font-size: var(--fs-20); }
.text-2xl  { font-size: var(--fs-24); }
.text-3xl  { font-size: var(--fs-30); }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.weight-regular { font-weight: 400; }
.weight-medium  { font-weight: 500; }
.weight-bold    { font-weight: 700; }

.uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-wider); }

.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* ─── Rule / divider ─────────────────────────────────────── */
.divider {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-6);
}

.divider--accent {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-accent-surface),
    transparent
  );
}

/* ─── Motion utilities ───────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: none;
}