/* =============================================================
   DENTAL GO — Pagina Chi siamo (editoriale)
   Foglio dedicato, caricato SOLO su /chi-siamo/.
   Pagina chiara: bianco dominante, una sezione Blu Dental Go, una
   micro-sezione navy, headline grandi, paragrafi brevi e molto
   spazio negativo. Token, tipografia, occhielli, bottoni, preset
   chiari (.bg-white / .bg-off-white) e reveal sono quelli di
   main.css: qui solo la composizione delle sezioni.
   Ogni selettore parte da .ofy-chi-page.
   ============================================================= */

.ofy-chi-page {
  --chi-line: rgba(7, 16, 26, 0.12);          /* filetti su fondo chiaro */
  --chi-line-inv: rgba(255, 255, 255, 0.28);  /* filetti su blu e navy   */
  --chi-gap: clamp(32px, 5vw, 80px);
  --chi-block: clamp(40px, 5vw, 72px);        /* stacco fra blocchi interni */
  background: var(--color-white);
  color: var(--color-navy);
  padding-top: calc(var(--header-h, 96px) + var(--topbar-h, 40px));
}

/* --------------------------------------------------- sezioni */
.ofy-chi-page__section { padding-block: var(--section-pad); }

/* Sezione blu: testo bianco, stessi token semantici usati dai preset chiari */
.ofy-chi-page__section--blue {
  --text-strong: var(--color-white);
  --text-body: var(--color-white);
  --text-muted: rgba(255, 255, 255, 0.82);
  background: var(--color-primary);
  color: var(--color-white);
}

/* Micro-sezione navy (#131A28, il Navy della palette Dental Go) */
.ofy-chi-page__section--navy {
  --text-strong: var(--color-white);
  --text-body: var(--color-off-white);
  background: var(--color-deep-navy);
  color: var(--color-off-white);
}

/* ---------------------------------------------------- titoli */
.ofy-chi-page__h2 {
  margin: 0;
  font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.75rem);
  line-height: 1.06;
  text-wrap: balance;
}
.ofy-chi-page__h2-line { display: block; }
.ofy-chi-page__section--navy .ofy-chi-page__h2-line--accent { color: var(--color-soft-blue); }

/* ------------------------------------------------- paragrafi */
.ofy-chi-page__text p {
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}
.ofy-chi-page__text p:last-child { margin-bottom: 0; }

/* Frasi forti di chiusura (i grassetti del copy) */
.ofy-chi-page__strong {
  max-width: 24em;
  margin: var(--chi-block) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}
.ofy-chi-page__strong strong { font-weight: inherit; }

/* Claim della testata: filetto blu a sinistra, ultima riga in Blu Dental Go */
.ofy-chi-page__strong--rule {
  margin-top: 0;
  padding-left: clamp(20px, 2.5vw, 32px);
  border-left: 3px solid var(--color-primary);
}
/* Righe del claim: a capo normale (non "balance"), così "e-commerce" non
   viene spezzato sul trattino a metà riga */
.ofy-chi-page__claim-line {
  display: block;
  text-wrap: wrap;
  text-wrap: pretty;
}
.ofy-chi-page__claim-line:last-child { color: var(--color-primary); }

/* "L’odontoiatria.": una sola parola, grande e blu */
.ofy-chi-page__strong--accent {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}

/* --------------------------------------------------- testata */
.ofy-chi-page__hero { padding-block: var(--section-pad-sm) var(--section-pad); }
.ofy-chi-page__title { margin: 0; }
/* Le due righe dell'H1 portano ciascuna la propria misura (em = font-size
   della riga stessa): la prima più piccola e blu, la seconda in display */
.ofy-chi-page__title-lead {
  display: block;
  margin-bottom: var(--space-4);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-wrap: balance;
}
.ofy-chi-page__title-main {
  display: block;
  max-width: 12.5em;
  font-size: var(--fs-h1);
  line-height: 1;
  text-wrap: balance;
}
.ofy-chi-page__hero-body {
  display: grid;
  gap: var(--space-7) var(--chi-gap);
  margin-top: var(--chi-block);
}
.ofy-chi-page__hero-aside .ofy-chi-page__text { margin-top: var(--space-6); }

/* Due colonne: titolo/intro a sinistra, corpo a destra (una sola sotto i 1024px) */
.ofy-chi-page__split {
  display: grid;
  gap: clamp(28px, 4vw, 48px) var(--chi-gap);
}
.ofy-chi-page__split-head .ofy-chi-page__text { margin-top: var(--space-6); }
.ofy-chi-page__after-list { margin-top: var(--chi-block); }

@media (min-width: 1024px) {
  .ofy-chi-page__hero-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ofy-chi-page__split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  /* Il titolo resta in vista mentre si scorre il corpo della sezione */
  .ofy-chi-page__split-head {
    position: sticky;
    top: calc(var(--header-h) + var(--topbar-h) + var(--space-6));
  }
}

/* ---------------------------------------------- sezione blu */
.ofy-chi-page__blue-head { max-width: 880px; }
.ofy-chi-page__blue-intro {
  max-width: 60ch;
  margin: var(--space-5) 0 0;
}
.ofy-chi-page__blue-body { margin-top: var(--chi-block); }

/* Voci brevi in evidenza: gli otto elementi della presenza digitale
   (sezione blu) e le tre direzioni della micro-sezione navy */
.ofy-chi-page__pillars,
.ofy-chi-page__path {
  margin: var(--chi-block) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--chi-line-inv);
}
.ofy-chi-page__pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  border-top: 0;
}
.ofy-chi-page__pillar {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--chi-line-inv);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ofy-chi-page__pillars .ofy-chi-page__pillar {
  border-bottom: 0;
  border-top: 1px solid var(--chi-line-inv);
}
.ofy-chi-page__path { margin-top: clamp(32px, 4vw, 48px); }

