/* ============================================================
   ES — Program Card · regole CSS complementari
   Incolla questo snippet in WP Codebox:
   Tipo: CSS · Scope: site-wide · Posizione: footer
   ----------
   Servono a gestire quello che GB Global Styles non compila
   nativamente: selettori combinati (hover parent → child),
   pseudo-element ::after, ::-webkit-line-clamp, :first-child.
============================================================ */

/* ------------------------------------------------------------
   1. Media: img fullbleed + zoom al hover della card
------------------------------------------------------------ */
.dm-program-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s cubic-bezier(.2,.7,.2,1);
  filter:saturate(.92);
}
.dm-program-card:is(:hover,:focus-within) .dm-program-card__media img{
  transform:scale(1.05);
  filter:saturate(1);
}

/* Overlay caldo in basso — armonizza qualunque foto con la palette */
.dm-program-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(12,59,92,0) 40%,
    rgba(12,59,92,.22) 100%
  );
  pointer-events:none;
}

/* ------------------------------------------------------------
   2. Excerpt: clamp a 2 righe
   (GB non espone le proprietà -webkit-* nel pannello UI)
------------------------------------------------------------ */
.dm-program-card__excerpt{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ------------------------------------------------------------
   3. Countries count: il numero in grassetto dentro "N paesi"
------------------------------------------------------------ */
.dm-program-card__countries-count strong{
  color:var(--accent-2);
  font-weight:700;
}

/* ------------------------------------------------------------
   4. Flags: prima bandierina senza overlap
------------------------------------------------------------ */
.dm-program-card__flag:first-child{
  margin-left:0;
}

/* Bandierine SVG/immagine interne */
.dm-program-card__flag img,
.dm-program-card__flag svg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ------------------------------------------------------------
   5. Icone meta (età / durata)
   Stilizza lo SVG del GB Icon block dentro .dm-program-card__meta
------------------------------------------------------------ */
.dm-program-card__meta .gb-shape svg{
  width:15px;
  height:15px;
  color:var(--accent-6);
}

/* ------------------------------------------------------------
   6. CTA "Scopri →": freccia che scorre a destra al hover
   Funziona sia se la freccia è un'icona GB sia se è un carattere
------------------------------------------------------------ */
.dm-button--amber .gb-shape,
.dm-button--amber svg{
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.dm-button--amber:is(:hover,:focus) .gb-shape,
.dm-button--amber:is(:hover,:focus) svg{
  transform:translateX(3px);
}

/* ------------------------------------------------------------
   7. Staggered entrance (opzionale, ignora prefers-reduced-motion)
   Dà la sensazione editoriale dell'apertura dell'archivio.
   Commenta questo blocco se non vuoi animazioni in pagina.
------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .wpgb-grid .dm-program-card,
  .grid-3 > .dm-program-card{
    opacity:0;
    transform:translateY(14px);
    animation:dm-program-card-rise .7s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .wpgb-grid .dm-program-card:nth-child(1),
  .grid-3 > .dm-program-card:nth-child(1){animation-delay:.05s}
  .wpgb-grid .dm-program-card:nth-child(2),
  .grid-3 > .dm-program-card:nth-child(2){animation-delay:.15s}
  .wpgb-grid .dm-program-card:nth-child(3),
  .grid-3 > .dm-program-card:nth-child(3){animation-delay:.25s}
  .wpgb-grid .dm-program-card:nth-child(4),
  .grid-3 > .dm-program-card:nth-child(4){animation-delay:.3s}
  .wpgb-grid .dm-program-card:nth-child(5),
  .grid-3 > .dm-program-card:nth-child(5){animation-delay:.35s}
  .wpgb-grid .dm-program-card:nth-child(6),
  .grid-3 > .dm-program-card:nth-child(6){animation-delay:.4s}

  @keyframes dm-program-card-rise{
    to{ opacity:1; transform:translateY(0); }
  }
}

/* ------------------------------------------------------------
   8. Responsive — mobile: leggero aggiustamento del padding interno
------------------------------------------------------------ */
@media (max-width:767px){
  .dm-program-card__title{ font-size:1.2rem; }
  .dm-program-card__price-amount{ font-size:1.4rem; }
}