/* Risorse gratuite · DevelopingLab (10/11/2026)
   Si carica DOPO /assets/stile.css, il foglio della landing: colori (panna, ardesia, ambra), Inter, testata,
   pulsanti, piede e schede vengono da li', cosi' le pagine delle guide hanno lo stesso aspetto della landing.
   Qui solo quello che la landing non ha: l'elenco delle guide, la pagina della guida in una colonna da leggere,
   i passaggi numerati, i riquadri da copiare e la stampa (da cui escono i PDF). */

/* ------------------------------------------------------------------ elenco delle guide */
.risorse-testa { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(28px, 4vw, 44px); }
.risorse-testa h1 { font-size: clamp(36px, 5.4vw, 64px); max-width: 15em; }
.risorse-testa .sottotitolo { max-width: 38em; }

.elenco-guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0 0 clamp(56px, 8vw, 96px);
  list-style: none;
}
.scheda-guida {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  transition: transform var(--t-stato) var(--quint), box-shadow var(--t-stato) var(--quint);
}
.scheda-guida:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); }
.scheda-guida img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--ardesia); }
.scheda-guida-testo { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 22px 24px; }
.scheda-guida-meta { color: var(--ambra-testo); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.scheda-guida h2, .scheda-guida h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.scheda-guida h2 a, .scheda-guida h3 a { text-decoration: none; }
/* tutta la scheda risponde al clic: il collegamento del titolo si allarga sulla scheda */
.scheda-guida { position: relative; }
.scheda-guida h2 a::after, .scheda-guida h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }
.scheda-guida h2 a:focus-visible, .scheda-guida h3 a:focus-visible { outline: none; }
.scheda-guida:focus-within { outline: 3px solid var(--ambra); outline-offset: 3px; }
.scheda-guida p { color: var(--tenue); }
.scheda-guida-azione { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--ardesia); }
.scheda-guida-azione .freccia { display: inline-block; transition: transform var(--t-feedback) var(--quint); }
.scheda-guida:hover .scheda-guida-azione .freccia { transform: translateX(4px); }

/* le guide dentro la landing (la home, sezione «Le guide gratuite») */
.elenco-guide-landing { margin-top: 40px; padding-bottom: 0; }
.risorse-tutte { margin-top: 32px; }

/* ------------------------------------------------------------------ la guida */
.guida { --colonna: 720px; }
.guida-colonna { max-width: var(--colonna); margin-left: auto; margin-right: auto; }
.guida-testa { padding-top: clamp(40px, 6vw, 80px); padding-bottom: 32px; }
.guida-testa h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.06; letter-spacing: -.035em; }
.guida-testa .sottotitolo { max-width: none; }
.guida-aggiornata { margin-top: 18px; color: var(--tenue); font-size: 15px; }
.guida-comandi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.in-breve {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin: 8px 0 0;
  padding: 26px 28px;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.in-breve div { min-width: 0; }
.in-breve dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ambra-testo); }
.in-breve dd { margin: 6px 0 0; }

.capitolo { padding-top: 64px; }
.capitolo > h2 { font-size: clamp(28px, 3.6vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.capitolo > p { margin-top: 14px; }
.capitolo-intro { color: var(--tenue); font-size: 18px; }

.cose-da-sapere { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.cose-da-sapere li { padding: 18px 20px; background: var(--carta); border: 1px solid var(--filo); border-radius: 16px; }
.cose-da-sapere strong { display: block; margin-bottom: 4px; }

.passi { display: grid; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: passo var(--parti-da, 0); }
.passo {
  position: relative;
  padding: 24px 24px 24px 76px;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  counter-increment: passo;
}
.passo::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 22px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ardesia);
  color: var(--ambra);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
}
.passo h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.passo h3 + p, .passo p + p { margin-top: 10px; }
.passo .nota { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--filo-forte); }
.nota-titolo { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }

.passo code, .guida p code, .guida li code, .guida dd code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(20, 26, 33, .07);
  overflow-wrap: anywhere;
}
/* le voci dei menu possono andare a capo: «Require board approval for new hires» su una riga sola a 375 px usciva dallo schermo */
.menu-voce { font-weight: 600; }

