/**
 * ==========================================================================
 * PAGES-ABOUT-MANIFESTO-CONTACT.CSS — Redesign pagine istituzionali
 * ==========================================================================
 * CSS per il redesign delle tre pagine:
 * - page-about.php: presentazione due colonne, team circolare, CTA
 * - page-manifesto.php: statement centrato, corpo del manifesto
 * - page-contact.php: CTA statement, griglia contatti, indirizzo
 *
 * Variabili di riferimento (da documentary-v2.css):
 * --bg: #000000; --bg2: #0f0f0f; --ct: #ffffff;
 * --cm: rgba(234, 228, 219, 0.80); --cm2: rgba(234, 228, 219, 0.70);
 * --sep: rgba(234, 228, 219, 0.14); --sep2: rgba(234, 228, 219, 0.20);
 * --testo-xs: clamp(0.78rem, 0.9vw, 0.92rem);
 * --testo-sm: clamp(0.88rem, 1vw, 1.05rem);
 * --testo-base: clamp(1rem, 1.12vw, 1.18rem);
 * --tr: 0.28s ease;
 * ==========================================================================
 */

/* ══════════════════════════════════════════════════════════════════════════
   CHI SIAMO (.page-about)
   ══════════════════════════════════════════════════════════════════════════ */

/* Section labels — stile "— LABEL" come page-cat */
.sec-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--testo-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cm2);
  font-weight: 400;
  margin: 0 0 1.5rem;
  display: block;
}

/* Separator tra sezioni (nascosto se la sezione successiva ha bg diverso) */
.about-separator {
  display: none;
}

/* Presentazione - due colonne su sfondo --bg2 */
.about-presentation {
  background: var(--bg2);
  border-top: 0.5px solid var(--sep);
  border-bottom: 0.5px solid var(--sep);
  padding: 3.5rem 0;
}

.about-presentation-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.about-col-text {
  font-size: var(--testo-base);
  line-height: 1.9;
  color: var(--cm);
  font-weight: 300;
  text-align: justify;
}

.about-col-text p {
  margin: 0 0 1em;
}

.about-col-text p:last-child {
  margin-bottom: 0;
}

/* Team - griglia circolare */
.about-team {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

/* .about-team-label ora usa .sec-label — nessuno stile extra necessario */

.about-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  text-align: center;
}

.team-member {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--tr);
  width: clamp(140px, 20vw, 200px);
}

.team-member:hover {
  transform: translateY(-4px);
}

.team-member-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1rem;
  flex-shrink: 0;
  background: rgba(234, 228, 219, 0.06);
  border: 0.5px solid var(--sep);
}

.team-member-photo img,
.team-member-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter var(--tr);
  display: block;
}

.team-member:hover .team-member-photo img,
.team-member:hover .team-member-image {
  filter: grayscale(0%);
}

.team-member-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--ct);
  font-weight: 400;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.team-member-role {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--testo-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cm2);
  font-weight: 400;
}

/* CTA */
.about-cta {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 2rem;
  border-top: 0.5px solid var(--sep);
  text-align: center;
}

.about-cta-text {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--cm);
  font-weight: 300;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.about-cta-text p {
  margin: 0 0 1em;
}

.about-cta-text p:last-child {
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MANIFESTO (.page-manifesto) — Estende page-header standard
   ═══════════════════════════════════════════════════════════════════════════ */

/* Estende il padding-bottom del page-header per contenere il corpo */
.page-header--manifesto {
  padding-bottom: 5rem;
}

/* Rimuove border-left dalla colonna DX (no linea separatrice) */
.page-header--manifesto .manifesto-right-col {
  border-left: none;
}

/* Spazio tra titolo e testo nella colonna SX */
.page-header--manifesto .header-left .manifesto-col-text {
  margin-top: 3rem;
}

/* Testo corsivo del manifesto */
.manifesto-col-text {
  text-align: justify;
  font-style: italic;
  font-size: var(--testo-base);
  line-height: 1.9;
  color: var(--cm);
  font-weight: 300;
}

.manifesto-col-text p {
  margin: 0 0 1.2em;
}

.manifesto-col-text p:last-child {
  margin-bottom: 0;
}

/* Firma — allineata a destra con trattino */
.manifesto-firma {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--testo-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cm2);
  font-weight: 400;
  margin-top: 2.5rem;
  text-align: right;
  display: block;
}


/* ══════════════════════════════════════════════════════════════════════════
   CONTATTI (.page-contact)
   ══════════════════════════════════════════════════════════════════════════ */

/* Sezione contatti — griglia 3 blocchi */
.contact-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
}

.contact-section-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.contact-block {}

.contact-block-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--testo-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cm2);
  font-weight: 400;
  margin-bottom: 0.8rem;
}

.contact-block-desc {
  font-size: var(--testo-sm);
  color: var(--cm2);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.contact-block-email {
  font-size: var(--testo-base);
  color: var(--ct);
  font-weight: 300;
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: inline-block;
}

.contact-block-email:hover {
  opacity: 0.6;
}

/* Tirocini / Lavora con noi */
.contact-tirocini {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  border-top: 0.5px solid var(--sep);
}

.contact-tirocini-inner {}

.contact-tirocini-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--testo-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cm2);
  font-weight: 400;
  margin-bottom: 0.8rem;
}

.contact-tirocini-text {
  font-size: var(--testo-sm);
  color: var(--cm2);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 480px;
}

/* Città — richiama lo stile header con font spezzato */
.contact-city {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 2rem 5rem;
}

.contact-city-inner {
  text-align: right;
}

.contact-city-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--testo-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cm2);
  font-weight: 400;
  margin-bottom: 1rem;
}

.contact-city-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ct);
}

.contact-city-name .dim {
  color: rgba(234, 228, 219, 0.28);
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* About: una colonna */
  .about-presentation {
    padding: 2.5rem 0;
  }

  .about-presentation-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem;
  }

  /* Team: una colonna su mobile, 2 su tablet */
  .about-team {
    padding: 2rem 1.5rem 3rem;
  }

  .about-team-grid {
    gap: 2rem;
  }

  /* Contact responsive */
  .contact-section-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-section {
    padding: 0 1.5rem 2rem;
  }

  .contact-tirocini {
    padding: 2rem 1.5rem;
  }

  .contact-city {
    padding: 3rem 1.5rem;
  }

  .contact-city-name {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }

  /* Manifesto responsive */
  .page-header--manifesto .manifesto-right-col {
    margin-top: 0;
    padding-left: 0;
  }

  .page-header--manifesto .header-left .manifesto-col-text {
    margin-top: 2rem;
  }

  .contact-cta-statement {
    padding: 3rem 1.5rem 2rem;
  }

  .contact-grid {
    padding: 2rem 1.5rem 3rem;
  }

  /* CTA text */
  .about-cta {
    padding: 2rem 1.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: gap ridotto */
  .about-team-grid {
    gap: 2.5rem;
  }
}