/**
 * Pagina Lo studio.
 *
 * La testata di pagina (.pao-page-hero), il banner e la fascia finale stanno in
 * trattamenti.css: sono condivisi fra le pagine interne.
 */

/* -----------------------------------------------------------------------------
 * Intestazione di sezione (comune ad ambienti e tecnologie)
 * -------------------------------------------------------------------------- */

.pao-testa-pagina {
	max-width: 640px;
	margin-bottom: 56px;
}

/* Dentro la colonna del testo l'intestazione non ha bisogno di un limite suo:
   la larghezza gliela da' la colonna, e lo stacco puo' essere piu' contenuto. */
.pao-ambienti__testo .pao-testa-pagina {
	max-width: none;
	margin-bottom: var(--pao-space-6);
}

.pao-testa-pagina__titolo {
	margin-bottom: 14px;
	font-family: var(--pao-font-display);
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--pao-primary);
}

.pao-testa-pagina__sottotitolo {
	font-family: var(--pao-font-display);
	font-size: 22px;
	font-style: italic;
	font-weight: 500;
	color: var(--pao-muted);
}

/* -----------------------------------------------------------------------------
 * Gli ambienti
 * -------------------------------------------------------------------------- */

.pao-ambienti__griglia {
	display: grid;
	gap: var(--pao-space-7);
}

/*
 * ⚠ Il `:not()` esclude titolo e sottotitolo dell'intestazione, che sono <p>
 * anche loro. Da quando l'intestazione sta DENTRO questa colonna, la regola
 * qui sotto li raggiungeva e li batteva per specificita' - due classi contro
 * una - e il titolo usciva a 16px invece che a 52.
 */
.pao-ambienti__testo p:not([class]) {
	margin: 0 0 var(--pao-space-5);
	font-size: 16px;
	line-height: 1.8;
	color: var(--pao-body);
}

.pao-ambienti__testo h3 {
	margin: 36px 0 14px;
	font-size: 20px;
	letter-spacing: -0.01em;
	color: var(--pao-primary);
}

.pao-ambienti__foto {
	/* Il riquadro resta in vista mentre si legge la colonna accanto, che e'
	   piu' lunga: cosi' si puo' sfogliare senza tornare su. */
	position: sticky;
	top: var(--pao-space-6);
}

/* -----------------------------------------------------------------------------
 * Le tecnologie
 * -------------------------------------------------------------------------- */

.pao-tecno__intro {
	max-width: 72ch;
	margin-bottom: var(--pao-space-7);
	font-size: 17px;
	line-height: 1.7;
	color: var(--pao-body);
}

.pao-banner--studio {
	margin-bottom: var(--pao-space-7);
}

.pao-tecno__lista {
	display: flex;
	flex-direction: column;
}

.pao-tecno__voce {
	display: grid;
	gap: var(--pao-space-5);
	align-items: start;
	padding: var(--pao-space-7) 0;
	border-bottom: var(--pao-hairline) solid var(--pao-border-strong);
}

.pao-tecno__voce:first-child {
	border-top: var(--pao-hairline) solid var(--pao-border-strong);
}

.pao-tecno__lato {
	display: flex;
	align-items: center;
	gap: var(--pao-space-4);
}

.pao-tecno__icona {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--pao-radius-md);
	background-color: var(--pao-accent-soft);
	color: var(--pao-primary);
}

.pao-tecno__titolo {
	font-size: var(--pao-fs-tech);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--pao-primary);
}

.pao-tecno__testo {
	font-size: 15px;
	line-height: 1.8;
	color: var(--pao-body);
}

/* -----------------------------------------------------------------------------
 * Galleria di una tecnologia
 * -------------------------------------------------------------------------- */

.pao-galleria__scatti {
	position: relative;
	height: 180px;
	border-radius: var(--pao-radius-md);
	background-color: var(--pao-primary-light);
	overflow: hidden;
}

.pao-galleria__scatto {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 320ms var(--pao-ease-out);
}

.pao-galleria__scatto.is-attivo {
	opacity: 1;
}

.pao-galleria__scatto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Variante degli ambienti: riquadro grande e quadrato.
 *
 * Le foto sono un misto di verticali (1065x1600) e orizzontali (1537x1023), e
 * il QUADRATO e' la forma che le tratta meglio entrambe: qualsiasi altro
 * rapporto favorisce un orientamento e penalizza l'altro.
 *
 * `cover` riempie il riquadro e ritaglia dal centro: una verticale perde un
 * terzo fra sopra e sotto, una orizzontale un terzo fra i lati. Sono
 * fotografie di ambienti, dove il soggetto sta al centro e i bordi sono
 * pareti e pavimento: si perde poco, e il riquadro resta pieno.
 *
 * ⚠ L'alternativa e' `contain`, che mostra la foto intera e lascia un margine
 * grigio sui lati o sopra e sotto. Da riprendere se un giorno arriva una foto
 * il cui soggetto tocca un bordo, perche' li' il ritaglio se lo mangerebbe.
 */
.pao-galleria--ambienti .pao-galleria__scatti {
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--pao-radius-xl);
	background-color: var(--pao-primary-light);
}

.pao-galleria--ambienti .pao-galleria__scatto img {
	object-fit: cover;
}

.pao-galleria__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pao-space-3);
	margin-top: var(--pao-space-3);
}

.pao-galleria__punti {
	display: flex;
	gap: 6px;
}

/* Il punto è piccolo ma il bersaglio no: il padding lo porta a 24px senza
   ingrandire il pallino (§11, touch target). */
.pao-galleria__punto {
	width: 24px;
	height: 24px;
	padding: 9px;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	box-sizing: border-box;
}

.pao-galleria__punto::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--pao-border-strong);
	transition: background-color var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-galleria__punto.is-attivo::before,
.pao-galleria__punto:hover::before {
	background-color: var(--pao-primary);
}

.pao-galleria__frecce {
	display: flex;
	gap: 6px;
}

.pao-galleria__freccia {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--pao-border-strong);
	border-radius: 50%;
	background-color: transparent;
	color: var(--pao-primary);
	cursor: pointer;
	transition:
		background-color var(--pao-dur-fast) var(--pao-ease-out),
		border-color var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-galleria__freccia:hover {
	background-color: var(--pao-bg);
	border-color: var(--pao-primary);
}

.pao-galleria__freccia svg {
	width: 16px;
	height: 16px;
}

/* -----------------------------------------------------------------------------
 * Breakpoint
 * -------------------------------------------------------------------------- */

@media (min-width: 900px) {

	.pao-ambienti__griglia {
		grid-template-columns: 1fr 1fr;
		gap: var(--pao-space-8);
		align-items: start;
	}

	/* Senza foto il testo non deve restare in mezza pagina con un buco a
	   fianco: torna a colonna piena, con una misura di riga leggibile. */
	.pao-ambienti__griglia--senza-foto {
		grid-template-columns: 1fr;
		max-width: 72ch;
	}
}

@media (min-width: 1200px) {

	/* Il minmax(340px, 1fr) sulla colonna centrale è necessario: senza il
	   pavimento, fra 900 e 1200 il testo si strozzava a poco più di 140px. */
	.pao-tecno__voce {
		grid-template-columns: 300px minmax(340px, 1fr) 240px;
		gap: 40px;
	}

	.pao-tecno__voce--senza-foto {
		grid-template-columns: 300px minmax(340px, 1fr);
	}

	.pao-tecno__lato {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pao-space-4);
	}
}