/*
 * SevenHills — layout
 *
 * Header, navigazione, drawer mobile, footer, breadcrumb, paginazione.
 */

/* ==== 0. Impianto della pagina ==== */

/*
 * Footer in fondo alla finestra anche sulle pagine corte (News con un solo
 * articolo, 404): il <main> prende lo spazio che avanza. Senza, sotto il
 * footer restava una fascia bianca. L'altezza della barra di amministrazione
 * si sottrae, altrimenti chi è connesso vedrebbe sempre una barra di scorrimento.
 */
body {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

@supports (min-height: 100dvh) {
	body {
		min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}
}

.sh-main {
	flex: 1 0 auto;
}

/* ==== 1. Header ==== */

.sh-header {
	position: relative;
	z-index: 100;
	background-color: var(--sh-bg);
	border-block-end: 1px solid var(--sh-line);
}

.sh-header--sticky {
	position: sticky;
	inset-block-start: 0;
}

/*
 * Con la barra di amministrazione visibile l'header appiccicoso deve fermarsi
 * sotto di essa, non dietro. WordPress ne espone l'altezza in
 * --wp-admin--admin-bar--height (32px, 46px sotto i 782px). Sotto i 600px la
 * barra non è più fissa e scorre via con la pagina: lì l'header torna in cima.
 */
.admin-bar .sh-header--sticky {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .sh-header--sticky {
		inset-block-start: 0;
	}
}

.sh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sh-space-md);
	min-height: 72px;
}

.sh-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
}

.sh-brand__logo {
	width: auto;
	max-height: 52px;
}

