/* sv-theme — layer responsive aggiuntivo (caricato per ULTIMO).
   Il grosso del responsive vive in sv-theme-base.css (media query 1200/960/640
   della consegna). Qui collassiamo i grid che nel mockup erano stili INLINE
   nei componenti JSX e che nei template PHP hanno ricevuto una classe. */

/* ───────────────────────── ≤960 · TABLET ───────────────────────── */
@media (max-width: 960px) {
	/* Layout a 2 colonne → impilati */
	.medici-layout,
	.medico-layout,
	.pt-hero-grid,
	.pt-rwe-grid,
	.pf-form-grid,
	.care-cols,
	.pz-final-grid { grid-template-columns: 1fr !important; }

	/* Sidebar sticky → statiche quando impilate */
	.medici-layout > aside,
	.medico-layout > aside { position: static !important; }

	/* Griglie card 3-col → 2-col */
	.pt-prep-grid,
	.pt-articoli-grid,
	.ar-related-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.care-vantaggi-grid { grid-template-columns: repeat(2, 1fr) !important; }

	/* Card consulenza patologia: testo sopra, bottone sotto */
	.preliminary-cta { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ───────────────────────── ≤640 · MOBILE ───────────────────────── */
@media (max-width: 640px) {
	/* Griglie card → 1 colonna */
	.pt-prep-grid,
	.pt-articoli-grid,
	.ar-related-grid,
	.care-vantaggi-grid { grid-template-columns: 1fr !important; }

	/* Card medico archivio: foto+testo impilati, colonna destra full width */
	.medici-card { grid-template-columns: 1fr !important; gap: 16px !important; }
	.medici-card-right { text-align: left !important; align-items: flex-start !important; }
	.medici-card-right .btn { width: auto !important; }

	/* Tabella dettagli Clinn Care: righe compresse leggibili */
	.care-table-head { display: none !important; }
	.care-table-row {
		grid-template-columns: 1fr !important;
		gap: 4px !important;
		font-size: 14px !important;
		padding: 14px 18px !important;
	}
	/* Senza intestazione, ogni valore dice di che colonna è (Basic, CLINN Plus):
	   etichetta a sinistra, valore a destra, come la tabella di Percorso. */
	.care-table-row > span[data-etichetta] {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
	}
	.care-table-row > span[data-etichetta]::before {
		content: attr(data-etichetta);
		color: var(--ink-400);
		font-size: 13px;
		font-weight: 400;
		white-space: nowrap;
		flex-shrink: 0;
	}
	.care-table-row .care-valore { text-align: right; }

	/* Righe flex dei template con gap larghi */
	.row { flex-wrap: wrap; }

	/* Pagine degli ambiti clinici (giro mobile del 17 set 2026): un bottone con
	   un'etichetta lunga («Trova un medico per dolore oro-facciale», «Richiedi
	   consulenza preliminare gratuita») non andava a capo e allargava la colonna
	   oltre lo schermo, tagliando anche il testo accanto. */
	.pt-hero-grid .btn,
	.preliminary-cta .btn {
		white-space: normal;
		line-height: 1.3;
		text-align: center;
		max-width: 100%;
	}

	/* Card degli ambiti in home: la freccia resta accanto al titolo invece di
	   finire da sola sulla riga sotto (la regola .row qui sopra fa andare a capo). */
	.patologia-card > .row { flex-wrap: nowrap; }

	/* Footer: etichetta dei partner sopra i nomi, non in una colonna da 220px
	   che lasciava ai nomi un filo di spazio. */
	.footer-partners { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.footer-partner-row + .footer-partner-label { margin-top: 14px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Foto accanto al testo (29 set 2026). Nelle sezioni «foto + testo» i due lati
   sono `flex:1` su base zero: `.row { flex-wrap: wrap }` non li faceva mai andare
   a capo, e su telefono la foto restava una striscia di 100px accanto a un testo
   in colonna stretta. Sotto i 960px si impilano, con la foto SEMPRE sopra anche
   dove nel disegno desktop sta a destra (media-row-img). Stesso discorso per gli
   hero a griglia di Cannabis Card e Welcome Kit (media-grid): la seconda colonna,
   vuota finché non c'è la foto, lasciava al testo mezza riga. */
@media (max-width: 960px) {
	.media-row {
		flex-direction: column;
		align-items: stretch !important;
		gap: 32px !important;
	}
	.media-row > * { flex: none !important; width: 100%; min-width: 0; }
	.media-row > .media-row-img {
		order: -1;
		height: clamp(200px, 56vw, 340px) !important;
	}
	/* Negli hero il titolo resta primo, come nell'hero della home: la foto sotto. */
	.media-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
	.media-grid > .media-row-img { height: clamp(200px, 56vw, 340px) !important; }

	/* Modulo di richiamata in home: testo sopra, modulo sotto a tutta larghezza. */
	.callback-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }

	/* Fascia Academy dei professionisti: il bottone sotto il testo. */
	.academy-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: start; }
}
@media (max-width: 640px) {
	.callback-form { padding: 22px; }
}

/* Gli elementi di una griglia non si allargano oltre la loro traccia per colpa di
   una parola o di un bottone lunghi (min-width: auto di serie). */
@media (max-width: 960px) {
	.pt-hero-grid > *,
	.pt-rwe-grid > *,
	.preliminary-cta > * { min-width: 0; }
}

/* Video degli approfondimenti (campo ACF ar_video). oEmbed restituisce un
   iframe con width e height fissi, che sotto i 640px sfonda la colonna: il
   contenitore impone il rapporto 16:9 e l'iframe lo riempie. */
.ar-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.ar-video iframe,
.ar-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 14px;
}