/**
 * Element:     Società del Gruppo
 * Class:       .hi-cva-societa
 * Description: Le società del Gruppo CVA, una alla volta, in un pannello
 *              chiaro che poggia su una foto di impianto.
 *
 * DUE VINCOLI HANNO DECISO LA FORMA
 *
 * 1. I loghi sono PNG scuri su fondo trasparente, e piccoli (75–131 px). Non
 *    possono stare su fondo scuro né essere ingranditi: da qui il pannello
 *    chiaro sopra la foto e il `max-width` del logo legato alla sua larghezza
 *    naturale, con `width: auto` a proteggerlo dagli stiramenti del tema.
 *
 * 2. Le schede hanno lunghezze molto diverse — due hanno anche i recapiti.
 *    Impilandole tutte nella stessa cella di griglia, l'altezza del contenitore
 *    è quella della più alta e non cambia mai: cambiando scheda il pannello
 *    non salta e la pagina sotto non si sposta. È il motivo per cui le schede
 *    non sono `display: none` ma nascoste con visibility/opacity.
 */

.hi-cva-societa {
	--hi-cva-soc-velo: rgba(8, 22, 38, .62);
	--hi-cva-soc-ink: var(--color-content-heading, #194167);
	--hi-cva-soc-text: var(--color-content-text, #0c2236);
	--hi-cva-soc-faded: var(--color-content-faded, rgba(12, 34, 54, .55));
	--hi-cva-soc-accent: var(--color-content-primary, #00b5e2);
	--hi-cva-soc-bg: var(--color-content-bg, #ffffff);
	--hi-cva-soc-line: var(--color-content-border, #e7edf1);

	position: relative;
	isolation: isolate;
	padding: clamp(48px, 7vw, 104px) 0;
}

.hi-cva-societa *,
.hi-cva-societa *::before,
.hi-cva-societa *::after {
	box-sizing: border-box;
}

/* La larghezza reale la dà il viewport meno la barra di scorrimento: 100vw la
   comprende e genererebbe scroll orizzontale. */
.hi-cva-societa--bleed {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

@supports (width: 100dvw) {
	.hi-cva-societa--bleed {
		width: 100dvw;
		margin-left: calc(50% - 50dvw);
	}
}

/* ==========================================================================
   Sfondo
   Immagine e velo su un livello a parte: così il velo non eredita opacità
   dal contenuto e la foto può restare ferma senza trascinarsi il pannello.
   ========================================================================== */

.hi-cva-societa__sfondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #0c2236;
	background-image: var(--hi-cva-soc-img, none);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

.hi-cva-societa__sfondo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--hi-cva-soc-velo);
}

/* Parallasse solo dove il browser la regge: su touch `fixed` viene reso a
   scatti o ignorato, e con reduced-motion non va proposta affatto. */
@media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hi-cva-societa--fissa .hi-cva-societa__sfondo {
		background-attachment: fixed;
	}
}

.hi-cva-societa__dentro {
	width: min(1180px, 100% - clamp(32px, 8vw, 140px));
	margin-inline: auto;
}

.hi-cva-societa__occhiello {
	margin: 0 0 clamp(16px, 2vw, 26px);
	color: #ffffff;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 500;
}

/* ==========================================================================
   Pannello
   ========================================================================== */

.hi-cva-societa__pannello {
	background: var(--hi-cva-soc-bg);
	border-radius: 4px;
	box-shadow: 0 30px 70px rgba(6, 18, 32, .28);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Barra delle società
   Scorre in orizzontale quando non ci sta: meglio uno scorrimento esplicito
   che nomi mandati a capo o rimpiccioliti fino a non leggersi.
   -------------------------------------------------------------------------- */

.hi-cva-societa__barra {
	display: flex;
	gap: clamp(4px, 1.4vw, 28px);
	padding: 0 clamp(20px, 3.4vw, 48px);
	border-bottom: 1px solid var(--hi-cva-soc-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.hi-cva-societa__barra::-webkit-scrollbar {
	display: none;
}

.hi-cva-societa__voce {
	flex: 0 0 auto;
	position: relative;
	margin: 0;
	padding: clamp(16px, 2vw, 24px) 4px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--hi-cva-soc-faded);
	font: inherit;
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: color 200ms ease;
}

/* Il filetto è un figlio del pulsante e non un bordo, così può animarsi in
   larghezza senza spostare il testo. */
.hi-cva-societa__voce::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--hi-cva-soc-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 240ms ease;
}

.hi-cva-societa__voce:hover,
.hi-cva-societa__voce:focus-visible {
	color: var(--hi-cva-soc-ink);
}

.hi-cva-societa__voce[aria-selected='true'] {
	color: var(--hi-cva-soc-ink);
	font-weight: 600;
}

.hi-cva-societa__voce[aria-selected='true']::after {
	transform: scaleX(1);
}

.hi-cva-societa__voce:focus-visible {
	outline: 2px solid var(--hi-cva-soc-accent);
	outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Schede
   Tutte nella stessa cella: l'altezza è quella della più alta, sempre.
   -------------------------------------------------------------------------- */

.hi-cva-societa__schede {
	display: grid;
}

.hi-cva-societa__scheda {
	grid-area: 1 / 1;
	padding: clamp(28px, 3.6vw, 52px) clamp(20px, 3.4vw, 48px) clamp(32px, 4vw, 56px);
	opacity: 1;
	transition: opacity 260ms ease;
}

/* `hidden` non basta: serve che la scheda continui a occupare la cella per
   tenere l'altezza, quindi si annulla display:none e si nasconde altrimenti. */
.hi-cva-societa__scheda[hidden] {
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.hi-cva-societa__scheda:focus-visible {
	outline: 2px solid var(--hi-cva-soc-accent);
	outline-offset: -6px;
}

.hi-cva-societa__testata {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 24px);
	margin-bottom: clamp(18px, 2.4vw, 30px);
	padding-bottom: clamp(16px, 2vw, 24px);
	border-bottom: 1px solid var(--hi-cva-soc-line);
}

/* Il logo non va mai ingrandito: i file originali arrivano a 131 px di lato.
   `max-width` lo vincola alla sua larghezza naturale, `width: auto` lo
   protegge dalle regole del tema che stirano le immagini al 100%. */
.hi-cva-societa__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.hi-cva-societa__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 46px;
}

.hi-cva-societa__nome {
	margin: 0;
	color: var(--hi-cva-soc-ink);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.2;
	letter-spacing: -.01em;
}

/* Testo e recapiti affiancati quando c'è spazio: riempie la larghezza senza
   allungare il pannello, ed è ciò che tiene simili le altezze delle schede. */
.hi-cva-societa__corpo {
	display: grid;
	gap: clamp(22px, 3vw, 48px);
}

@media (min-width: 860px) {
	.hi-cva-societa__corpo:has(.hi-cva-societa__sede) {
		grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
	}
}

.hi-cva-societa__testo p {
	margin: 0;
	max-width: 68ch;
	color: var(--hi-cva-soc-text);
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.65;
}

.hi-cva-societa__testo strong {
	color: var(--hi-cva-soc-ink);
	font-weight: 600;
}

.hi-cva-societa__azione {
	margin-top: clamp(20px, 2.4vw, 30px) !important;
}

.hi-cva-societa__link {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	color: var(--hi-cva-soc-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}

.hi-cva-societa__link span[aria-hidden] {
	transition: transform 200ms ease;
}

.hi-cva-societa__link:hover span[aria-hidden],
.hi-cva-societa__link:focus-visible span[aria-hidden] {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Recapiti
   -------------------------------------------------------------------------- */

.hi-cva-societa__sede {
	padding-left: clamp(18px, 2vw, 26px);
	border-left: 2px solid var(--hi-cva-soc-accent);
}

.hi-cva-societa__etichetta {
	margin: 0 0 12px;
	color: var(--hi-cva-soc-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.hi-cva-societa__sede address {
	margin: 0;
	font-style: normal;
}

.hi-cva-societa__sede address span {
	display: block;
	color: var(--hi-cva-soc-faded);
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.85;
	overflow-wrap: anywhere;
}

.hi-cva-societa__sede a {
	color: var(--hi-cva-soc-text);
	text-decoration: none;
	border-bottom: 1px solid var(--hi-cva-soc-line);
	transition: color 200ms ease, border-color 200ms ease;
}

.hi-cva-societa__sede a:hover,
.hi-cva-societa__sede a:focus-visible {
	color: var(--hi-cva-soc-accent);
	border-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.hi-cva-societa__scheda,
	.hi-cva-societa__voce,
	.hi-cva-societa__voce::after,
	.hi-cva-societa__link span[aria-hidden] {
		transition: none;
	}
}