/* ============================================================
   ANITALIA — Overrides Layer
   1. Bootstrap-compatible utilities (grid + spacing + display + text)
   2. Page-specific CSS portate dai <style> dei mockup del designer
      (pagina-corso.html, pagina-video.html) — vedi CONTEXT.md
   3. Archive-specific helpers
   4. Plugin JS compat
   5. Avada quirks
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. GRID SYSTEM (prefisso ipa- per evitare conflitti con Avada)
   ────────────────────────────────────────────────────────────
   ATTENZIONE: Avada parent definisce `.container { overflow: hidden }`
   e `.col-lg-2/.col-md-2/.col-sm-2/.col-xs-2` (sistema columns proprio).
   I nostri grid usano `ipa-` prefisso per zero collisioni.
   Le utility (spacing, display, text) NON hanno conflitti con Avada
   (verificato via grep su style.min.css) e mantengono i nomi originali.
   ════════════════════════════════════════════════════════════ */

.ipa-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

.ipa-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.ipa-row.g-3 {
  gap: var(--sp-4);
}

.ipa-row.g-4 {
  gap: var(--sp-6);
}

.ipa-row.g-5 {
  gap: var(--sp-8);
}

.ipa-row.gy-5 {
  row-gap: var(--sp-12);
}

/* ─── CTA Section homepage ─────────────────────────────────── */

.ipa-cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Filigrana "ANITALIA" in background */
.ipa-cta-section::before {
  content: 'ANITALIA';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 16rem;
  font-weight: 700;
  letter-spacing: 8px;
  color: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Il contenuto sta sopra la filigrana */
.ipa-cta-inner {
  position: relative;
  z-index: 2;
}

/* Avada override: forza uppercase sul display-2 dentro la CTA */
.ipa-cta-section .display-2 {
  text-transform: uppercase !important;
  color: #ffffff !important;
}

/* Mobile: riduci filigrana */
@media (max-width: 768px) {
  .ipa-cta-section::before {
    font-size: 5rem;
    letter-spacing: 4px;
  }
}

@media (min-width: 992px) {
  .ipa-row {
    grid-template-columns: repeat(12, 1fr);
  }

  .ipa-col-lg-2 {
    grid-column: span 2;
  }

  .ipa-col-lg-3 {
    grid-column: span 3;
  }

  .ipa-col-lg-4 {
    grid-column: span 4;
  }

  .ipa-col-lg-6 {
    grid-column: span 6;
  }

  .ipa-col-lg-8 {
    grid-column: span 8;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .ipa-row {
    grid-template-columns: repeat(12, 1fr);
  }

  .ipa-col-md-3 {
    grid-column: span 3;
  }

  .ipa-col-md-4 {
    grid-column: span 4;
  }

  .ipa-col-md-6 {
    grid-column: span 6;
  }

  .ipa-col-6 {
    grid-column: span 6;
  }
}

/* Da md (≥768px) in su .ipa-col-md-* si attivano anche oltre i 992px
   se NON c'è un .ipa-col-lg-* fratello che vince. Usati nella home per
   istruttori (3 col) e mini-card highlight (4 col). */
@media (min-width: 992px) {
  .ipa-col-md-3 {
    grid-column: span 3;
  }

  .ipa-col-md-4 {
    grid-column: span 4;
  }

  .ipa-col-md-6 {
    grid-column: span 6;
  }
}

/* Spacing — mapping BS5 spacers su token AN Italia */
.m-0 {
  margin: 0;
}

.mt-1 {
  margin-top: var(--sp-1);
}

.mt-2 {
  margin-top: var(--sp-2);
}

.mt-3 {
  margin-top: var(--sp-4);
}

.mt-4 {
  margin-top: var(--sp-6);
}

.mt-5 {
  margin-top: var(--sp-12);
}

.mt-6 {
  margin-top: var(--sp-16);
}

.mb-1 {
  margin-bottom: var(--sp-1);
}

.mb-2 {
  margin-bottom: var(--sp-2);
}

.mb-3 {
  margin-bottom: var(--sp-4);
}

.mb-4 {
  margin-bottom: var(--sp-6);
}

.mb-5 {
  margin-bottom: var(--sp-12);
}

.mb-6 {
  margin-bottom: var(--sp-16);
}

.ms-2 {
  margin-left: var(--sp-2);
}

.ms-4 {
  margin-left: var(--sp-6);
}

.ms-auto {
  margin-left: auto;
}

.me-2 {
  margin-right: var(--sp-2);
}

.me-4 {
  margin-right: var(--sp-6);
}

.me-auto {
  margin-right: auto;
}

/* Display utilities */
.d-none {
  display: none !important;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

@media (max-width: 991.98px) {
  .d-lg-none {
    display: block;
  }

  .d-lg-block {
    display: none !important;
  }

  .d-lg-flex {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-block {
    display: block;
  }

  .d-lg-flex {
    display: flex;
  }
}

/* Text color — !important per battere Avada body { color: var(--body...) }
   e anitalia.css h1..h6 { color: var(--pal-offblack-500) } su selettori
   contestuali tipo .course-hero-cover h1 */
.text-white,
.course-hero-cover .text-white,
.course-hero-cover h1,
.course-hero-cover h2,
.course-hero-cover .display-1,
.course-hero-cover .display-2 {
  color: #fff !important;
}

.text-center {
  text-align: center;
}


/* ════════════════════════════════════════════════════════════
   2. PAGE-SPECIFIC CSS — portata dai mockup del designer
   Fonte: <style> inline di pagina-corso.html e pagina-video.html.
   Queste classi non sono in anitalia.css ma sono parte del design
   system del designer — vivono qui finché non vengono migrate in
   anitalia.css ufficiale.
   ════════════════════════════════════════════════════════════ */

/* ─── pagina-corso.html — Course hero cover ───────────────── */
.course-hero-cover {
  background-color: var(--pal-offblack-500);
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}

.course-hero-cover-bg {
  position: absolute;
  inset: 0;
}

.course-hero-cover-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}

.course-hero-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(26, 30, 27, .1) 0%,
      rgba(26, 30, 27, .7) 50%,
      rgba(26, 30, 27, .95) 100%);
}

.course-hero-cover-content {
  position: relative;
  z-index: 2;
  /* Longhand: non sovrascrive padding-left/right di .ipa-container */
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-12);
}

