/* ==========================================================================
   Layout dei template: homepage, articolo, hub gioco, archivi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Homepage
   -------------------------------------------------------------------------- */

.home-layout {
	display: grid;
	gap: var(--space-7);
}

.home-hero {
	display: grid;
	gap: var(--space-3);
}

.home-hero__side {
	display: grid;
	gap: var(--space-3);
}

.quick-search {
	display: grid;
	gap: var(--space-4);
}

.quick-search__text {
	margin-top: var(--space-1);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.home-section + .home-section {
	margin-top: var(--space-2);
}

.page-pad > .home-section + .home-section,
.page-pad > .page-header + .home-section {
	margin-top: var(--space-6);
}

/* In homepage lo spazio tra le sezioni lo dà solo la griglia (prima margine + gap si sommavano). */
.home-layout > .home-section + .home-section {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Intestazioni di archivio e pagina
   -------------------------------------------------------------------------- */

.page-header {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.page-header__title {
	font-size: var(--text-h1);
}

.page-header__title--center {
	text-align: center;
	margin-top: var(--space-5);
}

.page-header__desc {
	max-width: 70ch;
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Articolo
   -------------------------------------------------------------------------- */

.article-header {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.article-header__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.article-rubric {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--accent-text);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 700;
}

.article-rubric__label {
	color: var(--text-muted);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.article-rubric:hover {
	text-decoration: underline;
}

.article-header__title {
	font-size: var(--text-h1);
	line-height: 1.15;
}

.article-header__subtitle {
	color: var(--text-muted);
	font-size: var(--text-lg);
	line-height: 1.5;
}

.article-media {
	max-width: 1040px;
	margin: 0 auto var(--space-5);
}

.article-media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.article-media figcaption {
	margin-top: var(--space-2);
	color: var(--text-muted);
	font-size: var(--text-xs);
	text-align: center;
}

.article-section {
	margin-top: var(--space-7);
}

.article-section h2 {
	margin-bottom: var(--space-4);
	font-size: var(--text-xl);
}

.related-cluster {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
	.related-cluster {
		margin-top: var(--space-7);
		padding-top: var(--space-6);
	}
}

/* Corpo del testo: larghezza di lettura, ritmo verticale generoso. */
.entry-content {
	font-size: var(--text-body);
	line-height: var(--leading-body);
	overflow-wrap: break-word;
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content h2 {
	margin-top: 2em;
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
}

.entry-content h3 {
	margin-top: 1.6em;
	font-size: var(--text-lg);
}

.entry-content h4 {
	margin-top: 1.4em;
	font-size: var(--text-md);
}

.entry-content a {
	color: var(--accent-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content a:hover {
	text-decoration-thickness: 2px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content li::marker {
	color: var(--accent);
}

.entry-content strong {
	font-weight: 700;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
	position: relative;
	margin-inline: 0;
	padding: var(--space-4) var(--space-5);
	border: 0;
	border-left: 4px solid var(--accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--surface-1);
	font-size: var(--text-lg);
}

.entry-content blockquote cite,
.entry-content .wp-block-pullquote cite {
	display: block;
	margin-top: var(--space-2);
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-style: normal;
	font-weight: 700;
}

.entry-content blockquote cite::before {
	content: "— ";
}

/* Citazione in evidenza: grande, centrata, con virgolette decorative. */
.entry-content .wp-block-pullquote {
	margin-block: 2em;
	padding: var(--space-6) var(--space-4) var(--space-5);
	border: 0;
	border-block: 2px solid var(--accent);
	text-align: center;
}

.entry-content .wp-block-pullquote blockquote {
	padding: 0;
	border: 0;
	background: none;
}

.entry-content .wp-block-pullquote blockquote::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	color: var(--accent);
	font-family: var(--font-heading);
	font-size: 4rem;
	line-height: 1;
}

.entry-content .wp-block-pullquote p {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
}

.entry-content .wp-block-pullquote cite::before {
	content: none;
}

.entry-content img,
.entry-content .wp-block-image img {
	border-radius: var(--radius-md);
}

.entry-content figure {
	margin-inline: 0;
}

/* Didascalie: piccole, leggibili, con un segno del colore del sito. */
.entry-content figcaption,
.entry-content .wp-element-caption {
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
	margin-top: var(--space-2);
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.45;
	text-align: left;
}

.entry-content figcaption::before,
.entry-content .wp-element-caption::before {
	content: "";
	flex: none;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
	transform: translateY(-3px);
}

.entry-content .wp-block-gallery {
	gap: var(--space-2);
}

.entry-content .wp-block-gallery .wp-block-image img {
	border-radius: var(--radius-sm);
}

/* Video e contenuti incorporati: 16:9, angoli arrotondati, fondo mentre caricano. */
.entry-content .wp-block-embed__wrapper {
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--surface-2);
}

.entry-content .wp-block-embed.wp-has-aspect-ratio iframe,
.entry-content .wp-block-embed.is-type-video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/*
 * Tabelle: righe alternate, intestazione in evidenza. Il riquadro (figure) non
 * scorre: scorre solo la tabella dentro .table-scroll (aggiunto da PHP), così
 * la didascalia resta ferma. Si scorre solo se la tabella non ci sta davvero.
 */
.entry-content .wp-block-table {
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--bg);
}

.entry-content .table-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	background:
		linear-gradient(to right, var(--bg) 30%, transparent) left / 24px 100% no-repeat local,
		linear-gradient(to left, var(--bg) 30%, transparent) right / 24px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.22), transparent) left / 10px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), transparent) right / 10px 100% no-repeat scroll;
	-webkit-overflow-scrolling: touch;
}

.entry-content .table-scroll:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.entry-content .table-hint {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	padding: 6px var(--space-3);
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
}

.entry-content .table-hint[hidden] {
	display: none;
}

.entry-content .wp-block-table:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.entry-content .wp-block-table figcaption {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-top: 1px solid var(--border);
	background: var(--surface-1);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	line-height: 1.45;
}

.entry-content th,
.entry-content td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: var(--space-3);
	border: 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th,
.entry-content .wp-block-table thead {
	border: 0;
}

.entry-content th {
	background: var(--surface-2);
	color: var(--text);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.entry-content tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}

/*
 * Stile "Strisce" del blocco Tabella: WordPress colora le righe dispari di
 * grigio fisso (#f0f0f0), illeggibile in tema scuro. Le strisce le fa il tema,
 * con i colori di chiaro e scuro.
 */
.entry-content .wp-block-table.is-style-stripes table,
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: transparent;
}

