/* ========== CHI SIAMO — ALTERNATA FOTO+TESTO ========== */
.page-chi-siamo .about-alt{background:#fff;position:relative}
.page-chi-siamo .about-alt__container{max-width:1160px;margin:0 auto;padding:72px 20px}
@media (min-width:1200px){.page-chi-siamo .about-alt__container{padding:96px 20px}}
/* screen-reader-only per l'h2 di sezione */
.page-chi-siamo .about-alt__sr{position:absolute;left:-9999px}

/* Riga */
.page-chi-siamo .about-alt__row{
  display:grid; gap:22px; align-items:center; margin:34px 0;
  grid-template-columns: 1fr;  /* mobile */
}
@media (min-width:900px){
  /* Immagine leggermente più piccola, testo più largo */
  .page-chi-siamo .about-alt__row{grid-template-columns: 0.9fr 1.1fr; gap:42px; margin:48px 0}
  .page-chi-siamo .about-alt__row.about-alt__row--reverse{grid-template-columns: 1.1fr 0.9fr}

  /* Limite dimensioni immagine e allineamento coerente */
  .page-chi-siamo .about-alt__row .about-alt__media{max-width:440px; justify-self:start}
  .page-chi-siamo .about-alt__row.about-alt__row--reverse .about-alt__media{justify-self:end}
}

/* Testo */
.page-chi-siamo .about-alt__copy h3{
  font-family:"Poppins",system-ui,sans-serif; font-weight:800;
  font-size:clamp(22px,2.6vw,32px); line-height:1.15; margin:0 0 10px; color:#0b0f14;
}
.page-chi-siamo .about-alt__copy p{
  font:400 16px/1.8 "Poppins",system-ui,sans-serif; color:#374151; margin:0;
}

/* Media (foto con maschera irregolare) */
.page-chi-siamo .about-alt__media{
  position:relative; border-radius:22px; overflow:hidden;
  /* Fallback in caso di mancanza clip-path: semplicemente arrotondata */
  background:#f6f7f8; border:1px solid #e5e7eb; box-shadow:0 20px 40px rgba(2,6,23,.08);
}
.page-chi-siamo .about-alt__media img{
  display:block; width:100%; height:auto;
  /* transizione anche sul movimento */
  transition: filter 0.5s ease, transform 0.5s ease;
}

/* Maschera irregolare (clip-path) — due varianti leggere */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)){
  .page-chi-siamo .about-alt__row .about-alt__media{
    clip-path: polygon(2% 3%, 98% 0%, 100% 14%, 96% 50%, 100% 86%, 98% 100%, 4% 97%, 0% 78%, 4% 52%, 0% 24%);
  }
  .page-chi-siamo .about-alt__row.about-alt__row--reverse .about-alt__media{
    clip-path: polygon(0% 0%, 96% 3%, 100% 22%, 96% 50%, 100% 78%, 96% 97%, 2% 100%, 0% 86%, 4% 50%, 0% 14%);
  }
}

/* Mobile: mantieni SEMPRE foto sopra e testo sotto */
@media (max-width: 899.98px){
  .page-chi-siamo .about-alt__row.about-alt__row--reverse .about-alt__media{order:1}
  .page-chi-siamo .about-alt__row.about-alt__row--reverse .about-alt__copy{order:2}
}

/* ===== Reveal on scroll ===== */
.page-chi-siamo .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.page-chi-siamo .reveal.from-left{transform:translateX(-36px); }
.page-chi-siamo .reveal.from-right{transform:translateX(36px); }
.page-chi-siamo .reveal.in-view{opacity:1; transform:translateX(0) translateY(0)}
/* Rispetto per chi riduce le animazioni */
@media (prefers-reduced-motion: reduce){
  .page-chi-siamo .reveal,
  .page-chi-siamo .reveal.from-left,
  .page-chi-siamo .reveal.from-right{opacity:1; transform:none; transition:none}
}

/* ========== Effetto foto bianco/nero → colore ========== */
.page-chi-siamo .about-alt__media img {
  filter: grayscale(100%);
}
.page-chi-siamo .about-alt__media img:hover {
  filter: grayscale(0%);
}
/* Su mobile: immagini SEMPRE a colori */
@media (max-width: 899px) {
  .page-chi-siamo .about-alt__media img { filter: none !important; }
}

/* Hover su TUTTA la riga: anche passando sul testo */
.page-chi-siamo .about-alt__row:hover .about-alt__media img,
.page-chi-siamo .about-alt__row:focus-within .about-alt__media img {
  filter: grayscale(0%);
}
/* Mobile: restano sempre a colori */
@media (max-width: 899px) {
  .page-chi-siamo .about-alt__row:hover .about-alt__media img,
  .page-chi-siamo .about-alt__row:focus-within .about-alt__media img {
    filter: none !important;
  }
}

/* Hover foto: movimento morbido */
.page-chi-siamo .about-alt__media:hover img {
  transform: scale(1.05) translateY(-6px);
}

