/* ═══════════════════════════════════════════════════════════════
   ApuliaOne — chi-siamo.css
   Stili specifici della pagina Chi Siamo (chi-siamo.html)
   Dipende da: style.css (caricato prima)
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   HERO CHI SIAMO — hero con gradiente blu/teal
   e testo cursivo Allura
   ───────────────────────────────────────────── */
.hero-cs {
  background: linear-gradient(160deg, #0B2E6B 0%, #1a4ba0 60%, #17B7C8 130%);
  padding: 40px 20px 36px;
  text-align: center;
}

.hero-cs h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 6vw, 36px);
  color: var(--white);
  margin-bottom: 8px;
}

/* Riga in corsivo Allura */
.hero-cs .cursive-line {
  font-family: 'Allura', cursive;
  font-size: clamp(26px, 6vw, 38px);
  color: var(--gold);
  display: block;
  margin-top: 4px;
}

.hero-cs p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  max-width: 480px;
  margin: 14px auto 0;
  line-height: 1.6;
}


/* ─────────────────────────────────────────────
   VALUES GRID — griglia 5 valori del brand
   ───────────────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Desktop: tutti e 5 in riga */
@media (min-width: 700px) {
  .values-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Singola box valore */
.value-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}
.value-box:hover { transform: translateY(-3px); }

.value-icon  { font-size: 30px; margin-bottom: 8px; }
.value-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; color:var(--navy); margin-bottom:4px; }
.value-desc  { font-size: 11px; color: #999; line-height: 1.5; }


/* ─────────────────────────────────────────────
   STORY BLOCK — blocco testo narrativo bianco
   ───────────────────────────────────────────── */
.story-block {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.story-block p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 14px;
}
.story-block p:last-child { margin-bottom: 0; }
.story-block strong       { color: var(--navy); }


/* ─────────────────────────────────────────────
   ROADMAP — timeline verticale del progetto
   ───────────────────────────────────────────── */
.roadmap {
  display: flex;
  flex-direction: column;
}

.road-step {
  display: flex;
  gap: 14px;
  padding-bottom: 22px;
  position: relative;
}
.road-step:last-child { padding-bottom: 0; }

/* Colonna sinistra dot + linea */
.road-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  flex-shrink: 0;
}

/* Cerchio step della roadmap */
.road-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 1;
  flex-shrink: 0;
}
/* Step completato: verde olivo */
.road-dot.done   { background: var(--olive); }
/* Step corrente: oro con testo navy */
.road-dot.active { background: var(--gold); color: var(--navy); }

/* Linea verticale tra gli step */
.road-line {
  width: 2px;
  flex: 1;
  background: var(--sand);
  min-height: 24px;
  margin-top: 4px;
}
.road-step:last-child .road-line { display: none; }

/* Testo descrittivo dello step */
.road-content { padding-top: 4px; }
.road-title   { font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; color:var(--navy); margin-bottom:3px; }
.road-desc    { font-size: 12px; color: #888; line-height: 1.5; }


/* ─────────────────────────────────────────────
   CONTACT CTA — blocco navy call-to-action finale
   ───────────────────────────────────────────── */
.contact-cta {
  background: linear-gradient(135deg, var(--navy), #1a4ba0);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  color: var(--white);
}
.contact-cta h3 { color: var(--white); font-size: 20px; margin-bottom: 8px; }
.contact-cta p  { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 18px; }