/* ==========================================================================
   Scuola Edile Modena — Chi Siamo
   Pagina vetrina istituzionale. Dipende da css/design-system.css per token,
   header, footer, SectionHeading e Button: qui restano solo le sezioni
   proprie di questa pagina.

   Sorgente: progetto Claude Design "Scuola Edile sito riporto"
     sito/pagine/ChiSiamo.dc.html
   ========================================================================== */

.cs-root { background: var(--warm-white); min-height: 100vh; }

/* Contenitore comune a tutte le sezioni della pagina. */
.cs-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.cs-section { padding-block: 88px; }
.cs-section--white { background: var(--warm-white); }
.cs-section--sand  { background: var(--warm-sand); }
.cs-section--navy  { background: var(--navy); }
.cs-section--cta   { padding-block: 96px; background: var(--warm-white); }

.cs-section__head { margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   1. Hero — navy con due aloni terracotta e il collage fotografico
   -------------------------------------------------------------------------- */
.cs-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}

/* Gli aloni sono l'unica decorazione ammessa dal sistema: due cerchi
   sfocati al 10%, mai di più. */
.cs-hero__blobs { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; }
.cs-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  background: var(--terracotta);
}
.cs-hero__blob--tl { top: 80px; left: 40px; width: 288px; height: 288px; }
.cs-hero__blob--br { bottom: 80px; right: 40px; width: 384px; height: 384px; }

.cs-hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px clamp(20px, 4vw, 48px);
}

.cs-hero__back { margin-bottom: 48px; }

.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.cs-back:hover { color: #fff; }

.cs-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 64px;
  align-items: center;
}

/* Pastiglia "Chi Siamo" sopra al titolo. */
.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 32px;
  border-radius: var(--radius-pill);
  background: rgba(217, 121, 65, 0.12);
  border: 1px solid rgba(217, 121, 65, 0.25);
}

.cs-eyebrow span {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--terracotta);
}

.cs-hero__title {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-size: clamp(36px, 6.5vw, 64px);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: #fff;
}

.cs-hero__lead {
  margin: 0 0 40px;
  font-size: 20px;
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.8);
  text-wrap: pretty;
}

.cs-hero__lead strong { color: #fff; }

.cs-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.cs-actions--center { justify-content: center; }

/* Collage: due colonne sfalsate, la seconda scende di 32px. */
.cs-collage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.cs-collage__col { display: flex; flex-direction: column; gap: 16px; }
.cs-collage__col--offset { padding-top: 32px; }

.cs-collage figure {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
}

.cs-collage img { width: 100%; display: block; object-fit: cover; }
.cs-collage img.is-tall  { height: 280px; }
.cs-collage img.is-short { height: 200px; }
.cs-collage img.is-mid   { height: 220px; }
.cs-collage img.is-long  { height: 260px; }

/* --------------------------------------------------------------------------
   2. Bottoni della pagina
   -------------------------------------------------------------------------- */
.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-card);
  font-size: var(--text-body-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border: 2px solid transparent;
}

.cs-btn--terracotta { background: var(--terracotta); color: #fff; box-shadow: var(--shadow-lg); }
.cs-btn--terracotta:hover { background: var(--terracotta-hover); color: #fff; }

/* Sul navy il bottone secondario è un vetro appena accennato. */
.cs-btn--glass {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.cs-btn--glass:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.cs-btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-lg); padding: 16px 40px; }
.cs-btn--navy:hover { background: var(--navy-hover); color: #fff; }

.cs-btn--outline { border-color: var(--border-light); color: var(--navy); padding: 16px 40px; }
.cs-btn--outline:hover { border-color: var(--terracotta); color: var(--terracotta); }

.cs-btn--sm { padding: 15px 28px; font-size: 15px; }

/* --------------------------------------------------------------------------
   3. Valori — quattro riquadri centrati
   -------------------------------------------------------------------------- */
.cs-grid { display: grid; gap: 20px; }
.cs-grid--valori  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cs-grid--sedi    { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cs-grid--accred  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Il sollevamento all'hover è lo stesso per tutte le schede della pagina. */
.cs-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.cs-card--lift:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }

.cs-valore {
  padding: 28px 24px;
  text-align: center;
  border-radius: var(--radius-lg);
}

.cs-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: rgba(217, 121, 65, 0.09);
  color: var(--terracotta);
}

.cs-tile--48 { width: 48px; height: 48px; margin-bottom: 18px; }

.cs-valore__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: var(--text-body-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--navy);
}