/* ─── pagina-corso.html — Mobile tabs ─────────────────────── */
.mobile-tabs {
  display: flex;
  border-bottom: 2px solid var(--pal-iron-500);
  margin-bottom: var(--sp-6);
}

.mobile-tab {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pal-gunmetal-400);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.mobile-tab.active {
  color: var(--pal-accent);
  border-bottom-color: var(--pal-accent);
}

/* ─── pagina-corso.html — Course detail card ──────────────── */
.course-detail-card {
  background: var(--pal-iron-500);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.course-detail-card h5 {
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pal-gunmetal-400);
  margin-bottom: var(--sp-4);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.detail-item i {
  color: var(--pal-tan-500);
  margin-top: 2px;
  font-size: 1rem;
  flex-shrink: 0;
}

.detail-item-text .label {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pal-gunmetal-400);
}

.detail-item-text .value {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--pal-offblack-500);
}

/* ─── pagina-corso.html — Feature list (sidebar "Il Corso Include") ─── */
/* Classe usata nel mockup ma non stilata né in anitalia.css né nel
   <style> inline del mockup. Completata qui in base all'intento visuale. */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: .9rem;
  color: var(--pal-gunmetal-500);
}

.feature-list li i {
  color: var(--pal-patch-500);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ─── pagina-corso.html — Phase label + video-num ────────── */
.phase-label {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pal-tan-500);
  padding: var(--sp-4) 0 var(--sp-2);
  border-bottom: 1px solid var(--pal-iron-500);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.phase-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pal-accent);
  flex-shrink: 0;
}

.video-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pal-iron-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  color: var(--pal-gunmetal-500);
  flex-shrink: 0;
}

.video-item.active .video-num {
  background: var(--pal-accent);
  color: var(--pal-offblack-500);
}

/* ─── Sidebar stack ─────────────────────────────────────
   I mockup del designer hanno `.sticky-col` / `.sticky-right` sul WRAPPER
   sidebar: in produzione l'intero wrapper restava agganciato e copriva
   le card sottostanti ("Il Corso Include"). Fix V3.1: niente sticky sul
   wrapper. V4: sticky scoped sulla sola `.progress-box` (vedi sotto). */
.ipa-sidebar-stack>*+* {
  margin-top: var(--sp-6);
}

