/* ════════════════════════════════════════════
   PAGE HEADER — OASI OMG · Scope .oasi-c-ph
   ════════════════════════════════════════════ */

.oasi-c-ph *,
.oasi-c-ph *::before,
.oasi-c-ph *::after { box-sizing: border-box; margin: 0; padding: 0; }

.oasi-c-ph {
  --_t:    var(--oasi-font-title, 'Fraunces', Georgia, serif);
  --_b:    var(--oasi-font-body, 'Mulish', system-ui, sans-serif);
  --_cont: var(--oasi-container, 1180px);
  --_ink:  var(--oasi-text, #17202e);
  --_mut:  var(--oasi-text-muted, #52607a);
  --_chi:  var(--oasi-sez-chisiamo, #1f5fa8);
  --_ope:  var(--oasi-sez-opere, #2f7d52);
  --_edu:  var(--oasi-sez-educazione, #e3a008);
  --_edui: var(--oasi-sez-educazione-ink, #7a5400);
  --_sos:  var(--oasi-sez-sostieni, #c0392b);
  --_blu:  var(--oasi-blu, #143258);

  --_hoff: calc(50px + var(--oasi-logo-h, 150px));
}

.oasi-c-ph .oasi-ph {
  position: relative;
  border-bottom: 2px solid var(--_c, var(--_blu));

  padding-top: calc(var(--_hoff) + clamp(1.75rem, 3.5vw, 3rem));
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

/* Colori per sezione */
.oasi-c-ph .oasi-ph--chisiamo   { --_c: var(--_chi);  --_ci: var(--_chi);  background: color-mix(in srgb, var(--_chi) 6%, #fff); }
.oasi-c-ph .oasi-ph--opere      { --_c: var(--_ope);  --_ci: var(--_ope);  background: color-mix(in srgb, var(--_ope) 6%, #fff); }
.oasi-c-ph .oasi-ph--educazione { --_c: var(--_edu);  --_ci: var(--_edui); background: color-mix(in srgb, var(--_edu) 9%, #fff); }
.oasi-c-ph .oasi-ph--sostieni   { --_c: var(--_sos);  --_ci: var(--_sos);  background: color-mix(in srgb, var(--_sos) 6%, #fff); }
.oasi-c-ph .oasi-ph--neutral    { --_c: var(--_blu);  --_ci: var(--_blu);  background: color-mix(in srgb, var(--_blu) 5%, #fff); }

.oasi-c-ph .oasi-ph__wrap {
  max-width: var(--_cont);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Breadcrumb */
.oasi-c-ph .oasi-ph__crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-family: var(--_b); font-size: .82rem; font-weight: 600;
  color: var(--_mut); margin-bottom: 1.1rem;
}
.oasi-c-ph .oasi-ph__crumb a {
  color: var(--_mut); text-decoration: none;
  transition: color var(--oasi-dur, 220ms) var(--oasi-ease, ease);
}
.oasi-c-ph .oasi-ph__crumb a:hover,
.oasi-c-ph .oasi-ph__crumb a:focus-visible { color: var(--_ci); }
.oasi-c-ph .oasi-ph__crumb a:focus-visible { outline: 2px solid var(--_ci); outline-offset: 2px; border-radius: 2px; }
.oasi-c-ph .oasi-ph__crumb-mid { color: var(--_mut); }
.oasi-c-ph .oasi-ph__sep { opacity: .45; }
.oasi-c-ph .oasi-ph__crumb-cur { color: var(--_ci); font-weight: 700; }

/* Titolo */
.oasi-c-ph .oasi-ph__title {
  font-family: var(--_t);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -.015em;
  color: var(--_ink); text-wrap: balance; max-width: 20ch;
}

/* Lead */
.oasi-c-ph .oasi-ph__lead {
  margin-top: .9rem;
  font-family: var(--_b);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6; color: var(--_mut);
  max-width: 60ch; text-wrap: pretty;
}

@media (max-width: 960px) {
  .oasi-c-ph { --_hoff: 86px; }
}