/* css/chi-siamo-style.css */

/* Contenitore principale */
.chi-siamo-main {
  background: linear-gradient(
    180deg, /* Direzione gradiente dall’alto verso il basso */
    var(--atlante-color-page-bg) 0%,
    var(--atlante-color-surface-soft) 100%
  );
}

/* Sezione completa */
.chi-siamo-content-section {
  padding-top: 4rem;
  padding-bottom: 5rem;
}

/* Card centrale */
.chi-siamo-content-card {
  max-width: 1040px;
  margin: 0 auto; /* Centra la card orizzontalmente */
  padding: 3rem;
  background: var(--atlante-color-card-bg);
  border: 1px solid var(--atlante-color-border);
  border-radius: var(--atlante-radius-card);
  box-shadow: 0 18px 50px var(--atlante-color-shadow-soft);
}

/* Titolo principale della sezione progetto */
.chi-siamo-section-title {
  position: relative; /* Per posizionare bene la linea decorativa arancione ::after */
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3rem); /* Dimensione fluida: minimo, valore dinamico, massimo */
  font-weight: 700;
}

/* Linea decorativa sotto al titolo principale */
.chi-siamo-section-title::after {
  content: ""; /* Necessario per far comparire lo pseudo-elemento */
  position: absolute; /* Posiziona la linea rispetto al titolo padre */
  left: 0;
  bottom: 0;
  width: 72px;
  height: 3px;
  background: var(--atlante-color-orange);
  border-radius: 999px; /* Rende le estremità della linea arrotondate */
}

/* Stile generale dei paragrafi dentro la card */
.chi-siamo-content-card p {
  margin-bottom: 0;
  color: var(--atlante-color-text-primary);
  font-size: 1.05rem;
  line-height: 1.85; /* Aumento un po' la distanza tra le righe per leggibilità */
}

/* Wrapper "Fasi del progetto" e card delle singole fasi */
.chi-siamo-phases-wrapper {
  display: grid; /* CSS Grid per gestire lo spazio verticale tra gli elementi */
  gap: 1.5rem; /* Spazio uniforme tra gli elementi figli */
  margin-top: 3rem;
}

/* Titolo della sezione delle fasi */
.chi-siamo-phases-title {
  margin-bottom: 0.25rem;
  font-size: clamp(1.45rem, 3vw, 2rem); /* Titolo responsive senza usare media query */
  font-weight: 650; /* Uso un peso intermedio */
}

/* Card di ogni singola fase del progetto */
.chi-siamo-phase-card {
  padding: 1.75rem;
  background: var(--atlante-color-surface-primary);
  border: 1px solid var(--atlante-color-border);
  border-left: 4px solid var(--atlante-color-orange); /* Evidenziamo ogni fase con una barra laterale arancione */
  border-radius: var(--atlante-radius-md);
}

/* Titolo interno di ogni fase */
.chi-siamo-phase-card h4 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Aggiunge spazio solo tra paragrafi consecutivi dentro una fase */
.chi-siamo-phase-card p + p {
  margin-top: 1rem;
}