/* ========== CHI SIAMO — TIMELINE COERENTE ========== */
.page-chi-siamo .tl-soft{background:#fff; position:relative}
.page-chi-siamo .tl-soft__container{max-width:1160px; margin:0 auto; padding:72px 20px}
@media (min-width:1200px){.page-chi-siamo .tl-soft__container{padding:96px 20px}}

.page-chi-siamo .tl-soft__title{
  font-family:"Poppins",system-ui,sans-serif; font-weight:800;
  font-size:clamp(26px,3vw,36px); line-height:1.12; color:#0b0f14; margin:0 0 6px;
}
.page-chi-siamo .tl-soft__sub{
  color:#475569; font:500 16px/1.7 "Poppins",system-ui,sans-serif; margin:0 0 28px;
}

/* Lista timeline */
.page-chi-siamo .tl-soft__list{
  position:relative; list-style:none; padding:0; margin:0;
}

/* Linea centrale: verticale in mobile, centrale in desktop */
.page-chi-siamo .tl-soft__list::before{
  content:""; position:absolute; background:#e9eef5; border-radius:999px;
}
@media (max-width:899.98px){
  .page-chi-siamo .tl-soft__list{padding-left:28px}
  .page-chi-siamo .tl-soft__list::before{left:12px; top:0; bottom:0; width:3px}
}
@media (min-width:900px){
  .page-chi-siamo .tl-soft__list{display:grid; row-gap:28px}
  .page-chi-siamo .tl-soft__list::before{left:50%; transform:translateX(-1px); top:0; bottom:0; width:2px}
}

/* Item */
.page-chi-siamo .tl-soft__item{position:relative}
@media (min-width:900px){
  .page-chi-siamo .tl-soft__item{display:grid; grid-template-columns:1fr 1fr; align-items:center}
  .page-chi-siamo .tl-soft__item:nth-child(odd) .tl-soft__card{grid-column:1; justify-self:end}
  .page-chi-siamo .tl-soft__item:nth-child(odd) .tl-soft__dot{left:calc(50% - 7px)}
  .page-chi-siamo .tl-soft__item:nth-child(even) .tl-soft__card{grid-column:2; justify-self:start}
  .page-chi-siamo .tl-soft__item:nth-child(even) .tl-soft__dot{left:calc(50% - 7px)}
}

/* Puntino */
.page-chi-siamo .tl-soft__dot{
  position:absolute; top:14px; width:14px; height:14px; border-radius:50%;
  background:#111827; 
  box-shadow:0 0 0 4px #fff, 0 0 0 8px rgba(17,24,39,.12);
}
@media (max-width:899.98px){ .page-chi-siamo .tl-soft__dot{left:6px} }

/* Card */
.page-chi-siamo .tl-soft__card{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px;
  padding:16px 18px; box-shadow:0 16px 36px rgba(2,6,23,.08); position:relative;
  max-width:520px;
}
@media (max-width:899.98px){ .page-chi-siamo .tl-soft__card{margin:0 0 22px 18px} }
@media (min-width:900px){
  .page-chi-siamo .tl-soft__card{margin:0 32px}
}

/* Testi dentro la card */
.page-chi-siamo .tl-soft__head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.page-chi-siamo .tl-soft__year{
  background:#f3f4f6;  /* pill neutro */
  color:#111827;       /* testo in tinta footer */
  font-weight:800; font-size:12px; letter-spacing:.04em;
  padding:6px 10px; border-radius:999px;
}
.page-chi-siamo .tl-soft__card h3{
  margin:0; font:800 18px/1.25 "Poppins",system-ui,sans-serif; color:#0b0f14;
}
.page-chi-siamo .tl-soft__card p{
  margin:8px 0 0; color:#374151; font:400 15px/1.7 "Poppins",system-ui,sans-serif;
}

/* Hover/focus super sobrio (coerente con il resto) */
@media (hover:hover){
  .page-chi-siamo .tl-soft__card{transition:transform .18s ease, box-shadow .18s ease}
  .page-chi-siamo .tl-soft__card:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(2,6,23,.12)}
}

/* ========== CHI SIAMO — STAFF RIDOTTO ========== */
.page-chi-siamo .staff-preview {
  background: #fff;
  padding: 72px 20px;
  text-align: center;
}
@media (min-width: 1200px) {
  .page-chi-siamo .staff-preview {
    padding: 96px 20px;
  }
}

.page-chi-siamo .staff-preview__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  color: #0b0f14;
  margin: 0 0 12px;
}
.page-chi-siamo .staff-preview__sub {
  font: 400 16px/1.7 "Poppins", system-ui, sans-serif;
  color: #475569;
  max-width: 720px;
  margin: 0 auto 42px;
}

.page-chi-siamo .staff-preview__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .page-chi-siamo .staff-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .page-chi-siamo .staff-preview__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.page-chi-siamo .staff-preview__card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-chi-siamo .staff-preview__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 36px rgba(2, 6, 23, 0.12);
}

.page-chi-siamo .staff-preview__card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.page-chi-siamo .staff-preview__card:hover img {
  filter: grayscale(0%);
}

.page-chi-siamo .staff-preview__card h3 {
  font: 700 18px "Poppins", system-ui, sans-serif;
  color: #0b0f14;
  margin: 0 0 6px;
}
.page-chi-siamo .staff-preview__card p {
  font: 400 14px/1.6 "Poppins", system-ui, sans-serif;
  color: #374151;
  margin: 0;
}

.page-chi-siamo .staff-preview__cta {
  margin-top: 42px;
}
.page-chi-siamo .staff-preview__button {
  display: inline-block;
  background: #0b0f14;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.page-chi-siamo .staff-preview__button:hover {
  background: #1f2937;
}