/* ==========================================================================
   CISL SIENA — CSS PAGINA: LA CISL
   File: wp-content/mu-plugins/cisl-siena/pages/la-cisl/style.css
   Dipende da cisl-global, cisl-layout, cisl-pages.
   ========================================================================== */

/* Chi siamo */
.cisl-lacisl__about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.cisl-lacisl__abouttext > * + * { margin-top: var(--cisl-sp-4); }
.cisl-lacisl__abouttext .cisl-h2 { margin-top: var(--cisl-sp-4); }
.cisl-lacisl__p { margin: 0; color: var(--cisl-ink-2); max-width: 62ch; }
.cisl-lacisl__figure { margin: 0; }
.cisl-lacisl__figure img {
  width: 100%;
  aspect-ratio: 16 / 9; /* foto del palco in piazza: 16:9, così lo striscione si vede intero */
  object-fit: cover;
  border-radius: var(--cisl-r-xl);
  box-shadow: var(--cisl-shadow-md);
}

.cisl-lacisl__values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cisl-sp-4);
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.cisl-lacisl__values li {
  padding: var(--cisl-sp-5);
  border-top: 3px solid var(--cisl-green);
  background: var(--cisl-bg);
  border-radius: 0 0 var(--cisl-r-md) var(--cisl-r-md);
}
.cisl-lacisl__values .cisl-h3 { font-size: var(--cisl-fs-lg); margin-top: var(--cisl-sp-2); }
.cisl-lacisl__values p { margin: var(--cisl-sp-2) 0 0; font-size: var(--cisl-fs-sm); color: var(--cisl-ink-2); }
.cisl-lacisl__num { font-size: var(--cisl-fs-xs); font-weight: 800; color: var(--cisl-red); letter-spacing: 0.1em; }

/* Come siamo fatti */
.cisl-lacisl__org {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cisl-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cisl-lacisl__big {
  font-family: var(--cisl-font-serif);
  font-style: italic;
  font-size: clamp(3rem, 2rem + 3vw, 4.6rem);
  line-height: 1;
  color: var(--cisl-green);
}

/* Storia: linea del tempo */
.cisl-timeline {
  position: relative;
  display: grid;
  /* Le tappe si dividono lo spazio in parti uguali, quante che siano. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin: 0;
  padding: var(--cisl-sp-6) 0 0;
  list-style: none;
}
.cisl-timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 2px;
  background: var(--cisl-line);
}
.cisl-timeline li { position: relative; }
.cisl-timeline li::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--cisl-sp-6) + 1px);
  left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cisl-white);
  border: 4px solid var(--cisl-red);
}
.cisl-timeline__year { font-family: var(--cisl-font-serif); font-style: italic; font-size: var(--cisl-fs-h3); color: var(--cisl-green); }
.cisl-timeline__title { margin: var(--cisl-sp-2) 0 0; font-size: var(--cisl-fs-base); font-weight: 800; }
.cisl-timeline p { margin: var(--cisl-sp-2) 0 0; font-size: var(--cisl-fs-sm); color: var(--cisl-ink-2); max-width: 62ch; }
.cisl-timeline p + p { margin-top: var(--cisl-sp-3); }

/* Segreteria */
.cisl-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cisl-sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cisl-team__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--cisl-r-lg);
  overflow: hidden;
  background: var(--cisl-green);
  position: relative;
}
.cisl-team__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Foto ritagliata dai dati ('crop'): larghezza e posizione arrivano dallo stile in linea. */
.cisl-team__photo img.cisl-team__crop { position: absolute; max-width: none; height: auto; object-fit: fill; }
.cisl-team__ph {
  display: grid;
  place-items: end center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.28);
}
.cisl-team__ph svg { width: 70%; height: 70%; }
.cisl-team__card:nth-child(2) .cisl-team__photo { background: var(--cisl-green-dark); }
.cisl-team__card:nth-child(3) .cisl-team__photo { background: var(--cisl-red); }
.cisl-team__role {
  margin: var(--cisl-sp-4) 0 0;
  font-size: var(--cisl-fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cisl-green-tint);
}
.cisl-team__name { margin: var(--cisl-sp-1) 0 0; font-size: var(--cisl-fs-h3); font-weight: 800; color: var(--cisl-white); }
.cisl-team__text { margin: var(--cisl-sp-2) 0 0; font-size: var(--cisl-fs-sm); color: rgba(255, 255, 255, 0.78); }
.cisl-block--deep .cisl-todo { color: #FF9AAE; }

/* Vittorie */
.cisl-wins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cisl-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cisl-wins__card {
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--cisl-white);
  border-radius: var(--cisl-r-md);
  border: 1px solid var(--cisl-line);
}
.cisl-wins__meta { display: flex; align-items: center; gap: var(--cisl-sp-3); margin: 0 0 var(--cisl-sp-4); font-size: var(--cisl-fs-sm); font-weight: 700; color: var(--cisl-muted); }
.cisl-wins__card .cisl-h3 { font-size: var(--cisl-fs-lg); }
.cisl-wins__sub { margin: var(--cisl-sp-2) 0 0; font-size: var(--cisl-fs-sm); font-weight: 700; color: var(--cisl-green); }
.cisl-wins__text { margin: var(--cisl-sp-3) 0 0; font-size: var(--cisl-fs-sm); line-height: 1.6; color: var(--cisl-ink-2); }

@media (max-width: 1000px) {
  .cisl-lacisl__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Linea del tempo verticale sotto i 1000 px */
  .cisl-timeline { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; padding: 0 0 0 var(--cisl-sp-6); }
  .cisl-timeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .cisl-timeline li::before { top: 6px; left: calc(-1 * var(--cisl-sp-6)); }
}
@media (max-width: 900px) {
  .cisl-lacisl__about { grid-template-columns: 1fr; }
  .cisl-lacisl__org, .cisl-team, .cisl-wins { grid-template-columns: 1fr; }
  .cisl-team { max-width: 420px; }
}
@media (max-width: 560px) {
  .cisl-lacisl__values { grid-template-columns: 1fr; }
}