/* AboutUs.css - override leggeri per la pagina About (usare DOPO styleIndex.css) */

/* contenitore più stretto per il testo */
.container--narrow{max-width:760px;margin-inline:auto;padding-inline:1rem}

/* intro */
.about-us .intro{
  margin:0 auto 1.25rem; color:var(--muted); font-size:1.05rem; text-align:center;
}

/* TEAM: griglia con 3 card in riga */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
  margin-top:1.25rem;
  align-items:start;
}

/* 2 colonne su schermi medi */
@media (max-width: 900px){
  .team-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* 1 colonna su mobile stretto */
@media (max-width: 600px){
  .team-grid{
    grid-template-columns:1fr;
  }
}

/* SINGOLO MEMBRO: foto sopra + card sotto */
.team-member{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}

/* dentro la griglia, evita che la card “spari” a 720px */
.team-grid .member-card{
  max-width:100%;
}

/* centra l’immagine dentro la card */
.member-photo{
  margin-inline:auto;
}

/* foto: centrata, con border-radius e shadow - dimensione responsiva */
.member-photo{
  width:260px;
  height:260px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:var(--shadow);
  display:block;
}

/* card testo sotto l'immagine: box coerente con home (uso variabili) */
.member-card{
  width:100%;
  max-width:720px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem 1rem;
  box-shadow:var(--shadow);
  text-align:center;
}

/* titoli e ruoli */
.member-card h3{margin:.2rem 0;color:var(--brand);font-family:Merriweather,serif}
.member-card .muted{color:var(--muted);font-weight:600;margin-bottom:.5rem}

/* social links */
.member-socials{display:flex;gap:.6rem;justify-content:center;margin-top:.5rem}
.member-socials a{display:inline-block;padding:.5rem .75rem;border-radius:.6rem;border:1px solid var(--line);text-decoration:none;color:var(--brand);font-weight:700}
.member-socials a:hover{background:rgba(0,51,153,.04);color:var(--accent)}

/* spacing maggiore tra section e footer */
main#main{padding-bottom:3.5rem}

/* responsive */
@media (max-width:900px){
  .member-photo{width:220px;height:220px}
  .member-card{padding:.9rem}
}
@media (max-width:520px){
  .member-photo{width:180px;height:180px}
  .container--narrow{padding-inline:.8rem}
}
/* ------------------- BOX / CARD LAYOUT per ciascun grafico ------------------- */
:root{
  /* assicurati che queste variabili siano già definite; ripetute se necessario */
  --box-bg: #ffffff;
  --box-gap: 1rem;
}

/* Full height page: main si espande, footer resta sotto (rimuove "bianco sotto footer") */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main.container { flex: 1 0 auto; padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* BOX: look professionale, più spazio dal footer/header */
.box {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--box-bg));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
  margin: 1.25rem 0;
}

/* box internal grid: left legend column + right chart column */
.box-grid{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--box-gap);
  align-items: start;
}

/* mobile: column stack */
@media (max-width: 920px){
  .box-grid{ grid-template-columns: 1fr; }
}

/* legend header (titolo sopra la lista) */
.legend-header { margin-bottom: .6rem; }
.legend-header .legend-title{
  font-size: 1rem;
  margin: 0 0 .15rem;
  color: var(--primary);
  font-weight: 800;
}
.legend-subtle{ font-weight:600; color:var(--muted); font-size:.92rem; margin-left:.45rem; display:inline-block; }
.legend-note{ margin:0; font-size:.92rem; color:var(--muted) }

/* legenda vera: mantiene il look precedente ma senza percentuali visibili (JS mostra solo euro) */
.legend-wrap ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.legend-wrap li { 
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:.5rem; border-radius:.6rem; transition: background .12s ease, transform .06s ease;
}
.legend-wrap li:hover { background: rgba(0,51,153,.04); transform: translateY(-2px); cursor: pointer; }
.legend-swatch{ width:14px; height:14px; border-radius:3px; margin-right:.6rem; display:inline-block; }
.legend-label{ font-weight:700; color:var(--text); }
.legend-value{ font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; }

