/* ===== Modulo Richiedi Informazioni – CSS completo ===== */

/* Reset basilare */
*, *::before, *::after { box-sizing: border-box; }
:root{
  --course-color:#2a4d9b;
  --panel-bg:#fff;
  --panel-brd:#e6ebf2;
  --text:#0f172a;
  --muted:#64748b;
}

/* HERO: il colore di sfondo è dinamico via --course-color */
.hero.hero-modulo{ background:var(--course-color); }
.hero.hero-modulo .hero-btn{ background:#fff; color:var(--course-color); }

/* Wrapper pagina */
.modulo-wrapper{
  max-width: 980px;
  margin: 40px auto 80px;
  padding: 0 16px;
  color: var(--text);
  font-family: 'Quicksand',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Pannelli */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-brd);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
  padding: clamp(18px,2.5vw,28px);
  margin-bottom: 26px;
}
.panel-title{
  font-size: clamp(22px,2.2vw,26px);
  font-weight:700;
  margin: 2px 0 14px;
  letter-spacing:-.015em;
}

/* Fieldset/sezioni */
.fieldset{
  border:1px solid var(--panel-brd);
  border-radius:14px;
  padding: clamp(14px,2vw,20px);
  margin-bottom: clamp(16px,2.2vw,22px);
  background:#fff;
}
.fieldset>legend{ font-weight:700; padding:0 6px; color:#0f172a; }

/* Griglie generiche (robuste) */
.grid{ display:grid; gap: clamp(12px,2vw,18px); }
.grid.two{ grid-template-columns: 1fr; }
.grid.three{ grid-template-columns: 1fr; }

@media (min-width: 820px){
  .grid.two  { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Campo base */
.field{
  display:flex; flex-direction:column; gap:8px;
  min-width:0; /* <<< evita che il contenuto “spinga” fuori dalla colonna */
}
.field label,.label{ font-weight:600; color:var(--muted); }

/* Controlli */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%;
  height: 46px;
  padding:10px 12px;
  border:1px solid #d8dee6;
  border-radius:12px;
  background:#fff;
  font-size:16px;
  line-height:1.25;
  outline:0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field textarea{ min-height: 96px; height:auto; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:#c8cfda; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

/* Errori inline */
.error{ margin-top:4px; font-size:13px; color:#b42318; min-height:1em; }

/* —— Disponibilità (giorni + fasce) —————————————————— */
.availability{ display:grid; gap: 14px; }

/* Didascalie più ariose */
.availability .label{ margin-top: 6px; }

/* Giorni (pill orizzontali, vanno a capo se serve) */
.days-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:1px solid #e3e8f2; border-radius:999px;
  background:#f8fafc; color:#0f172a; cursor:pointer;
  user-select:none; transition:background .15s ease, border-color .15s ease;
}
.pill input{ accent-color:#4f46e5; }

/* Fasce orarie: subset con specifica “solo Sabato” */
.time-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.pill small{ font-weight:600; color:#475569; }

/* Nota */
.form-note{ color:#475569; font-size:14px; }

/* CTA */
.form-actions{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 18px; border:0; border-radius:12px;
  font-weight:700; font-size:16px; color:#fff; background:#2563eb;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary:hover{ background:#1d4ed8; box-shadow:0 8px 20px rgba(37,99,235,.3); }
.btn-primary:active{ transform: translateY(1px); }

/* Honeypot */
.hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; }

/* Spaziature professionali tra i blocchi del form */
.panel-form .fieldset .field { margin-top: 14px; }         /* ritmo base */
.panel-form .fieldset .label { display:block; margin-bottom: 8px; }

/* Più respiro sopra "Obiettivi" (dopo Livello stimato) */
#obiettiviField { margin-top: 22px !important; }

/* Più respiro sopra "Disponibilità" (dopo Esame target) */
.availability { margin-top: 24px !important; }

/* (opzionale) allinea meglio il titolo "Fasce orarie" rispetto ai pill */
.availability .field + .field .label { margin-top: 10px; }

/* Distanza extra tra "Esame target" e il blocco Disponibilità */
.field.availability-block { margin-top: 26px !important; }

/* Spaziature interne del blocco Disponibilità */
.field.availability-block > .label { margin-bottom: 12px; }
.field.availability-block .field { margin-top: 4px; }
.field.availability-block .field .label { margin-bottom: 8px; }

/* Allineamenti su desktop: giorni e fasce orarie affiancati */
@media (min-width: 900px) {
  .field.availability-block .availability {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Giorni | Fasce orarie */
    gap: 16px 24px;
  }
  /* Le note a tutta riga sotto */
  .field.availability-block .availability .field:last-child {
    grid-column: 1 / -1;
  }
}

/* Pills (coerenti col resto del form) */
.days-list, .time-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 0 rgba(16,24,40,.04);
  cursor: pointer; user-select: none;
}
.pill input { accent-color: var(--course-color, #2a4d9b); }
.pill:hover { border-color: #cfd8e3; }

/* Fix: riduci solo lo spazio tra "Disponibilità" e "Giorni" */
.label + .availability { margin-top: 6px !important; }
.availability > .field:first-child { margin-top: 0 !important; }
.availability > .field:first-child > .label { margin-top: 0 !important; }

/* ============================================================
   HERO (copiato da hero-corsi.css e adattato per il modulo)
   ============================================================ */

.hero {
  padding: 120px 20px 100px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  font-family: 'Quicksand', sans-serif;
}

.hero .hero-decor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: url('../images/hero-wave.svg') no-repeat center bottom / cover;
  z-index: 1;
}

.hero .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hero p {
  font-size: 1.2rem;
  color: #e0eaf6;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* Pulsante hero (se lo usi) */
.hero-btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  background-color: #00bfff;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s;
}
.hero-btn:hover { background-color: #009ace; }

/* Animazioni (necessarie per il titolo) */
@keyframes fadeInUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Responsivo hero */
@media (max-width: 768px) {
  .hero {
    padding: 90px 20px 80px;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  }
  .hero h1 { font-size: 2rem; }
  .hero p  { font-size: 1rem; }
}

/* ============================================================
   HERO SPECIFICO PER IL MODULO
   Usa un colore dinamico se definisci --course-color via JS/CSS
   ============================================================ */
.hero-modulo {
  background-color: var(--course-color, #2a4d9b); /* fallback blu scuola */
}

.hero-modulo h1 { opacity: 0; animation: fadeInUp 1s ease-out forwards; }