/* ==========================================================================
GS7 – Pagina articolo v2 (prefisso gs7a-). Entra nel CSS unico di gs7-blocks e usa
i token/le primitive di gs7-blocks/core/gs7-core.css (gsb-*).
Principi (vedi prove/articolo/STUDIO-UX.md):
- niente scatole: la pagina è la superficie, gli spazi e le linee separano
- testata centrata a tutta larghezza → colonne sotto la testata → fasce sotto
- griglia dell'articolo: binario sinistro (condivisione, voto, indice) + testo che riempie la colonna
- una scala di spazi: 0.75 · 1.25 · 2 · 3 · 4rem
========================================================================== */
/* offset sotto l'header FISSO durante lo scorrimento = eventuale barra admin/avviso (--gs7-top-offset, dal JS dell'header)
+ altezza dell'header compatto (--gs7-header-compact-h, dal CSS dell'header) + respiro. Nessuna misura in JS:
quando l'header è esteso si è in cima alla pagina e nulla è ancora "fisso". */
body.gs7-article { --gs7a-sticky-top: calc(var(--gs7-top-offset, 0px) + var(--gs7-header-compact-h, 59px) + 1.5rem); }
html:has(body.gs7-article) { scroll-behavior: smooth; } /* i link dell'indice scorrono in modo morbido fino ai titoli (scroll-margin-top) */
@media (prefers-reduced-motion: reduce) { html:has(body.gs7-article) { scroll-behavior: auto; } }
body.gs7-article { --gs7a-side: 320px; --gs7a-rail: 8.5rem; --gs7a-body-size: 1.125rem; --gs7a-body-lh: 1.7; --gs7a-s1: 0.75rem; --gs7a-s2: 1.25rem; --gs7a-s3: 2rem; --gs7a-s4: 3rem; --gs7a-s5: 4rem; }
/* ---- niente scatole: la pagina è la superficie. Superficie = sfondo della pagina (default) oppure colore dell'header (filtro gs7_article_surface) ---- */
body.gs7-article--surface-header, body.gs7-article--surface-header #inner-wrap, body.gs7-article--surface-header #wrapper { background-color: var(--global-palette9); }
body.gs7-article .content-area { margin-top: 0; }
body.gs7-article .content-container.site-container { background: transparent; } /* il padding laterale resta quello di Kadence: sotto la larghezza massima è l'unico margine dal bordo dello schermo */
/* Kadence su schermi stretti fa sbordare il box dell'articolo con margini negativi (per portarlo a filo schermo):
senza box non ha senso e taglia il testo → margini a zero a ogni larghezza */
body.gs7-article .single-entry.content-bg { background: transparent; box-shadow: none; border: 0; border-radius: 0; margin-left: 0; margin-right: 0; }
body.gs7-article .single-entry .entry-content-wrap { padding: 0; }
/* tutta la pagina eredita i token (body.gsb-tokens); le parti proprie del modulo hanno anche i reset (.gsb) */
body.gs7-article .gs7a-tail, body.gs7-article .gs7a-rail, body.gs7-article .gs7a-verdict { font-family: var(--gsb-font-body); line-height: var(--gsb-lh-body); }
@media screen and (min-width: 1025px) {
body.gs7-article.has-sidebar .content-container { grid-template-columns: minmax(0, 1fr) var(--gs7a-side); grid-gap: var(--gs7a-s4); }
}
/* ---- barra di avanzamento della lettura ---- */
/* dentro l'header (caso normale): assoluta sul suo bordo inferiore, lo segue mentre cambia altezza */
.gs7-header .gs7a-progress { position: absolute; left: 0; right: 0; top: auto; bottom: -4px; width: auto; height: 4px; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--gsb-text, #888) 12%, transparent); }
/* fallback senza header gs7 (o header vecchio): fissa in cima alla finestra */
body > .gs7a-progress { position: fixed; left: 0; top: var(--gs7-top-offset, 0px); width: 100%; height: 4px; z-index: 99990; pointer-events: none; background: color-mix(in srgb, var(--gsb-text, #888) 12%, transparent); }
.gs7a-progress span { display: block; height: 100%; width: 0; background: var(--gsb-sec, var(--gsb-accent, #f04737)); box-shadow: 0 0 8px color-mix(in srgb, var(--gsb-sec, var(--gsb-accent, #f04737)) 60%, transparent); transition: width 80ms linear; }
@media (prefers-reduced-motion: reduce) { .gs7a-progress span { transition: none; } }
/* ---- testata ---- */
.gs7a-head-wrap { padding-top: var(--gs7a-s4); }
.gs7a-ad-top { margin-bottom: var(--gs7a-s3); }
.gs7a-ad-top .gsb-ad:empty { display: none; }
.gs7a-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--gs7a-s2); padding-bottom: var(--gs7a-s3); margin-bottom: var(--gs7a-s4); border-bottom: 1px solid var(--gsb-line); }
.gs7a-head > * { max-width: 60rem; }
.gs7a-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; font-size: var(--gsb-fs-meta); color: var(--gsb-faint); margin: 0; }
.gs7a-crumbs a { color: inherit; text-decoration: none; }
.gs7a-crumbs a:hover { color: var(--gsb-text); }
.gs7a-crumbs__sep { opacity: 0.6; }
.gs7a-head__kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; margin-top: -0.25rem; }
.gs7a-head__kicker .gsb-t-kicker { font-size: 0.8rem; }
.gs7a-head__kicker .gsb-t-kicker--muted { color: var(--gsb-faint); }
.gs7a-title.entry-title { font-family: var(--gsb-font-head); font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--gsb-text); overflow-wrap: anywhere; text-wrap: balance; }
.gs7a-sub { font-family: var(--gsb-font-body); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.5; color: var(--gsb-muted); max-width: 48rem; margin: 0; text-wrap: pretty; }
.gs7a-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.9rem; font-size: var(--gsb-fs-meta); color: var(--gsb-muted); }
.gs7a-byline__author { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--gsb-text); text-decoration: none; }
.gs7a-byline__author img { width: 2.1rem; height: 2.1rem; border-radius: 50%; }
.gs7a-byline__sep { color: var(--gsb-faint); }
/* condivisione: un solo componente in tre posti (firma, binario, fine articolo).
Sul binario (desktop) cerchi sobri; sotto 1200px, dove il binario non c'è, i pulsanti della firma prendono i colori dei servizi
e una misura comoda per il dito; in fondo all'articolo pillole con etichetta su ogni schermo. */
.gs7a-share { display: inline-flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.gs7a-share__btn { display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 0.45rem; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; border: 1px solid var(--gsb-line-strong); background: transparent; color: var(--gsb-text); font: inherit; cursor: pointer; text-decoration: none; transition: background var(--gsb-motion), border-color var(--gsb-motion), color var(--gsb-motion), opacity var(--gsb-motion); -webkit-tap-highlight-color: transparent; }
.gs7a-share__btn:hover { background: var(--gsb-text); border-color: var(--gsb-text); color: var(--gsb-bg); }
.gs7a-share__btn.is-done { background: var(--gsb-good); border-color: var(--gsb-good); color: #fff; }
.gs7a-share__ico { display: contents; }
.gs7a-share__ico--share, .gs7a-share__btn--native .gs7a-share__ico--link { display: none; }
.gs7a-share__btn--native .gs7a-share__ico--share { display: contents; }
.gs7a-share__txt { display: none; }
/* colori dei servizi (riconoscibili a colpo d'occhio): sempre in fondo all'articolo, nella firma solo sotto 1200px */
.gs7a-share--end .gs7a-share__btn--x { background: var(--gsb-text); border-color: var(--gsb-text); color: var(--gsb-bg); }
/* 2.16.2: il blu attuale di Facebook (#0866ff: bianco sopra 4,8:1, il vecchio #1877f2 era 4,2:1); su WhatsApp testo e icona
scuri (#111b21, 8,8:1: il bianco sul verde era 2,0:1) */
.gs7a-share--end .gs7a-share__btn--facebook { background: #0866ff; border-color: #0866ff; color: #fff; }
.gs7a-share--end .gs7a-share__btn--whatsapp { background: #25d366; border-color: #25d366; color: #111b21; }
.gs7a-share--end .gs7a-share__btn:not(.gs7a-share__btn--copy):hover { opacity: 0.85; }
/* fine articolo: pillole con etichetta */
.gs7a-share-end { display: flex; flex-direction: column; gap: 0.75rem; margin-top: var(--gs7a-s4); padding-top: var(--gs7a-s3); border-top: 1px solid var(--gsb-line); }
.gs7a-share--end { gap: 0.6rem; }
.gs7a-share--end .gs7a-share__btn { width: auto; height: 2.75rem; padding: 0 1.1rem 0 0.9rem; border-radius: 999px; font-family: var(--gsb-font-head); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em; }
.gs7a-share--end .gs7a-share__txt { display: inline; white-space: nowrap; }
.gs7a-byline .gs7a-share { margin-left: 0.5rem; }
@media (max-width: 1199.98px) {
/* niente binario: la firma è l'unico punto di condivisione in alto → pulsanti da 44px (misura minima per il dito) e colori dei servizi */
.gs7a-byline .gs7a-share { flex-basis: 100%; justify-content: center; margin-left: 0; margin-top: 0.15rem; gap: 0.6rem; }
.gs7a-byline .gs7a-share__btn { width: 2.75rem; height: 2.75rem; }
.gs7a-byline .gs7a-share__btn svg { width: 20px; height: 20px; }
.gs7a-byline .gs7a-share__btn--x { background: var(--gsb-text); border-color: var(--gsb-text); color: var(--gsb-bg); }
.gs7a-byline .gs7a-share__btn--facebook { background: #0866ff; border-color: #0866ff; color: #fff; }
.gs7a-byline .gs7a-share__btn--whatsapp { background: #25d366; border-color: #25d366; color: #111b21; }
.gs7a-byline .gs7a-share__btn:not(.gs7a-share__btn--copy):hover { opacity: 0.85; }
}
.gs7a-head__extra { width: 100%; max-width: 48rem; font-size: var(--gsb-fs-meta); color: var(--gsb-muted); text-align: left; }
.gs7a-head__extra .gs-review-disclosure { margin: 0 !important; padding: 0.6rem 0.9rem !important; font-size: inherit !important; line-height: 1.45; }
.gs7a-head__extra .gs-review-disclosure p { margin: 0; }
/* ---- immagine principale: a tutta colonna ---- */
.gs7a-hero { margin: 0 0 var(--gs7a-s3); }
.gs7a-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gsb-radius, 0.5rem); display: block; }
.gs7a-hero figcaption { font-size: var(--gsb-fs-meta); color: var(--gsb-faint); margin-top: var(--gs7a-s1); }
/* ---- griglia dell'articolo: binario + testo ---- */
.gs7a-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gs7a-s3); align-items: stretch; }
.gs7a-grid > * { min-width: 0; }
.gs7a-rail { display: none; }
@media (min-width: 1200px) {
.gs7a-grid { grid-template-columns: var(--gs7a-rail) minmax(0, 1fr); }
.gs7a-grid--no-rail { grid-template-columns: minmax(0, 1fr); }
.gs7a-rail { display: block; min-width: 0; --gsb-sticky-top: var(--gs7a-sticky-top); }
/* su desktop largo condivisione e voto stanno nel binario: la firma non li ripete SOLO se il pannello ha quei blocchi (classi body) */
body.gs7-article--rail-condividi .gs7a-byline .gs7a-share { display: none; }
body.gs7-article--rail-voto .gs7a-byline__score { display: none; }
}
/* binario: i blocchi del pannello (regione "rail") */
/* la regione riempie tutta l'altezza della colonna (la griglia allunga .gs7a-rail): senza questo il contenitore
sticky è alto quanto il suo contenuto e non ha spazio in cui "restare fermo" */
.gs7a-rail .gsb-region--rail { gap: var(--gs7a-s2); height: 100%; }
.gs7a-rail .gsb-block + .gsb-block .gs7a-rail__block, .gs7a-rail .gsb-block + .gsb-block .gs7a-toc { padding-top: var(--gs7a-s2); border-top: 1px solid var(--gsb-line); }
.gs7a-rail .gsb-block:first-child .gs7a-rail__block { padding-top: 0; border-top: 0; }
/* voto nella firma (solo sotto 1200px): pillola tinta per fascia che porta al verdetto */
.gs7a-byline__score { --gs7a-band: var(--gsb-good); --gs7a-ink: var(--gsb-good-ink); display: inline-flex; align-items: center; gap: 0.35rem; height: 1.7rem; padding: 0 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--gs7a-band) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gs7a-band) 40%, transparent); color: var(--gsb-text); font-family: var(--gsb-font-head); font-weight: 800; text-decoration: none; }
.gs7a-byline__score span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gs7a-ink); }
.gs7a-byline__score--mid { --gs7a-band: var(--gsb-mid); --gs7a-ink: var(--gsb-mid-ink); }
.gs7a-byline__score--bad { --gs7a-band: var(--gsb-bad); --gs7a-ink: var(--gsb-bad-ink); }
/* copia anticipata per mobile (scheda gioco) e indice richiudibile: solo su schermi stretti */
.gs7a-early-wrap { display: none; }
.gs7a-toc-mobile { display: none; }
@media (max-width: 1024.98px) { .gs7a-early-wrap { display: block; margin: 0 0 var(--gs7a-s2); } }
@media (max-width: 1199.98px) {
.gs7a-toc-mobile { display: block; margin: 0 0 var(--gs7a-s2); border: 1px solid var(--gsb-line); border-radius: var(--gsb-radius, 0.5rem); padding: 0 1rem; }
.gs7a-toc-mobile summary { cursor: pointer; padding: 0.75rem 0; font-family: var(--gsb-font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gsb-muted); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.gs7a-toc-mobile summary::-webkit-details-marker { display: none; }
.gs7a-toc-mobile summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--gsb-motion); }
.gs7a-toc-mobile[open] summary::after { transform: rotate(-135deg); }
.gs7a-toc-mobile ol { margin: 0; padding: 0 0 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.95rem; }
.gs7a-toc-mobile a { color: var(--gsb-text); text-decoration: none; }
.gs7a-toc-mobile ol ol { padding: 0.45rem 0 0 1rem; gap: 0.4rem; font-size: 0.9rem; list-style: disc; } /* sottotitoli (h3) */
.gs7a-toc-mobile ol ol a, .gs7a-toc-mobile .gs7a-toc__sub a { color: var(--gsb-muted); }
.gs7a-toc-mobile ol ol ol { padding-left: 0.9rem; font-size: 0.85rem; list-style: circle; } /* terzo livello (h4, guide) */
}
/* binario: blocchi con etichetta, separati da una linea */
.gs7a-rail__label { display: block; font-family: var(--gsb-font-head); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gsb-faint); margin-bottom: 0.55rem; }
.gs7a-rail__block { padding-top: var(--gs7a-s2); border-top: 1px solid var(--gsb-line); }
.gs7a-rail__block:first-child { padding-top: 0; border-top: 0; }
.gs7a-rail__score { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: var(--gs7a-s2); margin: 0 0 0.25rem; border-radius: var(--gsb-radius, 0.5rem); text-decoration: none; color: var(--gsb-text); background: color-mix(in srgb, var(--gs7a-band, var(--gsb-good)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gs7a-band, var(--gsb-good)) 35%, transparent); transition: background var(--gsb-motion); }
.gs7a-rail__score:hover { background: color-mix(in srgb, var(--gs7a-band, var(--gsb-good)) 20%, transparent); }
.gs7a-rail__score .gs7a-rail__label { margin-bottom: 0; }
.gs7a-rail__score .gsb-score { min-width: 3.4rem; height: 3.4rem; font-size: 1.45rem; }
.gs7a-rail__word { font-family: var(--gsb-font-head); font-size: 0.78rem; font-weight: 800; color: var(--gs7a-ink, var(--gsb-good-ink)); }
.gs7a-rail__score--good { --gs7a-band: var(--gsb-good); --gs7a-ink: var(--gsb-good-ink); }
.gs7a-rail__score--mid { --gs7a-band: var(--gsb-mid); --gs7a-ink: var(--gsb-mid-ink); }
.gs7a-rail__score--bad { --gs7a-band: var(--gsb-bad); --gs7a-ink: var(--gsb-bad-ink); }
.gs7a-share--rail { gap: 0.4rem; }
.gs7a-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.gs7a-toc a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.78rem; line-height: 1.35; color: var(--gsb-muted); text-decoration: none; padding-left: 0.6rem; border-left: 2px solid transparent; }
.gs7a-toc a:hover, .gs7a-toc a.is-current { color: var(--gsb-text); border-left-color: var(--gsb-sec, var(--gsb-accent)); }
/* sottotitoli (h3) rientrati; un indice lungo (guide) scorre dentro di sé e non spinge fuori dallo schermo il resto del binario */
.gs7a-toc ol ol { margin-top: 0.4rem; padding-left: 0.7rem; gap: 0.4rem; }
.gs7a-toc ol ol a, .gs7a-toc .gs7a-toc__sub a { font-size: 0.74rem; }
.gs7a-toc ol ol ol { margin-top: 0.35rem; padding-left: 0.45rem; gap: 0.35rem; } /* terzo livello (h4, guide): rientro minimo, la colonna è stretta */
.gs7a-toc ol ol ol a { font-size: 0.7rem; }
.gs7a-toc > ol { position: relative; max-height: min(60vh, calc(100vh - var(--gs7a-sticky-top) - 6rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* ---- corpo: riempie la colonna, allineato a sinistra ---- */
.gs7a-body { min-width: 0; }
.gs7a-body .entry-content { font-family: var(--gsb-font-body); font-size: var(--gs7a-body-size); line-height: var(--gs7a-body-lh); color: var(--gsb-text); text-align: left; }
.gs7a-body .entry-content p, .gs7a-body .entry-content li, .gs7a-body p { text-align: left !important; text-wrap: pretty; } /* !important: il vecchio style.css giustifica ogni p dentro .entry-content-wrap */
/* Spazio fra i paragrafi (e fra tutto ciò che sta nel corpo): 1.4em ≈ 25 px, come nei siti concorrenti (24–32). L'azzeramento del
margine di Kadence sui sta in :where(), che non conta nella specificità: prima (2.8.0) la regola "p { margin: 0 }" era
più forte di "> * + *" e due paragrafi consecutivi restavano attaccati (0 px). Titoli e figure hanno le loro distanze sotto. */
.gs7a-body .entry-content :where(p) { margin: 0; }
.gs7a-body .entry-content > * + * { margin-top: 1.4em; }
/* Misura di lettura (2.9.0): il testo si ferma a 40rem (640 px = circa 83 caratteri per riga a 18 px, come IGN, PC Gamer e VGC;
prima 706 px = 92). Immagini, video, tabelle e riquadri restano a tutta colonna; i paragrafi che contengono un'immagine o un
video (l'editor classico li mette dentro un
) restano larghi grazie a :has(), e dove :has() manca resta tutto largo. */
.gs7a-body .entry-content > :is(h2, h3, h4, h5, h6, ul, ol, blockquote) { max-width: 40rem; }
.gs7a-body .entry-content > p:not(:has(img, iframe, video, embed, object)) { max-width: 40rem; }
.gs7a-body .entry-content h2 { font-family: var(--gsb-font-head); font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; margin: 1.8em 0 0; scroll-margin-top: var(--gs7a-sticky-top); text-wrap: balance; }
.gs7a-body .entry-content h2 + * { margin-top: 0.6em; }
.gs7a-body .entry-content h3 { font-family: var(--gsb-font-head); font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 1.5em 0 0; scroll-margin-top: var(--gs7a-sticky-top); }
.gs7a-body .entry-content h4 { scroll-margin-top: var(--gs7a-sticky-top); } /* anche gli h4 hanno il loro link (#…): non finiscono sotto l'header */
.gs7a-body .entry-content h3 + * { margin-top: 0.5em; }
.gs7a-body .entry-content a { color: var(--gsb-sec, var(--gsb-accent)); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.gs7a-body .entry-content a:hover { text-decoration-thickness: 2px; }
.gs7a-body .entry-content ul, .gs7a-body .entry-content ol { padding-left: 1.4em; margin-bottom: 0; }
.gs7a-body .entry-content li + li { margin-top: 0.4em; }
.gs7a-body .entry-content blockquote { margin: 1.75em 0 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 4px solid var(--gsb-sec, var(--gsb-accent)); font-family: var(--gsb-font-head); font-size: 1.3rem; font-weight: 600; line-height: 1.4; color: var(--gsb-text); }
.gs7a-body .entry-content img { height: auto; max-width: 100%; border-radius: var(--gsb-radius, 0.5rem); }
.gs7a-body .entry-content > figure, .gs7a-body .entry-content > .wp-caption, .gs7a-body .entry-content > .wp-block-image { margin-top: 1.75em; }
.gs7a-body .entry-content > figure + *, .gs7a-body .entry-content > .wp-caption + *, .gs7a-body .entry-content > .wp-block-image + * { margin-top: 1.75em; }
.gs7a-body .entry-content .wp-caption { width: 100% !important; max-width: 100%; margin-bottom: 0; }
.gs7a-body .entry-content .wp-caption img { width: 100%; margin: 0; }
.gs7a-body .entry-content .wp-caption-text, .gs7a-body .entry-content figcaption, .gs7a-body .entry-content .wp-caption p, .gs7a-body .entry-content figure > p:last-child, .gs7a-body .entry-content .wp-element-caption { font-family: var(--gsb-font-body) !important; font-size: 0.8rem !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.45 !important; color: var(--gsb-faint) !important; margin: 0.55rem 0 0 !important; padding: 0 !important; text-align: left !important; }
.gs7a-body .entry-content figure { margin-left: 0; margin-right: 0; }
.gs7a-body .entry-content .gs-seconda-opinione { margin-top: 2em; border-radius: var(--gsb-radius, 0.5rem); }
.gs7a-body .entry-content .gs-review-disclosure, .gs7a-body .entry-content .addendoBox:empty { display: none; }
/* blocco video del plugin: niente riquadro arancione né logo animato, solo il video 16:9 a tutta colonna */
.gs7a-body .entry-content .blocco_youtube_container { display: block; height: auto; max-height: none; background: #000; background-image: none; border-radius: var(--gsb-radius, 0.5rem); overflow: hidden; aspect-ratio: 16 / 9; padding: 0; }
.gs7a-body .entry-content .blocco_youtube_left { display: none; }
.gs7a-body .entry-content .blocco_youtube_right, .gs7a-body .entry-content .blocco_youtube_video, .gs7a-body .entry-content .blocco_youtube_iframe { display: block; width: 100%; height: 100%; }
.gs7a-body .entry-content .blocco_youtube_container iframe, .gs7a-body .entry-content .entry-content-asset iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }
/* scheda del video del Video Injector (2.17.0, video.php): staccata dal testo come la scheda del gioco; su telefono etichetta
e titolo sopra l'anteprima (un po' più stretta del testo per via del bordo), da 640 px testo a sinistra e anteprima a destra */
.gs7a-body .entry-content > .gs7a-promo, .gs7a-body .entry-content > .gs7a-promo + * { margin-top: 1.75em; }
.gs7a-body .entry-content .gs7a-promo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gs7a-s2); padding: var(--gs7a-s2); border: 1px solid var(--gsb-line); border-radius: var(--gsb-radius, 0.5rem); background: var(--gsb-panel); max-width: none; }
.gs7a-body .entry-content .gs7a-promo__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; }
.gs7a-body .entry-content .gs7a-promo__title { margin: 0; max-width: none; font-family: var(--gsb-font-head); font-size: 1.1rem; font-weight: 800; line-height: 1.25; color: var(--gsb-text); }
.gs7a-body .entry-content .gs7a-promo__more { font-family: var(--gsb-font-head); font-size: var(--gsb-fs-meta); font-weight: 700; color: var(--gsb-sec, var(--gsb-accent)); text-decoration: none; }
.gs7a-body .entry-content .gs7a-promo__more:hover { text-decoration: underline; }
.gs7a-body .entry-content .gs7a-promo .gs7a-yt { margin: 0; }
@media (min-width: 640px) { .gs7a-body .entry-content .gs7a-promo { grid-template-columns: minmax(0, 1fr) 25rem; align-items: center; } }
.gs7a-body .entry-content .entry-content-asset { border-radius: var(--gsb-radius, 0.5rem); overflow: hidden; }
/* figura video generica (anteprima 16:9 con play: usata dal prototipo e pronta per una "facade" YouTube) */
.gs7a-body .entry-content .gs7a-video { margin: 2em 0 0; max-width: none; }
.gs7a-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--gsb-radius, 0.5rem); overflow: hidden; background: #000; }
.gs7a-video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; border-radius: 0; }
.gs7a-video__frame .gsb-play { width: 4rem; height: 4rem; }
.gs7a-body .entry-content .gs7a-ad-inline { margin: 2em 0 0; }
/* ---- verdetto (in fondo alla recensione) ---- */
.gs7a-verdict { --gs7a-band: var(--gsb-good); --gs7a-ink: var(--gsb-good-ink); margin-top: var(--gs7a-s4); padding: var(--gs7a-s3); border-radius: var(--gsb-radius, 0.5rem); background: color-mix(in srgb, var(--gs7a-band) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gs7a-band) 40%, transparent); border-left: 6px solid var(--gs7a-band); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gs7a-s2) var(--gs7a-s3); align-items: start; scroll-margin-top: var(--gs7a-sticky-top); }
.gs7a-verdict--mid { --gs7a-band: var(--gsb-mid); --gs7a-ink: var(--gsb-mid-ink); }
.gs7a-verdict--bad { --gs7a-band: var(--gsb-bad); --gs7a-ink: var(--gsb-bad-ink); }
.gs7a-verdict__score { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.gs7a-verdict .gsb-score--xl { min-width: 5rem; height: 5rem; font-size: 2.2rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--gs7a-band) 45%, transparent); }
.gs7a-verdict__word { font-family: var(--gsb-font-head); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gs7a-ink); }
.gs7a-verdict__body { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.gs7a-verdict__label { font-family: var(--gsb-font-head); font-size: var(--gsb-fs-kicker); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gsb-faint); }
.gs7a-verdict__quote { font-family: var(--gsb-font-head); font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: 0; text-align: left !important; text-wrap: pretty; }
.gs7a-verdict__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs7a-s2); }
.gs7a-verdict__cols .gsb-t-kicker { display: block; margin-bottom: 0.35rem; }
.gs7a-verdict__cols ul { padding-left: 0; margin: 0; }
.gs7a-verdict__facts { border-top: 1px solid color-mix(in srgb, var(--gs7a-band) 30%, transparent); padding-top: var(--gs7a-s1); }
.gs7a-verdict__facts a { color: var(--gsb-sec, var(--gsb-accent)); font-weight: 600; }
@media (max-width: 600px) { .gs7a-verdict { grid-template-columns: 1fr; padding: var(--gs7a-s2); } .gs7a-verdict__cols { grid-template-columns: 1fr; } .gs7a-verdict__score { flex-direction: row; } }
/* ---- coda dell'articolo ---- */
.gs7a-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--gs7a-s4); }
.gs7a-tag { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.85rem; border-radius: 999px; background: var(--gsb-panel); font-family: var(--gsb-font-head); font-size: var(--gsb-fs-meta); font-weight: 600; color: var(--gsb-text-2); text-decoration: none; }
.gs7a-tag:hover { background: var(--gsb-panel-2); color: var(--gsb-text); }
.gs7a-game { margin-top: var(--gs7a-s3); display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--gs7a-s2); padding: var(--gs7a-s2); border: 1px solid var(--gsb-line); border-radius: var(--gsb-radius, 0.5rem); align-items: center; }
.gs7a-game__cover { display: block; aspect-ratio: 3 / 4; border-radius: 0.35rem; overflow: hidden; background: var(--gsb-panel); }
.gs7a-game__cover img { width: 100%; height: 100%; object-fit: cover; }
.gs7a-game__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.gs7a-game__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-family: var(--gsb-font-head); font-size: var(--gsb-fs-meta); font-weight: 700; }
.gs7a-game__links a { color: var(--gsb-sec, var(--gsb-accent)); text-decoration: none; }
.gs7a-author { margin-top: var(--gs7a-s4); display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--gs7a-s2); padding-top: var(--gs7a-s3); border-top: 1px solid var(--gsb-line); }
.gs7a-author img { width: 4rem; height: 4rem; border-radius: 50%; }
.gs7a-author .gs7-avatar--initials { width: 4rem; height: 4rem; font-size: 1.4rem; } /* senza foto: iniziali (gs7-author) */
.gs7a-byline .gs7-avatar--initials { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; }
.gs7a-author__name { font-family: var(--gsb-font-head); font-weight: 800; font-size: 1.05rem; }
.gs7a-author__name a { color: inherit; text-decoration: none; }
.gs7a-author__bio { font-size: 0.95rem; color: var(--gsb-muted); margin: 0.2rem 0 0; }
.gs7a-next { margin-top: var(--gs7a-s4); padding: var(--gs7a-s2); border-radius: var(--gsb-radius, 0.5rem); background: var(--gsb-panel); display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--gs7a-s2); align-items: center; color: inherit; text-decoration: none; }
.gs7a-next .gsb-media { aspect-ratio: 16 / 9; }
.gs7a-next:hover .gsb-t-title { color: var(--gsb-sec, var(--gsb-accent)); }
/* ---- laterale (separata da una linea) ---- */
.gs7a-sidebar { min-width: 0; }
@media screen and (min-width: 1025px) {
.gs7a-sidebar { align-self: stretch; border-left: 1px solid var(--gsb-line); padding-left: var(--gs7a-s3); --gsb-sticky-top: var(--gs7a-sticky-top); }
}
/* ---- fasce sotto le colonne ---- */
.gs7a-below { padding-top: var(--gs7a-s5); }
/* ---- niente tagli su schermi stretti ---- */
body.gs7-article .gs7a-head, body.gs7-article .gs7a-body, body.gs7-article .gs7a-verdict, body.gs7-article .gs7a-sidebar { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.gs7a-body .entry-content iframe, .gs7a-body .entry-content video, .gs7a-body .entry-content embed { max-width: 100%; }
.gs7a-body .entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.gs7a-body .entry-content pre { max-width: 100%; overflow-x: auto; }
.gs7a-head > * { max-width: min(60rem, 100%); }
/* ---- mobile e tablet ---- */
@media (max-width: 1024.98px) {
.gs7a-head-wrap { padding-top: var(--gs7a-s2); }
.gs7a-head { gap: var(--gs7a-s1); padding-bottom: var(--gs7a-s2); margin-bottom: var(--gs7a-s3); }
.gs7a-sidebar { margin-top: var(--gs7a-s4); }
body.gs7-article { --gs7a-body-size: 1.0625rem; }
}
/* anteprima dei video di YouTube (video.php, 2.12.0): miniatura 16:9 e play; l'iframe arriva al clic (gs7-article.js) */
.gs7a-body .gs7a-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 1.5em 0; border-radius: var(--gsb-radius, 0.5rem); overflow: hidden; background: #000; }
.gs7a-body .gs7a-yt img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; opacity: 0.9; transition: opacity var(--gsb-motion, 0.2s); }
.gs7a-body .gs7a-yt:hover img { opacity: 1; }
.gs7a-body .gs7a-yt__btn { position: absolute; inset: 0; display: block; text-decoration: none; }
.gs7a-body .gs7a-yt__btn:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.gs7a-body .gs7a-yt .gsb-play { width: 4rem; height: 4rem; }
.gs7a-body .gs7a-yt .gsb-play::before { border-width: 0.7rem 0 0.7rem 1.2rem; margin-left: 0.3rem; }
.gs7a-body .gs7a-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* dentro i contenitori 16:9 che si riservano lo spazio col padding (riquadro video, videofit di Kadence per gli incorporamenti): riempie il contenitore */
.gs7a-body .embed-container .gs7a-yt, .gs7a-body .videofit .gs7a-yt { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: 0; }
/* Video Injector (gamesource-extra): l'anteprima riempie il riquadro 16:9 del plugin (2.13.0) */
.gs7a-body .entry-content .blocco_youtube_container .gs7a-yt { margin: 0; border-radius: 0; }
/* guide (guide.php, 2.12.0): "Altre guide di ", titoli su due colonne allineate riga per riga */
.gs7a-guides { margin-top: var(--gs7a-s4); padding-top: var(--gs7a-s3); border-top: 1px solid var(--gsb-line); }
.gs7a-guides__title { margin: 0 0 0.5rem; font-family: var(--gsb-font-head); font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.gs7a-guides__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gs7a-s3); }
@media (min-width: 768px) { .gs7a-guides__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gs7a-guides__list li { margin: 0; padding: 0; }
.gs7a-guides__list a { display: block; height: 100%; padding: 0.55rem 0; border-bottom: 1px solid var(--gsb-line); color: var(--gsb-text); font-weight: 600; line-height: 1.35; text-decoration: none; }
.gs7a-guides__list a:hover { color: var(--gsb-accent); }
.gs7a-guides__more > summary { cursor: pointer; padding: 0.7rem 0 0.2rem; font-family: var(--gsb-font-head); font-weight: 700; color: var(--gsb-accent); }
.gs7a-guides__all { margin: 0.8rem 0 0; }
.gs7a-guides__all a { font-weight: 700; color: var(--gsb-accent); text-decoration: none; }
.gs7a-guides__all a:hover { text-decoration: underline; }