/* hub pages (page-hub.php, SPID 2026-10-14): the home skeleton on an inner
   page. Hero, .op-card flip cards, .page-cols, .prose, .faq and .side-card
   come from the home styles; new here: the first card grid overlapping the
   hero (where the home has its search panel), the sub-list labels (no
   headings before the first H2) and the ID chips */
.article.hub{max-width:none;padding:0}
.hub .hero h1{max-width:22ch}
.hub-top{position:relative;z-index:5;margin-top:-60px;scroll-margin-top:96px}
.hub-top>.hub-grid:first-child{margin-top:0}
.hub-dir>.hub-sub{font-family:var(--serif);color:var(--navy);font-size:1.3rem;font-weight:600;line-height:1.25;margin:48px 0 0;scroll-margin-top:96px}
.hub-sub+.hub-grid{margin-top:16px}
.hub-band .band-title{font-family:var(--serif);color:#fff;font-size:1.7rem;font-weight:600;line-height:1.3;margin:0 0 8px}
.hub-band .feature a{color:#fff}
.hub-dir>p{color:var(--muted);max-width:82ch;margin:0;padding:0;font-size:.95rem;line-height:1.65;text-align:left}
.hub-dir>p a{color:var(--azzurro)}
.hub-dir>p strong{color:var(--ink)}
.hub-dir>.hub-grid+p{margin-top:28px}
.hub-grid{margin:28px 0 8px}
.hub-grid .op-card{height:276px}
.op-ids{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.op-ids-lbl{width:100%;text-align:center;font-size:.74rem;color:var(--muted)}
.op-id{border:1px solid var(--azzurro);color:var(--azzurro);background:#fff;border-radius:4px;padding:2px 9px;font-size:.76rem;font-weight:700;letter-spacing:.04em}
.op-meta .op-scheda{color:var(--azzurro);font-size:.82rem;margin-top:2px}
.hub-grid .op-card.op-static{height:244px;cursor:default}
.op-meta-sm{font-size:.78rem;line-height:1.35}
.hub .prose h3[id]{scroll-margin-top:96px}
/* numbered lists (SPID steps): same text style as the .prose ul of the home */
.hub .prose ol{margin:0 0 16px;padding-left:22px;color:#3d4452;font-size:.95rem;line-height:1.6}
.hub a.side-btn{text-decoration:none}
.hub-note p{font-size:.84rem;color:var(--muted)}
/* game icons in the /nuovi/ table: names on hover (svg title), legend below for touch */
.gi-sprite{position:absolute;width:0;height:0;overflow:hidden}
.gi{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--navy)}
.gi-row{display:flex;flex-wrap:wrap;gap:4px 5px;min-width:68px}
.gi-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 32px;font-size:.8rem;color:var(--muted)}
.gi-key{display:inline-flex;align-items:center;gap:5px}
.gi-key .gi{width:18px;height:18px}
@media (max-width:640px){
  .hub-dir>.hub-sub{font-size:1.15rem;margin-top:40px}
  .hub-band .band-title{font-size:1.4rem}
  body:not(.home) .article.hub .table-wrap th{white-space:normal;padding:10px 6px;line-height:1.3;font-size:.76rem}
  body:not(.home) .article.hub .table-wrap td{padding:9px 6px;font-size:.84rem}
}