/* ==========================================================================
   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;
}

/* 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));
  }
}

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

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

/* --------------------------------------------------------------------------
   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

   post-1065.css, contenitori ecddc19 / 1437fb5 / 88fdc87 / fcb17ad:
     --border-radius:20px 20px 20px 20px
     --padding:20px  (30344fc arriva a 55px, d750119 e a58c7ec a 30px)
     --flex-direction:row, e sotto 1024px --flex-direction:column
     margin fra un blocco e il successivo: 50px (--margin-top/--margin-bottom)
     colonna di testo 50% (bef0e30, 832e0be), immagini border-radius: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);
}

/* I tre fondi dell'originale, nell'ordine in cui li usa la pagina. */
.chi-siamo-blocco--rosa {
  background: var(--ph-tint-pink); /* #FFEAF7 — ecddc19, fcb17ad */
}

.chi-siamo-blocco--chiaro {
  background: #f6f6ff; /* 30344fc */
}

.chi-siamo-blocco--verde {
  background: rgba(0, 191, 99, 0.05); /* #00BF630D — 88fdc87 */
}

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

.chi-siamo-blocco__media {
  flex: 0 0 44%;
}

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

/* Un blocco senza foto è solo testo: nell'originale è il riquadro verde di
   chiusura (d750119), che tiene il testo su una colonna stretta e centrata. */
.chi-siamo-blocco--solo-testo {
  padding: 30px;
}

.chi-siamo-blocco--solo-testo .chi-siamo-blocco__testo {
  flex: 1 1 auto;
  max-width: 72ch;
}

.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;
  }

  .chi-siamo-blocco__media,
  .chi-siamo-blocco--media-sinistra .chi-siamo-blocco__media {
    flex: 1 1 auto;
    order: 0;
  }
}

@media (max-width: 767px) {
  .chi-siamo-blocco,
  .chi-siamo-blocco--solo-testo {
    padding: 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;
  }
}