/**
Theme Name: parola mia
Author: Paolo Messina
Template: astra
*/


/* ============================================================
   0) VARIABILI GLOBALI (UNICA SORGENTE)
   ============================================================ */
:root{
  /* Layout */
  --pm-content-width: 940px;  /* larghezza contenuto target */
  --pm-gutter: 20px;          /* padding laterale */

  /* Brand */
  --pm-blue: #162f65;
  --pm-yellow: #f9b233;
  --pm-pink: #e11d48;

  --pm-border: #edf0f5;
  --pm-shadow: 0 14px 38px rgba(15, 23, 42, 0.14);
  --pm-radius: 22px;
}

/* Prevenzione micro-scroll orizzontale (rounding, 100vw, ecc.) */
html, body { overflow-x: clip; }


/* ============================================================
   1) HEADER (ALLINEATO AL CONTENUTO SENZA ROMPERE ASTRA)
   Nota: Astra usa container diversi a seconda del builder.
   Qui imponiamo max-width e padding coerenti.
   ============================================================ */

/* Container header (in generale) */
.site-header .ast-container{
  max-width: var(--pm-content-width);
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
  margin-left: auto;
  margin-right: auto;
}

/* Sticky: Astra cambia classi/struttura → copriamo anche lo sticky */
.ast-sticky-active .site-header .ast-container{
  max-width: var(--pm-content-width);
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
  margin-left: auto;
  margin-right: auto;
}

/* (Optional) Se usi anche container in site-content e vuoi coerenza globale,
   qui NON lo forzo: lo controlliamo in un blocco separato se necessario. */

/* ============================================================
   1B) CONTENUTO PRINCIPALE — ALLINEAMENTO GLOBALE A 940
   (Astra + Gutenberg, senza combattere il tema)
   ============================================================ */

.ast-container,
.ast-container-fluid{
  max-width: var(--pm-content-width);
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   2) SEZIONI FULL WIDTH CON SFONDO + CONTENUTO STRETTO
   Uso: assegna la classe "pm-fullbg" al gruppo esterno (alignfull).
   ============================================================ */

