/**
 * Stili delle pagine interne (Chi sono, Approccio, Aree di intervento,
 * Mindfulness, Il percorso, Contatti).
 *
 * Caricati solo su quelle pagine, vedi SM_PAGE_TEMPLATES in functions.php.
 * Colori, font e forme vengono dalle variabili del tema padre.
 */

/* =====================================================================
 * Chi sono
 * ================================================================== */

.sm-bio {
	padding-bottom: var(--psy-section);
}

/* Il testo ha bisogno di piu' spazio della colonna dei dati. */
@media (min-width: 60rem) {
	.sm-bio {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}
}

.sm-bio__aside {
	display: grid;
	gap: 1.25rem;
	position: sticky;
	top: calc(var(--psy-header-height) + 1.5rem);
}

.sm-bio__portrait {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--psy-radius);
}

div.sm-bio__portrait {
	display: flex;
}

.sm-bio__facts {
	margin: 0;
	padding: 1.5rem;
	background: var(--psy-surface);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius);
}

.sm-bio__facts dt {
	color: var(--psy-muted-soft);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sm-bio__facts dd {
	margin: 0.375rem 0 0;
	color: var(--psy-text-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.sm-bio__facts dd + dt {
	margin-top: 1.25rem;
}

.sm-bio__cta {
	padding: 1.5rem;
	background: var(--psy-band);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius);
}

.sm-bio__cta p {
	margin: 0 0 0.875rem;
	color: var(--psy-text-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Sotto il punto in cui le colonne si impilano lo sticky non ha senso e
   incollerebbe la colonna a meta' schermo. */
@media (max-width: 59.99rem) {
	.sm-bio__aside {
		position: static;
	}
}

/* =====================================================================
 * Approccio
 * ================================================================== */

/*
 * La pagina e' solo tre capoversi: lasciati in una colonna sola larga quanto
 * il testo, riempivano due terzi dello schermo e il terzo vuoto a destra
 * sembrava una barra laterale svuotata. Il sommario resta in cima a tutta
 * larghezza, il resto scende su due colonne: la pagina occupa il contenitore
 * come le schede delle altre sezioni, senza allungare la riga di lettura.
 */
.sm-approach .psy-entry__content {
	columns: 2;
	column-gap: clamp(2rem, 5vw, 3.5rem);
}

@media (max-width: 47.99rem) {
	.sm-approach .psy-entry__content {
		columns: 1;
	}
}

/*
 * Il primo capoverso fa da sommario. Lo si distingue dal selettore e non da
 * una classe scritta nel contenuto: il testo della pagina resta modificabile
 * dall'editor senza dover ricordare un markup speciale.
 */
.sm-approach .psy-entry__content > p:first-child {
	column-span: all;
	max-width: 34em;
	margin-bottom: 2rem;
	color: var(--psy-ink);
	font-size: 1.1875rem;
	line-height: 1.62;
}

.sm-approach .psy-entry__content > p {
	break-inside: avoid;
}

.sm-approach .psy-entry__content > p + p {
	margin-top: 0;
}

.sm-approach__actions {
	align-content: center;
}

/* Il testo della pagina non deve toccare la fascia che lo segue. */
.sm-page-body {
	padding-bottom: var(--psy-section);
}

/* =====================================================================
 * Aree di intervento
 * ================================================================== */

.sm-areas-page__intro {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/*
 * Le schede sono nove — otto aree piu' il riquadro finale — quindi la misura
 * minima e' scelta perche' su schermo largo ne entrino tre per riga: tre file
 * piene, invece delle quattro che lascerebbero l'ultima riga con una scheda
 * sola, stirata per tutta la larghezza.
 */
.sm-areas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem;
}

.sm-area-card {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.875rem 1.625rem;
	/* Arrivando da un link diretto, la scheda non deve finire sotto la barra. */
	scroll-margin-top: calc(var(--psy-header-height) + 1.5rem);
}

.sm-area-card__title {
	margin: 0;
	font-size: 1.4375rem;
	font-weight: 400;
}

/* La riga "Quando...": come si presenta la situazione a chi la sta vivendo,
   prima della descrizione del percorso. */
.sm-area-card__lead {
	margin: 0;
	color: var(--psy-text-soft);
	font-family: var(--psy-font-display);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.4;
}

.sm-area-card__text {
	margin: 0;
	color: var(--psy-text-soft);
	font-size: 0.96875rem;
	line-height: 1.65;
}

.sm-area-card--cta {
	justify-content: center;
	align-items: flex-start;
	background: var(--psy-band);
}

/* =====================================================================
 * Percorsi
 * ================================================================== */

.sm-paths-page__intro {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/*
 * Due colonne che riempiono il contenitore, come le schede delle aree di
 * intervento. Colonne CSS e non griglia: le sei schede hanno lunghezze molto
 * diverse — la prima ha un elenco di cinque voci, altre un capoverso — e su
 * una griglia le righe si allineerebbero alla piu' alta, lasciando buchi.
 */
.sm-paths {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 60rem) {
	.sm-paths {
		display: block;
		columns: 2;
		column-gap: 1.5rem;
	}

	.sm-path {
		break-inside: avoid;
		margin-bottom: 1.5rem;
	}
}

.sm-path {
	scroll-margin-top: calc(var(--psy-header-height) + 1.5rem);
}

.sm-path__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.375rem, 3vw, 1.625rem);
	font-weight: 400;
}

/*
 * La frase in prima persona di chi cerca aiuto. E' una citazione, non una
 * didascalia: virgolette basse messe dal foglio di stile, cosi' il testo nel
 * file dei dati resta la sola frase.
 */
.sm-path__quote {
	margin: 0 0 1.25rem;
	padding-left: 1rem;
	border-left: 2px solid var(--psy-accent-soft);
	color: var(--psy-primary-dark);
	font-family: var(--psy-font-display);
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.45;
}

.sm-path__quote::before {
	content: "\201C";
}

.sm-path__quote::after {
	content: "\201D";
}

.sm-path__body p {
	margin: 0 0 0.875rem;
	color: var(--psy-text-soft);
	font-size: 0.96875rem;
	line-height: 1.7;
}

.sm-path__body > :last-child {
	margin-bottom: 0;
}

.sm-path__list {
	margin: 0 0 0.875rem;
	padding-left: 1.125rem;
	color: var(--psy-text-soft);
	font-size: 0.96875rem;
	line-height: 1.7;
}

.sm-path__list li::marker {
	color: var(--psy-primary);
}

.sm-path__more {
	margin-top: 1.25rem;
}

/* =====================================================================
 * Mindfulness e Self-Compassion
 * ================================================================== */

.sm-pillars__actions {
	align-content: center;
}

/*
 * Ogni argomento e' una fascia: la mindfulness sul fondo chiaro della pagina,
 * la self-compassion sulla tinta. Il colore e' la sola cosa che dice dove
 * finisce un argomento e comincia l'altro, quindi il titolo non ha bisogno di
 * righe o riquadri per staccarsi.
 */
/*
 * Titolo dell'argomento a sinistra, testo a destra: insieme riempiono il
 * contenitore, e la colonna del testo resta piu' stretta della misura che
 * aveva prima da sola. Il titolo sta fermo mentre il testo scorre, cosi' si
 * sa sempre di quale dei due argomenti si sta leggendo.
 */
.sm-topic__head {
	display: grid;
	gap: clamp(1rem, 4vw, 3.5rem);
}

@media (min-width: 60rem) {
	.sm-topic__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
		align-items: start;
	}

	.sm-topic__title {
		position: sticky;
		top: calc(var(--psy-header-height) + 2rem);
	}
}

.sm-topic__title h2 {
	margin: 0;
}

/* Chi arriva da un link diretto non deve trovare il titolo sotto la barra. */
.sm-topic .psy-entry__content > h2[id],
.sm-protocol {
	scroll-margin-top: calc(var(--psy-header-height) + 1.5rem);
}

/*
 * "Cos'e'?", "Perche' partecipare?" e gli altri sono titoli che si ripetono
 * in tutti e due gli argomenti: resi come etichette in tono d'accento invece
 * che in serif, si distinguono a colpo d'occhio dal titolo che li governa, e
 * la gerarchia si legge senza confrontare i corpi del testo.
 */
.sm-topic .psy-entry__content > h3,
.sm-protocol__block-title {
	margin: 0 0 0.875rem;
	color: var(--psy-primary);
	font-family: var(--psy-font);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.sm-topic .psy-entry__content > h3 {
	margin-top: 2.5rem;
}

/* I tre elementi della self-compassion: un elenco dell'editor reso come il
   riquadro .psy-stack, senza chiedere markup speciale a chi scrive. */
.sm-keypoints {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--psy-border);
	border: 1px solid var(--psy-border);
	border-radius: var(--psy-radius-lg);
	overflow: hidden;
}

.sm-keypoints li {
	margin: 0;
	padding: clamp(1.25rem, 3vw, 1.625rem);
	background: var(--psy-surface);
}

.sm-keypoints strong {
	display: block;
	margin-bottom: 0.3125rem;
	color: var(--psy-ink);
	font-family: var(--psy-font-display);
	font-size: 1.1875rem;
	font-weight: 400;
}

/* =====================================================================
 * Protocolli MBSR e MSC
 *
 * Stanno dentro la fascia del proprio argomento, sotto il testo che lo
 * spiega: la riga in alto e' li' per segnare il passaggio dal "che cos'e'"
 * al corso vero e proprio, dentro lo stesso discorso.
 * ================================================================== */

.sm-protocol {
	margin-top: clamp(2.75rem, 5vw, 4rem);
	padding-top: clamp(2.75rem, 5vw, 4rem);
	border-top: 1px solid var(--psy-border-strong);
}

.sm-protocol__title {
	margin-bottom: 1.25rem;
	font-size: clamp(1.5rem, 3.4vw, 1.875rem);
}

.sm-protocol .psy-lead,
.sm-protocol__intro {
	max-width: 44em;
}

.sm-protocol__intro {
	margin-bottom: 0;
	color: var(--psy-text-soft);
}

/*
 * I quattro blocchi hanno lunghezze molto diverse: "Perche' partecipare?" e'
 * tre capoversi, "A chi si rivolge" spesso uno solo. Su una griglia a due
 * colonne il blocco corto lascerebbe un buco alto quanto la differenza,
 * perche' le righe si allineano al piu' alto; le colonne CSS invece si
 * bilanciano da sole, e break-inside evita che un blocco venga spezzato a
 * meta' fra l'una e l'altra.
 */
.sm-protocol__blocks {
	margin-top: clamp(2.25rem, 4vw, 3rem);
	padding-top: clamp(2.25rem, 4vw, 3rem);
	border-top: 1px solid var(--psy-border);
}

@media (min-width: 46rem) {
	.sm-protocol__blocks {
		columns: 2;
		column-gap: 3rem;
	}
}

.sm-protocol__block {
	break-inside: avoid;
}

.sm-protocol__block + .sm-protocol__block {
	margin-top: 2.25rem;
}

.sm-protocol__block p {
	margin: 0 0 0.875rem;
	color: var(--psy-text-soft);
	font-size: 0.96875rem;
	line-height: 1.7;
}

.sm-protocol__block > :last-child {
	margin-bottom: 0;
}

.sm-protocol__list {
	margin: 0;
	padding-left: 1.125rem;
	color: var(--psy-text-soft);
	font-size: 0.96875rem;
	line-height: 1.7;
}

.sm-protocol__list li + li {
	margin-top: 0.5rem;
}

.sm-protocol__list li::marker {
	color: var(--psy-primary);
}

.sm-protocol__quote {
	margin: clamp(2.25rem, 4vw, 3rem) 0 0;
	padding-top: clamp(2rem, 4vw, 2.5rem);
	border-top: 1px solid var(--psy-border);
	color: var(--psy-ink);
	font-family: var(--psy-font-display);
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.4;
	text-wrap: balance;
}

/* =====================================================================
 * Il percorso
 * ================================================================== */

/*
 * Le tre tappe erano un elenco verticale dentro una colonna stretta, che
 * lasciava vuota meta' pagina. Affiancate riempiono il contenitore e si
 * leggono per quello che sono: tre momenti in fila, non tre paragrafi.
 */
.sm-stages {
	padding-bottom: var(--psy-section);
}

.sm-stages .psy-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	align-items: start;
}

.sm-stage {
	padding: clamp(1.75rem, 4vw, 2.25rem);
}

.sm-stage__label {
	margin: 0 0 0.75rem;
	color: var(--psy-primary);
	font-family: var(--psy-font-display);
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sm-stage__title {
	margin: 0 0 0.75rem;
	font-size: 1.75rem;
	font-weight: 400;
}

.sm-stage__text {
	margin: 0;
	color: var(--psy-text-soft);
	font-size: 1.03125rem;
	line-height: 1.7;
}

.sm-faq__heading {
	margin-bottom: 2.25rem;
}

/* Anche le domande frequenti riempiono il contenitore: due colonne che si
   bilanciano da sole, cosi' risposte lunghe e corte non lasciano buchi. */
.sm-faq {
	display: grid;
	gap: 1.625rem;
}

@media (min-width: 56rem) {
	.sm-faq {
		display: block;
		columns: 2;
		column-gap: 3rem;
	}

	.sm-faq__item {
		break-inside: avoid;
		margin-bottom: 1.625rem;
	}
}

.sm-faq__question {
	margin: 0 0 0.5rem;
	font-family: var(--psy-font);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0;
}

.sm-faq__answer {
	margin: 0;
	color: var(--psy-text-soft);
	line-height: 1.65;
}

.sm-faq__cta {
	margin: 2.5rem 0 0;
}

/* =====================================================================
 * Contatti
 * ================================================================== */

.sm-contact-page {
	padding-bottom: var(--psy-section);
}

.sm-contact-page__rows {
	margin-block: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--psy-border);
}

.sm-contact-form__title {
	margin: 0 0 0.5rem;
	font-size: 1.625rem;
	font-weight: 400;
}

.sm-contact-form__intro {
	margin: 0 0 1.75rem;
	color: var(--psy-text-soft);
	font-size: 0.96875rem;
}

.sm-contact-form__privacy {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--psy-border);
	color: var(--psy-muted-soft);
	font-size: 0.78125rem;
	line-height: 1.55;
}