.da-copiare {
  position: relative;
  margin-top: 16px;
  padding: 44px 20px 18px;
  background: var(--panna);
  border: 1px solid var(--filo-forte);
  border-left: 4px solid var(--ambra);
  border-radius: 14px;
}
.da-copiare::before {
  content: "Da copiare";
  position: absolute;
  left: 20px;
  top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ambra-testo);
}
/* gli indirizzi lunghi dentro un messaggio da copiare vanno a capo dove serve */
.da-copiare p { font-size: 16.5px; line-height: 1.55; overflow-wrap: anywhere; }
.copia {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--filo-forte);
  border-radius: 10px;
  background: var(--carta);
  color: var(--ardesia);
  font: 600 14px/1 var(--carattere);
  cursor: pointer;
  transition: background var(--t-feedback) var(--quint), border-color var(--t-feedback) var(--quint);
}
.copia:hover { background: #fff; border-color: var(--ardesia); }
.copia:focus-visible { outline: 3px solid var(--ambra); outline-offset: 2px; }
.copia[data-fatto] { background: var(--ardesia); border-color: var(--ardesia); color: var(--panna); }

.domanda + .domanda { margin-top: 28px; }
/* il primo titoletto dopo l'introduzione del capitolo: senza, restava attaccato alla riga sopra */
.capitolo-intro + .domanda, .capitolo > h2 + .domanda { margin-top: 24px; }
.domanda h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.domanda > p { margin-top: 8px; color: var(--tenue); }

.avviso {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--raggio);
  background: var(--ardesia);
  color: var(--panna);
}
.avviso strong { color: var(--ambra); }
.avviso p + p { margin-top: 10px; }

/* il rimando alla call alla fine dell'installazione (13/11): chi si blocca prenota invece di lasciar perdere */
.aiuto {
  margin-top: 28px;
  padding: 24px 24px 26px;
  border: 1px solid var(--filo-forte);
  border-top: 4px solid var(--ambra);
  border-radius: var(--raggio);
  background: var(--carta);
}
.aiuto-titolo { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--ardesia); }
.aiuto p + p { margin-top: 8px; }
.aiuto .guida-comandi { margin-top: 18px; }

.fonti { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--filo); color: var(--tenue); font-size: 15px; }
.fonti h2 { font-size: 18px; letter-spacing: -.01em; color: var(--ardesia); }
.fonti ul { margin: 12px 0 0; padding-left: 20px; }
.fonti li + li { margin-top: 6px; }
.fonti a { overflow-wrap: anywhere; }

/* l'invito finale: nelle guide e' allineato alla colonna del testo, nell'elenco al contenitore della pagina */
.guida .guida-invito { margin-top: 72px; }
.guida .guida-invito .contenitore { max-width: calc(var(--colonna) + 2 * var(--margine)); }
.guida-invito h2 { font-size: clamp(30px, 4vw, 44px); }
.guida-invito p { margin-top: 14px; color: var(--tenue-scuro); max-width: 36em; }
.guida-invito .guida-comandi { margin-top: 28px; }
.scura .pulsante-secondario { color: var(--panna); border-color: var(--filo-scuro); }
.scura .pulsante-secondario:hover { background: var(--ardesia-2); border-color: var(--panna); color: var(--panna); }

@media (max-width: 640px) {
  .in-breve { grid-template-columns: 1fr; padding: 22px 20px; }
  .passo { padding: 72px 18px 20px; }
  .passo::before { left: 18px; top: 18px; }
  .guida-comandi .pulsante { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ l'anteprima col modulo (14/11) */
/* Dal 14/11 /risorse-gratuite/<slug>/ e' un'anteprima (strumenti/risorse.mjs): il primo capitolo, poi il modulo che
   manda via email il link alla guida completa e al PDF. Un campo solo, come le guide di Russo, e la casella
   facoltativa e non spuntata per gli aggiornamenti. */
.ricevi {
  margin-top: 64px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  scroll-margin-top: 96px;
}
.ricevi h2 { font-size: clamp(28px, 3.6vw, 38px); line-height: 1.1; letter-spacing: -.03em; }
.ricevi-intro { margin-top: 12px; color: var(--tenue); font-size: 18px; }
.ricevi-dentro { margin-top: 26px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ambra-testo); }
.ricevi-capitoli { margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filo); }
.ricevi-capitoli li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--filo); font-weight: 600; line-height: 1.4; }
.ricevi-capitoli li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--ambra); transform: translateY(-2px); }