.entry-content .wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.entry-content tbody tr:last-child td {
	border-bottom: 0;
}

.entry-content td:first-child {
	font-weight: 700;
}

@media (max-width: 767px) {
	/*
	 * Su telefono la tabella va a capo e sta nella larghezza; ogni colonna ha
	 * una larghezza minima leggibile, e solo se la somma non ci sta si scorre.
	 */
	.entry-content .wp-block-table th {
		white-space: normal;
	}

	.entry-content .wp-block-table :is(td, th) {
		min-width: 6.5em;
		padding: var(--space-2) var(--space-3);
	}

	.entry-content .wp-block-table :is(td, th):first-child {
		min-width: 8em;
	}

	/* Tabella che scorre davvero (classe da navigation.js): prima colonna ferma. */
	.entry-content .table-scroll.is-scrollable :is(td, th):first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		max-width: 42vw;
		background: var(--bg);
		box-shadow: 1px 0 0 var(--border);
	}

	.entry-content .table-scroll.is-scrollable thead th:first-child {
		background: var(--surface-2);
	}

	.entry-content .table-scroll.is-scrollable tbody tr:nth-child(even) td:first-child {
		background: color-mix(in srgb, var(--surface-2) 50%, var(--bg));
	}
}

.entry-content hr {
	height: 1px;
	border: 0;
	background: var(--border);
	margin-block: 2em;
}

.entry-content code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--surface-2);
	font-size: 0.9em;
}

.entry-content .alignwide,
.entry-content .alignfull {
	margin-inline: calc(var(--gutter) * -1);
}

/* Immagine a tutta larghezza: la didascalia resta allineata al testo. */
.entry-content .alignwide > figcaption,
.entry-content .alignfull > figcaption {
	padding-inline: var(--gutter);
}

.entry-content .wp-block-button__link {
	border-radius: var(--radius-sm);
	background: var(--accent-fill);
	color: var(--on-accent);
	text-decoration: none;
}

.page-links {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Hub gioco
   -------------------------------------------------------------------------- */

.game-hero {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: var(--space-4);
	align-items: start;
	margin: var(--space-4) 0 var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb, 255, 10, 122), 0.1), transparent 55%),
		var(--surface-1);
}

