/* UniD course card (UP) v1.1.0 — card categoria da consegna 2026-10-19 (prefisso .spc) + badge servizi [unid_servizi] (.unid-service*) */

/* ---------- [unid_servizi] ---------- */
.unid-services {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.unid-service {
    /* Badge widths vary per icon (78-139px). The row must never wrap, so
       instead of a fixed/uniform width, each badge keeps its natural size
       (flex-basis: auto) when there's room and shrinks proportionally
       (flex-shrink) when the row doesn't fit — never grows past its design
       size. */
    flex: 0 1 auto;
    min-width: 0;
}

.unid-service__desktop {
    display: block;
    width: 100%;
    height: auto;
}

.unid-service__mobile {
    display: none;
}

@media (max-width: 767px) {
    .unid-services {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
        gap: 8px;
        width: 100%;
        overflow: visible;
    }

    .unid-service {
        position: relative;
        min-width: 0;
    }

    .unid-service__desktop {
        display: none;
    }

    .unid-service__mobile {
        position: relative;
        display: inline-flex;
        width: 100%;
        min-width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .unid-service__mobile img {
        width: 42px;
        height: 42px;
        display: block;
    }

    .unid-service__tooltip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        z-index: 30;
        width: max-content;
        max-width: 145px;
        padding: 7px 9px;
        border: 1px solid var(--unid-border);
        border-radius: 7px;
        background: #1F2937;
        color: #FFFFFF;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 5px);
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
        pointer-events: none;
    }

    .unid-service__tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        border: 5px solid transparent;
        border-top-color: #1F2937;
        transform: translateX(-50%);
    }

    .unid-service__mobile.is-open .unid-service__tooltip,
    .unid-service__mobile:focus-visible .unid-service__tooltip {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .unid-service:first-child .unid-service__tooltip {
        left: 0;
        transform: translate(0, 5px);
    }

    .unid-service:first-child .unid-service__tooltip::after {
        left: 21px;
        transform: none;
    }

    .unid-service:last-child .unid-service__tooltip {
        right: 0;
        left: auto;
        transform: translate(0, 5px);
    }

    .unid-service:last-child .unid-service__tooltip::after {
        right: 16px;
        left: auto;
        transform: none;
    }

    .unid-service:first-child .unid-service__mobile.is-open .unid-service__tooltip,
    .unid-service:first-child .unid-service__mobile:focus-visible .unid-service__tooltip,
    .unid-service:last-child .unid-service__mobile.is-open .unid-service__tooltip,
    .unid-service:last-child .unid-service__mobile:focus-visible .unid-service__tooltip {
        transform: translate(0, 0);
    }
}

/* ==========================================================================
   Card corso – Pagina categoria  (v7 · approvata)
   --------------------------------------------------------------------------
   Colori comuni ai due siti (prezzo, bollino, offerta: come la scheda prodotto).
   Cambiano solo i pulsanti, con data-sito sul <body> (o su un contenitore):
   - data-sito="up"  unidprofessional.com → pulsanti blu        [default]
   - data-sito="uf"  unidformazione.com   → pulsanti arancio

   Layout:
   - Desktop (viewport >= 748px): immagine | titolo, sottotitolo, riga prezzo
     (prezzo | listino-sconto-risparmio | tag offerta), pulsanti affiancati
   - Mobile (viewport < 748px): niente immagine; testi, offerta, prezzo, pulsanti
   Prezzi senza decimali, € dopo l'importo (es. 1.980 €).

   Pulsanti (2 stati: normale · mouse sopra / click):
   - Iscriviti ora: pieno → più intenso, riquadro freccia bianco, freccia +2px
   - Dettagli: bianco con bordo colore sito → pieno colore sito, testo bianco
   ========================================================================== */

/* ---------- Colori -------------------------------------------------------- */
.spc-list {
  /* Comuni */
  --c-deal: #D9430C;            /* prezzo (come scheda prodotto) */
  --c-pill: #B23506;            /* bollino −46% */
  --c-offer: #B23506;           /* tag offerta: icona e data */
  --c-offer-text: #8A2A05;
  --c-offer-tint: #FFF4EE;
  --c-offer-border: #F3CDB9;
  --c-ok: #17663A;              /* "Risparmi" */
  --c-ink: #0F1A3A;
  --c-muted: #4B5672;
  --c-subtle: #6B7591;
  --c-surface: #FFFFFF;
  --c-card-border: #E3E9F2;
  --c-rule: #EDF1F6;
  --c-font: 'Figtree', 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Pulsanti – UP (unidprofessional.com, blu) */
  --c-action: #2E6BD2;
  --c-action-hover: #2357B0;
  --c-action-text: #2E6BD2;
  --c-action-shadow: rgba(46, 107, 210, .28);
  --c-focus: #8DB0FF;
}
[data-sito="uf"] .spc-list,
.spc-list[data-sito="uf"] {
  /* Pulsanti – UF (unidformazione.com, arancio) */
  --c-action: #C8501C;          /* 4,6:1 col bianco */
  --c-action-hover: #AE4416;
  --c-action-text: #B5461A;
  --c-action-shadow: rgba(200, 80, 28, .28);
  --c-focus: #F5B08F;
}

/* ---------- Lista --------------------------------------------------------- */
.spc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--c-font);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}
.spc-list *, .spc-list *::before, .spc-list *::after { box-sizing: border-box; }
:where(.spc-list) p, :where(.spc-list) h2 { margin: 0; padding: 0; }
.spc-list svg { display: block; flex: none; }
.sp-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Card ---------------------------------------------------------- */
.spc {
  container: spc / inline-size;
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15, 26, 58, .05), 0 10px 28px rgba(15, 26, 58, .06);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