/* Wrapper con sfondo che esce dal container del tema */
.entry-content .pm-fullbg{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Contenuto interno riportato alla larghezza desiderata */
.entry-content .pm-fullbg > .wp-block-group__inner-container{
  max-width: var(--pm-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

/* Fallback se manca inner-container */
.entry-content .pm-fullbg > *:not(.wp-block-group__inner-container){
  max-width: var(--pm-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}


/* ============================================================
   3) BOTTONI “PM”
   ============================================================ */

.pm-btn-primary .wp-block-button__link,
.pm-tariffe-card .pm-card-cta .wp-block-button__link{
  padding: 0.85em 1.8em;
  border-radius: 999px;
  font-weight: 600;
  background: var(--pm-blue);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pm-btn-primary .wp-block-button__link:hover,
.pm-tariffe-card .pm-card-cta .wp-block-button__link:hover{
  opacity: 0.95;
  transform: translateY(-1px);
}

.pm-btn-link{
  font-weight: 600;
  color: var(--pm-blue);
  font-size: 0.9rem;
}

.pm-btn-primary .wp-block-button__link,
.pm-btn-primary .wp-block-button__link:hover,
.pm-btn-primary .wp-block-button__link:focus {
  color: #ffffff;
}
/* ============================================================
   SCROLL MORBIDO + OFFSET (header fisso)
   ============================================================ */
html{ scroll-behavior: smooth; }
#inquadramento, #video, #materiali { scroll-margin-top: 90px; }

/* ============================================================
   HERO 100vh (con fix mobile)
   ============================================================ */
.pm-hero-100vh{ min-height: 100vh; }
@supports (height: 100svh){
  .pm-hero-100vh{ min-height: 100svh; } /* viewport “small” su mobile */
}

/* Overlay a gradiente per leggibilità */
.pm-hero-cover{ position: relative; overflow: hidden; border-radius: 22px; }
.pm-hero-cover::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background: linear-gradient(90deg,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.58) 42%,
    rgba(0,0,0,.20) 78%,
    rgba(0,0,0,.08) 100%);
  pointer-events:none;
}
.pm-hero-cover .wp-block-cover__inner-container{ position: relative; z-index:2; padding: 44px 18px; }

/* Testi sempre bianchi nel hero */
.pm-hero-cover, .pm-hero-cover .wp-block-heading, .pm-hero-cover p, .pm-hero-cover li{ color:#fff !important; }

.pm-hero-title{ line-height:1.06; letter-spacing:-0.02em; margin:0 0 14px 0; text-shadow: 0 10px 30px rgba(0,0,0,.35); }
.pm-hero-lead{ max-width: 60ch; opacity:.92; margin:0 0 18px 0; font-size:1.05rem; }

/* Pill */
.pm-hero-meta{ gap:10px; margin:0 0 18px 0; }
.pm-pill{
  margin:0;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(8px);
  font-size:.95rem;
}

/* Bottoni: fix hover (Astra) */
.pm-btn-primary .wp-block-button__link,
.pm-btn-primary .wp-block-button__link:hover,
.pm-btn-primary .wp-block-button__link:focus{ color:#fff !important; }

.pm-btn.pm-btn-primary .wp-block-button__link{
  background: var(--pm-blue, #162f65);
  border-radius: 999px;
  padding: 12px 18px;
}
.pm-btn.pm-btn-secondary .wp-block-button__link{
  background: var(--pm-yellow, #f9b233);
  color:#0a224a !important;
  border-radius: 999px;
  padding: 12px 18px;
}
.pm-btn.pm-btn-ghost .wp-block-button__link{
  border-color: rgba(255,255,255,.28);
  color:#fff !important;
  border-radius: 999px;
  padding: 10px 16px;
  background: transparent;
}

/* Card destra */
.pm-hero-card{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.24);
  padding: 18px 18px 14px;
}
.pm-hero-card-title{ margin:0 0 10px 0; font-size:1.15rem; }
.pm-hero-list{ margin:0; padding-left:18px; opacity:.95; }

/* Cue “Scorri” */
.pm-scroll-cue{ margin-top: 18px; }
.pm-scroll-link{
  display:inline-block;
  color:#fff;
  opacity:.85;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
}
.pm-scroll-link:hover{ opacity:1; }

/* ============================================================
   INQUADRAMENTO dentro viewport
   ============================================================ */
.pm-histo-viewport{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 28px 0;
}
@supports (height: 100svh){
  .pm-histo-viewport{ min-height: 100svh; }
}

.pm-histo-card{
  border-radius: var(--pm-radius, 22px);
  border: 1px solid rgba(10,34,74,.10);
  background: #fff;
  box-shadow: var(--pm-shadow, 0 14px 38px rgba(15, 23, 42, 0.14));
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.pm-histo-card::before{
  content:"";
  position:absolute;
  left:-40px; top:-60px;
  width: 520px; height: 220px;
  background: radial-gradient(circle at 30% 40%,
    rgba(249,178,51,.22) 0%,
    rgba(22,47,101,.12) 40%,
    rgba(255,255,255,0) 70%);
  transform: rotate(-6deg);
  pointer-events:none;
}

.pm-kicker{
  margin:0 0 8px 0;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(10,34,74,.65);
}
.pm-histo-title{ margin:0 0 10px 0; color: var(--pm-blue, #162f65); line-height:1.15; }
.pm-histo-text{ margin:0; color: rgba(15,23,42,.92); font-size:1.02rem; line-height:1.65; max-width: 78ch; }

/* CTA in card */
.pm-histo-cta{ gap: 12px; margin-top: 14px; }

/* Mobile: overlay verticale nel hero + spazi */
@media (max-width: 781px){
  .pm-hero-cover{ border-radius: 16px; }
  .pm-hero-cover::before{
    background: linear-gradient(180deg,
      rgba(0,0,0,.80) 0%,
      rgba(0,0,0,.58) 60%,
      rgba(0,0,0,.25) 100%);
  }
  .pm-hero-cover .wp-block-cover__inner-container{ padding: 34px 16px; }
  .pm-histo-card{ padding: 18px; }
  .pm-histo-text{ font-size: 1rem; }
}

/* ============================================================
   PAROLA MIA TALK — articolo: togli titolo+meta in alto
   (lasciamo che l’hero faccia da testata)
   ============================================================ */

/* Astra: titolo e meta sopra il contenuto */
.category-parola-mia-talk .entry-header{
  display: none !important;
}
/* inquadramento storico */
.pm-histo-viewport{
  min-height: 100vh;
  display:flex;
  align-items:center;
  padding: 28px 0;
}
@supports (height: 100svh){
  .pm-histo-viewport{ min-height: 100svh; }
}


/* ============================================================
   4) CARD “PM” (componenti)
   ============================================================ */

.pm-card,
.pm-tariffe-card,
.pm-pricing-card,
.pm-info-card,
.pm-value-card,
.pm-tariffe-step{
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
  padding: 2.2rem 1.8rem 2.0rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Tipografia interna card */
.pm-card .wp-block-heading,
.pm-tariffe-card .wp-block-heading,
.pm-pricing-card .wp-block-heading,
.pm-info-card .wp-block-heading,
.pm-value-card .wp-block-heading,
.pm-tariffe-step .wp-block-heading{
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1.2;
}

.pm-card p,
.pm-tariffe-card p,
.pm-pricing-card p,
.pm-info-card p,
.pm-value-card p,
.pm-tariffe-step p{
  margin-top: 0;
  line-height: 1.6;
}

/* Desktop: altezza uniforme (se la vuoi davvero) */
@media (min-width: 992px){
  .pm-card,
  .pm-pricing-card,
  .pm-info-card,
  .pm-value-card,
  .pm-tariffe-step{
    min-height: clamp(14rem, 30vh, 20rem);
    height: 100%;
  }
  .pm-tariffe-card{
    height: 100%;
    min-height: 0;
  }
}

h3.pm-tariffe-set-title.wp-block-heading
 {
    margin-bottom: 50px;
}

/* Mobile: padding più compatto */
@media (max-width: 600px){
  .pm-card,
  .pm-tariffe-card,
  .pm-pricing-card,
  .pm-info-card,
  .pm-value-card,
  .pm-tariffe-step{
    padding: 1.7rem 1.25rem 1.6rem;
    min-height: 0;
  }
}

/* Badge step */
.pm-step-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 0 1.2rem 0;
  border-radius: 999px;
  background: rgba(15, 35, 75, 0.06);
  border: 1px solid rgba(15, 35, 75, 0.12);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(15, 35, 75, 0.85);
}


/* ============================================================
   4B) 3 CARD SOTTO HERO (stile dedicato)
   Richiede: 
   - Columns con classe "pm-hero-info-cards"
   - Ogni colonna contiene un gruppo con classe "pm-feature-card"
   ============================================================ */

.pm-hero-info-cards .wp-block-column > .pm-feature-card{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
  padding: 26px 26px 24px;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pm-hero-info-cards .wp-block-column > .pm-feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  border-color: rgba(15, 23, 42, 0.14);
}

/* Eyebrow (primo elemento) */
.pm-hero-info-cards .pm-feature-card > :first-child{
  margin-top: 0;
  margin-bottom: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .82rem;
  color: rgba(15, 23, 42, 0.55);
}

/* Corpo testo */
.pm-hero-info-cards .pm-feature-card p{
  margin: 0;
  line-height: 1.55;
  font-size: 1.02rem;
  color: rgba(15, 23, 42, 0.78);
}

@media (max-width: 600px){
  .pm-hero-info-cards .wp-block-column > .pm-feature-card{
    padding: 20px;
  }
}


/* ============================================================
   5) HERO (solo dettagli brand riusabili)
   ============================================================ */

.pm-highlight{ color: var(--pm-yellow); }

.pm-eyebrow,
.pm-info-label{
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.pm-hero .wp-block-columns,
.pm-block-hero .wp-block-columns{
  gap: 3rem;
  align-items: center;
}


/* ============================================================
   6) TARIFFE (componenti)
   ============================================================ */

.pm-tariffe-block .pm-tariffe-card-desc{
  margin: 0 auto 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  background: rgba(186, 117, 23, 0.13);
  border: 1px solid rgba(186, 117, 23, 0.25);
  font-size: 0.82rem;
  font-weight: 700;
  color: #854f0b;
  white-space: nowrap;   /* ← aggiunta questa riga */
}

.pm-tariffe-block .pm-tariffe-card{
  text-align: center;
  padding: clamp(1.9rem, 2.4vw, 2.2rem) clamp(1.4rem, 2vw, 1.8rem);
  border: 1px solid rgba(15, 35, 75, 0.10);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
}

.pm-tariffe-block .pm-tariffe-card .wp-block-heading{
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.pm-tariffe-block .pm-tariffe-card h4.wp-block-heading{
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--pm-blue);
}

.pm-tariffe-block .pm-tariffe-card-price{
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 2.6vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: rgba(15, 35, 75, 0.90);
}

.pm-tariffe-block .pm-tariffe-card-price span{
  font-size: 1rem;
  font-weight: 800;
  margin-left: 0.25rem;
  color: rgba(15, 35, 75, 0.55);
}

/* Badge sconto: arancione caldo, più visibile */
.pm-tariffe-block .pm-tariffe-card-desc{
  margin: 0 auto 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(186, 117, 23, 0.13);
  border: 1px solid rgba(186, 117, 23, 0.25);
  font-size: 0.85rem;
  font-weight: 700;
  color: #854f0b;
  line-height: 1.4;
}

.pm-tariffe-block .pm-tariffe-card-desc:empty{
  display: none;
}

/* Highlight: bordo blu marcato + label "Più scelto" */
.pm-tariffe-card--highlight,
.pm-pricing-card--highlight{
  position: relative;
  transform: translateY(-14px);
  border: 2px solid var(--pm-blue) !important;
  box-shadow:
    0 32px 80px rgba(15, 23, 42, 0.22),
    0 6px 18px rgba(15, 23, 42, 0.08);
  z-index: 2;
}

.pm-tariffe-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pm-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 768px){
  .pm-tariffe-card--highlight,
  .pm-pricing-card--highlight{
    transform: none;
    margin-top: 1rem;
  }
  .pm-tariffe-card--highlight::before{
    top: -12px;
  }
}

/* ============================================================
   7) PAGINA 3254 (RICHIESTA SERVIZIO) — SOLO FUNZIONALE
   Pulita, NON duplicata, SOLO scoped
   ============================================================ */

/* Backlink: nascosto ovunque, visibile su 3254 */
a.pm-header-backlink{ display: none; }

/* 3254: header minimale + backlink */
.pm-page-request a.pm-header-backlink{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--pm-blue);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}

.pm-page-request a.pm-header-backlink::before{
  content: "←";
  opacity: .75;
  transform: translateX(0);
  transition: transform .2s ease, opacity .2s ease;
}

.pm-page-request a.pm-header-backlink:hover{
  border-bottom-color: currentColor;
}

.pm-page-request a.pm-header-backlink:hover::before{
  transform: translateX(-2px);
  opacity: 1;
}

/* Riduce spazio tra menu e backlink (Above Header) */
.pm-page-request .site-header-above-section-right .ast-builder-menu-1{
  margin-right: 16px;
}

/* Nasconde menu principale + toggle (solo su 3254) */
.pm-page-request .wp-block-navigation,
.pm-page-request .main-navigation,
.pm-page-request nav[aria-label="Menu principale"],
.pm-page-request .menu-toggle,
.pm-page-request .off-canvas-toggle{
  display: none !important;
}

/* Compatta header (solo su 3254) */
.pm-page-request #masthead,
.pm-page-request .ast-primary-header-bar,
.pm-page-request .main-header-bar{
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.pm-page-request .ast-above-header{
  padding-top: 6px;
  padding-bottom: 6px;
}

.pm-page-request .ast-header-html p{
  margin: 0;
}

/* Spazi testo (solo 3254) */
.pm-page-request .entry-content > .wp-block-columns:first-child{
  margin-top: 22px !important;
}

.pm-page-request .entry-content p{
  margin-bottom: 0.75em;
}

/* Fluent Forms: compattazione SOLO su 3254 */
.pm-page-request .fluentform .ff-el-group{
  margin-bottom: 14px !important;
}

.pm-page-request .fluentform .ff-el-group > label{
  margin-bottom: 6px !important;
  line-height: 1.2;
}

.pm-page-request .fluentform .ff-el-form-control{
  box-sizing: border-box !important;
  font-size: 16px !important;
}

.pm-page-request .fluentform input.ff-el-form-control,
.pm-page-request .fluentform select.ff-el-form-control{
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 14px !important;
}

.pm-page-request .fluentform select.ff-el-form-control{
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.pm-page-request .fluentform textarea.ff-el-form-control{
  min-height: 70px !important;
  padding: 10px 14px !important;
  line-height: 1.4 !important;
  resize: vertical;
}

/* Errori a capo SOLO su 3254 */
.pm-page-request .fluentform .ff-el-input--content{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 0 !important;
}

.pm-page-request .fluentform .ff-el-input--content > .ff-el-form-control{
  flex: 0 0 100%;
}

.pm-page-request .fluentform .ff-el-input--content > .error.text-danger{
  flex: 0 0 100%;
  display: block;
  margin-top: 6px;
  white-space: normal;
  font-size: 0.85rem;
  line-height: 1.2;
  color: #c93535;
}

.pm-page-request .fluentform .ff-el-group.ff-el-form-check{
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

.pm-page-request .fluentform .ff-el-group.ff-el-form-check label{
  margin-bottom: 0 !important;
  line-height: 1.35;
}

.pm-page-request .fluentform .ff-btn-submit,
.pm-page-request .fluentform button[type="submit"]{
  margin-top: 6px !important;
}

.pm-page-request .pm-form-card{
  padding: 1.8rem 1.8rem 1.5rem !important;
}

/* Grid Fluent Forms (desktop) */
@media (min-width: 768px){
  .pm-page-request .fluentform .ff-el-form-row{
    margin-left: -8px;
    margin-right: -8px;
  }
  .pm-page-request .fluentform .ff-el-form-row > .ff-el-form-col{
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Colonna SX (solo 3254) */
.pm-page-request .pm-request-summary{
  position: relative;
}

.pm-page-request .pm-request-summary::before{
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(219,234,254,.55) 0%,
    rgba(255,255,255,0) 70%
  );
  pointer-events: none;
}

.pm-page-request .pm-request-summary > *{
  position: relative;
  z-index: 1;
}

.pm-page-request .pm-summary-card{
  background: #fff;
  border: 1px solid rgba(10,34,74,.08);
  padding: 22px 22px 20px;
  max-width: 680px;
  margin: 0 auto; /* fix bug */
}

@media (max-width: 768px){
  .pm-page-request .pm-request-summary::before{ inset: -10px; }
}

/* ===== 3254: FIX ICONE SVG (pm-ico) ===== */

/* La riga del pick: garantisce layout stabile (icona / label / valore) */
.pm-page-request .pm-pick-row{
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

/* Contenitore icona: blocca lo spazio dell’icona */
.pm-page-request .pm-pick-ico{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SVG: forza dimensioni (anche se Astra mette regole su svg) */
.pm-page-request .pm-pick-ico > svg.pm-ico,
.pm-page-request .pm-price-ico > svg.pm-ico,
.pm-page-request .pm-perk-ico  > svg.pm-ico{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  flex: 0 0 18px !important;
}

/* Evita che lo stroke si “ingrassi” per ereditarietà o reset strani */
.pm-page-request svg.pm-ico{
  stroke-width: 2;
}

/* Testi: evita overflow e tiene pulito l’allineamento */
.pm-page-request .pm-pick-k{
  margin: 0;
  min-width: 0;
}

.pm-page-request .pm-pick-v{
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   ALLINEAMENTO ICONE + TESTO (liste con SVG)
   ============================================================ */

.pm-pick-perks li{
  display: flex;
  align-items: center;        /* ← allinea verticalmente icona e testo */
  gap: 12px;
  line-height: 1.45;
}

.pm-pick-perks .pm-perk-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;             /* larghezza fissa icona */
}

.pm-pick-perks .pm-perk-ico svg{
  display: block;             /* elimina baseline inline */
  width: 18px;
  height: 18px;
}


/* =========================================================
  PREZZI
   ========================================================= */

.pm-page-request .pm-pick-price{
  border-radius: 18px;
  padding: 18px;
  background: rgba(219,234,254,.55);
  border: 1px solid rgba(30,58,138,.10);
}

.pm-page-request .pm-price-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pm-page-request .pm-price-label strong{
  font-weight: 700;
  color: rgba(10,34,74,.80);
}

.pm-page-request .pm-price-main{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pm-page-request .pm-price-old{
  display: none;
  font-size: 0.95rem;
  font-weight: 600;
  opacity: .55;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(10,34,74,.35);
  color: rgba(10,34,74,.55);
}

.pm-page-request .pm-price-now{
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--pm-primary, #0a224a);
}

.pm-page-request .pm-price-save{
  display: none;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .88rem;
  background: rgba(30,58,138,.12);
  color: #1e3a8a;
  border: 1px solid rgba(30,58,138,.14);
}

.pm-page-request .pm-price-save::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .85;
}


/* ============================================================
   8) PAGINA 3385 (THANK YOU)
   ============================================================ */
.page-id-3385 .pm-thanks-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 42px 42px;
}
.pm-thanks-subtitle {
  font-size: 24px;
}
.page-id-3385 #primary {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.page-id-3385 .ast-header-html-2, .page-id-5149 .ast-header-html-2, .page-id-3254 .ast-header-html, .page-id-4037 .ast-header-html-2 {
  display: none !important;
}
@media (max-width: 768px) {
  .page-id-3385 .pm-thanks-card { padding: 18px; }
}
.page-id-3385 .pm-thanks-summary {
  padding: 20px 0;
  max-width: 400px;
  margin: 0 auto;
}
.page-id-3385 .pm-pick-price {
  background: rgba(219, 234, 254, 0.35);
  border: 1px solid rgba(30, 58, 138, 0.10);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
  text-align: center;
}
.page-id-3385 .pm-price-label {
  justify-content: center;
}
.page-id-3385 .pm-price-main {
  justify-content: center;
}
.page-id-3385 .pm-price-save {
  display: flex;
  justify-content: center;
}
.page-id-3385 .pm-thanks-row dd {
  text-align: right;
  white-space: nowrap;
}


/* ============================================================
   8) PAGINA 3385 (THANK YOU)
   ============================================================ 

.page-id-3385 .pm-thanks-card{
  background: #fff;
  border: 1px solid rgba(10, 34, 74, 0.08);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(10, 34, 74, 0.10);
  overflow: hidden;
  padding: 22px 42px;
  max-width: 760px;
  margin: 0 auto;
}

.pm-thanks-subtitle
{
    font-size: 24px;
}

@media (max-width: 768px){
  .page-id-3385 .pm-thanks-card{ padding: 18px; }
}

.page-id-3385 .pm-thanks-summary{
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(219, 234, 254, 0.35);
  border: 1px solid rgba(30, 58, 138, 0.10);
  max-width: 400px;
  margin: 0 auto;
}

.page-id-3385 .pm-thanks-row dd{
  text-align: right;
  white-space: nowrap;
}


/* ============================================================
   PAROLA MIA TALK — CSS DEFINITIVO (Astra + Gutenberg)
   Attivo SOLO quando <body> ha classe .pm-talk

   Include:
   - Reset Astra (spazi #primary)
   - HERO 16:9 + overlay + tipografia + badge a destra
   - Pulsanti + hover fix Astra
   - Sezioni articolo (ancore) + card editoriali
   - Kit materiali (grid, card, preview immagini, download)
   - Struttura conversazione 60' (steps)
   - Video embed responsivo
   - H5P container
   ============================================================ */


/* ------------------------------------------------------------
   0) VARIABILI (se già definite globalmente, restano in fallback)
   ------------------------------------------------------------ */
.pm-talk{
  --pm-blue: var(--pm-blue, #162f65);
  --pm-yellow: var(--pm-yellow, #f9b233);
  --pm-radius: var(--pm-radius, 22px);
  --pm-shadow: var(--pm-shadow, 0 14px 38px rgba(15, 23, 42, 0.14));
  --pm-border: var(--pm-border, rgba(10,34,74,.10));
  --pm-text: rgba(15,23,42,.92);
  --pm-muted: rgba(15,23,42,.72);
}


/* ------------------------------------------------------------
   1) ASTRA RESET (solo Talk)
   ------------------------------------------------------------ */
.pm-talk #primary{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* spesso Astra aggiunge padding alla zona contenuto */
.pm-talk .site-content{
  padding-top: 0 !important;
}

/* prevenzione micro-scroll orizzontale */
.pm-talk html,
.pm-talk body{
  overflow-x: clip;
}


/* ------------------------------------------------------------
   2) CONTENITORE ARTICOLO (sezioni sotto hero)
   ------------------------------------------------------------ */
.pm-talk .pm-talk-section{
  width: min(1120px, calc(100% - 48px));
  margin: 26px auto 0;
}

@media (max-width: 781px){
  .pm-talk .pm-talk-section{
    width: calc(100% - 24px);
    margin-top: 20px;
  }
}

/* Titoli sezioni */
.pm-talk .pm-talk-section > h2{
  color: var(--pm-blue);
  line-height: 1.15;
  margin: 0 0 12px 0;
}

/* Testo secondario */
.pm-talk .pm-talk-muted{
  color: var(--pm-muted);
}


/* ------------------------------------------------------------
   3) NAV ANCORE (facoltativa: se usi i link interni)
   ------------------------------------------------------------ */
.pm-talk .pm-talk-nav{
  width: min(1120px, calc(100% - 48px));
  margin: 18px auto 0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pm-talk .pm-talk-chip{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--pm-border);
  background: #fff;
  text-decoration:none;
  color: rgba(15,23,42,.88);
  transition: transform .15s ease, opacity .15s ease;
}

.pm-talk .pm-talk-chip:hover{
  transform: translateY(-1px);
  opacity: .95;
}

@media (max-width: 781px){
  .pm-talk .pm-talk-nav{
    width: calc(100% - 24px);
    margin-top: 14px;
  }
}


/* ------------------------------------------------------------
   4) HERO COVER (Gutenberg Cover) — 16:9 + overlay
   Classi attese:
   - Cover: .pm-talk-hero (sul blocco Cover)
   - Wrapper badge: .pm-talk-badge
   - Badge: .pm-brand-talk (paragrafo o span)
   - Titolo: .pm-hero-title (h1)
   - Lead: .pm-hero-lead (p)
   - Meta: .pm-hero-meta (group)
   - Pill: .pm-pill (p o span)
   - CTA: .pm-hero-cta (buttons group)
   ------------------------------------------------------------ */



/* Inner container */
.pm-talk .entry-content .pm-talk-hero .wp-block-cover__inner-container{
  position: relative;
  z-index: 2;

  max-width: 1120px !important;
  margin: 0 auto !important;

  padding: clamp(18px, 2.2vw, 30px) 18px !important;

  height: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* Testi bianchi */
.pm-talk .entry-content .pm-talk-hero,
.pm-talk .entry-content .pm-talk-hero .wp-block-heading,
.pm-talk .entry-content .pm-talk-hero p,
.pm-talk .entry-content .pm-talk-hero li{
  color:#fff !important;
}

/* Badge wrapper a destra */
.pm-talk .entry-content .pm-talk-hero .pm-talk-badge{
  width: 100% !important;
  display: block !important;
  text-align: right !important;
  padding-right: 10px !important;
  margin: 0 0 12px 0 !important;
}

/* ============================================================
   HERO — BRAND A DESTRA (in alto)
   ============================================================ */

/* il wrapper del badge deve occupare tutta la riga */
.pm-talk .pm-talk-hero .pm-talk-badge{
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;  /* a destra */
  align-items: center !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

/* badge: giallo pieno (non barra), leggibile anche su zone chiare */
.pm-talk .pm-talk-hero .pm-brand-talk{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background: rgba(249,178,51,.92) !important;  /* giallo, semi pieno */
  color: #0a224a !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);

  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}


/* se Gutenberg aggiunge classi di allineamento, non devono “rompere” il layout */
.pm-talk .entry-content .pm-talk-hero .pm-brand-talk.has-text-align-right{
  text-align: right !important;
}


/* Titolo */
.pm-talk .entry-content .pm-talk-hero .pm-hero-title{
  margin: 0 0 12px 0 !important;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-width: 20ch;
}

/* Lead */
.pm-talk .entry-content .pm-talk-hero .pm-hero-lead{
  margin: 0 0 16px 0 !important;
  max-width: 60ch;
  opacity: .92;
  font-size: 1.05rem;
}

/* Meta pills */
.pm-talk .entry-content .pm-talk-hero .pm-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
/*  margin: 30px 0 !important; */
}

.pm-talk .entry-content .pm-talk-hero .pm-pill{
  margin:0 !important;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .95rem;
}

/* CTA container */
.pm-talk .entry-content .pm-talk-hero .pm-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin: 36px 0 0 0 !important;
}

/* Hero mobile */
@media (max-width: 781px){
  .pm-talk .entry-content .pm-talk-hero.wp-block-cover{
    width: calc(100% - 24px) !important;
    margin-top: 6px !important;
    border-radius: 16px;
  }
  .pm-talk .entry-content .pm-talk-hero .wp-block-cover__inner-container{
    padding: 18px 14px !important;
  }
  .pm-talk .entry-content .pm-talk-hero .pm-hero-title{
    max-width: 22ch;
  }
  .pm-talk .entry-content .pm-talk-hero .pm-talk-badge{
    padding-right: 6px !important;
    margin-bottom: 10px !important;
  }
}


/* ------------------------------------------------------------
   5) BOTTONI (fix hover Astra + coerenza)
   Classi attese sui wrapper Gutenberg Button:
   - .pm-btn.pm-btn-primary
   - .pm-btn.pm-btn-secondary
   ------------------------------------------------------------ */

/* ============================================================
   CTA PRIMARIA
   ============================================================ */

.pm-talk .pm-btn.pm-btn-primary .wp-element-button{
  background: #162f65 !important;
  color: #ffffff !important;

  border-radius: 999px;
  padding: 12px 20px;

  font-weight: 600;
  box-shadow: none !important;
}

.pm-talk .pm-btn.pm-btn-primary .wp-element-button:hover{
  background: #0f224d !important;
}

/* ============================================================
   CTA SECONDARIE — stile editoriale
   ============================================================ */

.pm-talk .pm-btn.pm-btn-secondary .wp-element-button{
  background: #f9b23380 !important;
  color: #ffffff !important;

  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 999px;

  padding: 10px 18px;
  font-weight: 500;
}

.pm-talk .pm-btn.pm-btn-secondary .wp-element-button:hover{
  background: rgba(255,255,255,.12) !important;
}



/* ------------------------------------------------------------
   6) CARD “EDITORIALI” (inquadramento / kit / ecc.)
   Usa: .pm-card
   ------------------------------------------------------------ */

.pm-talk .pm-card{
  border-radius: var(--pm-radius);
  border: 1px solid var(--pm-border);
  background: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.10);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.pm-talk .pm-card h3{
  margin: 0 0 10px 0;
  color: var(--pm-blue);
  line-height: 1.18;
}

.pm-talk .pm-card p{
  margin: 0 0 12px 0;
  color: var(--pm-text);
  line-height: 1.7;
}

.pm-talk .pm-card p:last-child{
  margin-bottom: 0;
}

/* Banda soft decorativa (leggera) */
.pm-talk .pm-card::before{
  content:"";
  position:absolute;
  left:-50px;
  top:-70px;
  width: 520px;
  height: 240px;
  background: radial-gradient(circle at 30% 40%,
    rgba(249,178,51,.18) 0%,
    rgba(22,47,101,.10) 42%,
    rgba(255,255,255,0) 72%);
  transform: rotate(-6deg);
  pointer-events:none;
}


/* ------------------------------------------------------------
   7) INTRO / INQUADRAMENTO (se vuoi stile “card”)
   Usa wrapper: .pm-intro-card (opzionale)
   ------------------------------------------------------------ */

.pm-talk .pm-intro-card{
  margin-top: 10px;
}

.pm-talk .pm-talk-lead{
  color: var(--pm-text);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 80ch;
}


/* ------------------------------------------------------------
   8) KIT MATERIALI — GRID
   Usa wrapper: .pm-kit-grid (o .pm-talk-grid)
   ------------------------------------------------------------ */

.pm-talk .pm-talk-grid,
.pm-talk .pm-kit-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 781px){
  .pm-talk .pm-talk-grid,
  .pm-talk .pm-kit-grid{
    grid-template-columns: 1fr;
  }
}

/* Media dentro card (immagini/pagine) */
.pm-talk .pm-card-media{
  margin: 12px 0 14px;
}

.pm-talk .pm-card-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
}


/* ------------------------------------------------------------
   9) STRUTTURA 60' — STEPS
   Usa wrapper: .pm-steps e item: .pm-step
   ------------------------------------------------------------ */

.pm-talk .pm-steps{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.pm-talk .pm-step{
  border-radius: var(--pm-radius);
  border: 1px solid var(--pm-border);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  padding: 18px;
}

.pm-talk .pm-step h3{
  margin: 0 0 8px 0;
  color: var(--pm-blue);
}

.pm-talk .pm-step p{
  margin: 0 0 10px 0;
  color: var(--pm-text);
  line-height: 1.7;
}

.pm-talk .pm-step-links{
  margin: 0;
  color: var(--pm-muted);
}

.pm-talk .pm-step-links a{
  text-decoration:none;
  border-bottom: 1px solid rgba(22,47,101,.25);
  color: rgba(22,47,101,.92);
}

@media (max-width: 781px){
  .pm-talk .pm-steps{
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   10) VIDEO — embed responsivo “pulito”
   (Se usi il blocco YouTube Gutenberg, di solito è già responsive)
   Wrapper opzionale: .pm-video
   ------------------------------------------------------------ */

.pm-talk .pm-video{
  border-radius: var(--pm-radius);
  overflow: hidden;
  border: 1px solid var(--pm-border);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.10);
  background: #000;
}

/* Se incolli iframe manuale dentro .pm-video */
.pm-talk .pm-video iframe{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  border:0;
}


/* ------------------------------------------------------------
   12) PICCOLI DETTAGLI (ancore + smooth scroll)
   ------------------------------------------------------------ */

.pm-talk{
  scroll-behavior: smooth;
}

/* offset ancore se header sticky (aggiusta se serve) */
.pm-talk [id]{
  scroll-margin-top: 90px;
}

/* ============================================================
   TALK — restyling “editoriale” (no template vibes)
   Target:
   - .pm-histo-card (inquadramento)
   - .pm-card (materiali e sezioni)
   ============================================================ */

/* A) Elimina qualsiasi decorazione grafica tipo bande/radiali */
.pm-talk .pm-histo-card::before,
.pm-talk .pm-card::before{
  content: none !important;
  display: none !important;
}

/* B) Superfici pulite: bianco neutro, bordi sottili, ombra quasi impercettibile */
.pm-talk .pm-histo-card,
.pm-talk .pm-card{
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

/* C) Firma editoriale: una “rule” sottile (alto) invece di grafiche decorative */
.pm-talk .pm-histo-card,
.pm-talk .pm-card{
  position: relative;
}

.pm-talk .pm-histo-card{
  border-top: 3px solid rgba(22,47,101,.20) !important;  /* blu leggero */
}

.pm-talk .pm-card{
  border-top: 2px solid rgba(22,47,101,.14) !important;
}

/* D) Tipografia più seria: kicker meno “urlato”, testo più compatto e leggibile */
.pm-talk .pm-kicker {
    color: #f9b233;
    letter-spacing: .06em !important;
    font-weight: 800 !important;
    font-size: 1.0rem !important;
    margin: 0 0 8px 0 !important;
}

.pm-talk .pm-histo-title{
  margin: 0 0 10px 0 !important;
}

.pm-talk .pm-histo-text,
.pm-talk .pm-intro-text,
.pm-talk .pm-card p{
  color: rgba(15,23,42,.90) !important;
  line-height: 1.72 !important;
}

/* E) Materiali: immagini e preview con cornice pulita, no “effetti” */
.pm-talk .pm-card-media img{
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: none !important;
}

/* F) Spaziature: meno “aria finta”, più ritmo */
.pm-talk .pm-histo-card,
.pm-talk .pm-card{
  padding: 18px 18px 16px !important;
}

@media (max-width: 781px){
  .pm-talk .pm-histo-card,
  .pm-talk .pm-card{
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06) !important;
  }
}

.pm-talk .pm-histo-card,
.pm-talk .pm-card{
  box-shadow: none !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
}


/* ============================================================
   ASTRA OVERRIDE — solo Talk
   Sblocca il contenitore che limita la larghezza
   ============================================================ */

/* Astra: container principale spesso “boxed” */
.pm-talk .site-content > .ast-container{
  max-width: none !important;     /* rimuove il limite Astra */
  width: 100% !important;
  padding-left: 0 !important;     /* elimina le “cornici” */
  padding-right: 0 !important;
}

/* Evita che #primary rimetta padding/margini */
.pm-talk #primary{
  margin: 0 !important;
  padding: 0 !important;
}

/* Anche l’entry-content a volte ha limiti/padding */
.pm-talk .entry-content{
  margin: 0 !important;
}

/* ============================================================
   ASTRA BLOCKS LAYOUT — sblocca il max-width che limita i blocchi
   SOLO per la cover hero nei Talk
   ============================================================ */

.pm-talk .entry-content[data-ast-blocks-layout] > .pm-talk-hero{
  max-width: none !important;      /* annulla la regola Astra */
  width: min(940px, calc(100% - 32px)) !important;
  margin: 14px auto 56px !important;

  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  height: auto !important;

  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

/* inner container tipografico */
.pm-talk .pm-talk-hero .wp-block-cover__inner-container{
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 26px 22px !important;
  position: relative;
  z-index: 2;
}
/* ============================================================
   HERO — CTA: gerarchia visiva
   ============================================================ */

.pm-talk .pm-talk-hero .pm-hero-cta{
  gap: 12px !important;
}

/* primario (Inquadramento): già ok, lo rendiamo leggermente più “deciso” */
.pm-talk .pm-talk-hero .pm-btn-primary .wp-element-button{
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

/* secondari: più leggeri e puliti */
.pm-talk .pm-talk-hero .pm-btn-secondary .wp-element-button{
  background: #f9b23380 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}

.pm-talk .pm-talk-hero .pm-btn-secondary .wp-element-button:hover{
  background: rgba(255,255,255,.18) !important;
}

@media (max-width: 781px){
  .pm-talk .pm-talk-hero .pm-talk-badge{
    justify-content: flex-start !important;
    margin-bottom: 10px !important;
  }
  .pm-talk .pm-talk-hero .pm-hero-title{
    max-width: 18ch;
  }
}


/* ------------------------------------------------------------
   FIX LARGHEZZA TOTALE IFRAME (WordPress Side)
   ------------------------------------------------------------ */

/* Risolve il problema del width: auto che restringe il quiz */
.h5p-iframe-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow: visible !important;
    padding-bottom: 50px !important;
}

.h5p-iframe-wrapper iframe {
    width: 100% !important;
    min-width: 100% !important;
    height: auto;
}

/* Rimuove restrizioni dai contenitori pm-talk */
.pm-talk .pm-h5p, .pm-h5p-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.h5p-container {
  max-width: 760px;
  margin: 0 auto;
}

.h5p-fill-in-the-blanks .h5p-input-wrapper {
  background-color: #e6f0fb;
  border-radius: 6px;
  padding: 2px 6px;
  min-width: 90px;
}

.h5p-draggable {
  background: #f3f4f6;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 500;
}

.h5p-draggable:hover {
  background: #162f65;
  color: #ffffff;
}

.h5p-container p {
  line-height: 1.6;
  font-size: 1.05rem;
}

/* Layout a due colonne per Drag the Words */
.h5p-drag-task {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}

.h5p-drag-draggables {
  background: #f7f9fc;
  border-radius: 12px;
  padding: 16px;
}

.h5p-drag-draggables .h5p-draggable {
  display: block;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .h5p-drag-task {
    grid-template-columns: 1fr;
  }
}

.h5p-drag-droppable-words {
  line-height: 1.7;
}

.h5p-drag-task {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
}

.h5p-drag-draggables {
  background: #f7f9fc;
  border-radius: 12px;
  padding: 16px;
}

@media (max-width: 768px) {
  .h5p-drag-task {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PM — FIX card materiali (disattiva equal-height globale)
   ========================================================== */

.pm-materials-overview .pm-card{
  min-height: auto !important;
  height: auto !important;
}
.pm-materials-overview .pm-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-materials-overview .pm-card{
  padding: 18px 20px;
}

.pm-materials-overview .pm-card-title{
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.pm-materials-overview .pm-card p{
  margin: 0;
  line-height: 1.55;
}

/* Banda di sezione (sfondo) */
.pm-band{
  padding: 56px 0;
}

/* Contenitore interno */
.pm-band-inner{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Mobile */
@media (max-width: 780px){
  .pm-band{ padding: 40px 0; }
}

/* Card: piccolo bordo per stacco sul background */
.pm-band .pm-card{
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.pm-materiali-card{
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 768px){
  .pm-materiali-card{
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}