/* ==========================================================================
   Breakpoint. Mobile (< 768px) è la base; qui solo ciò che cambia salendo.
   Tablet: 768–1023px. Desktop: da 1024px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.game-data__grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	.game-reqs__grid {
		grid-template-columns: 1fr 1fr;
	}

	.game-media__shots {
		grid-auto-columns: 38%;
	}

	.game-dlc__list {
		grid-template-columns: 1fr 1fr;
	}

	.review-filters__field select {
		font-size: var(--text-sm);
	}

	.guide-hubs__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}

	.guide-focus__cover {
		grid-row: span 2;
		width: 112px;
	}

	.guide-focus__actions {
		grid-column: 2;
	}

	.guide-focus__actions .btn {
		flex: 0 0 auto;
	}

	.guide-focus__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 4px var(--space-3);
	}

	.guide-focus__facts li + li::before {
		content: "·";
		margin-right: var(--space-3);
	}

	:root {
		--gutter: var(--space-5);
		--text-body: 1.0625rem; /* 17 */
		--text-h1: 2.125rem;    /* 34 */
	}

	.page-pad {
		padding-top: var(--space-5);
	}

	/* Chip: su schermi ampi vanno a capo invece di scorrere. */
	.chips {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.rail {
		grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4);
		gap: var(--space-4);
	}

	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--games {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-4);
	}

	.feed--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-hero__side {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-card--main {
		aspect-ratio: 16 / 9;
	}

	.hero-card--main .hero-card__title {
		font-size: var(--text-3xl);
	}

	.quick-search {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		align-items: center;
		gap: var(--space-4) var(--space-6);
	}

	.quick-search .chips {
		grid-column: 1 / -1;
	}

	.game-hero {
		grid-template-columns: 180px 1fr;
		gap: var(--space-5) var(--space-6);
		padding: var(--space-5);
	}

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

	/* Da tablet la descrizione torna accanto alla cover, sotto i dati. */
	.game-hero {
		grid-template-rows: auto 1fr;
	}

	.game-hero__cover {
		grid-row: 1 / span 2;
	}

	.game-hero__more {
		grid-column: 2;
		align-self: start;
	}

	.row-card {
		grid-template-columns: 88px 1fr auto;
	}

	.site-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	.site-footer__nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.grid--team,
	.grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.author-hero__card {
		grid-template-columns: auto 1fr;
		justify-items: start;
		align-items: center;
		gap: var(--space-6);
		padding: var(--space-6);
		text-align: left;
	}

	.author-hero__body {
		justify-items: start;
	}
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.achievements {
		grid-template-columns: 1fr 1fr;
	}

	.guide-hubs__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	:root {
		--gutter: var(--space-6);
		--header-height: 68px;
		--text-body: 1.125rem; /* 18 */
		--text-h1: 2.5rem;     /* 40 */
	}

	/* Niente bottom nav: la navigazione è nell'header. */
	body {
		padding-bottom: 0;
	}

	.bottom-nav,
	.reading-dock,
	.site-header__menu {
		display: none;
	}

	.sheet {
		margin: auto;
		border-radius: var(--radius-xl);
	}

	.toast {
		bottom: 24px;
	}

	.site-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: var(--space-6);
	}

	.site-header__inner > .brand {
		justify-self: start;
	}

	.main-nav {
		display: block;
	}

	.site-header__toggle {
		display: inline-grid;
	}

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

	/* Hero: una storia grande, al massimo due secondarie impilate. */
	.home-hero {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--space-4);
	}

	.home-hero__side {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
		gap: var(--space-4);
	}

	.hero-card--main {
		aspect-ratio: auto;
		min-height: 460px;
	}

	.hero-card--main .hero-card__body {
		padding: var(--space-6);
	}

	.hero-card:not(.hero-card--main) {
		aspect-ratio: auto;
		min-height: 0;
	}

	.hero-card:not(.hero-card--main) .hero-card__title {
		font-size: var(--text-xl);
	}

	.hero-card__excerpt {
		font-size: var(--text-md);
	}

	.rail {
		grid-auto-columns: calc((100% - 5 * var(--space-4)) / 6);
		margin-inline: 0;
		padding-inline: 0;
	}

	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}

	.grid--games {
		grid-template-columns: repeat(6, 1fr);
	}

	.grid--team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.section-head__title {
		font-size: var(--text-2xl);
	}

	.feed--2 {
		gap: var(--space-4);
	}

	.row-card {
		grid-template-columns: 96px 1fr auto;
		gap: var(--space-4);
	}

	.row-card__title {
		font-size: var(--text-md);
	}

	.game-hero {
		grid-template-columns: 220px 1fr;
		padding: var(--space-6);
	}

	.game-hero__title {
		font-size: 2.75rem;
	}

	.tabs {
		margin-inline: 0;
		padding-inline: 0;
	}

	.entry-content .alignwide {
		margin-inline: -120px;
	}

	.entry-content .alignfull {
		margin-inline: calc(50% - 50vw);
	}

	.search-dialog {
		margin-top: var(--space-6);
		border-top: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}
}

/* Hover solo dove esiste davvero (niente stati "appiccicati" su touch). */
@media (hover: none) {
	.hero-card:hover .hero-card__media img,
	.game-card:hover .game-card__media img {
		transform: none;
	}
}

/* Stampa: solo il contenuto, niente navigazione. */
@media print {
	.site-header,
	.bottom-nav,
	.site-footer,
	.tabs,
	.search-form,
	.chips,
	.favorite-btn,
	.related-cluster,
	.comments,
	dialog {
		display: none !important;
	}

	body {
		padding: 0;
		background: #FFFFFF;
		color: #000000;
	}

	.entry-content a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}

/* Posizioni pubblicitarie: spazio riservato e dispositivo. */
@media (min-width: 1024px) {
	.ad-slot,
	.pd-place {
		--ad-min: var(--ad-min-d, 0px);
	}

	.ad-slot--desktop {
		display: flex;
	}

	.ad-slot--mobile {
		display: none;
	}

	.game-box {
		padding: var(--space-5);
	}

	.game-box__head {
		grid-template-columns: 88px minmax(0, 1fr);
	}

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

	.review-filters__row {
		grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	}

	.review-filters__actions {
		grid-column: auto;
	}

	.review-filters__actions .btn {
		flex: none;
	}
}

/* Prossime uscite */
@media (min-width: 768px) {
	.hyped__rail {
		grid-auto-columns: 22%;
	}

	.release-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.release {
		grid-template-columns: 52px 96px minmax(0, 1fr);
	}
}

@media (min-width: 1024px) {
	.hyped__rail {
		grid-auto-columns: calc((100% - 7 * var(--space-3)) / 8);
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* Il mio PopDay */
@media (min-width: 768px) {
	.me-status {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.me-status__actions {
		grid-column: auto;
	}

	.me-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.snackbar {
		right: auto;
		bottom: 24px;
		left: 50%;
		width: 520px;
		transform: translate(-50%, 12px);
	}

	.snackbar.is-visible {
		transform: translate(-50%, 0);
	}
}

/* Espansioni: due schede per riga dal tablet, copertine più grandi. */
@media (min-width: 768px) {
	.dlc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dlc-card {
		grid-template-columns: 110px minmax(0, 1fr);
	}
}