/*
 * Esperienze (IT 4682 / EN 11181) - layout PROVVISORIO a 4 schede per riga (3 tra 1025 e 1199px), schede compatte.
 * Caricato solo su queste due pagine da functions.php (hb_esperienze_4col_css).
 * Per tornare al layout precedente: togliere quel blocco da functions.php (o cancellare questo file).
 *
 * In SiteOrigin le esperienze restano in 10 righe da 2 schede: su desktop righe e contenitori
 * di riga diventano "trasparenti" (display: contents) e le 20 celle finiscono in un'unica
 * griglia a 4 colonne, più larga del contenitore del tema (1170px) per sfruttare lo schermo.
 */

/* --- Schede compatte (tutte le larghezze) ------------------------------------------------- */
#pl-4682 .servizio .so-panel,
#pl-11181 .servizio .so-panel {margin-bottom: 14px;}
#pl-4682 .servizio .so-panel:last-child,
#pl-11181 .servizio .so-panel:last-child {margin-bottom: 0;}

#pl-4682 .servizio .titolo,
#pl-11181 .servizio .titolo {font-size: 22px;line-height: 1.25em;margin: 0;}
#pl-4682 .servizio .textwidget,
#pl-11181 .servizio .textwidget {font-size: 15px;line-height: 1.55em;}
#pl-4682 .servizio .textwidget p,
#pl-11181 .servizio .textwidget p {margin-bottom: 8px;}

/* tasti informativi (stile a cornice invariato, solo più compatti) */
#pl-4682 .sow-accordion .sow-accordion-panel,
#pl-11181 .sow-accordion .sow-accordion-panel {margin-bottom: 8px;}
#pl-4682 .sow-accordion .sow-accordion-panel-header,
#pl-11181 .sow-accordion .sow-accordion-panel-header {padding: 9px 16px;font-size: 14px;line-height: 1.3em;}
#pl-4682 .sow-accordion .sow-accordion-panel-border,
#pl-11181 .sow-accordion .sow-accordion-panel-border {padding: 12px 16px;font-size: 14px;line-height: 1.5em;}
#pl-4682 .sow-accordion .sow-accordion-panel-border ul,
#pl-11181 .sow-accordion .sow-accordion-panel-border ul {padding-left: 18px;margin-bottom: 8px;}

/* --- Desktop: griglia unica a tutta larghezza, margini laterali ridotti ---------------------- */
@media (min-width: 1025px) {
	#pl-4682,
	#pl-11181 {
		--esp-width: min(1760px, calc(100vw - 48px));
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 56px;
		align-items: start;
		width: var(--esp-width);
		margin: 0 0 90px calc((100% - var(--esp-width)) / 2);
		padding-top: 60px;
	}
	#pl-4682 > .panel-grid,
	#pl-11181 > .panel-grid,
	#pl-4682 > .panel-grid > .panel-row-style,
	#pl-11181 > .panel-grid > .panel-row-style {display: contents;}
	#pl-4682 > .panel-grid > .panel-row-style > .panel-grid-cell,
	#pl-11181 > .panel-grid > .panel-row-style > .panel-grid-cell {width: auto;margin: 0;}
}
/* 4 per riga dai 1200px (fino al 16/10 dai 1400px: sui portatili da 1366px la cliente vedeva 3 schede) */
@media (min-width: 1200px) {
	#pl-4682,
	#pl-11181 {grid-template-columns: repeat(4, minmax(0, 1fr));}
}

/* --- Tablet: 2 per riga (layout SiteOrigin), solo spazi ridotti ---------------------------- */
@media (min-width: 781px) and (max-width: 1024px) {
	#pl-4682 > .panel-grid > .panel-row-style,
	#pl-11181 > .panel-grid > .panel-row-style {padding-top: 50px;}
	#pl-4682 > .panel-grid,
	#pl-11181 > .panel-grid {margin-bottom: 0;}
}

/* --- Mobile: 1 per riga (layout SiteOrigin), spazi ridotti --------------------------------- */
@media (max-width: 780px) {
	#pl-4682 > .panel-grid > .panel-row-style,
	#pl-11181 > .panel-grid > .panel-row-style {padding-top: 40px;}
	#pl-4682 > .panel-grid,
	#pl-11181 > .panel-grid {margin-bottom: 0;}
	#pl-4682 .panel-grid-cell,
	#pl-11181 .panel-grid-cell {margin-bottom: 40px;}
}