/* ============================================================================
 * Sede GEO LP — stili dei nuovi section part (elements/sede/*).
 * Caricato solo su is_singular('sede') (vedi functions.php).
 * Le classi globali del tema (.accordion, .testimonial, .slider, .box50,
 * .primaryTrasparentBackground, .general-module, .press, .faqs-title) NON sono
 * ridefinite qui: vivono in style.css o nei componenti riusati.
 * Riferimento markup/classi: docs/anteprima-sede-seregno.html
 * ========================================================================= */

/* ===== HERO sede (layout rev. 2 — 2 colonne con form primario) ===== */
.sede-hero {
	background-color: var(--primary);
	color: #fff;
	padding: 50px 0 60px;
}
.sede-hero-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: start;
}
.sede-hero-copy { padding-top: 6px; }
/* H1 = riga keyword stilizzata PICCOLA (occhiello/kicker); resta l'unico <h1> della pagina */
.sede-hero h1 {
	display: block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.3;
	margin: 0 0 12px;
	color: #fff;
	opacity: .95;
}
/* H2 = gancio, elemento visivamente dominante della hero */
.sede-hero .hero-headline {
	font-size: calc(var(--big) + 14px);
	font-weight: 700;
	line-height: 1.12;
	margin: 0 0 18px;
	color: #fff;
}
.sede-hero .hero-lead {
	font-size: var(--medium);
	font-weight: 400;
	margin: 0 0 14px;
	line-height: 1.45;
}
.sede-hero .sub {
	font-size: var(--medium);
	font-weight: 300;
	margin: 0 0 26px;
	line-height: 1.45;
}
.sede-hero .usp {
	list-style: none;
	padding: 0;
	/* spazio tra il blocco titoli (H1 + H2 brand / sottotitolo) e i vantaggi */
	margin: 28px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sede-hero .usp li {
	position: relative;
	padding-left: 36px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
}
.sede-hero .usp li:before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sede-hero .trust {
	font-size: 14px;
	margin: 0;
	opacity: .92;
}
/* Colonna destra: pannello CTA compatto (il form vive in fondo, #form-contatti). */
.sede-hero-cta {
	background: #fff;
	color: var(--black);
	border-radius: 20px;
	padding: 44px 30px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
	align-self: center;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.sede-hero-cta .hero-cta-title {
	font-size: var(--medium);
	color: var(--primary);
	margin: 0;
	line-height: 1.25;
	font-weight: 600; /* microcopy ora <p>: ripristina il peso che aveva da <h3> (no cambio visivo) */
}
.sede-hero-cta .hero-cta-write,
.sede-hero-cta .hero-cta-call {
	display: inline-block;
	min-width: 230px;
	padding: 15px 32px;
	border-radius: 100px;
	font-weight: 600;
	text-decoration: none;
}
.sede-hero-cta .hero-cta-write { background: var(--primary); color: #fff; }
.sede-hero-cta .hero-cta-write:hover { opacity: .9; color: #fff; }
.sede-hero-cta .hero-cta-call {
	background: transparent;
	color: var(--primary);
	border: 2px solid var(--primary);
}
.sede-hero-cta .hero-cta-call:hover { background: rgba(39, 132, 152, .08); color: var(--primary); }
@media (max-width: 991px) {
	.sede-hero-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 767px) {
	.sede-hero h1 { font-size: 15px; }
	.sede-hero .hero-headline { font-size: 32px; }
	.sede-hero-cta .hero-cta-write,
	.sede-hero-cta .hero-cta-call { min-width: 0; width: 100%; }
}

/* ===== CTA ricorrente (blocco parametrico, cadenza ~ogni 2 sezioni) ===== */
.cta-ricorrente { background: var(--primary); color: #fff; }
.cta-ricorrente-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	/* solo verticale: il padding orizzontale lo dà .box50 (50px desktop / 20px mobile) */
	padding-top: 28px;
	padding-bottom: 28px;
	flex-wrap: wrap;
}
.cta-ricorrente-copy {
	font-size: var(--medium);
	font-weight: 500;
	margin: 0;
	color: #fff;
	flex: 1 1 280px;
}
.cta-ricorrente-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-btn-primary,
.cta-btn-call {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 100px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.cta-btn-primary { background: #fff; color: var(--primary); }
.cta-btn-primary:hover { opacity: .88; color: var(--primary); }
.cta-btn-call {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .7);
}
.cta-btn-call:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 767px) {
	.cta-ricorrente-inner { flex-direction: column; align-items: stretch; text-align: center; }
	/* in colonna il flex-basis agirebbe sull'altezza: resettiamo a contenuto */
	.cta-ricorrente-copy { flex: 0 0 auto; }
	.cta-ricorrente-actions { flex-direction: column; align-items: stretch; gap: 12px; }
	.cta-ricorrente-actions .cta-btn-primary,
	.cta-ricorrente-actions .cta-btn-call {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* ===== Form di contatto (form primario UNICO, in fondo alla pagina).
   La hero ha solo un pannello CTA: il form vive qui (#form-contatti), target di
   tutte le CTA. Un solo form per pagina → nessuna collisione GF (direttiva 020). */
.sede-form-chiusura {
	background: #fafafa;
	padding: 56px 0;
	scroll-margin-top: 175px; /* compensa .header-wrapper sticky (~157px desktop) */
}
@media (max-width: 991px) {
	.sede-form-chiusura { scroll-margin-top: 150px; } /* header sticky ~137px su mobile/tablet */
}

/* ===== Sezioni local generiche ===== */
.sede-section { background: #fafafa; }
.local-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 20px;
}
.local-section h2 {
	font-size: var(--big);
	color: var(--primary);
	margin-bottom: 24px;
}
.local-section h2.center { text-align: center; }
.local-section p {
	margin-top: 14px;
	font-size: 18px;
	line-height: 26px;
}
.local-section p:first-of-type { margin-top: 0; }
.local-section strong { color: var(--primary); font-weight: 500; }
.local-section h3.sub {
	font-size: var(--medium);
	color: var(--primary);
	margin: 26px 0 10px;
	font-weight: 500;
}
ul.clean { list-style: none; padding: 0; }
ul.clean li {
	padding: 8px 0 8px 24px;
	position: relative;
	font-size: 17px;
	line-height: 24px;
}
ul.clean li:before {
	content: "\203A";
	position: absolute;
	left: 0;
	color: var(--primary);
	font-weight: 700;
	font-size: 20px;
}

/* ===== [Città] in cifre ===== */
.local-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 14px;
}
.local-stats > div {
	background: #F4F4F4;
	border-radius: 10px;
	padding: 26px 18px;
	text-align: center;
}
.local-stats .num {
	font-size: 38px;
	font-weight: 600;
	color: var(--primary);
	display: block;
	line-height: 1;
}
.local-stats p { font-size: 14px; margin-top: 10px; line-height: 19px; }
@media (max-width: 767px) {
	.local-stats { grid-template-columns: 1fr 1fr; }
}

/* ===== La sede (NAP + mappa + foto) ===== */
.sede-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
}
.nap-block { font-size: 18px; line-height: 27px; }
.nap-block strong { color: var(--primary); }
.nap-block a { color: var(--primary); }
.hours-list { list-style: none; padding: 0; margin-top: 6px; }
.hours-list li {
	display: flex;
	justify-content: space-between;
	max-width: 340px;
	padding: 8px 0;
	border-bottom: 1px solid #e3e3e3;
	font-size: 16px;
}
.sede-gallery { display: grid; gap: 16px; }
.sede-gallery img { width: 100%; border-radius: 20px; display: block; }
/* Mappa: ora nella colonna sinistra, sotto il blocco contatti. */
.embed-container {
	position: relative;
	padding-bottom: 300px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border-radius: 20px;
	margin: 22px 0 6px;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	border: 0;
}

/* ===== Carosello galleria sede (colonna destra di "Lo studio") ===== */
.sede-carousel {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}
.sede-carousel-track {
	display: flex;
	transition: transform .35s ease;
}
.sede-carousel-slide {
	flex: 0 0 100%;
	min-width: 100%;
}
.sede-carousel-slide img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.sede-carousel-prev,
.sede-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--primary);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.sede-carousel-prev { left: 12px; }
.sede-carousel-next { right: 12px; }
.sede-carousel-prev:hover,
.sede-carousel-next:hover { background: #fff; }
.sede-carousel-dots {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.sede-carousel-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .6);
	cursor: pointer;
}
.sede-carousel-dots button.is-active { background: #fff; }

@media (max-width: 992px) {
	.sede-grid { grid-template-columns: 1fr; }
}

/* ===== Supporto pubblico ===== */
.public-cards { margin-top: 18px; }
.public-card {
	background: #fff;
	border: 1px solid #e0e6e7;
	border-left: 4px solid var(--primary);
	border-radius: 10px;
	padding: 20px 22px;
	margin-bottom: 16px;
}
.public-card h3 {
	color: var(--primary);
	font-size: 18px;
	margin-bottom: 6px;
	font-weight: 600;
}
.public-card p { font-size: 15px; line-height: 22px; margin-top: 0; }

/* ===== Team (foto-driven: volti reali) ===== */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 18px;
}
.team-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	color: var(--black);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}
.team-photo {
	aspect-ratio: 4 / 5;
	background: #e8eff1;
	overflow: hidden;
}
.team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.team-card h3 {
	font-size: 18px;
	color: var(--primary);
	font-weight: 600;
	margin: 16px 18px 0;
}
.team-card p {
	font-size: 14px;
	line-height: 19px;
	color: #555;
	margin: 4px 18px 18px;
}
/* Spotlight Direzione Clinica (testo a sx, foto Matteo a dx), in cima alla sezione */
.director-spotlight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	align-items: center;
	margin: 10px 0 40px;
}
.director-text h3 {
	font-size: 30px;
	line-height: 1.2;
	color: var(--primary);
	font-weight: 600;
	margin-bottom: 12px;
}
.director-text p {
	font-size: 18px;
	line-height: 27px;
	margin: 0;
}
.director-text strong { color: var(--primary); }
.director-photo img {
	width: 100%;
	border-radius: 20px;
	display: block;
}
@media (max-width: 767px) {
	.director-spotlight { grid-template-columns: 1fr; gap: 22px; }
}

/* Pilastri del metodo: sulle pagine sede i titoli sono <h3> (vedi single-sede.php).
   Resta la dimensione 30px del componente; neutralizza il margine default dell'h3
   (il <div> originale non ne aveva). */
.steps h3.step-title { margin: 0 0 8px; }
@media (max-width: 991px) {
	.team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ===== FAQ — etichette di gruppo ===== */
.faq-group-label {
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--primary);
	font-weight: 600;
	margin: 28px 0 4px;
	display: block;
}
/* Accordion FAQ accessibile: domanda = <button> dentro <h4 class="accordion-q">.
   L'<h4> è solo wrapper semantico (nessuno spazio extra). Il pannello non è più
   fratello adiacente del button, quindi lo stato aperto è guidato da .is-open
   (toggle JS) anziché dal selettore globale button[aria-expanded]+.accordion-content;
   animazione (fade 200ms) identica a quella del componente brand. */
.accordion-q {
	margin: 0;
}
.accordion .accordion-content.is-open {
	opacity: 1;
	max-height: fit-content !important; /* batte il collapsed max-height:0 !important globale */
	transition: all 200ms linear;
	will-change: opacity, max-height;
}

/* Press "Siamo apparsi su" (solo sede): banda grigia FULL-WIDTH come la sezione
   numeri, con i loghi centrati. Il background era sul .press insettato dai 50px del
   box50 → lo sposto sul wrapper box50 (full-width) e centro il contenuto a 1200px.
   sede.css è caricato solo su sede: home/come-lavoriamo mantengono la versione a card. */
.box50:has(> .press) {
	padding-left: 0;
	padding-right: 0;
	background-color: var(--gray);
}
.box50:has(> .press) > .press {
	max-width: 1200px;
	margin: 0 auto;
	border-radius: 0;
}

/* FAQ sede: "Domande frequenti" in grassetto + respiro sopra il titolo.
   Scope #faq + sede.css (solo su sede) → le FAQ di home/page-faq restano invariate. */
#faq .faqs {
	padding-top: 50px;
}
#faq .faqs-title {
	font-weight: 600;
}

/* Link testuale nella direzione clinica: inline normale così va a capo sulle parole.
   Il global `a { display: inline-flex }` lo trattava come blocco unico → il link lungo
   "iscritto all'Ordine…" andava a capo tutto insieme lasciando il vuoto dopo "relazionale,". */
.director-text a {
	display: inline;
}

/* ===== Altre sedi ===== */
.other-sedi {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 14px;
}
.other-sedi a {
	background: #fff;
	border: 1px solid #e0e6e7;
	border-radius: 10px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: border-color .15s;
}
.other-sedi a:hover { border-color: var(--primary); }
.other-sedi h3 { color: var(--primary); font-size: 17px; font-weight: 600; }
.other-sedi span { font-size: 14px; color: #444; margin-top: 4px; }
@media (max-width: 767px) {
	.other-sedi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.other-sedi { grid-template-columns: 1fr; }
}