:root{
  --lpm-red:#c72831;
  --lpm-text:#1b1f24;       /* antracite scuro */
  --lpm-sub:#4b535c;        /* sottotitoli */
  --lpm-card:#f5f7fa;       /* grigio chiarissimo per card */
  --lpm-border:#e3e8ef;     /* bordo leggero */
  --radius:16px;
  --shadow:0 8px 22px rgba(16,24,40,.08);
  --shadow-hover:0 14px 32px rgba(16,24,40,.12);
}

/* utilità a11y */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* sezione: nessun padding esterno (gestisci tu nella colonna) */
.lpm-cards{ background:transparent; padding:0; }

/* griglia responsive (forziamo grid, blocchiamo override di tema) */
.lpm-grid{
  display:grid !important;
  grid-template-columns: 1fr;            /* mobile: 1 colonna */
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 720px){
  .lpm-grid{ grid-template-columns: repeat(2, 1fr); }  /* tablet: 2 colonne */
}
@media (min-width: 1080px){
  .lpm-grid{ grid-template-columns: repeat(3, 1fr); }  /* desktop: 3 colonne */
}

/* CARD (mancava: qui rimetto background, bordo e box-shadow) */
.lpm-cards .lpm-card{
  display:block;
  background: var(--lpm-card);
  border: 1px solid var(--lpm-border) !important;  /* proteggiamo il bordo */
  border-radius: var(--radius);
  padding: 22px;
  color: var(--lpm-text);
  box-shadow: var(--shadow);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.lpm-cards .lpm-card:hover{
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* header card */
.lpm-card__header{
  display:flex; flex-direction:column; gap:20px;  /* 20px tra label lingua e titolo */
  margin-bottom:12px;
}
.lpm-pill{
  align-self:flex-start;
  background:rgba(199,40,49,.08);
  color:var(--lpm-red);
  border:1px solid rgba(199,40,49,.28);
  padding:6px 10px;
  border-radius:999px;
  font-weight:700; letter-spacing:.04em; font-size:.82rem;
}

/* testi */
.lpm-card__title{
  margin:0; color:var(--lpm-text);
  font-size:clamp(1.06rem,1.3vw + .6rem,1.35rem); line-height:1.25;
}
.lpm-card__subtitle{ margin:0; color:var(--lpm-sub); font-size:.96rem; }
.lpm-card__body{ margin:12px 0 18px; line-height:1.6; color:#2b3138; }

/* bottone */
.lpm-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--lpm-red); color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:4px; font-weight:700;
  box-shadow:0 6px 14px rgba(199,40,49,.25);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  margin-top:30px; /* 30px di gap sopra al bottone */
}
.lpm-btn:hover, .lpm-btn:focus{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(199,40,49,.35);
  background:#a81e28;
  outline:none;
}
.lpm-btn:focus-visible{ outline:2px solid #1b1f24; outline-offset:2px; }
.lpm-icon{ width:20px; height:20px; fill:#fff; display:inline-block; }

/* Progressive enhancement: reveal solo se JS attivo */
html.use-io [data-reveal]{ opacity:0; transform:translateY(18px); }
html.use-io [data-reveal].revealed{
  opacity:1; transform:translateY(0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
@media (prefers-reduced-motion:reduce){
  html.use-io [data-reveal]{ opacity:1; transform:none; }
}

/* ============== DEBUG (attivalo aggiungendo 'lpm-debug' alla section) ============== */
.lpm-cards.lpm-debug .lpm-grid{
  background:
    repeating-linear-gradient(
      to right,
      rgba(199,40,49,.10) 0, rgba(199,40,49,.10) 1px,
      transparent 1px, transparent 40px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 1px,
      transparent 1px, transparent 40px
    );
  outline: 2px dashed rgba(199,40,49,.35);
  outline-offset: 6px;
}

.lpm-cards.lpm-debug .lpm-card{
  outline: 2px solid #c72831 !important;      /* bordo visivo forte */
  background: #fffdfd;                         /* leggero contrasto per capire layout */
}

.lpm-cards.lpm-debug .lpm-card__title::after{
  content:"  ⟶ debug"; color:#c72831; font-weight:600; font-size:.85em;
}