.ricevi-modulo { margin-top: 28px; }
.ricevi-etichetta { display: block; font-weight: 700; }
.ricevi-gia { margin-top: 6px; color: var(--tenue); font-size: 15px; }
.ricevi-riga { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ricevi-riga input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--filo-forte);
  border-radius: 14px;
  background: #fff;
  color: var(--ardesia);
  font: 500 17px/1.3 var(--carattere);
  caret-color: var(--ambra-titolo);
  transition: border-color var(--t-feedback) var(--quint);
}
.ricevi-riga input::placeholder { color: var(--tenue); opacity: 1; }
.ricevi-riga input:hover { border-color: var(--ardesia); }
.ricevi-riga input:focus-visible { outline: 3px solid var(--ambra-titolo); outline-offset: 2px; border-color: var(--ardesia); }
.ricevi-riga input[aria-invalid="true"] { border-color: var(--ambra-testo); }
.ricevi-riga .pulsante { flex: 0 0 auto; }
.ricevi-riga .pulsante[disabled] { cursor: progress; opacity: .75; transform: none; box-shadow: none; }
.ricevi-consenso { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 15.5px; line-height: 1.5; cursor: pointer; }
.ricevi-consenso input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ardesia); cursor: pointer; }
.ricevi-consenso input:focus-visible { outline: 3px solid var(--ambra-titolo); outline-offset: 2px; }
.ricevi-privacy { margin-top: 12px; color: var(--tenue); font-size: 14.5px; }
.ricevi-privacy a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.ricevi-privacy a:hover { color: var(--ardesia); }
.ricevi-errore { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(242, 163, 58, .18); color: var(--ardesia); font-weight: 600; }
/* il campo trappola: fuori dallo schermo, fuori dal tasto Tab e nascosto ai lettori di schermo */
.ricevi-trappola { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ricevi-fatto { position: relative; margin-top: 28px; padding: 22px 24px 22px 66px; border-radius: 16px; background: var(--ardesia); color: var(--tenue-scuro); }
.ricevi-fatto::before { content: ""; position: absolute; left: 22px; top: 23px; width: 28px; height: 28px; border-radius: 8px; background: var(--ambra) var(--spunta) center / 18px no-repeat; }
.ricevi-fatto:focus { outline: none; }
.ricevi-fatto-titolo { color: var(--panna); font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.ricevi-fatto p + p { margin-top: 8px; }
.ricevi-fatto strong { color: var(--panna); overflow-wrap: anywhere; }
.ricevi-fatto button { padding: 0; border: 0; background: none; color: var(--ambra); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ricevi-fatto button:hover { color: var(--panna); }

/* il link dell'email storto o spezzato porta all'elenco con ?link=non-valido */
.avviso-link { margin-top: 24px; max-width: 40em; padding: 14px 18px; border-radius: 14px; background: var(--ardesia); color: var(--panna); }

@media (max-width: 640px) {
  .ricevi-riga .pulsante { flex: 1 1 100%; }
  .ricevi-fatto { padding: 66px 20px 20px; }
  .ricevi-fatto::before { left: 20px; top: 20px; }
}

/* ------------------------------------------------------------------ stampa: da qui escono i PDF */
@page { size: A4; margin: 16mm 15mm 18mm; }
@media print {
  html { scroll-behavior: auto; }
  body { background: #fff; font-size: 11pt; }
  .salta, .testata, .piede, .guida-comandi, .copia, .solo-schermo, .ricevi { display: none !important; }
  .solo-stampa { display: block !important; }
  .guida-testa { padding-top: 0; }
  .in-breve, .passo, .cose-da-sapere li, .scheda-guida { box-shadow: none; }
  .passo, .da-copiare, .domanda, .avviso, .in-breve, .cose-da-sapere li { break-inside: avoid; }
  .capitolo { padding-top: 26px; }
  .capitolo > h2 { break-after: avoid; }
  .guida-invito { margin-top: 28px; padding: 22px 24px !important; border-radius: var(--raggio); break-inside: avoid; }
  .fonti { margin-top: 28px; }
  a[href^="http"]::after { content: ""; }
}
.solo-stampa { display: none; }