/* Desktop, card < 640px: immagine + testi, pulsanti sotto */
.spc__inner {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-areas: "media body" "actions actions";
  gap: 18px 20px;
  padding: 18px;
}

/* ---------- Immagine ------------------------------------------------------ */
.spc__media {
  grid-area: media;
  align-self: start;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #E9EEF6;
}
.spc__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }

/* ---------- Testi --------------------------------------------------------- */
.spc__body { grid-area: body; display: flex; flex-direction: column; min-width: 0; }
.spc__title { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.spc__title a { color: var(--c-ink); text-decoration: none; transition: color .15s; }
.spc__title a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; z-index: 1; }
.spc__sub { margin-top: 6px !important; font-size: 18px; line-height: 1.4; color: var(--c-muted); }

/* ---------- Tag "Offerta valida fino al" (uguale su desktop e mobile) ---- */
.spc__offer {
  align-self: flex-start;
  display: inline-flex; align-items: stretch;
  margin-top: 14px !important;
  border: 1px solid var(--c-offer-border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--c-offer-tint);
  box-shadow: 0 2px 6px rgba(178, 53, 6, .08);
}
.spc__offer-ico {
  display: flex; align-items: center; justify-content: center;
  width: 30px; flex: none;
  background: var(--c-offer); color: #fff;
}
.spc__offer-ico svg { width: 15px; height: 15px; }
.spc__offer-txt {
  padding: 5px 11px 5px 10px;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--c-offer-text);
  white-space: nowrap;
}
.spc__offer-txt strong { font-weight: 800; color: var(--c-offer); letter-spacing: .01em; }

/* ---------- Prezzo -------------------------------------------------------- */
.spc__prices {
  display: flex; align-items: center; gap: 18px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--c-rule);
}
.spc__price {
  display: flex; align-items: baseline; gap: .04em;
  color: var(--c-deal);
  font-size: 38px; font-weight: 900; letter-spacing: -.04em; line-height: 1; white-space: nowrap;
}
.spc__cur { margin-left: .06em; font-size: .45em; font-weight: 800; letter-spacing: 0; }   /* € dopo il prezzo */
/* Listino + bollino sopra, risparmio sotto: allineati a sinistra, separati dal prezzo */
.spc__meta {
  display: flex; flex-direction: column; gap: 5px;
  padding-left: 18px;
  border-left: 1px solid var(--c-card-border);
}
.spc__was { display: flex; align-items: center; gap: 10px; }
.spc__old { font-size: 15px; color: var(--c-subtle); white-space: nowrap; }
.spc__pill {
  padding: 3px 8px; border-radius: 6px;
  background: var(--c-pill); color: #fff;
  font-size: 12.5px; font-weight: 800; line-height: 1.25;
}
.spc__save { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--c-ok); white-space: nowrap; }
.spc__save strong { font-weight: 800; }

/* ---------- Pulsanti ------------------------------------------------------ */
.spc__actions {
  grid-area: actions;
  position: relative; z-index: 2;              /* sopra il link che copre la card */
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px;
}
.spc-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 16px;
  border-radius: 12px;
  font-family: var(--c-font); font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.spc-btn--primary {
  background: var(--c-action); color: #fff; font-size: 17px; font-weight: 800;
  box-shadow: 0 8px 20px var(--c-action-shadow);
}
/* I pulsanti sono link <a>: blocca i colori dei link del tema (a:hover, a:visited, a:focus)
   che altrimenti cambiano il colore del testo al passaggio del mouse */