/* Sticky .progress-box — UX nice-to-have per pagine lunghe.
   Top calcolato per non finire sotto admin bar WP (32px) + header sticky
   Avada (~80px) + gap visivo (16px). Body class `admin-bar` è aggiunta da
   WP quando l'utente vede la admin bar.
   Specificità: .ipa-col-lg-4 .progress-box (0,2,0) batte la base
   .progress-box (0,1,0) di anitalia.css. */
@media (min-width: 992px) {
  .ipa-col-lg-4 .progress-box {
    position: sticky;
    top: 128px;
    /* 32 admin-bar + ~80 Avada header + 16 gap */
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    scroll-margin-top: 128px;
  }

  /* Visitatore non loggato → niente admin bar, recupera 32px. */
  body:not(.admin-bar) .ipa-col-lg-4 .progress-box {
    top: 96px;
    max-height: calc(100vh - 116px);
    scroll-margin-top: 96px;
  }
}

/* Mobile / tablet sotto i 992px: nessuno sticky, scroll naturale. */
@media (max-width: 991.98px) {
  .ipa-col-lg-4 .progress-box {
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* ─── page-video V2.html — Video header (struttura V2) ────
   V4.1: il cliente ha chiesto lo stile del video header di
   `_design-reference/page-video V2.html`. Differenze vs pagina-video.html
   V1 (precedente): il player NON va edge-to-edge, ma è dentro
   `.ipa-container` (max 1280px), preceduto da un blocco compatto con
   pill "Lezione N / TOT" + titolo modulo in bianco. La sezione
   `.video-player-hero` (definita in anitalia.css sezione 14) fornisce
   già background #000 + min-height + flex center. Aggiungiamo qui solo
   i meta sopra il player. Colori e stili invariati come richiesto. */
.ani-video-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.ani-video-hero-modulo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

/* La .video-player-hero (anitalia.css) ha flex center: aggiungiamo solo
   il padding verticale per dare aria sopra/sotto il player nel V2. */
.video-player-hero {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

.video-desc-section {
  padding: var(--sp-12) 0;
}

.video-title-main {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: var(--sp-3);
}

.video-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--pal-iron-500);
  border-bottom: 1px solid var(--pal-iron-500);
  margin-bottom: var(--sp-8);
}

.video-meta-row .meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pal-gunmetal-400);
}

.video-meta-row .meta-item i {
  color: var(--pal-tan-500);
}

/* ─── pagina-video.html — Notes box ──────────────────────── */
.notes-box {
  background: var(--pal-khaki-500);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  border-left: 4px solid var(--pal-tan-500);
  margin-top: var(--sp-8);
}

.notes-box h6 {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pal-tan-600);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.notes-box p,
.notes-box li {
  font-size: .88rem;
  color: var(--pal-gunmetal-500);
}

.notes-box>*+* {
  margin-top: var(--sp-3);
}

/* ─── pagina-video.html — Instructor bio (dark card) ─────── */
.instructor-bio {
  background: var(--pal-offblack-500);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  color: rgba(255, 255, 255, .75);
  margin-bottom: var(--sp-6);
}

.instructor-bio-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.instructor-bio .instructor-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.instructor-bio .name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
}

.instructor-bio .role {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pal-tan-500);
}

.instructor-bio p {
  font-size: .88rem;
  line-height: 1.65;
}

/* ─── pagina-video.html — Sidebar video list (compatta) ──── */
.sidebar-video-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-video-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
  border: 1px solid transparent;
  margin-bottom: var(--sp-2);
}

.sidebar-video-item:hover {
  background: var(--pal-iron-500);
}

.sidebar-video-item.active {
  background: var(--pal-accent-light);
  border-color: var(--pal-accent);
}

.sidebar-video-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pal-iron-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  color: var(--pal-gunmetal-500);
  flex-shrink: 0;
}

.sidebar-video-item.active .sidebar-video-num {
  background: var(--pal-accent);
  color: var(--pal-offblack-500);
}

.sidebar-video-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--pal-offblack-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-video-status {
  font-size: .85rem;
  flex-shrink: 0;
}

.sidebar-video-status.seen {
  color: var(--pal-patch-500);
}

.sidebar-video-status.unseen {
  color: var(--pal-iron-600);
}

.sidebar-section-title {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pal-gunmetal-400);
  padding: var(--sp-3) 0 var(--sp-2);
  border-bottom: 1px solid var(--pal-iron-500);
  margin-bottom: var(--sp-3);
}