/*
 * WPForms porta il proprio foglio di stile, con selettori del tipo
 * `div.wpforms-container-full .wpforms-form input[type=text]`: per
 * riallineare i campi al resto del sito servono selettori altrettanto
 * specifici, altrimenti vincono i suoi.
 */

.sm-contact-form div.wpforms-container-full {
	margin: 0;
}

.sm-contact-form div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 0 0 1.125rem;
}

.sm-contact-form div.wpforms-container-full .wpforms-form .wpforms-field-label {
	color: var(--psy-text-soft);
	font-family: var(--psy-font);
	font-size: 0.84375rem;
	font-weight: 600;
}

.sm-contact-form div.wpforms-container-full .wpforms-form input[type="text"],
.sm-contact-form div.wpforms-container-full .wpforms-form input[type="email"],
.sm-contact-form div.wpforms-container-full .wpforms-form input[type="tel"],
.sm-contact-form div.wpforms-container-full .wpforms-form input[type="url"],
.sm-contact-form div.wpforms-container-full .wpforms-form textarea,
.sm-contact-form div.wpforms-container-full .wpforms-form select {
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 0.8125rem 0.875rem;
	background: var(--psy-page);
	border: 1px solid var(--psy-border-strong);
	border-radius: var(--psy-radius-sm);
	color: var(--psy-text);
	font-family: var(--psy-font);
	font-size: 0.96875rem;
}

.sm-contact-form div.wpforms-container-full .wpforms-form input:focus,
.sm-contact-form div.wpforms-container-full .wpforms-form textarea:focus,
.sm-contact-form div.wpforms-container-full .wpforms-form select:focus {
	border-color: var(--psy-primary);
	outline: 2px solid color-mix(in srgb, var(--psy-primary) 30%, transparent);
}

.sm-contact-form div.wpforms-container-full .wpforms-form button[type="submit"] {
	margin: 0;
	padding: 0.9375rem 1.625rem;
	background: var(--psy-primary);
	border: 0;
	border-radius: 999px;
	color: var(--psy-primary-contrast);
	font-family: var(--psy-font);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.sm-contact-form div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.sm-contact-form div.wpforms-container-full .wpforms-form button[type="submit"]:focus {
	background: var(--psy-primary-dark);
	border: 0;
	color: var(--psy-primary-contrast);
}

.sm-contact-form div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--psy-primary);
}

.sm-contact__media--map {
	aspect-ratio: 16 / 9;
	margin-top: 2rem;
}