/* ==========================================================================
   IRSML — chi-siamo.css
   Stili specifici della pagina "Chi siamo"
   ========================================================================== */

.page-hero h1 { max-width: 17ch; }

/* Principi ---------------------------------------------------------------- */
.principi-grid .card { position: relative; padding-top: var(--s-xl); }
.principle-index {
  position: absolute;
  top: var(--s-md);
  right: var(--s-lg);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--hairline);
  line-height: 1;
}
.principi-grid h3 { max-width: 16ch; margin-bottom: var(--s-sm); }

/* Team -------------------------------------------------------------------- */
.team-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-xxl);
  align-items: start;
}
.team-layout h2 { margin-bottom: var(--s-lg); }
.team-layout p { max-width: 52ch; }

.team-list { list-style: none; margin: 0; padding: 0; }
.team-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-xxs) var(--s-md);
  padding: var(--s-md) 0;
  border-top: 1px solid var(--hairline);
}
.team-list li:first-child { border-top: 0; padding-top: 0; }
.team-role { font-size: 15px; font-weight: 600; color: var(--ink); }
.team-count {
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
  align-self: center;
}
.team-list p { grid-column: 1 / -1; margin: 0; font-size: 14px; }

/* Timeline ---------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.timeline li {
  position: relative;
  padding: 0 0 var(--s-xl) var(--s-xxl);
  border-left: 1px solid var(--hairline);
  margin: 0;
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--accent-blue);
}
.timeline-year {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: var(--s-xxs);
}
.timeline h3 { margin-bottom: var(--s-xxs); }
.timeline p { font-size: 14px; margin: 0; }

@media (max-width: 980px) {
  .team-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-xl); }
  .page-hero h1 { max-width: none; }
}