/* ════════════════════════════════════════════════════════════
   2.b — SHORTCODE WRAPPER + componenti card riusati
   Stilizza i wrapper prodotti dagli shortcode del plugin
   `ip-anitalia-corsi`:
     - .promo-band / .promo-band-inner   da  [ip_anitalia_promo_band]
     - .ipa-corsi-grid                   da  [ip_anitalia_corsi_grid]
     - .ipa-istruttori-grid              da  [ip_anitalia_istruttori_grid]
     - .ipa-stats-grid                   da  [ip_anitalia_stats]
   I componenti card interni (.course-card già in anitalia.css;
   .instructor-card-home* e .stat-* sotto) sono usati anche fuori
   da questi shortcode — restano qui come componenti riutilizzabili.
   Il content manager inserisce i shortcode via Avada Fusion Builder.
   ════════════════════════════════════════════════════════════ */

/* ─── Promo band ticker ([ip_anitalia_promo_band]) ──────────
   Banda ambra con scorrimento orizzontale infinito.
   Gli item sono duplicati nel markup (×2) per il loop seamless:
   l'animazione porta da translateX(0) a translateX(-50%) per
   poi ricominciare senza interruzione visiva.
   La durata è controllabile con l'attributo `speed` dello shortcode
   (default 20s — override inline sulla .promo-band-inner).          */
.promo-band {
  background: var(--pal-tan-500);
  padding: var(--sp-6) 0;
  overflow: hidden;
}

.promo-band-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  white-space: nowrap;
  animation: ipa-ticker 20s linear infinite;
}

@keyframes ipa-ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.promo-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pal-offblack-500);
  flex-shrink: 0;
}

.promo-item i {
  color: var(--pal-offblack-400);
}

.promo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pal-offblack-400);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .promo-band-inner {
    animation: none;
  }
}

/* ─── CTA sotto grid corsi ([ip_anitalia_corsi_grid show_all="yes"]) */
.ipa-corsi-grid-cta {
  text-align: center;
  margin-top: var(--sp-8);
}

/* ─── Grid wrapper: corsi (output [ip_anitalia_corsi_grid]) ──
   Vertical stack layout. The internal cards are `.course-card` (horizontal)
   which scale beautifully and stack their image on mobile. */
.ipa-corsi-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* ─── Grid wrapper: istruttori (output [ip_anitalia_istruttori_grid]) ──
   Stack 1col mobile, 3col da 768px. Card interno = .instructor-card-home. */
.ipa-istruttori-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

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

/* ─── Grid wrapper: stats (output [ip_anitalia_stats]) ──────
   2×2 mobile, 4×1 da 768px. Background scuro perché tipicamente
   inserito in una sezione Fusion con background dark. */
.ipa-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  align-items: center;
  justify-items: center;
}

@media (min-width: 768px) {
  .ipa-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
}

/* ─── Componente .stat-item (riusato da [ip_anitalia_stats]) ──
   Numero ambra grande + label uppercase. Pensato per fondo scuro
   (text colors espliciti). Se inserito su fondo chiaro, override
   `.stat-label` con `color: var(--pal-gunmetal-400)` nel Builder. */