/* Griglia cards team */
.chi-siamo-team-grid {
  display: grid; /* Crea una griglia responsive semplice */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Card singolo membro */
.chi-siamo-team-card {
  display: flex; /* Permette al contenuto di occupare tutta l'altezza */
  flex-direction: column;
  min-height: 100%;
  padding: 0;
  overflow: hidden; /* Nasconde eventuali parti dell'immagine fuori dalla card */
  text-align: left;
  background: var(--atlante-color-card-bg);
  border: 1px solid var(--atlante-color-border);
  border-radius: var(--atlante-radius-md);
  box-shadow: 0 12px 28px var(--atlante-color-shadow-soft);
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Effetto zoom come nei partner */
.chi-siamo-team-card:hover {
  transform: scale(1.04);
  border-color: var(--atlante-color-orange);
  box-shadow: 0 18px 40px var(--atlante-color-shadow-medium);
}

/* Foto dentro la card */
.chi-siamo-team-photo {
  width: 100%;
  height: 220px;
  display: block;
  object-fit: cover; /* Riempie lo spazio senza deformare la foto */
  background: var(--atlante-color-placeholder-bg);
}

/* Corpo testuale della card */
.chi-siamo-team-card-body {
  display: flex; /* Serve per spingere il bottone in basso */
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}

/* Nome membro */
.chi-siamo-team-card h5 {
  margin-bottom: 0.45rem;
  font-size: 1.15rem;
  font-weight: 700;
}

/* Ruolo membro */
.chi-siamo-team-role {
  margin-bottom: 0.75rem !important;
  color: var(--atlante-color-orange) !important;
  font-size: 0.95rem !important;
  font-weight: 700;
  line-height: 1.4 !important;
}

/* Descrizione breve */
.chi-siamo-team-short-description {
  color: var(--atlante-color-text-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

/* Footer interno della card */
.chi-siamo-team-card-footer {
  display: flex;
  justify-content: flex-end; /* Porta il bottone a destra */
  margin-top: auto; /* Spinge il bottone in basso */
  padding-top: 1rem;
}

/* Pulsante "Altre info" */
.chi-siamo-team-info-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  color: var(--atlante-color-text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--atlante-color-orange);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

/* Hover del pulsante */
.chi-siamo-team-info-button:hover {
  color: var(--atlante-color-dark);
  background-color: var(--atlante-color-orange);
  transform: translateY(-1px);
}

/* Icona dentro il pulsante */
.chi-siamo-team-info-button i {
  font-size: 0.9rem;
}

/* Sfondo colorato della modal */
.chi-siamo-team-modal-overlay {
  display: none; /* La modal parte nascosta */
  position: fixed;
  inset: 0; /* Scorciatoia per top/right/bottom/left: 0 */
  z-index: 1050;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
  overflow-y: auto;
  background: rgba(255, 102, 0, 0.72);
}

/* Card bianca centrale della modal */
.chi-siamo-team-modal-content {
  width: min(900px, 100%);
  position: relative;
  padding: 2.5rem;
  background: var(--atlante-color-card-bg);
  border-radius: var(--atlante-radius-card);
  box-shadow: 0 22px 60px var(--atlante-color-shadow-strong);
  animation: chiSiamoFadeInScale 0.3s ease-out forwards;
}

/* Bottone X */
.chi-siamo-team-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  border: 0;
  background: transparent;
  color: var(--atlante-color-text-muted);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.chi-siamo-team-modal-close:hover {
  color: var(--atlante-color-orange);
}

/* Header interno della modal */
.chi-siamo-team-modal-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-right: 2rem; /* Evita sovrapposizione con la X */
}

/* Foto nella modal */
.chi-siamo-team-modal-photo {
  width: 130px;
  height: 130px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 50%;
  background: var(--atlante-color-placeholder-bg);
  border: 3px solid var(--atlante-color-orange);
}

/* Titolo nella modal */
.chi-siamo-team-modal-content h2 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 700;
}

/* Ruolo nella modal */
.chi-siamo-team-modal-role {
  color: var(--atlante-color-orange) !important;
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.5 !important;
}

/* Testo descrittivo della modal */
.chi-siamo-team-modal-content p {
  color: var(--atlante-color-text-primary);
  font-size: 1rem;
  line-height: 1.75;
}

/* Bottoni finali */
.chi-siamo-team-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Animazione apertura modal */
@keyframes chiSiamoFadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* tablet */
@media (max-width: 991.98px) {
  .chi-siamo-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* tablet piccoli e smartphone */
@media (max-width: 767.98px) {
  .chi-siamo-content-section {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .chi-siamo-content-card {
    padding: 1.5rem;
  }

  .chi-siamo-content-card p {
    font-size: 1rem;
    line-height: 1.75;
  }

  .chi-siamo-phase-card {
    padding: 1.25rem;
  }

  .chi-siamo-team-grid {
    grid-template-columns: 1fr;
  }

  .chi-siamo-team-modal-content {
    padding: 2rem 1.25rem;
  }

  .chi-siamo-team-modal-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .chi-siamo-team-modal-photo {
    width: 110px;
    height: 110px;
  }
}