/* ==========================================================================
   Paradise Home — elenchi di persone ("I nostri studenti") e pagina Chi siamo

   REGOLA DI QUESTO FILE, come in main.css: ogni valore è copiato dal CSS reale
   del sito. Le due fonti sono:

     #ph-students   il blocco scritto a mano dentro il post_content delle due
                    pagine "I nostri studenti" (research/html/chi-siamo__i-nostri-
                    studenti-*.html, <style> in testa al contenuto)
     post-1065.css  uploads__elementor__css__post-1065.css, la pagina Chi siamo

   Le variabili di #ph-students, per riferimento:
     --p:#692A98  --ind:#242566  --lav:#B195E3  --mut:#7A7A7A

   Richiede una voce nella mappa $contextual di inc/enqueue.php:
     'operatori' => is_page_template( array( 'templates/page-operatori.php',
                                             'templates/page-chi-siamo.php' ) )
   ========================================================================== */

/* --------------------------------------------------------------------------
   Elenco — introduzione e griglia

   #ph-students .ph-wrap{max-width:1350px;margin:0 auto;padding:44px 15px 64px}
   #ph-students .ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
   -------------------------------------------------------------------------- */

.operatori__intro {
  max-width: 68ch;
}

.operatori-griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-block: 44px 64px;
}

/* L'ultima scheda quando resterebbe sola in fondo. I due elenchi hanno 16 e 23
   persone: su tre colonne facevano 3+3+3+3+3+1, su due 2×11+1, e l'ultima persona
   restava schiacciata a sinistra con due terzi di riga vuoti accanto. Le colonne
   non cambiano — sono quelle dell'originale, qui sotto — cambia solo l'ultima
   scheda: occupa la riga intera e ci si mette in mezzo, larga come le altre.

   Non a piena larghezza, come fanno le griglie di sole parole: questa card è una
   fotografia che riempie la colonna, e stirata su 984px diventava un ritratto alto
   quanto lo schermo. Il rimedio sarebbe stato peggio del buco. Il numero di colonne
   da attraversare lo calcola `ph_griglia_span_attributi()` (inc/contenuto.php) e la
   larghezza torna a essere quella di una colonna sola: 100% meno i vuoti fra le
   colonne, diviso il numero di colonne. Con una card non spaiata lo span vale 1 e
   la formula si riduce a `max-width:100%`, cioè a niente. */
.operatori-griglia[data-card] > *:last-child {
  --ph-op-span: var(--ph-op-lg-span, 1);
  grid-column: span var(--ph-op-span);
  justify-self: center;
  width: 100%;
  max-width: calc((100% - (var(--ph-op-span) - 1) * 24px) / var(--ph-op-span));
}

/* I tre scalini sono quelli dell'originale, non una scala nostra. */
@media (max-width: 1200px) {
  .operatori-griglia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .operatori-griglia[data-card] > *:last-child {
    --ph-op-span: var(--ph-op-md-span, 1);
  }
}

@media (max-width: 900px) {
  .operatori-griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operatori-griglia[data-card] > *:last-child {
    --ph-op-span: var(--ph-op-sm-span, 1);
  }
}

@media (max-width: 600px) {
  .operatori-griglia {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-block: 24px 48px;
  }

  .operatori-griglia[data-card] > *:last-child {
    --ph-op-span: var(--ph-op-xs-span, 1);
    max-width: calc((100% - (var(--ph-op-span) - 1) * 18px) / var(--ph-op-span));
  }
}

/* --------------------------------------------------------------------------
   Scheda della persona — `.ph-card` dell'originale, voce per voce.

   .ph-card{background:#fff;border:1px solid #ece8f6;border-radius:18px;
            overflow:hidden;box-shadow:0 6px 22px rgba(36,37,102,.07);
            display:flex;flex-direction:column}
   .ph-card:hover{transform:translateY(-6px);
                  box-shadow:0 16px 38px rgba(105,42,152,.16)}
   -------------------------------------------------------------------------- */

.persona-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* #ece8f6 è il lilla di bordo e di fondo-foto dell'originale: non è fra i
     token di main.css perché lo usa solo questo blocco. */
  border: 1px solid #ece8f6;
  /* 18px, non i 20px delle card Elementor: questo blocco è scritto a mano. */
  border-radius: 18px;
  background: var(--ph-white);
  box-shadow: 0 6px 22px rgba(36, 37, 102, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.persona-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(105, 42, 152, 0.16);
}

.persona-card--senza-scheda:hover {
  /* Senza scheda non c'è niente da aprire: il sollevamento prometterebbe un link. */
  transform: none;
  box-shadow: 0 6px 22px rgba(36, 37, 102, 0.07);
}

/* .ph-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#ece8f6} */
.persona-card__media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #ece8f6;
}

/* .ph-media img{width:100%;height:100%;object-fit:cover;display:block} */
.persona-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.persona-card:hover .persona-card__img {
  transform: scale(1.06);
}

.persona-card__iniziali {
  font-family: var(--ph-font-heading);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ph-primary);
}