.spc-list a.spc-btn, .spc-list a.spc-btn:hover, .spc-list a.spc-btn:focus, .spc-list a.spc-btn:active, .spc-list a.spc-btn:visited { text-decoration: none; }
.spc-list a.spc-btn--primary, .spc-list a.spc-btn--primary:hover, .spc-list a.spc-btn--primary:focus,
.spc-list a.spc-btn--primary:active, .spc-list a.spc-btn--primary:visited { color: #fff; }
.spc-list a.spc-btn--ghost:visited, .spc-list a.spc-btn--ghost:focus { color: var(--c-action-text); }
.spc-btn__arrow {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.spc-btn__arrow svg { width: 16px; height: 16px; transition: transform .2s ease; }

/* "Dettagli": bianco a riposo, bordo e testo nel colore del sito */
.spc-btn--ghost {
  border: 1px solid var(--c-action); background: var(--c-surface); color: var(--c-action-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Stati dei pulsanti: due soli stati, "normale" e "mouse sopra / click".
   Il click (:active) ha lo stesso aspetto del passaggio del mouse: anche al
   tocco su mobile il pulsante dà un riscontro. :hover solo su dispositivi con
   mouse, per evitare che resti "acceso" dopo il tocco.
   -------------------------------------------------------------------------- */

/* "Iscriviti ora": il pulsante diventa più intenso, il riquadro della freccia
   si accende in bianco e la freccia scorre di 2px */
.spc-btn--primary:active { background: var(--c-action-hover); }
.spc-btn--primary:active .spc-btn__arrow { background: #fff; color: var(--c-action-hover); }
.spc-btn--primary:active .spc-btn__arrow svg { transform: translateX(2px); }

/* "Dettagli": si riempie del colore del proprio bordo, testo bianco */
.spc-list a.spc-btn--ghost:active { background: var(--c-action); border-color: var(--c-action); color: #fff; }

@media (hover: hover) {
  .spc-btn--primary:hover { background: var(--c-action-hover); }
  .spc-btn--primary:hover .spc-btn__arrow { background: #fff; color: var(--c-action-hover); }
  .spc-btn--primary:hover .spc-btn__arrow svg { transform: translateX(2px); }
  .spc-list a.spc-btn--ghost:hover { background: var(--c-action); border-color: var(--c-action); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .spc-btn, .spc-btn__arrow, .spc-btn__arrow svg { transition: none; }
  .spc-btn--primary:hover .spc-btn__arrow svg, .spc-btn--primary:active .spc-btn__arrow svg { transform: none; }
}
.spc .spc-btn:focus-visible,
.spc .spc__title a:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ==========================================================================
   DESKTOP (viewport >= 748px): immagine | colonna unica
   titolo, sottotitolo / prezzo, listino-sconto-risparmio | tag offerta / pulsanti affiancati
   ========================================================================== */
@container spc (min-width: 640px) {
  .spc__inner { padding: 20px; }
  .spc__price { font-size: clamp(36px, 5cqi, 42px); }
  .spc-btn--primary { min-height: 52px; }
  .spc-btn--ghost { min-height: 48px; }   /* Google/Lighthouse: target >= 48 x 48 px */
}
@media (min-width: 748px) {
  .spc-list .spc__inner {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "media body" "media actions";
    gap: 18px 20px;
  }
  @container spc (min-width: 640px) {
    .spc-list .spc__inner { grid-template-columns: clamp(148px, 21cqi, 176px) minmax(0, 1fr); gap: 18px 24px; }
  }

  /* Riga prezzo: prezzo | listino, sconto, risparmio | tag offerta.
     Stessa suddivisione tra i tre blocchi: 18px + linea verticale + 18px.
     Card stretta (< 720px, desktop fino a circa 1050px di schermo): il tag va sotto il prezzo. */
  .spc-list .spc__body { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 18px; }
  .spc-list .spc__title { order: 1; flex: 0 0 100%; }
  .spc-list .spc__sub { order: 2; flex: 0 0 100%; }
  .spc-list .spc__body::after {            /* linea orizzontale sopra prezzo e tag */
    content: ""; order: 3; flex: 0 0 100%;
    height: 1px; margin: 16px 0 2px; background: var(--c-rule);
  }
  .spc-list .spc__prices { order: 4; flex: 0 0 100%; margin-top: 12px; padding-top: 0; border-top: 0; }
  .spc-list .spc__offer { order: 5; align-self: center; margin-top: 12px !important; }
  @container spc (min-width: 720px) {
    .spc-list .spc__body {
      display: grid; grid-template-columns: max-content minmax(0, 1fr);
      column-gap: 18px; align-items: center;
    }
    .spc-list .spc__title, .spc-list .spc__sub, .spc-list .spc__body::after { grid-column: 1 / -1; }
    .spc-list .spc__prices { grid-column: 1; padding-right: 18px; border-right: 1px solid var(--c-card-border); }
    .spc-list .spc__offer { grid-column: 2; justify-self: start; }
    .spc-list .spc__offer-txt { white-space: normal; }   /* prezzi molto lunghi: il testo del tag va su 2 righe, mai fuori dalla card */
  }

  .spc-list .spc__actions {
    align-self: end;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px;
    width: 100%; max-width: 440px;
  }
}

/* ==========================================================================
   MOBILE (viewport < 748px): niente immagine. In fondo al file: vince sulle regole desktop.
   ========================================================================== */
@media (max-width: 747px) {
  .spc-list .spc { border-radius: 20px; }
  .spc-list .spc__media { display: none; }
  .spc-list .spc__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body" "actions";
    gap: 16px;
    padding: 16px;
  }
  .spc-list .spc__title a::after { border-radius: 20px; }
  .spc-list .spc__actions { grid-template-columns: 1.4fr 1fr; align-self: auto; gap: 10px; }
  .spc-list .spc-btn--primary, .spc-list .spc-btn--ghost { min-height: 50px; }
  .spc-list .spc__price { font-size: 36px; }
  .spc-list .spc__prices { gap: 16px; }
  .spc-list .spc__meta { padding-left: 16px; }
}
/* Schermi molto stretti: listino e risparmio sotto il prezzo */
@media (max-width: 359px) {
  .spc-list .spc__prices { flex-direction: column; align-items: flex-start; gap: 8px; }
  .spc-list .spc__meta { padding-left: 0; border-left: 0; }
  .spc-list .spc__offer { max-width: 100%; }
  .spc-list .spc__offer-txt { white-space: normal; }
}


/* ==========================================================================
   Adattamenti al sito (non nella consegna)
   - Il tema Astra imposta p{font-weight:400!important}: ripristino i pesi.
   - Riga "ultimi posti" (campo ultimi_posti), assente dalla consegna.
   ========================================================================== */
.spc-list .spc__price { font-weight: 900 !important; }
.spc-list .spc__save { font-weight: 600 !important; }
.spc-list .spc__save strong { font-weight: 800 !important; }
.spc-list .spc__sub { font-weight: 400 !important; }
.spc-list .spc__title { font-family: var(--c-font); margin: 0; }
/* "Ultimi posti disponibili" (consegna 2026-10-19): ultimo elemento della card, a tutta larghezza.
   Il link ::after della card lo copre: cliccandolo si apre la scheda prodotto. */
.spc-hot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 9px 16px;
  border-top: 1px solid #F6CBC8; border-radius: 0 0 21px 21px;
  background: #FFF0EF; color: #B4232A;
  font-size: 13.5px; line-height: 1.3; text-align: center;
}
.spc-list .spc-hot { font-weight: 800 !important; }
.spc-hot svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 747px) { .spc-hot { border-radius: 0 0 19px 19px; } }

/* Il tema/Elementor centrano e ingrandiscono h2 e testi: forzo i valori della consegna. */
.spc-list .spc__body, .spc-list .spc__title, .spc-list .spc__title a, .spc-list .spc__sub { text-align: left !important; }
.spc-list h2.spc__title { --spc-title-fs: 21px; margin: 0 !important; font-size: var(--spc-title-fs) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.01em; }
.spc-list h2.spc__title a { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.spc-list .spc__sub { font-size: 18px !important; line-height: 1.4 !important; }

/* 2026-10-27 typography: title 22/21px, subtitle 17/18px (desktop >=748px / mobile) */
@media (min-width: 748px) {
  .spc__title { font-size: 22px; }
  .spc__sub { font-size: 17px; }
  .spc-list h2.spc__title { --spc-title-fs: 22px; }
  .spc-list .spc__sub { font-size: 17px !important; }
}