/**
 * "La tradizione del caffè sospeso" — pannello blu a sinistra, fotografia della
 * lavagna a piena altezza a destra, e un chicco appeso al bordo alto.
 *
 * Il markup a blocchi porta struttura, contenuto, colori (gradiente da preset)
 * e scala tipografica. Qui resta la banda divisa in due metà, l'allineamento
 * del pannello alla cornice di pagina e l'ancoraggio del chicco, che è la parte
 * delicata: sconfina sopra la sezione e a schermo stretto cambia posto.
 */

/* Il chicco esce dal bordo superiore: la sezione non va mai messa in
   `overflow: hidden`, e serve il contesto di impilamento perché il chicco passi
   sopra alla sezione precedente. */

/* Il fondo scuro non si vede quasi mai — le due metà lo coprono tutto — ma
   deve esserci, ed è per la riga di confine con la cremina.

   Tutta la pagina è impaginata su frazioni di pixel, quindi il bordo alto di
   questa sezione cade a metà pixel: la metà sinistra e la metà destra lo
   arrotondano ognuna per conto suo e, a certi ingrandimenti, la fotografia di
   destra comincia un pixel più in basso del pannello di sinistra. In quella
   riga non c'era niente da disegnare e si vedeva il bianco della pagina, in
   mezzo al bordeaux della cremina sopra e alla foto sotto. La cremina si
   difende già da sola con un pixel di sovrapposizione, ma qui non basta:
   questa sezione ha `z-index: 1` e le passa davanti, quindi la riga scoperta
   la deve chiudere lei.

   `ink` e non un colore inventato: è lo stesso fondo che la fotografia si
   tiene sotto, e sul confine fra due bande scure una riga di quel tono non si
   distingue da nessuno dei due lati. */
.sospeso {
	position: relative;
	z-index: 1;
	background-color: var(--wp--preset--color--ink);
}

/* Le due metà sono esattamente metà: è una banda divisa, non un contenitore
   con margini, quindi niente gutter e niente contenitore wide. */
.sospeso__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp( 520px, 56vw, 760px );
}

/* Il gruppo ha layout di flusso lato blocco e qui diventa una griglia: senza
   questo i margini fra fratelli del blockGap si sommano alla riga. */
.wp-block-group.sospeso__split > * + * {
	margin-block-start: 0;
}

/* --- Pannello di sinistra --------------------------------------------- */

/* Il padding a sinistra non è simmetrico: allinea il testo alla cornice di
   pagina finché c'è spazio, poi si limita al proprio minimo. È lo stesso
   allineamento del pannello di "Porta Napoli". */
.sospeso__panel {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: clamp( 56px, 7vw, 110px );
	padding-inline: max(
			clamp( 28px, 5vw, 88px ),
			calc(
				( 100vw - var(--wp--custom--layout--frame) ) / 2 +
					var(--wp--preset--spacing--50)
			)
		)
		clamp( 28px, 5vw, 88px );
}

/* Il chicco è il primo figlio del pannello e il contenuto il secondo, quindi il
   blockGap dava al contenuto 24px in testa. Il chicco è fuori flusso, così quei
   pixel non si vedevano come spazio fra due cose: allungavano il pannello. */
.wp-block-group.sospeso__panel > * {
	margin-block-start: 0;
}

.sospeso__content {
	width: 100%;
	max-width: 560px;
}

/* Il ritmo verticale è di due margini espliciti, diversi fra loro: il reset del
   blockGap e i valori voluti stanno alla stessa specificità, altrimenti le due
   classi che battono il primo battono anche i secondi. */
.wp-block-group.sospeso__content > * {
	margin-block-start: 0;
}

.wp-block-group.sospeso__content > .sospeso__desc {
	margin-block-start: clamp( 20px, 2.4vw, 32px );
}

.wp-block-group.sospeso__content > .sospeso__quote {
	margin-block-start: clamp( 20px, 2.4vw, 32px );
}

.wp-block-group.sospeso__content > .sospeso__cta {
	margin-block-start: clamp( 28px, 3.5vw, 48px );
}

