/**
 * Sezione "Trova il Caffè Napoli più vicino a te".
 *
 * Due colonne: copy a sinistra, carosello città a destra. Le schede sono un
 * blocco a sé (city-carousel/city-card) e portano il proprio stile; qui c'è
 * l'impaginazione della sezione e il pin del brand a cavallo delle schede.
 */

.vicino {
	padding-block: clamp( 80px, 10vw, 130px );

	/* Quanto passa fra il bordo destro della colonna larga e il vetro: il
	   rientro della pagina, e in più la metà dello spazio che avanza quando la
	   finestra è più larga della colonna. È la misura di cui il nastro delle
	   schede deve uscire per arrivare al bordo dello schermo. */
	--vicino-sforo: max(
		var(--wp--preset--spacing--50),
		calc( ( 100vw - var(--wp--style--global--wide-size) ) / 2 )
	);

	/* Il carosello sfora di proposito oltre il contenitore: senza questo
	   allungherebbe la pagina in orizzontale invece di essere tagliato. */
	overflow: hidden;
}

.vicino__inner {
	display: grid;
	grid-template-columns: minmax( 380px, 1fr ) minmax( 520px, 1.15fr );
	gap: clamp( 40px, 6vw, 90px );
	align-items: center;
}

.vicino__copy {
	max-width: 520px;
}

.vicino__eyebrow {
	font-style: italic;
	font-weight: 500;
	font-size: 22px;
	color: var(--wp--preset--color--navy);
	margin: 0 0 24px;
}

/* Il titolo è rosso e leggero; è la seconda metà a essere in grassetto, non
   in corsivo. Il contrasto è fra i pesi, non fra tondo e corsivo. */
.vicino__title {
	font-weight: 300;
	font-style: normal;
	font-size: clamp( 44px, 5vw, 72px );
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--rosso);
	margin: 0 0 28px;
}

.vicino__title strong {
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--rosso);
}

.vicino__lede {
	font-weight: 600;
	font-size: 19px;
	line-height: 1.55;
	color: #4a5470;
	max-width: 46ch;
	margin: 0 0 36px;
}

.vicino__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}

/* Il pin del pulsante: sagoma bianca con il foro rosso al centro, come
   l'SVG inline del riferimento. */
.vicino__cta .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: var(--cn-media-pin-coffee-inverse) center / contain no-repeat;
}

.vicino__cta .wp-block-button__link:hover,
.vicino__cta .wp-block-button__link:focus-visible {
}

/* --- Pin del brand ----------------------------------------------------- */

/* Sta a cavallo fra la colonna di testo e le schede. È decorazione pura:
   fuori dal flusso, inerte ai puntatori e invisibile alle tecnologie
   assistive. */
.vicino__pin {
	position: absolute;
	top: 60px;
	left: -90px;
	width: 170px;
	height: auto;
	z-index: 3;
	margin: 0;
	pointer-events: none;
	filter: drop-shadow( 0 12px 24px color-mix( in srgb, var(--wp--preset--color--rosso) 25%, transparent ) );
}

.vicino__carousel {
	position: relative;
	min-width: 0;
}

/* Il nastro esce dal rientro della pagina e se lo riprende come proprio
   padding: così l'accenno della scheda successiva è tagliato dal bordo dello
   schermo — prima si fermava dentro la colonna — e a fine corsa l'ultima
   scheda torna allineata al resto della pagina.

   Lo sforo sta sul nastro e non sul carosello perché le frecce sono figlie del
   carosello: allargando quello, su schermo stretto la freccia "avanti"
   finirebbe fuori dalla colonna. È l'impianto dei nastri della Loyalty e del
   carosello dei prodotti. */
.vicino__carousel .city-carousel__track {
	margin-right: calc( -1 * var(--vicino-sforo) );
	padding-right: var(--vicino-sforo);
}

/* Il pin si misura da qui: senza azzerare il margine fra blocchi, l'origine
   del contenitore sta 24px più in alto della traccia e il badge cade fuori
   dalla scheda invece che nel suo angolo. */
.vicino__carousel > * {
	margin-block-start: 0;
}


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

@media ( max-width: 900px ) {
	/* minmax(0, 1fr) e non 1fr: una traccia 1fr eredita un minimo pari al
	   contenuto, e la larghezza complessiva del carosello sfonderebbe la
	   colonna spingendo il testo fuori schermo. */
	.vicino__inner {
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 32px, 6vw, 48px );
	}

	.vicino__copy {
		min-width: 0;
		max-width: none;
	}

	.vicino__title {
		font-size: clamp( 34px, 8.5vw, 56px );
	}

	.vicino__lede {
		font-size: 16px;
	}

	/* `overflow: visible` e non `hidden`: era il taglio di questa scatola a
	   fermare l'accenno della scheda seguente venti pixel prima del bordo dello
	   schermo — la traccia ci arrivava, ma il disegno lo tagliava qui. A
	   impedire che il carosello esca invece di scorrere bastano i due
	   `min-width: 0`, questo e quello della traccia: senza di essi un elemento
	   di griglia prende come minimo la larghezza del proprio contenuto, ed è
	   quello il modo in cui una fila di schede sfonda la pagina. */
	.vicino__carousel {
		min-width: 0;
		overflow: visible;
	}

	/* Il pin scende dentro l'angolo delle schede e si rimpicciolisce: fuori
	   non ha più lo spazio della colonna di testo in cui sporgere. */
	.vicino__pin {
		display: block;
		top: 18px;
		left: 14px;
		width: 72px;
		z-index: 4;
		filter: drop-shadow( 0 6px 14px color-mix( in srgb, var(--wp--preset--color--rosso) 32%, transparent ) );
	}

	/* Le frecce tornano nel flusso, sopra la traccia e allineate a destra:
	   sotto non avrebbero più lo spazio negativo in cui stare. */
	.vicino__carousel .city-carousel__nav {
		position: static;
	}

	/* Griglia e non colonna flex: le due frecce vanno affiancate, non
	   impilate. Stanno sotto la traccia perché è lì che le mette il
	   riferimento — nel suo DOM la navigazione viene dopo il carosello e
	   in position: static resta al suo posto.

	   minmax(0, 1fr) e non 1fr: un elemento di griglia ha minimo pari al
	   contenuto, quindi la traccia si allargherebbe fino a contenere tutte
	   le schede invece di scorrere, allungando la pagina in orizzontale. */
	.vicino__carousel .city-carousel {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto auto;
		grid-template-areas:
			"track track track"
			".     prev  next";
		column-gap: 10px;
	}

	.vicino__carousel .city-carousel__track {
		grid-area: track;
		min-width: 0;
	}

	.vicino__carousel .city-carousel__nav--prev {
		grid-area: prev;
	}

	.vicino__carousel .city-carousel__nav--next {
		grid-area: next;
	}

	.vicino__carousel .city-carousel__nav {
		margin-bottom: 12px;
	}

	/* Una scheda intera più un accenno della successiva. */
	.vicino__carousel .city-card {
		flex: 0 0 80%;
	}

	/* L'interlinea ereditata lasciava più spazio ottico sotto le maiuscole
	   che sopra: a 1 i due padding si leggono uguali. */
	.vicino__cta .wp-block-button__link,
	.vicino__carousel .city-card__pill {
		line-height: 1;
	}
}

@media ( max-width: 600px ) {
	.vicino {
		padding-block: clamp( 56px, 12vw, 80px );
	}

	.vicino__title {
		font-size: clamp( 30px, 8vw, 40px );
	}

	.vicino__eyebrow {
		font-size: 18px;
		margin-bottom: 16px;
	}
}