/* ===========================================================================
   sv-responsive.css — layer responsive autoritativo. Caricato per ULTIMO.

   Il design usa già griglie auto-fit che si impilano da sole: qui restano le
   cose che le griglie non sanno fare.
   - ≤ 760px (dalle note di sviluppo): menu a comparsa col pulsante ≡, colonne
     impilate, player del ricordo non più fisso a lato.
   - ≤ 640px: padding 16px, titoli contenuti, niente testo che sfora.
   =========================================================================== */

/* ============ ≤ 960px ============ */
@media (max-width: 960px) {
	:root { --gutter: 20px; }
}

/* ============ ≤ 760px: menu a comparsa ============ */
@media (max-width: 760px) {
	#main-nav .nav-burger { display: grid !important; }
	#main-nav .nav-links {
		display: none !important;
		width: 100%; flex-direction: column; align-items: stretch; gap: 8px;
		padding: 4px 0 6px;
	}
	#main-nav.nav-open .nav-links { display: flex !important; }
	#main-nav .nav-links a { text-align: center; padding: 12px 15px; font-size: 13px; }

	.admin-bar .site-header { top: 0; }
}

/* ============ ≤ 640px (mobile) ============ */
@media (max-width: 640px) {
	:root { --gutter: 16px; }
	.container { padding-left: 16px !important; padding-right: 16px !important; }

	.brand-name { font-size: 19px; }
	.brand-tag { letter-spacing: .24em; }

	/* Le righe che il design teneva su una riga sola devono poter andare a capo. */
	.eyebrow, .rc-card-a { white-space: normal !important; }

	img, video, iframe, svg { max-width: 100%; }
	table { display: block; overflow-x: auto; }

	/* Su mobile tutti i bottoni vanno a tutta larghezza: più facili da colpire
	   col pollice e allineati fra loro (hero, settimana, "Tutti i ricordi", 404). */
	.btn { width: 100%; padding: 15px 22px; }
	.hp-actions, .hp-settimana-actions { flex-direction: column; align-items: stretch; }
	.hp-settimana-nota { max-width: none; text-align: center; }
	.hp-alcuni-head { flex-direction: column; align-items: stretch; }
	.foot-bottom { flex-direction: column; gap: 6px; }
}

/* ============ ≤ 400px ============ */
@media (max-width: 400px) {
	.rc-grid { grid-template-columns: 1fr !important; }
}