/**
 * Franchising CTA — foto a sinistra, pannello blu a tutta larghezza a destra.
 *
 * La sezione è sabbia; il blu è uno pseudo-elemento che parte a una certa
 * altezza e arriva in fondo. Nel riferimento sono due `div` vuoti sovrapposti
 * (uno sabbia sul sabbia, ridondante): qui la banda superiore è il fondo della
 * sezione e resta un solo elemento decorativo, che non essendo contenuto non
 * ha ragione di essere un blocco.
 *
 * La classe è `franchising-cta` e non `franchising` di proposito: nel
 * riferimento `.franchising` è anche il nome della sezione della pagina
 * Franchising, che ha markup e regole tutti suoi. Due significati sotto la
 * stessa classe si scontrerebbero appena quella pagina verrà costruita.
 *
 * Come altrove, le regole che assegnano margini ai figli diretti di un gruppo
 * portano due classi: il layout di flusso di core stampa `> * + *` con la
 * specificità di una classe sola e più avanti nel documento.
 */

.franchising-cta {
	position: relative;
	/* Il distintivo esce a destra fino al bordo del viewport: oltre non deve
	   allargare la pagina. */
	overflow: hidden;
	padding-block: clamp( 28px, 4.5vw, 72px ) clamp( 40px, 6vw, 96px );
}

/* La banda blu. `inset` la incolla ai tre lati e la fa partire dall'altezza in
   cui il sabbia finisce — è quel taglio a mandare la foto a cavallo dei due
   colori. */
.franchising-cta::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: clamp( 96px, 13vw, 168px ) 0 0;
	background-image: var(--wp--preset--gradient--banda-golfo);
}

/* --- Griglia ----------------------------------------------------------- */

/* La cornice è la misura esterna del riferimento (1280px, gutter incluso),
   diversa da wideSize che in WordPress è la scatola del contenuto.
   `position: relative` serve due volte: alza la griglia sopra la banda blu, e
   sotto i 900px diventa il riferimento del distintivo, che lì è assoluto. */
.franchising-cta__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 45fr 55fr;
	align-items: stretch;
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.wp-block-group.franchising-cta__grid > * {
	margin-block-start: 0;
}

/* --- Foto -------------------------------------------------------------- */

/* Il margine destro negativo fa scavalcare alla foto il confine fra le due
   colonne: è quella sovrapposizione a legare la scheda al pannello blu. */
.franchising-cta__photo {
	position: relative;
	z-index: 2;
	align-self: center;
	margin-right: clamp( -80px, -5vw, -40px );
}

.franchising-cta__photo img {
	display: block;
	width: 100%;
	height: auto;
	/* Il file è 3:2 e viene ritagliato a 4:5: è un ritaglio voluto, non un
	   adattamento, e il centro della foto è dove stanno le tre persone. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 24px 48px -16px rgba( 0, 0, 0, 0.35 );
}

/* --- Colonna destra ---------------------------------------------------- */

/* Il padding sinistro generoso lascia respirare la foto che sconfina, e
   l'altezza minima tiene il pannello blu alto anche quando il testo è corto. */
.franchising-cta__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: clamp( 420px, 48vw, 620px );
	padding: clamp( 28px, 4vw, 56px ) clamp( 28px, 4vw, 64px )
		clamp( 36px, 5vw, 64px ) clamp( 90px, 11vw, 170px );
}

.wp-block-group.franchising-cta__content > * {
	margin-block-start: 0;
}

/* --- Distintivo -------------------------------------------------------- */

/* Arriva a filo del viewport: il margine negativo somma lo scarto fra la
   cornice e la finestra, il gutter della griglia e il padding destro della
   colonna. Sotto la cornice resta il solo gutter, ed è perché serve `max()`. */
.franchising-cta__badge {
	position: relative;
	z-index: 3;
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-right: calc(
		-1 * (
			max(
				var(--wp--preset--spacing--50),
				calc(
					( 100vw - var(--wp--custom--layout--frame) ) / 2 +
						var(--wp--preset--spacing--50)
				)
			) + clamp( 28px, 4vw, 64px )
		)
	);
	padding: 14px 22px 14px 18px;
	border-radius: var(--wp--custom--radius--lg) 0 0
		var(--wp--custom--radius--lg);
	box-shadow: 0 12px 28px -14px rgba( 0, 0, 0, 0.4 );
}

/* Risale di poco dentro al padding della colonna, così sfiora il taglio fra
   sabbia e blu. Due classi, come gli altri margini di questa sezione. */
.wp-block-group.franchising-cta__content > .franchising-cta__badge {
	margin-block-start: clamp( -8px, -1vw, 0px );
}

.wp-block-group.franchising-cta__badge > * {
	margin-block-start: 0;
}

.franchising-cta__crest {
	flex: none;
	width: clamp( 44px, 4vw, 56px );
}

.franchising-cta__crest img {
	display: block;
	width: 100%;
	height: auto;
}

/* `inline-block` perché la larghezza del blocco di testo sia quella della riga
   più lunga — "DI CAFFETTERIA NAPOLETANA" — e non quella dello spazio
   disponibile: è quella misura che le altre due righe vanno a riempire. */
