/*
 * precorso-landing.css
 * Stili aggiuntivi per la landing page Precorso gratuito "Pensa da Magistrato"
 * Istituto Giuridico — BFT Advisoring & Management S.R.L.
 *
 * Questo file estende magistratura-landing.css con i componenti
 * specifici del precorso. Le variabili e i componenti comuni
 * (header, footer, form, timeline, cards, ecc.) sono già definiti
 * in magistratura-landing.css, caricato in precedenza.
 *
 * Nuovi componenti:
 *   - .pre-hero               Hero senza immagine illustrativa, più arioso
 *   - .pre-problema           Fascia "Il problema reale" (testo + 3 colonne)
 *   - .pre-cose               "Cos'è il precorso" layout 2 colonne
 *   - .pre-confronto          Blocchi contrapposizione "non è / è"
 *   - .pre-card-grid--4       Griglia 4 card "A chi è rivolto"
 *   - .pre-salto-qualitativo  Frase ad alto impatto
 *   - .pre-cta-fascia         Fascia CTA intermedia
 *   - .pre-iscrizione         Form centrato (layout più semplice)
 *   - .pre-ty                 Stili thank you precorso
 *   - .pre-form               Campi aggiuntivi
 */

/* ============================================================
   1. HERO PRECORSO
      Immagine come sfondo della section, testo sovrapposto.
   ============================================================ */

/* Sfondo immagine sulla section hero */
.pre-hero {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
}

/* Overlay scuro semitrasparente per leggibilità del testo */
.pre-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 45, 0.72);
  z-index: 0;
}

/* Porta intestazione e contenuto sopra l'overlay */
.pre-hero .mag-hero__intestazione,
.pre-hero .mag-hero__cover-content {
  position: relative;
  z-index: 1;
}

.pre-hero .mag-hero__cover-content {
  padding-top: 4rem;
  padding-bottom: 5rem;
}

.pre-hero__cta {
  margin-top: .25rem;
}

.pre-hero__nota {
  margin-top: .85rem;
  font-size: .85rem;
  color: #8a9ab0;
  margin-bottom: 0;
}

/* ============================================================
   2. FASCIA "IL PROBLEMA REALE"
      Sfondo già applicato via .mag-section--scura.
      Testo avorio/oro, tre colonne problemi.
   ============================================================ */
.pre-problema {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.pre-problema__intro {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: #d8dde6;
  max-width: 860px;
  margin: 0 auto 2.5rem;
  line-height: 1.75;
  text-align: center;
  font-style: italic;
}

.pre-problema__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .pre-problema__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pre-problema__item {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(201, 168, 76, .25);
  border-radius: var(--mag-radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.pre-problema__num {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--mag-oro);
  opacity: .6;
  line-height: 1;
  margin-bottom: .75rem;
}

.pre-problema__item p {
  color: #c8d0dc;
  font-size: .97rem;
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   3. COS'È IL PRECORSO — layout 2 colonne
   ============================================================ */
.pre-cose__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .pre-cose__layout {
    grid-template-columns: 55% 42%;
  }
}

.pre-cose__testo h2 {
  color: var(--mag-scuro);
  margin-bottom: 1.25rem;
}

.pre-cose__box {
  background: var(--mag-bianco);
  border-radius: var(--mag-radius);
  border: 1px solid var(--mag-grigio-md);
  border-top: 4px solid var(--mag-oro);
  padding: 1.75rem;
  box-shadow: var(--mag-shadow);
}

.pre-cose__box-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mag-oro);
  margin-bottom: 1.25rem;
}

/* ============================================================
   4. PERCHÉ DIVERSO — blocchi di contrapposizione
   ============================================================ */
.pre-sezione-titolo {
  text-align: center;
  color: var(--mag-scuro);
  margin-bottom: 2rem;
}

.pre-confronto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .pre-confronto__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pre-confronto__item {
  border: 1px solid var(--mag-grigio-md);
  border-radius: var(--mag-radius);
  padding: 1.5rem 1.25rem;
  background: var(--mag-grigio);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
}

.pre-confronto__no {
  font-size: .9rem;
  font-weight: 600;
  color: #888;
  text-decoration: line-through;
  text-decoration-color: rgba(136, 136, 136, .5);
  margin: 0;
  line-height: 1.5;
}

.pre-confronto__sep {
  font-size: 1.4rem;
  color: var(--mag-oro);
  line-height: 1;
}

.pre-confronto__si {
  font-size: .97rem;
  font-weight: 700;
  color: var(--mag-scuro);
  margin: 0;
  line-height: 1.5;
}