@media (min-width: 1024px) {
  .ofy-chi-page__pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------- servizi */
.ofy-chi-page__services {
  margin: var(--chi-block) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--chi-line);
}
.ofy-chi-page__service {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4) var(--space-4);
  padding-block: clamp(28px, 3.5vw, 48px);
  border-bottom: 1px solid var(--chi-line);
}
.ofy-chi-page__service-text { grid-column: 1 / -1; }

/* Numerazioni in Blu Dental Go (servizi e motivi) */
.ofy-chi-page__num,
.ofy-chi-page__reason::before {
  padding-top: 0.55em;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

/* H3 cliccabile in modo discreto: colore del titolo, sottolineatura e
   freccia solo al passaggio; padding verticale per un'area tocco ≥ 44px */
.ofy-chi-page__service-title { margin: -0.35em 0; }
.ofy-chi-page__service-link {
  display: inline-block;
  padding-block: 0.35em;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.ofy-chi-page__service-link:hover,
.ofy-chi-page__service-link:focus-visible {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}
.ofy-chi-page__arrow {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.75em;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ofy-chi-page__service-link:hover .ofy-chi-page__arrow,
.ofy-chi-page__service-link:focus-visible .ofy-chi-page__arrow { transform: translateX(4px); }

@media (min-width: 900px) {
  .ofy-chi-page__service {
    grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--chi-gap);
  }
  .ofy-chi-page__service-text { grid-column: auto; }
}

/* --------------------------------------------- perché solo dentisti */
.ofy-chi-page__reasons {
  counter-reset: chi-reason;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--chi-line);
}
.ofy-chi-page__reason {
  counter-increment: chi-reason;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--chi-line);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}
.ofy-chi-page__reason::before { content: "0" counter(chi-reason); }

/* ------------------------------------------------ team (solo se attivo)
   auto-fit: le colonne nascono dallo spazio, non dal numero di membri */
.ofy-chi-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px);
  margin: var(--chi-block) 0 0;
  padding: 0;
  list-style: none;
}
.ofy-chi-page__card { display: flex; flex-direction: column; }
.ofy-chi-page__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-off-white);
}
.ofy-chi-page__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Monogramma: segnaposto finché non viene caricata una foto */
.ofy-chi-page__monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.ofy-chi-page__cat {
  margin-top: var(--space-4);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.ofy-chi-page__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}
.ofy-chi-page__media + .ofy-chi-page__name { margin-top: var(--space-4); }
.ofy-chi-page__role {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.ofy-chi-page__bio {
  margin: var(--space-3) 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.ofy-chi-page__links {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
}
.ofy-chi-page__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ofy-chi-page__links a:hover,
.ofy-chi-page__links a:focus-visible { color: var(--color-navy); }

/* ------------------------------------------------ CTA finale */
.ofy-chi-page__cta { padding-block: var(--section-pad) var(--section-pad-lg); }
.ofy-chi-page__cta-title { text-wrap: balance; }
.ofy-chi-page__cta-text { margin: var(--space-5) 0 0; }
.ofy-chi-page__cta-actions { margin: var(--space-7) 0 0; }

/* --------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ofy-chi-page__service-link,
  .ofy-chi-page__arrow { transition: none; }
  .ofy-chi-page__service-link:hover .ofy-chi-page__arrow,
  .ofy-chi-page__service-link:focus-visible .ofy-chi-page__arrow { transform: none; }
}

/* =============================================================
   Founder — chi c'e' dietro Dental Go.
   Due colonne: foto a sinistra (40%), contenuto a destra (60%),
   molto respiro. Sotto i 900px la foto va sopra. Nessun componente
   nuovo del design system: occhiello, h2, paragrafi e filetto forte
   sono quelli gia' usati dal resto della pagina.
   ============================================================= */

.ofy-chi-founder__grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .ofy-chi-founder__grid {
    /* La colonna sinistra vale quanto la foto: 340px e' il massimo che
       l'originale regge senza essere ingrandito. Con una foto piu' grande
       basta alzare questo valore e il max-width qui sotto. */
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 104px);
    align-items: start;
  }
}

.ofy-chi-founder__media {
  margin: 0;
  max-width: 340px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-off-white);
}
.ofy-chi-founder__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
@media (max-width: 899px) {
  .ofy-chi-founder__media { max-width: 260px; }
}

.ofy-chi-founder__body { min-width: 0; }
.ofy-chi-founder__body .eyebrow { display: block; margin-bottom: var(--space-4); }

/* Identita': nome in evidenza, ruolo sotto, senza diventare una card. */
.ofy-chi-founder__name {
  margin: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}
.ofy-chi-founder__role {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* LinkedIn del founder: riga discreta allineata a nome e ruolo. Nessun
   riquadro, nessuna superficie: si legge come una firma, non come un bottone. */
.ofy-chi-founder__social { margin: var(--space-4) 0 0; }
.ofy-chi-founder__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur-fast) ease;
}
.ofy-chi-founder__linkedin svg { flex-shrink: 0; }
.ofy-chi-founder__linkedin span { text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast) ease; }
.ofy-chi-founder__linkedin:hover { color: var(--color-primary); }
.ofy-chi-founder__linkedin:hover span { text-decoration-color: currentColor; }

.ofy-chi-founder__text { margin-top: var(--space-6); }
.ofy-chi-founder__text p { max-width: 58ch; }

/* Chiusura: stesso filetto blu delle altre frasi forti della pagina. */
.ofy-chi-founder__callout {
  max-width: 54ch;
  margin: var(--space-7) 0 0;
  padding-left: clamp(20px, 2.5vw, 32px);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
}