.sh-brand__text {
	font-family: var(--sh-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sh-brand__text em {
	color: var(--sh-red);
	font-style: normal;
}

/* ==== 2. Navigazione principale ==== */

.sh-nav {
	display: none;
}

@media (min-width: 1024px) {
	.sh-nav {
		display: block;
		margin-inline-start: auto;
	}
}

.sh-nav__list,
.sh-nav__submenu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-nav__list {
	align-items: center;
	gap: var(--sh-space-md);
}

.sh-nav__item {
	position: relative;
}

.sh-nav__link {
	display: inline-block;
	padding-block: var(--sh-space-2xs);
	font-family: var(--sh-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-nav__link:hover {
	color: var(--sh-red-text);
}

.sh-nav__item--current > .sh-nav__link {
	color: var(--sh-red-text);
}

.sh-nav__item--current > .sh-nav__link::after {
	display: block;
	height: 2px;
	margin-block-start: 4px;
	background-color: var(--sh-red);
	content: "";
}

.sh-nav__toggle {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 2px;
	color: inherit;
}

.sh-nav__chevron {
	transition: transform var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-nav__toggle[aria-expanded="true"] .sh-nav__chevron {
	transform: rotate(180deg);
}

/* ==== 3. Sottomenu ==== */

.sh-nav__submenu {
	position: absolute;
	inset-block-start: calc(100% + var(--sh-space-2xs));
	inset-inline-start: 0;
	z-index: 20;
	flex-direction: column;
	gap: 0;
	min-width: 240px;
	max-width: min(320px, calc(100vw - var(--sh-gutter) * 2));
	padding: var(--sh-space-2xs) 0;
	background-color: var(--sh-card);
	border: 1px solid var(--sh-line);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--sh-motion-fast) var(--sh-motion-ease),
		transform var(--sh-motion-fast) var(--sh-motion-ease),
		visibility var(--sh-motion-fast);
}

/*
 * Voci vicine al bordo destro: il sottomenu si allinea a destra.
 * Serve anche da CHIUSO — un elemento in posizione assoluta con
 * visibility:hidden continua a contribuire all'area di scroll, quindi senza
 * questa correzione comparirebbe una barra orizzontale sull'intera pagina
 * senza che l'utente abbia toccato nulla. La classe la applica theme.js
 * misurando la geometria reale.
 */
.sh-nav__item--flip > .sh-nav__submenu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/*
 * Il sottomenu si apre al passaggio del mouse, ma anche quando il focus è
 * dentro il ramo o quando il <button> è espanso: senza :focus-within e
 * [aria-expanded] la navigazione da tastiera resterebbe esclusa.
 */
.sh-nav__item--has-children:hover > .sh-nav__submenu,
.sh-nav__item--has-children:focus-within > .sh-nav__submenu,
.sh-nav__toggle[aria-expanded="true"] + .sh-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sh-nav__submenu .sh-nav__link {
	display: block;
	padding: var(--sh-space-2xs) var(--sh-space-sm);
	font-size: 0.8125rem;
	white-space: normal;
}

.sh-nav__submenu .sh-nav__item--current > .sh-nav__link::after {
	display: none;
}

/* ==== 4. Switch lingua ==== */

.sh-lang {
	display: flex;
	align-items: center;
	gap: var(--sh-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Nell'header lo switch sta a destra: sotto i 1024px, dove il menu è nel
 * drawer, si attacca al burger; da desktop segue il menu a distanza fissa
 * (il menu ha già margin-inline-start: auto).
 */
.sh-header__inner > .sh-lang {
	margin-inline-start: auto;
}

.sh-header__inner > .sh-lang + .sh-burger {
	margin-inline-start: var(--sh-space-2xs);
}

@media (min-width: 1024px) {
	.sh-header__inner > .sh-nav + .sh-lang {
		margin-inline-start: var(--sh-space-lg);
	}
}

.sh-lang__link {
	display: inline-flex;
	align-items: center;
	/* Area di tocco di 44px in altezza anche se il testo è piccolo. */
	min-height: 44px;
	padding-inline: var(--sh-space-3xs);
	color: var(--sh-ink);
	font-family: var(--sh-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-lang__link:hover {
	color: var(--sh-red-text);
}

.sh-lang__item--current .sh-lang__link {
	color: var(--sh-red-text);
}

.sh-lang__sep {
	color: var(--sh-muted);
}

.sh-lang--drawer {
	padding-block-start: var(--sh-space-2xs);
}

/* ==== 5. Drawer mobile ==== */

.sh-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline-start: auto;
	color: var(--sh-ink);
}

@media (min-width: 1024px) {
	.sh-burger {
		display: none;
	}
}

.sh-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 1fr min(88vw, 380px);
}

.sh-drawer[hidden] {
	display: none;
}

.sh-drawer__backdrop {
	background-color: rgb(0 0 0 / 0.6);
}

.sh-drawer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-md);
	padding: var(--sh-space-md);
	background-color: var(--sh-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sh-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sh-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--sh-ink);
}

.sh-drawer .sh-nav {
	display: block;
	margin: 0;
}

.sh-drawer .sh-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.sh-drawer .sh-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-block-end: 1px solid var(--sh-line);
}

.sh-drawer .sh-nav__link {
	flex: 1;
	padding-block: var(--sh-space-sm);
	font-size: 1.0625rem;
}

.sh-drawer .sh-nav__toggle {
	width: 44px;
	height: 44px;
	justify-content: center;
}

.sh-drawer .sh-nav__submenu {
	position: static;
	flex-basis: 100%;
	min-width: 0;
	padding-block: 0;
	padding-inline-start: var(--sh-space-sm);
	border: 0;
	background: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sh-drawer .sh-nav__submenu[hidden] {
	display: none;
}

/* ==== 6. Breadcrumb ==== */

.sh-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sh-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.sh-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sh-space-3xs);
}

.sh-breadcrumbs__link {
	color: var(--sh-muted);
	text-decoration: none;
}

.sh-breadcrumbs__link:hover {
	color: var(--sh-red-text);
}

/* Livello senza pagina propria (es. «Esperienze»): stesso grigio dei link, ma non reagisce al passaggio. */
.sh-breadcrumbs__text {
	color: var(--sh-muted);
}

.sh-breadcrumbs__sep {
	color: var(--sh-muted);
	opacity: 0.6;
}

.sh-breadcrumbs__current {
	color: var(--sh-red-text);
}

/* ==== 7. Footer ==== */

/*
 * Il footer è sempre scuro: nel markup porta .sh-scheme--dark, così i ruoli
 * (--sh-muted, --sh-line, --sh-red-text) si risolvono sui valori on_dark e
 * i contrasti restano quelli verificati.
 */
.sh-footer {
	background-color: var(--sh-c-black-deep);
	color: var(--sh-c-white);
}

/*
 * Colonne: una sotto l'altra sotto i 480px; poi due per riga con logo a riga
 * intera; da 1024px tutte in fila come nei mockup. In fila si usa flex e non
 * una griglia a tracce fisse: il numero di colonne di link dipende da quanti
 * menu footer sono assegnati, e una colonna mancante non deve lasciare un buco.
 */
.sh-footer__main {
	display: grid;
	gap: var(--sh-space-lg) var(--sh-space-md);
	padding-block: var(--sh-space-xl);
}

@media (min-width: 480px) {
	.sh-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.sh-footer__main {
		display: flex;
		gap: var(--sh-space-lg);
	}

	.sh-footer__brand {
		flex: 1.3 1 0;
	}

	.sh-footer__col {
		flex: 1 1 0;
		min-width: 0;
	}

	/* L'indirizzo è la riga più lunga del footer: la colonna contatti è la più larga. */
	.sh-footer__col--contacts {
		flex: 1.5 1 0;
	}
}

.sh-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-md);
	align-items: flex-start;
}