.pre-confronto__manifesto {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-style: italic;
  text-align: center;
  color: var(--mag-scuro);
  border-top: 2px solid var(--mag-oro);
  border-bottom: 2px solid var(--mag-oro);
  padding: 1.25rem 2rem;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============================================================
   5. A CHI È RIVOLTO — griglia 4 card
   ============================================================ */
.pre-card-grid--4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .pre-card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pre-card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Le card .mag-card non hanno icona qui: padding più uniforme */
.pre-card-grid--4 .mag-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1.25rem;
}

.pre-card-grid--4 .mag-card p {
  font-size: .97rem;
  color: var(--mag-testo);
  line-height: 1.6;
  margin: 0;
}

.pre-salto-qualitativo {
  margin-top: 2.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--mag-scuro);
  text-align: center;
  border-left: 4px solid var(--mag-oro);
  padding: .75rem 1.5rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ============================================================
   6. CTA INTERMEDIA (fascia blu petrolio)
   ============================================================ */
.pre-cta-fascia {
  background: var(--mag-scuro);
  padding: 4rem 1.25rem;
}

.pre-cta-fascia__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.pre-cta-fascia__claim {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  color: var(--mag-bianco);
  font-style: italic;
  max-width: 760px;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   7. MODULO DI ISCRIZIONE — layout centrato
   ============================================================ */
.pre-iscrizione__inner {
  text-align: center;
}

.pre-iscrizione__inner h2 {
  color: var(--mag-scuro);
  margin-bottom: .75rem;
}

.pre-iscrizione__inner .mag-intro {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Form centrato con larghezza massima contenuta */
.pre-form-centrata {
  max-width: 560px;
  margin: 2rem auto 0;
  text-align: left;
}

/* Campo "facoltativo" label */
.pre-form__opzionale {
  font-size: .8rem;
  font-weight: 400;
  color: #999;
  margin-left: 4px;
}

/* Nota sotto il pulsante */
.pre-form__nota-sotto {
  margin-top: 1rem;
  font-size: .82rem;
  color: #888;
  text-align: center;
  line-height: 1.5;
}

/* ============================================================
   8. THANK YOU PAGE PRECORSO
   ============================================================ */
.pre-ty .mag-ty__intro {
  line-height: 1.8;
}

/* Box cross-sell verso il corso a pagamento */
.pre-ty__crossell {
  background: var(--mag-grigio);
  border: 1px solid var(--mag-grigio-md);
  border-top: 3px solid var(--mag-oro);
  border-radius: var(--mag-radius);
  padding: 2rem 1.75rem;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.pre-ty__crossell-label {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.pre-ty__crossell-btn {
  display: inline-block;
}

/* ============================================================
   9b. INTRO TIMELINE LEZIONI
       Frase di apertura sopra l'elenco delle 6 lezioni.
   ============================================================ */
.pre-lezioni-intro {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--mag-testo);
  margin: -.25rem 0 1.75rem;
  line-height: 1.65;
  max-width: 760px;
}

/* ============================================================
   9c. FIX iOS Safari: testo CTA "oro"
       Su alcuni iPhone il colore del link veniva ereditato dal
       global rule .mag-landing-body a { color: oro }, rendendo
       il testo del bottone giallo su sfondo giallo. Forziamo
       sia color sia -webkit-text-fill-color in tutti gli stati
       (link, visited, focus, active) — l'unica proprietà che
       sovrascrive in modo affidabile il colore su WebKit iOS.
   ============================================================ */
.mag-landing-body a.mag-btn--oro,
.mag-landing-body a.mag-btn--oro:link,
.mag-landing-body a.mag-btn--oro:visited,
.mag-landing-body a.mag-btn--oro:focus,
.mag-landing-body a.mag-btn--oro:active,
.mag-landing-body button.mag-btn--oro {
  color: #1a2332 !important;
  -webkit-text-fill-color: #1a2332 !important;
  -webkit-tap-highlight-color: rgba(26, 35, 50, 0.15);
}

.mag-landing-body a.mag-btn--oro:hover,
.mag-landing-body button.mag-btn--oro:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   10. RESPONSIVE — aggiustamenti mobile precorso
   ============================================================ */
@media (max-width: 767px) {
  .pre-hero .mag-hero__cover-content {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .pre-confronto__manifesto {
    padding: 1rem 1rem;
  }

  .pre-cta-fascia {
    padding: 3rem 1.25rem;
  }

  .pre-card-grid--4 .mag-card {
    padding: 1.25rem 1rem;
  }

  .pre-salto-qualitativo {
    margin-top: 2rem;
    font-size: 1.1rem;
  }

  .pre-lezioni-intro {
    font-size: .95rem;
    margin: 0 0 1.25rem;
  }
}