.stat-item {
  text-align: center;
  padding: var(--sp-4);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--pal-accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.stat-label {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* ─── Componente .instructor-card-home (riusato da [ip_anitalia_istruttori_grid]) ──
   Card verticale: foto 240px object-cover top + body con nome/ruolo/bio/count.
   Hover: lift + shadow. */
.instructor-card-home {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--pal-iron-500);
  transition: box-shadow var(--t-base), transform var(--t-base);
  display: flex;
  flex-direction: column;
}

/* Card hover styles: single, soft and uniform shadow on all sides */
.course-card:hover,
.instructor-card-home:hover {
  box-shadow: 0 2px 28px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

/* Transizione fluida e highlight sul pulsante "Scopri di più" al passaggio del mouse sulla card */
.course-card .btn-ghost {
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.course-card .btn-ghost:hover {
  background-color: var(--pal-offblack-500);
  color: #fff;
  border-color: var(--pal-offblack-500);
}

.instructor-card-home img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.instructor-card-home-placeholder {
  width: 100%;
  height: 240px;
  background: var(--pal-iron-500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pal-gunmetal-300);
  font-size: 4rem;
}

.instructor-card-home-body {
  padding: var(--sp-6);
}

.instructor-card-home-body h4 {
  margin-bottom: var(--sp-1);
}

.instructor-card-home-body .role {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pal-tan-500);
  margin-bottom: var(--sp-3);
}

.instructor-card-home-body p {
  font-size: .88rem;
  color: var(--pal-gunmetal-400);
  margin: 0;
}

.instructor-corsi-count {
  margin-top: var(--sp-3) !important;
  font-family: var(--font-display);
  font-size: .68rem !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pal-gunmetal-300) !important;
}


/* ─── Componente .highlight-card ────────────────────────────
   Card con bordo sinistro ambra su sfondo khaki. Riusabile
   ovunque — in Avada Builder basta aggiungere la classe CSS
   personalizzata "highlight-card" all'elemento Text Block. */
.highlight-card {
  background: var(--pal-khaki-500);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  border-left: 4px solid var(--pal-accent);
}

.highlight-card h4 {
  margin-bottom: var(--sp-2);
}

.highlight-card p {
  font-size: .9rem;
  color: var(--pal-gunmetal-400);
  margin-bottom: var(--sp-4);
}


/* ════════════════════════════════════════════════════════════
   3. ARCHIVE-SPECIFIC (kept dal primo draft di Step 13)
   ════════════════════════════════════════════════════════════ */

.ani-hero-compact {
  min-height: 320px;
}

.ani-hero-compact .ani-hero-content {
  padding: var(--sp-12) 0;
  max-width: 720px;
}

.ani-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* 1:1 ratio to widen image and reduce zoom */
  gap: var(--sp-8);
  align-items: stretch;
}

@media (min-width: 992px) {
  .ani-hero-media {
    border-radius: 0;
    /* Remove left rounded corners on desktop */
  }
}

@media (max-width: 991.98px) {
  .ani-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-bottom: var(--sp-8);
    /* Spacing at the bottom of stacked hero on mobile */
  }
}

.ani-filters {
  background: var(--pal-khaki-500);
  border: 1px solid var(--pal-iron-500);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-12);
}

.ani-filters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--sp-4);
  align-items: end;
}

@media (max-width: 767.98px) {
  .ani-filters-grid {
    grid-template-columns: 1fr;
  }
}

.ani-filter-label {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pal-gunmetal-500);
  margin-bottom: var(--sp-2);
}

.ani-filter select {
  width: 100%;
  padding: .65rem var(--sp-4);
  font-family: var(--font-body);
  font-size: .95rem;
  background: #fff;
  border: 1.5px solid var(--pal-iron-500);
  border-radius: var(--radius-sm);
  color: var(--pal-offblack-500);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231A1E1B'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 12px;
  padding-right: var(--sp-8);
}

.ani-filter select:focus {
  outline: none;
  border-color: var(--pal-accent);
  box-shadow: 0 0 0 3px rgba(255, 159, 28, .18);
}

.ani-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.ani-course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.ani-empty {
  padding: var(--sp-8);
  background: var(--pal-khaki-500);
  border-radius: var(--radius-md);
  color: var(--pal-gunmetal-500);
  text-align: center;
}

.ani-empty-state {
  padding: var(--sp-16) 0;
  text-align: center;
}

.ani-empty-state .eyebrow {
  margin-bottom: var(--sp-3);
}

.ani-empty-state h2 {
  margin-bottom: var(--sp-4);
}

.ani-empty-state p {
  max-width: 480px;
  margin: 0 auto var(--sp-6);
}

.ani-pagination {
  margin-top: var(--sp-12);
}

.ani-pagination .nav-links {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.ani-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pal-offblack-500);
  border: 1.5px solid var(--pal-iron-500);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.ani-pagination .page-numbers:hover {
  border-color: var(--pal-accent);
  color: var(--pal-accent);
}

.ani-pagination .page-numbers.current {
  background: var(--pal-accent);
  border-color: var(--pal-accent);
  color: var(--pal-offblack-500);
}

.ani-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* ════════════════════════════════════════════════════════════
   4. PLUGIN JS COMPAT
   `frontend.js` del plugin Step 9 fa .textContent = '...' + classList.add
   sui button completati. Stylizziamo `.btn.ip-anitalia-completed` coerente
   con .btn-tactical (verde patch outline).
   ════════════════════════════════════════════════════════════ */