/* .ph-region{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;
              letter-spacing:.4px;text-transform:uppercase;color:#fff;
              background:rgba(105,42,152,.92);padding:5px 12px;border-radius:999px} */
.persona-card__regione {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--ph-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ph-white);
  background: rgba(105, 42, 152, 0.92);
}

/* .ph-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1} */
.persona-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 22px;
}

/* .ph-name{font-size:18px;font-weight:600;color:#242566;margin:0 0 10px;line-height:1.25} */
.persona-card__nome {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ph-heading-alt);
  overflow-wrap: anywhere;
}

.persona-card__link {
  color: inherit;
  text-decoration: none;
}

.persona-card__link:hover,
.persona-card__link:focus-visible {
  color: var(--ph-primary);
}

/* .ph-row{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#4a4a5e;
           margin:0 0 7px;line-height:1.4;word-break:break-word}
   .ph-row svg{color:var(--p);flex:none;margin-top:2px} */
.persona-card__riga {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #4a4a5e;
  overflow-wrap: anywhere;
}

.persona-card__riga a {
  color: inherit;
  text-decoration: none;
}

.persona-card__riga a:hover,
.persona-card__riga a:focus-visible {
  color: var(--ph-primary);
  text-decoration: underline;
}

.persona-card__icona {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--ph-primary);
}

/* .ph-row.ph-loc{color:var(--mut);margin-bottom:13px} — e l'icona del segnaposto
   nell'originale è 14px invece di 15px. */
.persona-card__riga--luogo {
  margin-bottom: 13px;
  color: var(--ph-text-soft);
}

.persona-card__riga--luogo .persona-card__icona {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   Elenco vuoto — non esiste nell'originale (le sue liste erano scritte a mano
   e mai vuote): resta il minimo per non lasciare una pagina bianca.
   -------------------------------------------------------------------------- */

.operatori-vuoto {
  max-width: 62ch;
  margin: 48px 0 16px;
  padding: 28px 30px;
  border: 1px solid var(--ph-border);
  border-left: 4px solid var(--ph-primary-light);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
  font-size: 17px;
  color: var(--ph-text);
}

.operatori-vuoto__azione {
  margin: 0 0 56px;
}

/* ==========================================================================
   Chi siamo — blocchi affiancati dentro un riquadro tinto

   Ogni blocco dell'originale ha il suo fondo e la sua geometria: NON è una
   rotazione di tre tinte, come il tema aveva ipotizzato. Valori letti uno per
   uno in post-1065.css:

     0  ecddc19  #FFEAF7, --border-radius:20px, --padding:20px
                 da5445f colonna di testo --width:64.477%
     1  1437fb5  #D4D1F8, --gap:10px, --border-radius:20px (imbottitura 10px,
                 quella di default dei container)
                 30344fc colonna di testo #F6F6FF, --padding:55px,
                         --width:55.181%, --justify-content:center
                 582b44d colonna della foto --padding:0
     2  bcb4bdc  NESSUN fondo, --padding:0
                 bef0e30 testo --width:50%, senza fondo
                 88fdc87 foto --width:50%, #00BF630D, raggio 20px, padding 20px
     3  fcb17ad  #FFEAF7, --gap:0, --border-radius:20px, --padding:20px
                 832e0be testo 50%, 3e9400c foto 50%
     4  d750119  #EAFFF3, --border-radius:20px, --padding:30px,
                 --justify-content:center, e2b2940 testo --width:60%

   Comune a tutti: --flex-direction:row, che sotto i 1025px diventa column;
   50px di margine fra un blocco e il successivo; immagini con raggio 20px.
   ========================================================================== */

.chi-siamo-blocco {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--ph-widget-gap);
  margin-block: var(--ph-section-gap);
  padding: 20px;
  border-radius: var(--ph-radius-lg);
}

.chi-siamo-blocco__testo {
  flex: 1 1 50%;
  min-width: 0;
}

.chi-siamo-blocco__media {
  flex: 1 1 auto;
  min-width: 0;
}

/* La colonna della foto passa a sinistra nel solo blocco in cui l'originale la
   mette a sinistra («Il Punto di Svolta», contenitore 1437fb5). */
.chi-siamo-blocco--media-sinistra .chi-siamo-blocco__media {
  order: -1;
}

/* 0 — «La Nostra Storia»: rosa, colonna di testo larga il 64,477%. */
.chi-siamo-blocco--storia {
  background: var(--ph-tint-pink);
}

.chi-siamo-blocco--storia .chi-siamo-blocco__testo {
  flex: 0 0 64.477%;
  width: 64.477%;
}

/* 1 — «Il Punto di Svolta»: cornice lilla #D4D1F8 con dentro la colonna di
   testo su #F6F6FF e 55px di imbottitura. Il tema rendeva tutto il blocco
   #F6F6FF e la cornice lilla non si vedeva affatto. */
.chi-siamo-blocco--svolta {
  gap: 10px;
  padding: 10px;
  background: #d4d1f8;
}

.chi-siamo-blocco--svolta .chi-siamo-blocco__testo {
  display: flex;
  flex: 0 0 55.181%;
  flex-direction: column;
  justify-content: center;
  width: 55.181%;
  padding: 55px;
  border-radius: var(--ph-radius-lg);
  background: #f6f6ff;
}