.sh-footer .sh-brand__logo {
	max-height: 64px;
}

.sh-footer__col-title {
	margin-block: 0 var(--sh-space-sm);
	color: var(--sh-ink);
	font-family: var(--sh-font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sh-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Nel footer i link sono tutti bianchi, compresa la pagina corrente: solo il passaggio del mouse li colora. */
.sh-footer__list a,
.sh-footer__contact > span,
.sh-footer__contact a {
	color: var(--sh-ink);
	text-decoration: none;
	opacity: 1;
	transition: opacity var(--sh-motion-fast) var(--sh-motion-ease),
		color var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-footer__list a:hover,
.sh-footer__contact a:hover {
	color: var(--sh-red-text);
	opacity: 1;
}


/* <address> è corsivo per default del browser: nei mockup l'indirizzo è dritto. */
.sh-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-xs);
	margin: 0;
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.5;
}

.sh-footer__contact {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--sh-space-2xs);
	align-items: start;
	margin: 0;
	overflow-wrap: anywhere;
}

.sh-footer__contact svg {
	margin-block-start: 2px;
	color: var(--sh-ink);
	opacity: 0.8;
}

/* Icone social del footer: senza riquadro, come nei mockup; l'area di tocco resta 40px. */
.sh-footer .sh-social {
	gap: var(--sh-space-3xs);
	margin-inline-start: calc(var(--sh-space-2xs) * -1);
}

.sh-footer .sh-social__link {
	border-color: transparent;
}

.sh-footer .sh-social__link:hover {
	background-color: transparent;
	border-color: transparent;
	color: var(--sh-red-text);
}