.btn.ip-anitalia-completed,
.btn.ip-anitalia-completed:hover {
  background: transparent;
  color: var(--pal-patch-500);
  border-color: var(--pal-patch-500);
  cursor: default;
  box-shadow: none;
  transform: none;
}


/* ════════════════════════════════════════════════════════════
   5. AVADA QUIRKS
   ════════════════════════════════════════════════════════════ */

.avada-page-titlebar-wrapper,
.fusion-page-title-bar {
  display: none;
}

.fusion-header-wrapper+main,
.fusion-header-wrapper+.ani-page {
  margin-top: 0;
}

.fusion-fullwidth.fusion-builder-row-1 {
  padding: 0 !important;
}

.ani-page {
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   AVADA FULL-WIDTH OVERRIDE — architettura V6
   ───────────────────────────────────────────────────────────────
   Regola fondamentale: NON toccare .fusion-row né .fusion-fullwidth
   in modo globale. I container Avada "site width" usano .fusion-row
   con max-width (es. 1248px) per centrare il contenuto — azzerarlo
   li renderebbe erroneamente full-width.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Wrapper non-Builder: rimuove max-width/padding da #content,
   .post-content, .entry-content (usati da single-corso/lezione).
   NON include .fusion-row né .fusion-fullwidth: quelli Avada li
   gestisce autonomamente in base al tipo di container. */
.ipa-fullwidth-page #content,
.ipa-fullwidth-page .post-content,
.ipa-fullwidth-page .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. #main — padding su tutti i lati.
   Regola V5.3 complementare: padding verticale via selettore identico
   ad Avada (specificità 22) per battere Dynamic CSS. */
body.ipa-fullwidth-page #main,
body.ipa-fullwidth-page main#main {
  padding: 0 !important;
}

html.avada-is-100-percent-template #main.width-100 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. Wrapper margin verticale. */
body.ipa-fullwidth-page .fusion-content-wrapper,
body.ipa-fullwidth-page .fusion-page-content-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3b. .fusion-fullwidth: Avada applica margin:-30px (var
   --hundredp_padding-hundred_percent_negative_margin) per compensare
   il padding orizzontale di #main (var --hundredp_padding: 30px).
   Avendo noi azzerato il #main padding (regola 2), questo margin
   negativo NON è più compensato e fa estendere .fusion-fullwidth
   30px oltre il viewport su ogni lato → overflow massiccio su mobile.
   Verificato leggendo /uploads/fusion-styles/*.min.css. */
body.ipa-fullwidth-page .fusion-fullwidth {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4a. Template row standard (single-corso, archive, single-lezione):
   Avada avvolge il contenuto dei template non-Builder in un
   .fusion-row con max-width ~1200px. Dobbiamo azzerarlo per
   permettere .course-hero-cover / .video-player-hero edge-to-edge.
   Identificati da :not(.fusion-builder-row): i Builder row hanno
   sempre .fusion-builder-row, i template row standard no.
   margin:0 e width:100% sicuri qui perché questi row NON usano
   il sistema gutter 104% + margini negativi di Avada Builder. */
body.ipa-fullwidth-page .fusion-row:not(.fusion-builder-row) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4b. Builder row dentro container HUNDRED-PERCENT-FULLWIDTH:
   usa width:104% + margini negativi (sistema gutter by-design Avada).
   Rimuoviamo solo max-width. NON tocchiamo margin né width.
   I container SITE-WIDTH (.nonhundred-percent-fullwidth) NON
   sono inclusi: il loro .fusion-row mantiene max-width 1248px. */
body.ipa-fullwidth-page .hundred-percent-fullwidth .fusion-row {
  max-width: none !important;
}

/* 5. Inner wrappers dentro container hundred-percent: azzera il
   padding dei Text Block Avada (.fusion-text) e del column wrapper,
   che aggiungono un ulteriore inset al contenuto. */
body.ipa-fullwidth-page .hundred-percent-fullwidth .fusion-column-wrapper,
body.ipa-fullwidth-page .hundred-percent-fullwidth .fusion-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 6. Elementi edge-to-edge: assicurano width 100% indipendentemente
   dal contesto (single-corso o Builder). */
.ipa-fullwidth-page .course-hero-cover,
.ipa-fullwidth-page .video-player-hero,
.ipa-fullwidth-page .ani-breadcrumb-bar,
.ipa-fullwidth-page .video-buttons-bar,
.ipa-fullwidth-page .ani-hero {
  width: 100%;
  max-width: none;
}


/* ════════════════════════════════════════════════════════════
   6. MOBILE TWEAKS — sotto i 992px
   ════════════════════════════════════════════════════════════ */

/* Homepage: clip overflow-x causato dal sistema gutter Avada.
   I container hundred-percent-fullwidth usano .fusion-builder-row con
   width:104%!important (inline !important batte CSS esterno) + margin:-2%.
   Il margin negativo posiziona la row a -8px dal bordo sinistro del container:
   a destra sfora di 8px oltre il viewport → scrollbar orizzontale su mobile.

   Fix: overflow-x:hidden SOLO sul body (propagato al viewport dal browser).
   Questo clippa il protruso a destra senza creare un nuovo scroll container
   intermedio — se usassimo overflow-x:hidden su .hundred-percent-fullwidth
   creeremmo un BFC che clippa anche i -8px a sinistra, tagliando il lato
   sinistro dell'hero.
   Scoped a body.home: CPT corso ha position:sticky che dipende dal chain
   di overflow e non ha il problema del 104% row. */
body.home.ipa-fullwidth-page {
  overflow-x: hidden;
}

@media (max-width: 991.98px) {
  .course-hero-cover {
    min-height: 380px;
  }

  .course-hero-cover-content {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-8);
  }

  .course-hero-cover h1 {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }

  .ani-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .ani-hero-cta .btn {
    justify-content: center;
  }

  .ani-hero-media {
    border-radius: var(--radius-lg);
    margin-bottom: 0 !important;
    /* Override default margin-bottom to prevent bottom edge cutoff */
  }
}