.cs-valore__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: var(--lh-body);
  color: var(--text-medium);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Missione — titolo che resta agganciato, due schede grandi
   -------------------------------------------------------------------------- */
.cs-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 56px;
  align-items: start;
}

.cs-split__aside { position: sticky; top: 120px; }
.cs-split__body { display: flex; flex-direction: column; gap: 20px; }

.cs-obiettivo {
  display: flex;
  gap: 24px;
  padding: 32px;
  border-radius: 16px;
}

.cs-obiettivo__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
}

/* Ogni obiettivo prende il colore della sua area formativa. */
.cs-obiettivo__tile--sicurezza { background: rgba(37, 99, 235, 0.08); color: var(--area-sicurezza); }
.cs-obiettivo__tile--qualifica { background: rgba(245, 158, 11, 0.08); color: var(--area-16ore); }

.cs-obiettivo__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: var(--fw-bold);
  color: var(--navy);
}

.cs-obiettivo__desc {
  margin: 0;
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--text-medium);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. Sede — sei righe icona + testo
   -------------------------------------------------------------------------- */
.cs-sede {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-lg);
}

.cs-sede:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }

.cs-sede__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  background: rgba(217, 121, 65, 0.06);
  color: var(--terracotta);
}

.cs-sede p {
  margin: 0;
  padding-top: 4px;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--text-medium);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6. Aula virtuale — sezione navy con un solo alone in alto a destra
   -------------------------------------------------------------------------- */
.cs-aula { position: relative; overflow: hidden; }

.cs-aula__blob {
  position: absolute;
  top: -80px;
  right: -60px;
  width: 384px;
  height: 384px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.16;
  background: var(--terracotta);
  pointer-events: none;
}

.cs-aula__inner { position: relative; z-index: 10; }

.cs-aula__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 56px;
  align-items: center;
}

/* La pastiglia sul navy è più densa di quella dell'hero. */
.cs-eyebrow--aula {
  padding: 7px 15px;
  margin-bottom: 24px;
  background: rgba(217, 121, 65, 0.14);
  border-color: rgba(217, 121, 65, 0.28);
}

.cs-eyebrow--aula span {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cs-aula__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: #fff;
}

.cs-aula__lead {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}

.cs-aula__nota {
  margin: 0 0 32px;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.6);
  text-wrap: pretty;
}

.cs-aula__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.cs-aula__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
}

.cs-feature {
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-feature__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cs-feature__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: #fff;
}

.cs-feature__desc {
  margin: 0;
  font-size: var(--text-13);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.68);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   7. Accreditamenti — quattro schede con la coccarda
   -------------------------------------------------------------------------- */
.cs-accred {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-lg);
}

.cs-accred__icon { display: flex; margin-bottom: 18px; color: var(--terracotta); }

.cs-accred__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--navy);
}

.cs-accred__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: var(--lh-body);
  color: var(--text-medium);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Chiusura — invito al contatto
   -------------------------------------------------------------------------- */
.cs-cta { max-width: 768px; margin: 0 auto; text-align: center; }

.cs-cta__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--navy);
}

.cs-cta__lead {
  margin: 0 0 40px;
  font-size: 20px;
  line-height: var(--lh-body);
  color: var(--text-medium);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cs-section { padding-block: 64px; }
  .cs-section--cta { padding-block: 72px; }
  .cs-hero__inner { padding-block: 56px; }
  .cs-hero__grid { gap: 40px; }
  .cs-split { gap: 36px; }
  /* Sotto ai 900px la colonna scorre insieme al resto: agganciarla non serve. */
  .cs-split__aside { position: static; }
}

@media (max-width: 560px) {
  .cs-hero__back { margin-bottom: 32px; }
  .cs-collage__col--offset { padding-top: 0; }
  .cs-obiettivo { flex-direction: column; gap: 16px; padding: 24px; }
  .cs-btn { flex: 1 1 100%; justify-content: center; }
}