.franchising-cta__badge-text {
	display: inline-block;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.franchising-cta__badge-text .is-line {
	display: block;
	white-space: nowrap;
}

/* Le due righe corte si allargano fino alla riga di riferimento. */
.franchising-cta__badge-text .is-line:not( .is-ref ) {
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
}

/* La riga forte ha una scala sua, non un multiplo di quella piccola: fra i
   390px e i 1440px il rapporto fra le due passa da 1,6 a 1,9, e un `em` fisso
   lo avrebbe appiattito allargando il distintivo sul telefono. Il preset si
   legge dalla variabile perché il destinatario è uno `span` dentro al
   paragrafo, e uno span non porta attributi di blocco. */
.franchising-cta__badge-text .is-lead {
	margin-block: 2px;
	font-size: var(--wp--preset--font-size--badge-lead);
	font-weight: 800;
	line-height: 1;
}

/* --- Testo ------------------------------------------------------------- */

/* Il margine automatico spinge il testo in fondo alla colonna: è così che il
   distintivo resta in alto e il blocco di copy si appoggia alla base. Due
   classi perché è la regola che azzera i margini dei figli — qui sopra — a
   doverlo lasciar passare: a classe singola perdeva, e il testo restava
   attaccato al distintivo. */
.franchising-cta__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-top: clamp( 40px, 5vw, 70px );
}

.wp-block-group.franchising-cta__content > .franchising-cta__copy {
	margin-block-start: auto;
}

.wp-block-group.franchising-cta__copy > * {
	margin-block-start: 0;
}

.franchising-cta__title {
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.3px;
}

.franchising-cta__title strong {
	font-weight: 700;
}

.franchising-cta__lede {
	max-width: 38ch;
	font-weight: 700;
	line-height: 1.45;
}

.franchising-cta__desc {
	max-width: 46ch;
	line-height: 1.55;
	opacity: 0.92;
}

/* --- Riga della call to action ----------------------------------------- */

.franchising-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Stacco in più rispetto al passo del blocco di copy: la riga d'azione non è
   un'altra riga di testo. Due classi per lo stesso motivo del margine qui
   sopra. */
.wp-block-group.franchising-cta__copy > .franchising-cta__actions {
	margin-block-start: clamp( 16px, 2vw, 28px );
}

.wp-block-group.franchising-cta__actions > * {
	margin-block-start: 0;
}

.franchising-cta__ask {
	font-style: italic;
	font-weight: 500;
}

.franchising-cta__btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

/* Freccia decorativa: pseudo-elemento, così non entra nell'albero di
   accessibilità. La maschera la tinge del colore del testo. */
.franchising-cta__btn .wp-block-button__link::after {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-image: var(--cn-media-freccia-bottone);
	mask-image: var(--cn-media-freccia-bottone);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.franchising-cta__btn .wp-block-button__link:hover,
.franchising-cta__btn .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--rosso-dark) !important;
}

/* --- Sotto i 900px ------------------------------------------------------ */

@media ( max-width: 900px ) {
	/* Una colonna: la foto sopra, il testo sotto. Il taglio fra sabbia e blu
	   sale, perché la foto non è più al centro della sezione ma in cima. */
	.franchising-cta::before {
		inset: clamp( 72px, 24vw, 120px ) 0 0;
	}

	.franchising-cta__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.franchising-cta__photo {
		align-self: stretch;
		margin-right: 0;
	}

	/* Lo stacco che lascia vedere la fascia di sabbia sopra alla foto. Due
	   classi: a classe singola lo azzererebbe il reset dei margini della
	   griglia, e la foto partirebbe attaccata al bordo della sezione. */
	.wp-block-group.franchising-cta__grid > .franchising-cta__photo {
		margin-block-start: clamp( 40px, 12vw, 68px );
	}

	/* Meno alta e più larga: in colonna singola una 4:5 mangerebbe tutto lo
	   schermo prima di arrivare al testo. */
	.franchising-cta__photo img {
		aspect-ratio: 4 / 3;
	}

	.franchising-cta__content {
		position: static;
		min-height: auto;
		padding: 28px 24px 36px;
	}

	/* Il distintivo tiene l'aspetto del desktop — angoli tondi a sinistra, a
	   filo del bordo destro — ma si sposta sopra alla foto. Il contenitore
	   passa a `static` apposta: così il riferimento del posizionamento diventa
	   la griglia, cioè la foto, e non il blocco di testo che sta sotto. */
	.franchising-cta__badge {
		position: absolute;
		z-index: 6;
		top: clamp( 14px, 5vw, 36px );
		right: 0;
		left: auto;
		margin: 0;
	}

	.franchising-cta__copy {
		padding-top: 24px;
	}
}

@media ( max-width: 520px ) {
	.franchising-cta__actions {
		flex-direction: column;
		align-items: center;
	}

	.franchising-cta__ask {
		width: 100%;
		text-align: center;
	}

	.franchising-cta__btn,
	.franchising-cta__btn .wp-block-button__link {
		justify-content: center;
	}
}