/* ════════════════════════════════════════════════════════════
   7. HERO ENTRANCE ANIMATIONS
   Staggered, premium entrance animations for both home/archive heroes (.ani-hero)
   and individual course page heroes (.course-hero-cover).
   ════════════════════════════════════════════════════════════ */

@keyframes aniHeroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aniHeroFadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes aniHeroFadeInScale {
  from {
    opacity: 0;
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes aniHeroFadeInUpMobile {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base style for elements that will be animated */
.ani-hero .eyebrow,
.course-hero-cover .eyebrow,
.ani-hero .display-1,
.course-hero-cover .display-2,
.ani-hero .lead,
.course-hero-cover .lead,
.ani-hero .ani-hero-meta,
.course-hero-cover .ani-hero-meta,
.ani-hero .ani-hero-cta,
.course-hero-cover .ani-hero-cta,
.ani-hero-media,
.course-hero-cover-bg {
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  /* Custom easeOutExpo for a premium feel */
  animation-fill-mode: both;
  will-change: transform, opacity;
}

/* Text and buttons enter together */
.ani-hero .eyebrow,
.course-hero-cover .eyebrow,
.ani-hero .display-1,
.course-hero-cover .display-2,
.ani-hero .lead,
.course-hero-cover .lead,
.ani-hero .ani-hero-meta,
.course-hero-cover .ani-hero-meta,
.ani-hero .ani-hero-cta,
.course-hero-cover .ani-hero-cta {
  animation-name: aniHeroFadeInUp;
  animation-delay: 0.15s;
}


/* Elegant and subtle entrance for the hero images */

/* 1. Highlight Hero grid image (slide in from right on desktop) */
.ani-hero-media {
  animation-name: aniHeroFadeInRight;
  animation-delay: 0.35s;
  animation-duration: 1.1s;
  /* Slightly slower duration for cinematic feel */
}

/* 2. Course Hero background image (subtle zoom out & fade in) */
.course-hero-cover-bg {
  animation-name: aniHeroFadeInScale;
  animation-delay: 0.05s;
  animation-duration: 1.5s;
}

/* Mobile responsive animation adjustments */
@media (max-width: 991.98px) {
  .ani-hero-media {
    animation-name: aniHeroFadeInUpMobile;
    /* On mobile, enter from below to respect screen layout */
    animation-delay: 0.25s;
    animation-duration: 0.9s;
  }
}

/* Accessibility: respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {

  .ani-hero .eyebrow,
  .course-hero-cover .eyebrow,
  .ani-hero .display-1,
  .course-hero-cover .display-2,
  .ani-hero .lead,
  .course-hero-cover .lead,
  .ani-hero .ani-hero-meta,
  .course-hero-cover .ani-hero-meta,
  .ani-hero .ani-hero-cta,
  .course-hero-cover .ani-hero-cta,
  .ani-hero-media,
  .course-hero-cover-bg {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ─── Mega menu Avada: forza sopra hero e contenuti ─────────── */
.fusion-tb-header,
.fusion-header-wrapper {
  position: relative;
  z-index: 999 !important;
}

.fusion-tb-header .fusion-menu .sub-menu,
.fusion-tb-header .fusion-menu-element-wrapper,
.fusion-megamenu-wrapper,
.fusion-megamenu,
.fusion-tb-header .menu-item .sub-menu {
  z-index: 9999 !important;
}

.course-hero-cover,
.ipa-fullwidth-page .course-hero-cover {
  position: relative;
  z-index: 1 !important;
}

.fusion-sticky-header,
.fusion-tb-header.fusion-sticky-header-wrapper {
  z-index: 1000 !important;
}



/* ─── Menu Avada Header: colore voce attiva ────────────────── */

/* Override variabili Avada Web Builder (AWB) Menu */
.awb-menu,
.awb-submenu {
  --awb-active-color: var(--pal-accent) !important;
  --awb-hover-color: var(--pal-accent) !important;
}

/* Fix Bordo Superiore Mega Menu (Container Avada)
   Assicura che il bordo definito via variabili AWB sia visibile e del colore corretto. */
.fusion-fullwidth[style*="--awb-border-sizes-top"] {
  border-top-style: solid !important;
  border-top-color: var(--pal-accent) !important;
}

/* Voce corrente (active) — quella della pagina su cui sei */
.fusion-tb-header .fusion-menu .current-menu-item>a,
.fusion-tb-header .fusion-menu .current-menu-item>a .menu-text,
.fusion-tb-header .fusion-menu .current-menu-parent>a,
.fusion-tb-header .fusion-menu .current_page_item>a,
.fusion-tb-header .fusion-menu .current_page_ancestor>a {
  color: var(--pal-accent) !important;
}

/* Hover su tutte le voci del menu */
.fusion-tb-header .fusion-menu li>a:hover,
.fusion-tb-header .fusion-menu li>a:focus {
  color: var(--pal-accent) !important;
}

/* Sottolineatura sotto la voce attiva (richiama il mockup) */
.fusion-tb-header .fusion-menu .current-menu-item>a {
  position: relative;
}

.fusion-tb-header .fusion-menu .current-menu-item>a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--pal-accent);
  border-radius: 2px;
}



/* ─── Footer AN Italia (V2 - colori corretti) ──────────────── */

/* Override del background del container Avada per il footer */
.fusion-footer .fusion-builder-container[admin_label*="Footer"],
.fusion-tb-footer .fusion-builder-container,
footer.fusion-builder-container {
  background-color: #2E3A32 !important;
}

/* Logo footer */
.ipa-footer-logo {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 16px;
}

.ipa-footer-logo span {
  color: var(--pal-accent);
}

/* Tagline (più visibile) */
.ipa-footer-tagline {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 24px;
}

/* Social icons */
.ipa-footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ipa-footer-social a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 0.2s;
}

.ipa-footer-social a:hover {
  background: var(--pal-accent);
  color: var(--pal-offblack-700) !important;
  transform: translateY(-2px);
}

/* Heading colonne (ambra brillante) */
.ipa-footer-heading {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pal-accent);
  margin-bottom: 20px;
}

/* Liste link colonne */
.ipa-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ipa-footer-links li {
  list-style: none;
}

.ipa-footer-links li a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s, padding-left 0.2s;
  display: inline-block;
}

.ipa-footer-links li a:hover {
  color: var(--pal-accent) !important;
  padding-left: 4px;
}

/* Dati aziendali (un po' più tenui per gerarchia visiva) */
.ipa-footer-company {
  margin-top: 24px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Bottom bar */
.ipa-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6) !important;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ipa-footer-bottom a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none;
}

.ipa-footer-bottom a:hover {
  color: var(--pal-accent) !important;
}

/* Mobile: stack verticale, spacing migliorato */
@media (max-width: 767px) {
  .ipa-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}
/*
 * Admin lista istruttori: foto quadrata con
 * border-radius invece che circolare
 */
#the-list .column-foto img,
.post-type-istruttore #the-list td.column-foto img {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover;
  border-radius: 6px !important;
  display: block;
}