/* ---------------------------------------------------------------------------
   Band system: .band (vertical rhythm + optional ground) → .container →
   .row → .col--*. Column fractions are allowed NOT to sum to 100%: the
   remainder is the whitespace, authored per band rather than by a rigid grid.
--------------------------------------------------------------------------- */

.content {
  padding-top: var(--nav-h);
}

.content--flush {
  padding-top: 0;
}

/* Pagine interamente scure: lo spazio riservato alla barra deve avere lo stesso
   fondo, altrimenti in cima resta una striscia avorio del corpo pagina. */
.content--deep {
  background: var(--c-bg-deep);
}

.band {
  position: relative;
  padding-block: var(--band-y);
}

.band--tight  { padding-block: calc(var(--band-y) * 0.6); }
.band--loose  { padding-block: calc(var(--band-y) * 1.35); }
.band--top0   { padding-top: 0; }
.band--bottom0 { padding-bottom: 0; }

.band--alt   { background: var(--c-bg-alt); }
.band--deep  { background: var(--c-bg-deep); color: var(--c-on-deep); }
.band--deep .eyebrow { color: var(--c-accent-soft); }
.band--deep .lead,
.band--deep .caption { color: var(--c-on-deep-soft); }

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

.container--wide { max-width: var(--w-wide); }
.container--narrow { max-width: var(--w-narrow); }
.container--bleed { max-width: none; padding-inline: 0; }

/* Column widths subtract their share of --col-gap, so a row's fractions can be
   read as plain percentages and never wrap unexpectedly when the gap changes. */
.row {
  --col-gap: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--col-gap);
}

.row--tight { --col-gap: var(--s-4); }
.row--wide  { --col-gap: var(--s-8); }
.row--end   { align-items: flex-end; }
.row--center { align-items: center; }
.row--between { justify-content: space-between; }

.col { flex: 1 1 0; min-width: 0; }
.col--full    { flex: 0 0 100%; }
.col--half    { flex: 0 0 calc(50%  - var(--col-gap) / 2); }
.col--third   { flex: 0 0 calc(33.333% - var(--col-gap) * 2 / 3); }
.col--twothirds { flex: 0 0 calc(66.666% - var(--col-gap) / 3); }
.col--fourth  { flex: 0 0 calc(25%   - var(--col-gap) * 3 / 4); }

/* Pairs deliberately short of 100%: the remainder is the composition. */
.col--38 { flex: 0 0 calc(38% - var(--col-gap) / 2); }
.col--44 { flex: 0 0 calc(44% - var(--col-gap) / 2); }
.col--52 { flex: 0 0 calc(52% - var(--col-gap) / 2); }
.col--58 { flex: 0 0 calc(58% - var(--col-gap) / 2); }

.push-down-sm { margin-top: var(--s-5); }
.push-down    { margin-top: var(--s-7); }
.push-down-lg { margin-top: var(--s-8); }

.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }

.align-center { text-align: center; }
.align-center .lead { margin-inline: auto; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 46rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* ------------------------------------------------------------ image frame */

.ph {
  display: block;
  position: relative;
  aspect-ratio: var(--ratio, 1.5);
  overflow: hidden;
  background: var(--c-bg-plate);
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph--free { aspect-ratio: auto; }

.figure {
  display: block;
  margin: 0;
}

.figure__cap {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  .row, .row--wide, .row--tight { --col-gap: var(--s-4); }
  .col--third { flex: 0 0 calc(50% - var(--col-gap) / 2); }
  .col--fourth { flex: 0 0 calc(50% - var(--col-gap) / 2); }
  .col--38, .col--44, .col--52, .col--58 { flex: 0 0 100%; }
  .col--half, .col--twothirds { flex: 0 0 100%; }
  .push-down, .push-down-lg { margin-top: var(--s-5); }
}

@media (max-width: 640px) {
  .col--third, .col--fourth { flex: 0 0 100%; }
}