.sh-social {
	display: flex;
	gap: var(--sh-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sh-line);
	color: var(--sh-c-white);
	transition: background-color var(--sh-motion-fast) var(--sh-motion-ease),
		border-color var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-social__link:hover {
	background-color: var(--sh-red);
	border-color: var(--sh-red);
}

.sh-footer__legal {
	border-block-start: 1px solid var(--sh-line);
}

/*
 * Riga legale a sinistra, Privacy/Cookie Policy a destra. Il grigio è
 * --sh-muted su scuro (9.4:1): prima era l'opacità dell'intera barra, che
 * attenuava anche i link e il loro focus.
 */
.sh-footer__legal-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2xs) var(--sh-space-md);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--sh-space-sm);
	color: var(--sh-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.sh-footer__legal-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

.sh-footer__copy {
	margin: 0;
}

.sh-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--sh-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-footer__legal-menu a {
	display: inline-block;
	padding-block: var(--sh-space-3xs);
	color: inherit;
	text-decoration: none;
}

.sh-footer__legal-menu a:hover {
	color: var(--sh-ink);
	text-decoration: underline;
}

/* ==== 8. Paginazione ==== */

.sh-pagination {
	display: flex;
	justify-content: center;
	padding-block: var(--sh-space-xl);
}

.sh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--sh-space-2xs);
	border: 1px solid var(--sh-line);
	font-family: var(--sh-font-display);
	font-weight: 700;
	text-decoration: none;
}

.sh-pagination .page-numbers.current,
.sh-pagination .page-numbers:hover {
	background-color: var(--sh-red);
	border-color: var(--sh-red);
	color: var(--sh-c-white);
}

/* ==== 9. Contenuto generico ==== */

.sh-entry__title {
	margin-block-end: var(--sh-space-sm);
}

.sh-entry__meta {
	color: var(--sh-muted);
	font-size: 0.8125rem;
}

.sh-entry__content > * + * {
	margin-block-start: var(--sh-space-sm);
}

/* ==== 9b. Elenco news: card ==== */

/*
 * Una colonna su mobile, due da 640px, tre da desktop: la stessa progressione
 * delle card corso. Card a tutta immagine con velatura scura, come nel
 * mockup News; la prima della pagina («in evidenza») è larga due colonne.
 */
.sh-grid--posts {
	gap: var(--sh-space-sm);
}

@media (min-width: 640px) {
	.sh-grid--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sh-post-card--featured { grid-column: span 2; }
}

@media (min-width: 1024px) {
	.sh-grid--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sh-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 20rem;
	overflow: hidden;
	/* Senza immagine resta la card scura: lo schema scuro porta fondo e testi. */
	background-color: var(--sh-card);
	color: var(--sh-ink);
}

.sh-post-card--featured {
	min-height: 24rem;
}

.sh-post-card__media {
	position: absolute;
	inset: 0;
}

.sh-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sh-motion-slow) var(--sh-motion-ease);
}

.sh-post-card:hover .sh-post-card__media img {
	transform: scale(1.03);
}

/* Velatura dal basso: data in alto e testi in basso restano leggibili su qualsiasi foto. */
.sh-post-card__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.25) 30%, rgb(0 0 0 / 0.7) 55%, rgb(0 0 0 / 0.92) 100%);
	content: "";
}

/* In evidenza, dove la card è larga, la velatura va da sinistra: il testo sta lì. */
@media (min-width: 640px) {
	.sh-post-card--featured .sh-post-card__media::after {
		background: linear-gradient(90deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.05) 80%);
	}
}

.sh-post-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sh-space-2xs);
	padding: var(--sh-space-md) var(--sh-space-md) var(--sh-space-md);
}

/* In evidenza il testo resta nella metà sinistra, sulla parte scura della velatura. */
.sh-post-card--featured .sh-post-card__body > * {
	max-width: 28rem;
}