.game-hero__cover {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--surface-3);
	box-shadow: var(--shadow-md);
}

.game-hero__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.game-hero__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.game-hero__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
}

.game-hero__title {
	font-size: var(--text-2xl);
}

.game-hero__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	min-width: 0;
}

.game-hero__heading {
	align-self: stretch;
}

.game-hero__studio {
	margin-top: calc(var(--space-2) * -1);
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.game-hero__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
}

.game-hero__facts:empty {
	display: none;
}

/* Su mobile descrizione e CTA occupano tutta la larghezza sotto la cover. */
.game-hero__more {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	grid-column: 1 / -1;
}

.game-hero__desc {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.game-hero .btn {
	align-self: flex-start;
}

/*
 * Mobile: accanto alla cover solo titolo, Segui e studio; piattaforme, generi,
 * data e acquisto a tutta larghezza sotto. Prima la colonna stretta a destra
 * impilava i chip uno per riga e lasciava vuoto lo spazio sotto la cover.
 */
@media (max-width: 767px) {
	.game-hero {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: var(--space-3) var(--space-4);
		align-items: center;
	}

	.game-hero__body {
		display: contents;
	}

	.game-hero__body > :not(.game-hero__top) {
		grid-column: 1 / -1;
	}

	.game-hero__title {
		font-size: clamp(1.25rem, 5.6vw, var(--text-2xl));
		line-height: 1.15;
		overflow-wrap: anywhere;
	}

	.game-hero__heading {
		gap: var(--space-2);
	}

	.game-hero__heading .btn {
		min-height: 36px;
		padding-inline: var(--space-3);
	}

	.game-hero__studio {
		margin-top: calc(var(--space-1) * -1);
		font-size: var(--text-xs);
	}

	.game-hero .platforms {
		margin: 0;
	}

	.game-hero__more .buy__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	}

	.game-hero__more .buy__btn {
		justify-content: center;
		padding-inline: var(--space-3);
	}
}

.hub-section {
	margin-bottom: var(--space-7);
	scroll-margin-top: calc(var(--header-height) + 64px);
}

/* --------------------------------------------------------------------------
   Commenti
   -------------------------------------------------------------------------- */

.comments {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border);
	scroll-margin-top: calc(var(--header-height) + 16px);
}

.comments__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.comments__title {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	font-size: var(--text-xl);
}

.comments__title svg {
	width: 24px;
	height: 24px;
	color: var(--accent-text);
}

/* Migliori / Recenti: interruttore a pillola. */
.comments__sort {
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: var(--surface-2);
}

.comments__sort a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--space-4);
	border-radius: 999px;
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}

.comments__sort a[aria-current="true"] {
	background: var(--surface-1);
	box-shadow: var(--shadow-sm);
	color: var(--text);
}

.comments__empty {
	padding: var(--space-5);
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
	color: var(--text-muted);
	text-align: center;
}

/* Telefono: meno vuoto, titolo e "Segui la discussione" sulla stessa riga. */
@media (max-width: 767px) {
	.comments {
		margin-top: var(--space-6);
		padding-top: var(--space-5);
	}

	.comments__head {
		flex-wrap: nowrap;
		margin-bottom: var(--space-4);
	}

	.comments__head:has(.comments__sort) {
		flex-wrap: wrap;
	}

	.comments__title {
		min-width: 0;
		font-size: var(--text-lg);
	}

	.comments__title svg {
		width: 20px;
		height: 20px;
	}

	.comments__follow {
		flex-shrink: 0;
		font-size: var(--text-xs);
	}

	.comments__empty {
		padding: var(--space-3) var(--space-4);
		font-size: var(--text-sm);
	}
}

.comments__list,
.comments__list .children {
	display: grid;
	gap: var(--space-3);
	list-style: none;
}

.comments__list .children {
	margin-top: var(--space-3);
	padding-left: var(--space-4);
	border-left: 2px solid var(--border);
}

.comment-card {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-md);
	background: var(--surface-1);
}

.comment--top > .comment-card {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm);
}

.comment-card__avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.comment-card__main {
	display: grid;
	flex: 1;
	gap: var(--space-2);
	min-width: 0;
}

.comment-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--space-2);
	align-items: center;
}

.comment-card__author {
	font-weight: 700;
}