/* Due righe strette una sull'altra, come nella cremina: l'interruzione sta nel
   titolo e l'interlinea sotto l'unità fa il resto. */
.sospeso__title {
	margin: 0;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.015em;
}

/* La seconda riga è più stretta di tracciatura, non solo più grassa. */
.sospeso__title strong {
	font-weight: 700;
	letter-spacing: -0.025em;
}

.sospeso__desc {
	max-width: 520px;
	line-height: 1.65;
}

/* --- La citazione ------------------------------------------------------ */

/* Stessa impostazione della banda dei fondatori: le virgolette stanno nel
   testo e non in uno pseudo-elemento — sono parte della citazione, non
   decorazione — e la firma è il <cite> del blocco di core, cioè la fonte di
   ciò che si cita.
   `border` e `padding` vanno azzerati: il blocco citazione di core arriva con
   un filetto e un rientro propri, che qui sul pannello blu si leggerebbero
   come un elemento in più invece che come un a capo del racconto. */
.sospeso__quote {
	max-width: 520px;
	margin: 0;
	padding: 0;
	border: 0;
	font-style: italic;
	line-height: 1.6;
}

.sospeso__quote p {
	margin: 0;
}

.sospeso__quote cite {
	display: block;
	margin-block-start: 14px;
	font-style: normal;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Un filo più spenta del corpo: è la firma, non la frase. */
	color: color-mix( in srgb, currentColor 78%, transparent );
}

/* --- Bottone ---------------------------------------------------------- */

.sospeso__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

/* Il pin sta dentro a un tondo rosso. È decorativo, quindi pseudo-elemento:
   così non entra nell'albero di accessibilità e non va descritto. */
.sospeso__cta .wp-block-button__link::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--rosso);
	background-image: var(--cn-media-pin-coffee-inverse);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;
}
/* Il passaggio non e' piu' qui: i bottoni bianchi virano tutti sullo stesso
   grigio chiaro, dichiarato una volta in `button.css`. Il `floral` che stava
   qui era a un passo dal bianco e non si distingueva. */

/* --- Fotografia di destra --------------------------------------------- */

.sospeso__photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
}

.sospeso__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- Chicco flottante ------------------------------------------------- */

/* Ancorato al pannello e non alla sezione: sporge dal bordo alto, sopra la
   sezione precedente — è per questo che si vede un chicco in fondo alla banda
   della cremina. z-index 3 per stare sopra al pannello e alla fotografia. */
.sospeso__bean {
	position: absolute;
	top: -40px;
	right: clamp( 40px, 8vw, 120px );
	z-index: 3;
	width: clamp( 80px, 8vw, 130px );
	height: auto;
	margin: 0;
	transform: rotate( -18deg );
	pointer-events: none;
	user-select: none;
}

/* --- Schermi stretti -------------------------------------------------- */

@media ( max-width: 900px ) {
	.sospeso__split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.sospeso__panel {
		padding-block: clamp( 48px, 9vw, 72px );
		padding-inline: clamp( 24px, 6vw, 48px );
	}

	.sospeso__photo {
		min-height: clamp( 320px, 60vw, 480px );
	}

	/* A colonna singola il chicco resta a destra, e più vicino al bordo che sul
	   desktop.

	   Al centro no: da lì scavalcava la fila dei passaggi della cremina, che
	   sporge dalla sezione sopra proprio dove il chicco sconfina — a 414px si
	   sovrapponevano per otto pixel in altezza e settantasei in larghezza. La
	   fila è larga 260px fissi sul telefono e comincia al margine del pannello,
	   quindi finisce sempre intorno ai 288: ancorando il chicco al bordo destro
	   con questo rientro, fra i due restano quattordici pixel su uno schermo da
	   375 e più su tutti gli altri.

	   Niente `translateX` nella posa: il modulo dei chicchi anima `translate` e
	   `rotate` come proprietà a sé proprio per comporsi con questa senza
	   sovrascriverla. */
	.sospeso__bean {
		top: clamp( -46px, -10vw, -34px );
		left: auto;
		right: clamp( 10px, 3vw, 28px );
		width: clamp( 62px, 14vw, 92px );
		transform: rotate( -12deg );
	}
}