/* Data in alto con il filetto rosso; tutto il resto in basso (margin-block-end: auto). */
.sh-post-card__date {
	order: -2;
	margin: 0 0 auto;
	padding-block-end: var(--sh-space-md);
	color: var(--sh-ink);
	font-family: var(--sh-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sh-post-card__date::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	margin-block-start: var(--sh-space-2xs);
	background-color: var(--sh-red);
	content: "";
}

.sh-post-card__cat {
	order: -1;
	margin: 0;
	color: var(--sh-red-text);
	font-family: var(--sh-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sh-post-card__title {
	margin: 0;
	padding-inline-end: var(--sh-space-lg);
	transition: color var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-post-card--featured .sh-post-card__title {
	font-style: italic;
}

.sh-post-card:hover .sh-post-card__title {
	color: var(--sh-red-text);
}

.sh-post-card__link {
	color: inherit;
	text-decoration: none;
}

/* Tutta la card è cliccabile, ma resta un solo link e un solo nome accessibile. */
.sh-post-card__link::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
}

/* Il focus si disegna sulla card; dove :has() manca resta quello del link. */
@supports selector(:has(*)) {
	.sh-post-card:has(.sh-post-card__link:focus-visible) {
		outline: 2px solid var(--sh-focus);
		outline-offset: 3px;
	}

	.sh-post-card__link:focus-visible {
		outline: none;
	}
}

.sh-post-card__excerpt {
	margin: 0;
	padding-inline-end: var(--sh-space-lg);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.sh-post-card__cta {
	align-self: flex-start;
	margin-block-start: var(--sh-space-sm);
}

.sh-post-card__arrow {
	position: absolute;
	inset-block-end: var(--sh-space-md);
	inset-inline-end: var(--sh-space-md);
}

/* ==== 9c. Filtri e ricerca delle news, newsletter ==== */

/* Filtri subito sotto l'hero, come nel mockup: lo spazio pieno della sezione li staccava troppo. */
.sh-news {
	padding-block-start: var(--sh-space-lg);
}

.sh-news-search {
	display: flex;
	flex: 0 1 18rem;
	border: 1px solid var(--sh-control-border);
	background-color: var(--sh-bg);
}

.sh-news-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem var(--sh-space-xs);
	border: 0;
	background: transparent;
	color: var(--sh-ink);
	font-size: 0.875rem;
}

.sh-news-search__button {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--sh-space-xs);
	border: 0;
	background: transparent;
	color: var(--sh-ink);
	cursor: pointer;
}

.sh-news-search__button:hover {
	color: var(--sh-red-text);
}

/* Su mobile la ricerca va a tutta larghezza sotto le pill. */
@media (max-width: 767px) {
	.sh-news-search {
		flex-basis: 100%;
	}
}

.sh-news-newsletter {
	padding-block: var(--sh-space-lg);
	border-block-start: 1px solid var(--sh-line);
}

/* Intestazione della pagina News: hero scuro compatto. */
.sh-archive-hero .sh-hero__inner {
	padding-block: var(--sh-space-2xl);
}

.sh-none {
	padding-block: var(--sh-space-lg);
}

/* ==== 10. Filtri di archivio ==== */

.sh-archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-sm);
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--sh-space-lg);
}

.sh-archive-filters__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2xs);
}

.sh-archive-filters__sort {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-space-2xs);
	align-items: center;
}

