/*
 * conti-landing.css
 * Landing categoria "Corso · Corte dei conti"
 * Istituto Giuridico — estensioni .cdc-* al design system.
 *
 * Riusa: magistratura-landing.css (.mag-*, token) + ordinaria-landing.css (.ord-*)
 *        + tar-landing.css (componenti condivisi: .tar-prezzo*, .tar-also-see,
 *          .mag-btn--ghost-petrolio, .ig-norma, .tar-docente/.tar-ruolo,
 *          .ord-tabella__totale).
 * Qui vivono solo i componenti specifici della Corte dei conti:
 *  - sezioni con immagine di sfondo (hero, metodo, struttura, prova, CTA)
 *  - chips del metodo su immagine
 *  - card "percorsi correlati"
 *  - griglia prezzi a 2 card
 *
 * NOTA IMMAGINI: i 5 file di sezione vanno in
 *   assets/images/corte-dei-conti/
 * Finché non sono presenti, il template NON inietta background-image e le
 * sezioni mostrano il fallback petrolio definito qui (.cdc-bg). Nessuna
 * immagine rotta in pagina.
 */

/* ============================================================
   SFONDO IMMAGINE + FALLBACK PETROLIO
   ============================================================ */
.cdc-bg {
  background-color: var(--mag-scuro);
  background-image: linear-gradient(160deg, #14202f 0%, #0f1620 100%); /* fallback se manca l'immagine */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Quando il template inietta una vera immagine inline, questa vince sul gradient di fallback */
.cdc-bg[style*="background-image"] { background-image: none; }

/* ============================================================
   HERO — overlay direzionale (75% sx → 20% dx)
   ============================================================ */
.cdc-hero { position: relative; isolation: isolate; }
.cdc-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(14, 22, 32, .92) 0%, rgba(14, 22, 32, .78) 45%, rgba(14, 22, 32, .28) 100%);
}
.cdc-hero .mag-container { position: relative; z-index: 2; }
.cdc-hero__kicker {
  font-family: Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--mag-oro);
  margin: 0 0 1.4rem;
  max-width: 640px;
}
.cdc-hero__formula {
  background: rgba(255, 255, 255, .06);
  border-left: 4px solid var(--mag-oro);
  color: #f1ece1;
  max-width: 680px;
  margin: 0 0 1.8rem;
  font-style: italic;
  font-size: 1.02rem;
}
@media (max-width: 700px) {
  .cdc-hero__overlay {
    background: linear-gradient(180deg, rgba(14, 22, 32, .82), rgba(14, 22, 32, .78));
  }
}

/* ============================================================
   ILLUSTRAZIONI DI SEZIONE (metodo, struttura, prova, CTA)

   Rev. 2026-08-04 — le 4 immagini non sono più sfondi con il testo
   sovrapposto: sono illustrazioni dentro la sezione a cui si riferiscono.
   Due affiancate al testo (metodo, prova) e due grandi a banda piena senza
   testo sopra (struttura, CTA). Solo l'hero resta a immagine di sfondo.
   ============================================================ */

/* --- prosa su fondo chiaro (prima era bianca su immagine) --- */
.cdc-prose {
  color: var(--mag-testo, #2c2c2c);
  font-family: Georgia, serif;
  font-size: clamp(1.02rem, 1.5vw, 1.13rem);
  line-height: 1.75;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.cdc-prose p { margin: 0 0 1.1rem; }
.cdc-prose p:last-child { margin-bottom: 0; }
.cdc-nota-giorni { font-style: italic; color: #7a6320; }

/* --- illustrazione affiancata al testo --- */
.cdc-split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.cdc-split .cdc-prose { max-width: none; margin: 0; }

/* variante speculare: illustrazione a destra */
.cdc-split--invertita { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.cdc-split--invertita .cdc-figure { order: 2; }

.cdc-figure { margin: 0; }
.cdc-figure picture { display: block; }
.cdc-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(14, 22, 32, .16);
}

@media (max-width: 900px) {
  .cdc-split,
  .cdc-split--invertita { grid-template-columns: 1fr; }
  .cdc-split--invertita .cdc-figure { order: 0; }
  .cdc-figure {
    max-width: 520px;
    margin: 0 auto 1.75rem;
  }
}

/* --- illustrazione grande a banda piena, senza testo sopra --- */
.cdc-illustrata--banda { padding-top: 0; }

.cdc-banda {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.cdc-banda picture { display: block; }
.cdc-banda__img {
  display: block;
  width: 100%;
  height: clamp(190px, 30vw, 400px);
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   VIDEO OPEN DAY — embed responsive 16:9
   ============================================================ */
.cdc-video {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(14, 22, 32, .18);
}
.cdc-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   CHIPS DEL METODO — su immagine, in oro
   ============================================================ */
.cdc-metodo-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem .85rem;
  margin: 0 auto 2.5rem;
  max-width: 760px;
}
.cdc-metodo-chips__item {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(.82rem, 1.3vw, .95rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a2332;
  background: var(--mag-oro);
  padding: .5rem 1.1rem;
  border-radius: 999px;
}
.cdc-metodo-chips__sep { color: var(--mag-oro); font-weight: 700; }
@media (max-width: 560px) { .cdc-metodo-chips__sep { display: none; } }

/* ============================================================
   CALLOUT — eyebrow "Focus metodologico"
   ============================================================ */
.cdc-callout__eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mag-oro-hover);
  margin: 0 0 .6rem;
}

/* ============================================================
   SECONDA AREA — il cuore identitario (padding maggiore)
   ============================================================ */
.cdc-section--cuore {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
  border-top: 3px solid var(--mag-oro);
  border-bottom: 3px solid var(--mag-oro);
}

/* ============================================================
   TABELLA 2 COLONNE — competenze allenate
   ============================================================ */
.cdc-tabella-2col tbody td:first-child {
  width: 34%;
  vertical-align: top;
}
@media (max-width: 700px) {
  .cdc-tabella-2col tbody td:first-child { width: auto; }
}

/* ============================================================
   PERCORSI CORRELATI (Vedi anche)
   ============================================================ */
.cdc-correlati-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 920px;
  margin: 2rem auto 0;
  text-align: left;
}
@media (min-width: 760px) {
  .cdc-correlati-grid { grid-template-columns: repeat(2, 1fr); }
}
.cdc-correlato {
  background: var(--mag-bianco);
  border: 1px solid var(--mag-grigio-md);
  border-left: 3px solid var(--mag-oro);
  border-radius: var(--mag-radius);
  padding: 1.6rem 1.6rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.cdc-correlato h3 {
  font-family: Georgia, serif;
  font-size: 1.18rem;
  color: var(--mag-scuro);
  margin: 0 0 .6rem;
}
.cdc-correlato p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .95rem;
  color: var(--mag-testo);
  line-height: 1.65;
  margin: 0 0 1.3rem;
}
.cdc-correlato .mag-btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   PREZZI — 2 card centrate (Corso Conti + Percorso integrato)
   ============================================================ */
.cdc-prezzi-grid {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 980px) {
  .cdc-prezzi-grid { grid-template-columns: repeat(2, 1fr); }
}