.comment-card__time {
	display: inline-flex;
	align-items: center;
	flex-basis: 100%;
	min-height: 24px;
	color: var(--text-muted);
	font-size: var(--text-xs);
	text-decoration: none;
}

.comment-card__text {
	overflow-wrap: anywhere;
}

.comment-card__text p + p {
	margin-top: var(--space-2);
}

.comment-card__pending {
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 600;
}

/* Badge: livello del commentatore, Redazione, Commento top. */
.comment-badge {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.comment-badge svg {
	width: 13px;
	height: 13px;
}

.comment-badge--staff,
.comment-badge--top {
	background: var(--accent-fill);
	color: var(--on-accent);
}

.comment-badge--level-veterano {
	background: color-mix(in srgb, var(--score-high) 18%, transparent);
	color: var(--score-high);
}

.comment-badge--level-leggenda {
	background: color-mix(in srgb, var(--score-mid) 20%, transparent);
	color: var(--score-mid);
}

.comment-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.comment-votes {
	position: relative;
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: 999px;
}

.comment-votes.is-busy {
	opacity: 0.7;
}

.comment-votes[data-error]::after {
	content: attr(data-error);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	z-index: 5;
	padding: 4px 8px;
	border-radius: var(--radius-xs);
	background: var(--text);
	color: var(--bg);
	font-size: var(--text-xs);
	white-space: nowrap;
}

.comment-vote {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-width: 44px;
	min-height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
}

.comment-vote svg {
	width: 18px;
	height: 18px;
}

.comment-vote:hover {
	background: var(--surface-2);
	color: var(--text);
}

.comment-vote--up[aria-pressed="true"] {
	background: var(--accent-fill);
	color: var(--on-accent);
}

.comment-vote--down[aria-pressed="true"] {
	background: var(--text);
	color: var(--bg);
}

.comment-vote.is-pop svg {
	animation: popday-vote-pop 0.35s var(--ease);
}

@keyframes popday-vote-pop {
	40% {
		transform: scale(1.35) rotate(-8deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.comment-vote.is-pop svg {
		animation: none;
	}
}

.comment-reply-link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}

.comment-reply-link svg {
	width: 18px;
	height: 18px;
}

.comment-reply-link:hover {
	background: var(--surface-2);
	color: var(--text);
}

/* Modulo */

.comment-respond {
	margin-top: var(--space-6);
	padding: var(--space-5);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
}

.comments__list .comment-respond {
	margin-top: var(--space-3);
}

.comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-4);
	font-size: var(--text-lg);
}

.comment-reply-title small a {
	color: var(--accent-text);
	font-size: var(--text-sm);
}

.comment-form {
	display: grid;
	gap: var(--space-4);
}

.comment-form label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--text-sm);
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: var(--tap);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	font-size: var(--text-md);
}

.comment-form textarea {
	min-height: 110px;
	resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: var(--glow);
}

.comment-form-cookies-consent {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	font-size: var(--text-sm);
}

.comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.comment-form .form-submit {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Chi siamo, Contatti, pagine legali
   -------------------------------------------------------------------------- */

.about-section {
	margin-top: var(--space-7);
}

.grid--team,
.grid--2 {
	grid-template-columns: 1fr;
}

.contact-cards {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.legal .toc {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Pagina autore
   -------------------------------------------------------------------------- */

.author-hero {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.author-hero__card {
	display: grid;
	justify-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb, 255, 10, 122), 0.1), transparent 55%),
		var(--surface-1);
	text-align: center;
}

.author-hero__avatar {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	box-shadow: var(--shadow-md);
}

.author-hero__body {
	display: grid;
	justify-items: center;
	gap: var(--space-2);
}

.author-hero__name {
	font-size: var(--text-h1);
}

.author-hero__job {
	color: var(--accent-text);
	font-weight: 600;
}

.author-hero__bio {
	max-width: 62ch;
	color: var(--text-muted);
	line-height: 1.6;
}

.author-hero__bio p + p {
	margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Hub gioco: generi e fonti
   -------------------------------------------------------------------------- */

.game-hero__genres {
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
}

.game-hero__credits {
	grid-column: 1 / -1;
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.game-hero__credits a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.game-hero__credits a:hover {
	color: var(--accent-text);
}

/* Link informativi nel menu mobile */
.drawer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin-bottom: var(--space-3);
	list-style: none;
}

.drawer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.drawer__links a:hover {
	color: var(--accent-text);
}