.sh-archive-filters__label {
	color: var(--sh-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sh-archive-filters__select {
	padding: 0.6rem var(--sh-space-2xs);
	background-color: var(--sh-bg);
	border: 1px solid var(--sh-control-border);
	color: var(--sh-ink);
	font-size: 0.8125rem;
}

.sh-archive-filters__submit {
	padding-block: 0.55rem;
}

.sh-archive__count {
	margin-block: 0 var(--sh-space-md);
	color: var(--sh-muted);
	font-size: 0.875rem;
}

/* ==== 11. Scheda vettura ==== */

.sh-auto__head {
	padding-block: var(--sh-space-lg) var(--sh-space-md);
}

.sh-auto__title {
	margin-block: var(--sh-space-2xs) 0;
}

.sh-auto__brand,
.sh-auto__model {
	display: inline;
}

/* Dimensione e famiglia dalla classe .sh-t-price generata dai token. */
.sh-auto__price {
	margin-block: var(--sh-space-2xs) 0;
	color: var(--sh-red-text);
}

.sh-auto__price small {
	color: var(--sh-muted);
	font-size: 0.5em;
	font-weight: 400;
}

.sh-auto__main {
	display: grid;
	gap: var(--sh-space-lg);
	padding-block: var(--sh-space-lg);
}

@media (min-width: 1024px) {
	.sh-auto__main {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: start;
	}

	.sh-auto__aside {
		position: sticky;
		inset-block-start: 96px;
	}
}

.sh-auto__description {
	margin-block-start: var(--sh-space-md);
}

.sh-auto__specs,
.sh-auto__related {
	padding-block: var(--sh-space-lg);
	border-block-start: 1px solid var(--sh-line);
}

/* Fra il titolo «Altre vetture» e le card: nelle pagine Elementor lo dà la banda. */
.sh-auto__related .sh-car-grid {
	margin-block-start: var(--sh-space-lg);
}

/*
 * Blocchi aggiunti dal template della scheda (prima in car-specs.css).
 * La specificità (0,2,0) batte .sh-auto__title qui sopra a prescindere
 * dall'ordine di caricamento dei fogli.
 */

/* Il titolo si stacca dal breadcrumb come nel mockup, invece di attaccarcisi. */
.sh-auto__head .sh-auto__title {
	margin-block-start: var(--sh-space-md);
}

.sh-auto__head .sh-auto__rent {
	margin-block: var(--sh-space-3xs) 0;
	color: var(--sh-muted);
}

.sh-auto__head .sh-auto__rent strong {
	color: var(--sh-ink);
}

/* Le garanzie chiudono la pagina sopra il footer: niente filo doppio con la banda permuta. */
.sh-auto__garanzie {
	border-block-end: 1px solid var(--sh-line);
}

/* ==== 12. Scheda corso ==== */

.sh-corso__breadcrumbs {
	padding-block: var(--sh-space-sm);
}

.sh-corso__main {
	display: grid;
	gap: var(--sh-space-lg);
}

@media (min-width: 1024px) {
	.sh-corso__main {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}

	.sh-corso__aside {
		position: sticky;
		inset-block-start: 96px;
	}
}

/* ==== 13. Archivio corsi ==== */

.sh-corso-grid {
	display: grid;
	gap: var(--sh-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.sh-corso-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.sh-corso-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sh-corso-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--sh-card);
	border: 1px solid var(--sh-line);
}

.sh-corso-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sh-space-3xs);
	padding: var(--sh-space-sm);
}

.sh-corso-card__title {
	margin-block: 0;
}

.sh-corso-card__link {
	color: inherit;
	text-decoration: none;
}

.sh-corso-card__link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.sh-corso-card:has(.sh-corso-card__link:focus-visible) {
	outline: 2px solid var(--sh-focus);
	outline-offset: 3px;
}

.sh-corso-card__link:focus-visible {
	outline: none;
}

.sh-corso-card__subtitle {
	margin-block: 0;
	color: var(--sh-muted);
	font-size: 0.875rem;
}

.sh-corso-card__price {
	margin-block: auto 0;
	padding-block-start: var(--sh-space-2xs);
	color: var(--sh-red-text);
	font-family: var(--sh-font-display);
	font-size: 1.25rem;
	font-weight: 700;
}

.sh-corso-card__price small {
	color: var(--sh-muted);
	font-size: 0.6em;
	font-weight: 400;
}

/* ==== 14. Archivio gare ==== */

.sh-gara-archive {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-lg);
}

/* ==== 15. Bande di pagina (container Elementor creati dal tema) ==== */

/*
 * Elementor dà a ogni container 10px di padding: sono le strisce bianche ai
 * lati delle bande scure. Qui gli spazi arrivano dai token. La specificità
 * (0,2,0) batte il valore predefinito di Elementor ma perde contro il CSS del
 * singolo elemento (0,3,0): se una sezione viene ritoccata nell'editor, vince
 * la modifica manuale.
 */

/*
 * Container annidati in una banda (le colonne): nessun padding proprio,
 * altrimenti il contenuto rientra di altri 10px e non si allinea con le bande
 * sopra e sotto. Viene prima della regola della banda, a pari specificità:
 * una banda annidata in un'altra tiene i propri spazi.
 */