.chi-siamo-blocco--svolta .chi-siamo-blocco__media {
  padding: 0;
}

/* 2 — «Fabio Mariani»: il blocco non ha fondo, il verde sta solo dietro la
   foto. Il tema tingeva di verde tutto il blocco, testo compreso. */
.chi-siamo-blocco--ritratto {
  padding: 0;
  background: none;
}

.chi-siamo-blocco--ritratto .chi-siamo-blocco__testo {
  flex: 0 0 50%;
  width: 50%;
}

.chi-siamo-blocco--ritratto .chi-siamo-blocco__media {
  flex: 0 0 50%;
  width: 50%;
  padding: 20px;
  border-radius: var(--ph-radius-lg);
  background: rgba(0, 191, 99, 0.05); /* #00BF630D */
}

/* 3 — «Fabio Guido Pea»: rosa, due colonne al 50%, nessuno scarto fra loro. */
.chi-siamo-blocco--rosa {
  gap: 0;
  background: var(--ph-tint-pink);
}

.chi-siamo-blocco--rosa .chi-siamo-blocco__testo,
.chi-siamo-blocco--rosa .chi-siamo-blocco__media {
  flex: 0 0 50%;
  width: 50%;
}

/* 4 — «Matteo»: verde menta #EAFFF3, 30px di imbottitura, testo su colonna al
   60% centrata. Il tema usava #F6F6FF e una misura di lettura in ch. */
.chi-siamo-blocco--mint {
  justify-content: center;
  padding: 30px;
  background: #eafff3;
}

.chi-siamo-blocco--mint .chi-siamo-blocco__testo {
  flex: 0 0 60%;
  width: 60%;
}

.chi-siamo-blocco__media figure,
.chi-siamo-blocco__media img {
  margin: 0;
}

.chi-siamo-blocco__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
}

/* Nei blocchi il titolo di sezione è quello del sito: 30px peso 500 #242068
   (post-1065.css, a26db37 / 1e5bbf3 / 026bd65 / 048bc68 / 8219c8f / 41788f9). */
.chi-siamo-blocco__testo > h2 {
  margin-top: 0;
  font-size: var(--ph-section-title);
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-heading-section);
}

.chi-siamo-blocco__testo > h2 ~ h2 {
  margin-top: 32px;
}

/* Sotto 1024px l'originale manda in colonna tutte queste righe
   (post-1065.css: a748f54, b202928, 1437fb5, bcb4bdc, 17cd68c, 265acc8). */
@media (max-width: 1024px) {
  .chi-siamo-blocco {
    flex-direction: column;
  }

  /* Doppia classe come nelle regole delle varianti: con un solo nome di classe
     queste dichiarazioni perderebbero contro `--storia .… { width:64.477% }`. */
  .chi-siamo-blocco .chi-siamo-blocco__testo,
  .chi-siamo-blocco .chi-siamo-blocco__media,
  .chi-siamo-blocco--media-sinistra .chi-siamo-blocco__media {
    flex: 1 1 auto;
    width: auto;
    order: 0;
  }
}

/* Sotto i 767px l'originale porta a 20px l'imbottitura di ecddc19, fcb17ad e
   d750119, e quella della colonna di testo di «Il Punto di Svolta» a 30px 20px.
   La cornice lilla (10px) e il blocco dei ritratti (0) NON cambiano. */
@media (max-width: 767px) {
  .chi-siamo-blocco--storia,
  .chi-siamo-blocco--rosa,
  .chi-siamo-blocco--mint {
    padding: 20px;
  }

  .chi-siamo-blocco--svolta .chi-siamo-blocco__testo {
    padding: 30px 20px;
  }
}

/* --------------------------------------------------------------------------
   Chi siamo — fascia dei quattro contatori

   post-1065.css, a58c7ec: --border-radius:20px, --padding:30px,
   background-color:#EAFFF3. Numeri 53px colore primario, etichette 18px peso
   600 colore --e-global-color-secondary (#54595F). Sotto 767 il padding
   scende a 20px. Il contatore Elementor è flex-direction:column-reverse:
   l'etichetta sta sopra il numero, e nel markup è scritta prima.
   -------------------------------------------------------------------------- */

.chi-siamo-contatori {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ph-widget-gap);
  margin-block: var(--ph-section-gap);
  padding: 30px;
  border-radius: var(--ph-radius-lg);
  background: #eafff3;
}

.chi-siamo-contatore__etichetta {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ph-secondary);
}

.chi-siamo-contatore__numero {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 53px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ph-primary);
}

@media (max-width: 1024px) {
  .chi-siamo-contatori {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px var(--ph-widget-gap);
  }
}

@media (max-width: 767px) {
  .chi-siamo-contatori {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .chi-siamo-contatore__numero {
    font-size: 40px;
  }
}

/* --------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .persona-card,
  .persona-card__img {
    transition: none;
  }

  .persona-card:hover {
    transform: none;
  }

  .persona-card:hover .persona-card__img {
    transform: none;
  }
}