@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Karla:wght@400;600;700&display=swap');
/* L'angolo dei bambini - indice dei giochi. Tutto sotto #giochi-indice. */
#giochi-indice{
  --cera:#F8F1DE; --inch:#1F2718; --inchS:#4F5B40; --miele:#E9A924;
  max-width:900px;margin:0 auto;padding:6px 12px 30px;
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--inch);text-align:center;
}
#giochi-indice *,#giochi-indice *::before,#giochi-indice *::after{box-sizing:border-box}
#giochi-indice .occhiello{margin:0 0 6px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--inchS)}
#giochi-indice h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(26px,6vw,40px);line-height:1.02;letter-spacing:-.02em;margin:0 0 10px}
#giochi-indice .lede{max-width:34em;margin:0 auto;color:var(--inchS);line-height:1.55;font-size:16px}
#giochi-indice .scaffale{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:26px;text-align:left}
#giochi-indice .carta{display:flex;flex-direction:column;background:var(--cera);border:2px solid var(--inch);
  border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
#giochi-indice a.carta:hover{transform:translateY(-4px);box-shadow:0 14px 26px rgba(31,45,20,.2)}
#giochi-indice .figura{display:block;line-height:0;border-bottom:2px solid var(--inch)}
#giochi-indice .figura svg{width:100%;height:auto;display:block}
#giochi-indice .testo{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
#giochi-indice .testo h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:22px;
  line-height:1.1;letter-spacing:-.01em;margin:0 0 8px}
#giochi-indice .testo p{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--inchS);flex:1}
#giochi-indice .eta{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inchS);border:1.5px solid rgba(31,39,24,.25);border-radius:100px;padding:3px 10px;margin:0 0 10px;align-self:flex-start}
#giochi-indice .gioca{align-self:flex-start;background:var(--inch);color:var(--cera);font-weight:700;font-size:15px;
  padding:10px 20px;border-radius:100px}
#giochi-indice a.carta:hover .gioca{background:var(--miele);color:var(--inch)}
#giochi-indice .prossima{border-style:dashed;background:rgba(248,241,222,.55);opacity:.9}
#giochi-indice .prossima .figura{border-bottom-style:dashed}
#giochi-indice .prossima .testo h2{color:var(--inchS)}
@media (prefers-reduced-motion:reduce){#giochi-indice *{transition:none!important}}

/* --- dentro WordPress --- */
/* Il tema Divi stampa gia' il titolo della pagina: il nostro basta e avanza. */
.page-id-1311 h1.entry-title.main_title,
.page-id-1319 h1.entry-title.main_title{display:none}
#main-content article:has(#gioco-api) > h1.entry-title.main_title,
#main-content article:has(#giochi-indice) > h1.entry-title.main_title{display:none}
/* Se il layout a larghezza piena non fosse attivo, la colonna resta comunque larga. */
.page-id-1311 #left-area,.page-id-1319 #left-area{width:100%;padding-right:0;float:none}
.page-id-1311 #sidebar,.page-id-1319 #sidebar{display:none}