.sh-band .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

.e-con.sh-band {
	--padding-top: var(--sh-space-section);
	--padding-bottom: var(--sh-space-section);
	--padding-left: var(--sh-gutter-mobile);
	--padding-right: var(--sh-gutter-mobile);
	/*
	 * Stessa larghezza di contenuto di .sh-container (header, footer, bande a
	 * tutta larghezza). Elementor la misura senza i gutter, il tema con: con lo
	 * stesso numero il contenuto sporgeva di un gutter per lato. Vale anche se
	 * il kit non è stato risincronizzato.
	 */
	--content-width: min(100%, calc(var(--sh-container) - 2 * var(--sh-gutter)));
	/* Spazio fra il titolo di sezione e il contenuto. */
	--row-gap: var(--sh-space-lg);
}

@media (min-width: 768px) {
	.e-con.sh-band {
		--padding-left: var(--sh-gutter);
		--padding-right: var(--sh-gutter);
	}
}

/* Bande a tutta larghezza: il widget porta con sé il proprio contenitore. */
.e-con.sh-band--flush {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

/* Stesso comportamento per le installazioni con sezioni e colonne. */
.elementor-section.sh-band {
	padding-block: var(--sh-space-section);
}

.elementor-section.sh-band--flush {
	padding-block: 0;
}

.elementor-section.sh-band--flush > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0;
}

/*
 * Rete di sicurezza per le pagine SENZA classi di banda (create da versioni
 * precedenti del tema, prima di «Aggiorna la struttura», o costruite a mano).
 *
 * Un container di primo livello che contiene soltanto un widget del tema con
 * il proprio .sh-container — hero, barra numeri e riquadri icona «entro il
 * contenitore», banda CTA, citazione, card servizi — è una banda a tutta
 * larghezza per costruzione: il widget dà già sfondo e rientri. I 10px di
 * Elementor lo mostravano come un riquadro staccato dai bordi, con una
 * striscia bianca di 20px fra una banda scura e l'altra.
 *
 * - :where() tiene la specificità a (0,2,0), come .e-con.sh-band: batte il
 *   default di Elementor (0,1,0) e perde contro il CSS del singolo elemento
 *   (0,3,0), quindi un padding o una larghezza impostati nell'editor vincono.
 * - :not(.sh-band) lascia alle bande del tema le loro regole.
 * - Il secondo :has() esclude i container con più di un elemento: i layout
 *   Elementor con contenuti non del tema non vengono toccati.
 * - Nei container «in box» anche --content-width va a 100%: la larghezza la
 *   dà il .sh-container del widget, non il box di Elementor.
 * - Dove :has() non è supportato :where() lo scarta senza invalidare nulla:
 *   resta l'aspetto di Elementor, e i dati li corregge «Aggiorna la struttura».
 */
.e-con.e-parent:where(:not(.sh-band):has(> .elementor-widget [data-sh-component] > .sh-container):not(:has(> .elementor-element ~ .elementor-element))),
.e-con.e-parent:where(:not(.sh-band):has(> .e-con-inner > .elementor-widget [data-sh-component] > .sh-container):not(:has(> .e-con-inner > .elementor-element ~ .elementor-element))) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--content-width: 100%;
}

/* ==== Difesa dal colore dei link del kit Elementor (vedi base.css) ==== */
.sh-header a,
.sh-drawer a,
.sh-breadcrumbs a,
.sh-pagination a {
	color: inherit;
}

.sh-footer .sh-footer__list a,
.sh-footer .sh-footer__contact > span,
.sh-footer .sh-footer__contact a,
.sh-footer .sh-footer__legal-menu a,
.sh-footer .sh-brand {
	color: var(--sh-ink);
}

.sh-footer .sh-footer__list a:hover,
.sh-footer .sh-footer__contact a:hover,
.sh-footer .sh-footer__legal-menu a:hover {
	color: var(--sh-red-text);
}