/* ============================================================
   STACOSA — MOBILE ONLY
   Questo file carica SOLO su schermi sotto i 900px.
   Non serve scrivere @media qui dentro: tutto il contenuto
   di questo file è già mobile-only per come viene caricato.
   ============================================================ */

/* ============ FASCIA CURIOSITA — colonna unica ============ */
.stacosa-curiosita-list {
	grid-template-columns: 1fr !important;
}

.stacosa-curiosita-sub {
	font-size: 14px;
}

.stacosa-curiosita-meta {
	font-size: 13px;
}

/* ============ ESPLORA PER ARGOMENTO — colonna unica ============ */
body .stacosa-esplora-grid {
	grid-template-columns: 1fr !important;
}

/* ============ GRIGLIA CARD HOME — sottotitolo più leggibile ============ */
.stacosa-card p {
	font-size: 15px;
}

/* ============ ESPLORA — fix span title-block (causa reale 2 colonne) ============ */
body .stacosa-esplora-title-block {
	grid-column: span 1 !important;
}

/* ============ SINGLE — nascondo titolo articolo nell'header ============ */
.stacosa-header-articolo-corrente {
	display: none !important;
}

/* ============ SINGLE — riduco padding laterale layout ============ */
body .stacosa-single-layout {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* ============ FIX GLOBALE — overflow orizzontale da drawer menu ============ */
body {
	overflow-x: hidden !important;
}

/* ============ FIX drawer: posizione fisica fuori viewport (non solo transform) ============ */
body .stacosa-mobile-menu {
	right: -320px !important;
}
body .stacosa-mobile-menu.is-aperto {
	right: 0 !important;
}

/* ============ FIX definitivo overflow: max-width forzato su html/body ============ */
html, body {
	max-width: 100vw !important;
	overflow-x: hidden !important;
}

/* ============ SINGLE — fascia finale, colonna unica ============ */
body .stacosa-single-fine-grid {
	grid-template-columns: 1fr !important;
}

/* ============ SINGLE — byline: autore sopra, social sotto ============ */
body .stacosa-single-byline {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 16px !important;
}

/* ============ SINGLE — sottotitolo e descrizione più leggibili ============ */
body .stacosa-single-subtitle {
	font-size: 22px !important;
}
body .stacosa-single-description {
	font-size: 17px !important;
}

/* ============ SIDEBAR — titoli e sottotitoli correlati più leggibili ============ */
body .stacosa-correlato-title {
	font-size: 17px !important;
}
body .stacosa-correlato-sub {
	font-size: 14px !important;
}

/* ============ SIDEBAR — titoli sezione (GIÀ CHE CI SEI, PIÙ POPOLARI, TOC) ============ */
body .stacosa-toc-title {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	font-size: 16px !important;
	text-transform: uppercase;
}

/* ============ SINGLE — dimensiono icona dado (era emoji, ora PNG) ============ */
body .stacosa-dice {
	width: 20px !important;
	height: 20px !important;
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
}

/* ============ FONT ANTON — completamento su titoli mancanti ============ */
body .stacosa-esplora-title-block h2 {
	font-family: 'Anton', sans-serif;
}
body .stacosa-box-20sec-title {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
}

/* ============ TOC — su mobile mostro solo la copia sopra il testo ============ */
body .stacosa-toc-mobile-copy {
	display: block !important;
}
body .stacosa-toc-desktop-copy {
	display: none !important;
}

/* ============ ARCHIVIO HERO — rimuovo spazio vuoto tra ricerca e mascotte ============ */
body .stacosa-archivio-hero-right {
	flex: none !important;
	width: 100% !important;
}

/* ============ ARCHIVIO HERO — riduco gap verticale mobile ============ */
body .stacosa-archivio-hero {
	gap: 8px !important;
}

/* ============ ARCHIVIO HERO — ancora più su ============ */
body .stacosa-archivio-hero {
	gap: 0 !important;
}
body .stacosa-archivio-mascotte {
	margin-top: -20px !important;
}

/* ============ ARCHIVIO HERO — ancora più su v2 ============ */
body .stacosa-archivio-mascotte {
	margin-top: -60px !important;
}

/* ============ ARCHIVIO HERO — valore preciso da misurazione ============ */
body .stacosa-archivio-mascotte {
	margin-top: -140px !important;
}

/* ============ ARCHIVIO — categorie: layout semplice mobile ============ */
body .stacosa-archivio-categorie {
	justify-content: flex-start !important;
	gap: 6px !important;
}

/* ============ ARCHIVIO — alfabeto su più righe, lettere più grandi ============ */
body .stacosa-archivio-alfabeto {
	justify-content: flex-start !important;
	gap: 6px !important;
}
body .stacosa-lettera {
	flex: none !important;
	width: 32px !important;
	height: 32px !important;
	font-size: 16px !important;
}