/* chart-col: canvas card in alto e tabella sotto */
.chart-col { display:flex; flex-direction:column; gap:1rem; }
.canvas-wrap { padding:1rem; border-radius:12px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
.table-wrap { width:100%; overflow:auto; }

/* small aesthetic tweak results header */
.results-head { font-size:1.1rem; margin:0 0 .6rem; color:var(--text); font-weight:700; }

/* footer: assicurati che non generi spazio bianco sotto (full-width, nessun margin) */
.site-footer { margin-top: 0; padding-top: 18px; padding-bottom: 18px; }
.site-footer .container { padding-top:0; padding-bottom:0; }

/* 1) la griglia deve “stirare” gli elementi */
.team-grid{
  align-items: stretch; /* se avevi start, questo risolve */
}

/* 2) ogni item deve poter prendere tutta l’altezza della riga */
.team-grid .team-member{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 3) la card riempie lo spazio disponibile */
.team-grid .member-card{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* (opzionale) se hai i social sotto, li tieni allineati in basso */
.team-grid .member-socials{
  margin-top: auto;
}

.collab{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 520px;
  margin: 0 auto;
}
/* =========================================================
   Rework About — redazione a livelli
   Incolla questa sezione in fondo ad AboutUs.css
   ========================================================= */

.about-container{
  max-width: 1120px;
}

.about-page-section{
  margin: 2.25rem 0;
}

.about-hero,
.team-head,
.collab-head{
  text-align: center;
  margin: 0 auto 1.5rem;
}

.section-kicker{
  margin: 0 0 .45rem;
  color: var(--accent, #7a9cc6);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 800;
}

.about-hero h1,
.team-head h2,
.collab-head h2{
  margin: 0;
  color: var(--brand);
  font-family: Merriweather, serif;
}

.about-copy{
  max-width: 860px;
  margin: 1rem auto 0;
  display: grid;
  gap: .75rem;
  text-align: left;
}

.about-copy p,
.team-head .subtitle,
.tier-heading p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.team-overview{
  display: grid;
  gap: 1.35rem;
}

.team-tier{
  position: relative;
  padding: 1.15rem;
  border: 1px solid var(--line, rgba(0,0,0,.1));
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
  box-shadow: var(--shadow);
}

.team-tier + .team-tier{
  margin-top: .35rem;
}

.tier-heading{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  margin-bottom: 1rem;
}

.tier-heading h3{
  margin: 0 0 .25rem;
  color: var(--brand);
  font-family: Merriweather, serif;
}

.tier-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .42rem .72rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.tier-pill-secondary{
  background: rgba(35, 91, 160, .12);
  color: var(--brand);
  border: 1px solid rgba(35, 91, 160, .2);
}

.tier-pill-light{
  background: rgba(0, 0, 0, .045);
  color: var(--text, #1f2937);
  border: 1px solid var(--line, rgba(0,0,0,.1));
}

.founders-grid .founder-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.founders-grid .founder-link:hover,
.founders-grid .founder-link:focus-visible{
  transform: translateY(-3px);
  text-decoration: none;
  border-color: rgba(35, 91, 160, .28);
}

.member-card h4,
.editorial-card h4{
  margin: .2rem 0;
  color: var(--brand);
  font-family: Merriweather, serif;
}

.founders-grid .profile-link,
.profile-link-soft,
.profile-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: .8rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .92rem;
}

.founders-grid .profile-link,
.profile-link-soft{
  border: 1px solid rgba(35, 91, 160, .24);
  color: var(--brand);
  text-decoration: none;
}

.founders-grid .founder-link:hover .profile-link,
.founders-grid .founder-link:focus-visible .profile-link,
.profile-link-soft:hover,
.profile-link-soft:focus-visible{
  text-decoration: underline;
}

.editorial-grid{
  display: grid;
  gap: 1rem;
}

.editorial-grid-featured{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editorial-grid-compact{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.editorial-card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--line, rgba(0,0,0,.1));
  border-radius: 15px;
  background: var(--card, #fff);
  box-shadow: var(--shadow);
}

.editorial-card-featured{
  min-height: 100%;
}

.editorial-card-compact{
  grid-template-columns: 1fr;
  text-align: left;
}

.member-initial{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 91, 160, .1);
  color: var(--brand);
  font-weight: 900;
  font-size: 1.05rem;
}

.editorial-card-body{
  min-width: 0;
}

.editorial-role{
  margin: .25rem 0;
  color: var(--text, #1f2937);
  font-weight: 800;
}

.editorial-area{
  margin: .35rem 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: .95rem;
}

.profile-status{
  border: 1px dashed rgba(0, 0, 0, .18);
  color: var(--muted);
  background: rgba(0, 0, 0, .025);
}

.collaborations{
  text-align: center;
}

.collab{
  justify-items: center;
  align-items: center;
}

.collab a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(0,0,0,.1));
  background: var(--card, #fff);
  box-shadow: var(--shadow);
}

.collab img{
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
}

@media (max-width: 980px){
  .editorial-grid-compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .tier-heading,
  .editorial-grid-featured,
  .editorial-grid-compact{
    grid-template-columns: 1fr;
  }

  .tier-pill{
    width: fit-content;
  }

  .editorial-card,
  .editorial-card-compact{
    grid-template-columns: auto 1fr;
  }
}

@media (max-width: 520px){
  .team-tier{
    padding: .95rem;
    border-radius: 15px;
  }

  .editorial-card,
  .editorial-card-compact{
    grid-template-columns: 1fr;
  }
}

/* Mobile fix: collaboration logos stacked on small screens */
@media (max-width: 640px){
  .collab{
    grid-template-columns: 1fr;
    max-width: 220px;
    width: 100%;
  }

  .collab a{
    width: 100%;
    box-sizing: border-box;
  }
}