/**
 * HOME: redesign "premium sobrio".
 *
 * Pagina: Modules/Frontend/resources/views/home.blade.php
 * Cascade: temi vendor -> ags-tokens -> ags-components -> frontend/footer -> questo file.
 *
 * Regole rispettate qui:
 * - solo variabili --ags-* (nessun colore letterale);
 * - nessun important forzato: le regole Select2 usano selettori più specifici di
 *   quelli del CSS di Select2 (iniettato a runtime in fondo all'<head>, quindi
 *   dopo questo file: l'ordine di cascata non basta, serve la specificità);
 * - le immagini di sfondo arrivano da custom property impostate nel Blade con asset(),
 *   così nessun attributo style="" nel markup;
 * - la comparsa allo scroll vale solo con js-motion (frontend.js); le animazioni legate
 *   allo scorrimento solo dove il browser le supporta e il movimento non è ridotto.
 *
 * Forme: campi, pulsanti e insegne 8px, card 12px, scelte della figura e avatar tondi.
 *
 * Prefisso di pagina: .home-*
 */

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */

.home-hero
{
	align-items:      center;
	background-color: var(--ags-ink); /* ripiego quando l'immagine non c'è */
	display:          flex;
	padding-block:    140px 88px;
	position:         relative;
}

/* Livello foto separato: si assesta al caricamento e scorre più lenta della pagina
   dentro il proprio ritaglio, senza tagliare il menu a tendina della zona. */
.home-hero__media
{
	inset:    0;
	overflow: hidden;
	position: absolute;
}

/* Velo direzionale: una zona più scura dietro testo e ricerca, una sfumatura che chiude
   l'hero in basso; ai lati la fotografia resta leggibile. */
.home-hero__media::before
{
	background-image:
		radial-gradient(ellipse 60% 58% at 50% 56%, color-mix(in srgb, var(--ags-ink) 58%, transparent) 0%, transparent 100%),
		linear-gradient(to bottom, color-mix(in srgb, var(--ags-ink) 40%, transparent) 0%, color-mix(in srgb, var(--ags-ink) 10%, transparent) 32%, color-mix(in srgb, var(--ags-ink) 26%, transparent) 70%, color-mix(in srgb, var(--ags-ink) 80%, transparent) 100%),
		var(--home-hero-bg);
	background-position: center;
	background-size:     cover;
	content:             "";
	inset:               0;
	position:            absolute;
}

.home-hero > .ags-container
{
	position: relative;
	z-index:  1;
}

.home-hero__content
{
	margin:     0 auto var(--ags-space-5);
	max-width:  62ch;
	text-align: center;
}

/* Logo senza fondo: sulla foto scura la versione trasparente si legge da sola. */
.home-hero__logo
{
	display:  block;
	height:   52px;
	margin:   0 auto var(--ags-space-3);
	width:    auto;
}

.home-hero__title
{
	color:          var(--ags-white);
	font-size:      clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem);
	letter-spacing: -0.015em;
	line-height:    1.1;
	margin:         0 0 var(--ags-space-2);
}

.home-hero__subtitle
{
	color:       color-mix(in srgb, var(--ags-white) 90%, transparent);
	font-size:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.5;
	margin:      0 auto;
	max-width:   46ch;
	text-wrap:   balance;
}

/* Card della ricerca: l'elemento principale dell'hero. Con un campo attivo l'ombra si
   allarga e compare un alone chiaro. Niente transform: sposterebbe il menu a tendina
   della zona, che si posiziona dentro la card. */
.home-hero__search
{
	background:    var(--ags-white);
	border-radius: var(--ags-radius-container);
	box-shadow:    0 30px 60px -30px color-mix(in srgb, var(--ags-ink) 80%, transparent);
	margin-inline: auto;
	max-width:     880px;
	padding:       var(--ags-space-4);
	transition:    box-shadow 0.35s var(--ags-ease-out);
}

.home-hero__search:focus-within
{
	box-shadow:
		0 0 0 6px color-mix(in srgb, var(--ags-white) 22%, transparent),
		0 40px 70px -28px color-mix(in srgb, var(--ags-ink) 90%, transparent);
}

.home-hero__figure
{
	border:    0;
	margin:    0 0 var(--ags-space-3);
	min-width: 0;
	padding:   0;
}

.home-hero__label
{
	color:         var(--ags-ink);
	display:       block;
	float:         none;
	font-size:     0.875rem;
	font-weight:   600;
	line-height:   1.4;
	margin-bottom: 8px;
	text-align:    left;
	width:         auto;
}

.home-hero__options
{
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

/* Figura: radio veri resi come pulsanti, così tastiera e lettori di schermo li
   trattano come un gruppo di opzioni. */
.home-hero__option
{
	cursor:   pointer;
	margin:   0;
	position: relative;
}

.home-hero__option input
{
	height:   1px;
	opacity:  0;
	position: absolute;
	width:    1px;
}

.home-hero__option span
{
	align-items:    center;
	background:     var(--ags-white);
	border:         1px solid var(--ags-border);
	border-radius:  999px;
	color:          var(--ags-ink);
	display:        inline-flex;
	font-size:      0.9375rem;
	font-weight:    600;
	min-height:     44px;
	padding-inline: 18px;
	transition:     background-color 0.25s var(--ags-ease-out), border-color 0.25s var(--ags-ease-out), color 0.25s var(--ags-ease-out), transform 0.2s var(--ags-ease-out);
	-webkit-user-select:    none;
	   -moz-user-select:    none;
	        user-select:    none;
}

.home-hero__option:hover span
{
	background:   var(--ags-green-soft);
	border-color: var(--ags-moss);
}

.home-hero__option:active span
{
	transform: scale(0.97);
}

.home-hero__option input:checked + span
{
	background:   var(--ags-forest);
	border-color: var(--ags-forest);
	color:        var(--ags-white);
}

.home-hero__option input:focus-visible + span
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.home-hero__fields
{
	align-items:           end;
	display:               grid;
	gap:                   var(--ags-space-3);
	grid-template-columns: minmax(0, 1fr) auto;
}

.home-hero__submit
{
	align-items:     center;
	display:         inline-flex;
	font-weight:     600;
	gap:             10px;
	justify-content: center;
	min-height:      48px;
	min-width:       160px;
	padding-inline:  var(--ags-space-4);
	white-space:     nowrap;
}

/* Il menu a tendina della zona si posiziona rispetto al proprio campo: così resta
   agganciato anche se un antenato crea un nuovo riferimento (animazioni, ombre). */
.home-hero__field
{
	position: relative;
}

/* Campi dell'hero: stesso aspetto del resto del sito (ags-components.css), solo più alti. */
.home-hero .select2-container,
.home-hero .ags-localita
{
	--ags-select-h: 48px;
}

/* ------------------------------------------------------------------ */
/* PERCORSO: tre passi accanto a una foto reale                        */
/* ------------------------------------------------------------------ */

.home-steps__layout
{
	align-items: center;
	display:     grid;
	gap:         var(--ags-space-6);
}

/* La foto si svela dal basso come una tenda e, mentre la pagina scorre, si sposta
   appena dentro la cornice. L'ombra segue la parte già svelata. */
.home-steps__media
{
	filter:       drop-shadow(0 22px 26px color-mix(in srgb, var(--ags-forest) 22%, transparent));
	justify-self: center;
	margin:       0;
	max-width:    460px;
	width:        100%;
}

.home-steps__frame
{
	aspect-ratio:  1 / 1;
	border-radius: var(--ags-radius-container);
	clip-path:     inset(0 round var(--ags-radius-container));
	overflow:      hidden;
	transition:    clip-path 1.2s var(--ags-ease-expo);
}

.home-steps__frame img
{
	display:    block;
	height:     100%;
	-o-object-fit: cover;
	   object-fit: cover;
	scale:      1.08;
	transition: scale 1.6s var(--ags-ease-expo);
	width:      100%;
}

.js-motion .home-steps__media:not(.is-revealed) .home-steps__frame
{
	clip-path: inset(100% 0 0 round var(--ags-radius-container));
}

.js-motion .home-steps__media:not(.is-revealed) .home-steps__frame img
{
	scale: 1.24;
}

.home-steps__head
{
	margin-bottom: var(--ags-space-5);
	max-width:     52ch;
}

.home-steps__head .ags-section__lead
{
	font-size: 1.0625rem;
}

.home-journey
{
	/* Ripiego prima che frontend.js misuri il centro dell'ultimo pallino */
	--cf-line-bottom: 24px;

	display:    grid;
	gap:        var(--ags-space-4);
	list-style: none;
	margin:     0;
	padding:    0;
	position:   relative;
}

/* Filo del percorso: stesso comportamento della pagina Come Funziona. Una traccia tenue
   e sopra il riempimento verde che avanza con lo scroll; il fondo coincide col centro
   dell'ultimo pallino, misurato da frontend.js perché il testo può andare a capo. */
.home-journey::before,
.home-journey::after
{
	border-radius: 2px;
	bottom:        var(--cf-line-bottom);
	content:       "";
	left:          23px;
	position:      absolute;
	top:           24px;
	width:         2px;
}

.home-journey::before
{
	background: var(--ags-border);
}

.home-journey::after
{
	background:       var(--ags-forest);
	transform:        scaleY(0);
	transform-origin: top;
}

.home-journey__step
{
	align-items:           start;
	display:               grid;
	gap:                   var(--ags-space-3);
	grid-template-columns: 48px minmax(0, 1fr);
}

/* Numero acceso di default; con il movimento attivo parte neutro e si accende quando il
   passo entra in vista. Sta sopra il filo. */
.home-journey__index
{
	background:           var(--ags-forest);
	border:               2px solid var(--ags-forest);
	border-radius:        50%;
	color:                var(--ags-white);
	display:              grid;
	font-size:            0.9375rem;
	font-variant-numeric: tabular-nums;
	font-weight:          700;
	height:               48px;
	place-items:          center;
	position:             relative;
	transition:           background-color 0.5s var(--ags-ease-out), border-color 0.5s var(--ags-ease-out), color 0.5s var(--ags-ease-out), scale 0.6s var(--ags-ease-expo);
	width:                48px;
	z-index:              1;
}

.js-motion .home-journey__step:not(.is-revealed) .home-journey__index
{
	background:   var(--ags-white);
	border-color: var(--ags-border);
	color:        var(--ags-muted);
	scale:        0.9;
}

/* Il testo sale dal basso su mobile e arriva da sinistra su desktop, come in Come Funziona */
.home-journey__step > div
{
	transition: opacity 0.7s var(--ags-ease-out), transform 0.9s var(--ags-ease-expo);
}

.js-motion .home-journey__step:not(.is-revealed) > div
{
	opacity:   0;
	transform: translateY(24px);
}

@media (min-width: 992px)
{
	.js-motion .home-journey__step:not(.is-revealed) > div
	{
		transform: translateX(-32px);
	}
}

.home-journey__title
{
	font-size: 1.1875rem;
	margin:    11px 0 var(--ags-space-1);
}

.home-journey__desc
{
	color:       var(--ags-muted);
	line-height: 1.55;
	margin:      0;
	max-width:   52ch;
}

/* Le azioni si allineano al testo dei passi, non ai numeri. */
.home-steps__actions
{
	align-items:  center;
	display:      flex;
	flex-wrap:    wrap;
	gap:          var(--ags-space-3);
	margin-top:   var(--ags-space-5);
	padding-left: calc(48px + var(--ags-space-3));
}

.home-steps__btn
{
	align-items:     center;
	display:         inline-flex;
	font-weight:     600;
	justify-content: center;
	min-height:      48px;
	padding-inline:  var(--ags-space-4);
	text-align:      center;
}

.home-steps__link
{
	font-weight: 600;
}

.home-steps__link i,
.home-steps__link svg
{
	font-size:   0.8em;
	margin-left: 4px;
	transition:  translate 0.25s var(--ags-ease-out);
}

.home-steps__link:hover i,
.home-steps__link:hover svg
{
	translate: 4px 0;
}

@media (min-width: 992px)
{
	.home-steps__layout
	{
		gap:                   clamp(var(--ags-space-6), 6vw, var(--ags-space-8));
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* ------------------------------------------------------------------ */
/* PROFESSIONISTI E COMMERCIANTI IN EVIDENZA                           */
/* ------------------------------------------------------------------ */

/* Intestazione allineata a sinistra; il collegamento all'elenco completo sta sulla
   stessa riga del titolo e scende sotto quando lo spazio non basta. */
.home-people__head
{
	align-items:     end;
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--ags-space-2) var(--ags-space-5);
	justify-content: space-between;
	margin-bottom:   var(--ags-space-5);
}

/* Telefono: titolo, testo e "Tutti i..." vanno in colonna, il collegamento resta vicino alle card */
@media (max-width: 767.98px)
{
	.home-people__head
	{
		margin-bottom: var(--ags-space-3);
	}
}

.home-people__intro
{
	max-width: 60ch;
}

.home-people__intro .ags-section__title
{
	margin-bottom: var(--ags-space-1);
	text-wrap:     balance;
}

.home-people__all
{
	align-items:     center;
	color:           var(--ags-forest);
	display:         inline-flex;
	font-weight:     600;
	gap:             8px;
	min-height:      44px;
	text-decoration: none;
}

.home-people__all:hover
{
	color: var(--ags-green);
}

.home-people__all > i,
.home-people__all > svg
{
	font-size:  0.8em;
	transition: translate 0.25s var(--ags-ease-out);
}

.home-people__all:hover > i,
.home-people__all:hover > svg
{
	translate: 4px 0;
}

.home-people__grid
{
	display: grid;
	gap:     var(--ags-space-3);
}

/* L'elemento della griglia gestisce la comparsa, la card dentro gestisce il passaggio
   del mouse: così le due transizioni non si sovrascrivono. */
.home-people__item
{
	display:   flex;
	min-width: 0;
}

/* min-width:0 toglie il minimo automatico che un elemento flessibile eredita dal suo
   contenuto: senza, un comune lungo (es. "Castellaccio (Prov. di Frosinone)") impedisce
   alla card di restare stretta quanto la sua colonna e la spinge oltre il bordo,
   sconfinando nella card accanto invece di andare a capo o troncarsi. */
.home-people__item > article
{
	flex:      1;
	min-width: 0;
}

.home-people__empty
{
	grid-column: 1 / -1;
}

/* Stato vuoto su sabbia: superficie bianca con bordo, altrimenti non si vedrebbe. */
.ags-section--sand .home-people__empty .ags-state
{
	background: var(--ags-white);
	border:     1px solid var(--ags-border);
}

.home-people .ags-state__actions .btn
{
	font-weight: 600;
	min-height:  44px;
}

.home-people__grid--persone
{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-people__grid--attivita
{
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px)
{
	.home-people__grid--attivita
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px)
{
	.home-people__grid--persone
	{
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Collegamento che copre tutta la card: il bordo di focus segue la card intera. */
.home-profile__link,
.home-shop__link
{
	color:           var(--ags-ink);
	text-decoration: none;
}

.home-profile__link::after,
.home-shop__link::after
{
	border-radius: var(--ags-radius-container);
	content:       "";
	inset:         0;
	position:      absolute;
}

.home-profile__link:focus-visible,
.home-shop__link:focus-visible
{
	outline: none;
}

.home-profile__link:focus-visible::after,
.home-shop__link:focus-visible::after
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

/* Professionisti: ritratti compatti con avatar tondo. Niente align-items:flex-start:
   l'avatar ha una larghezza fissa e non risente dello stretch, ma senza stretch nome,
   ruolo e città si allargavano quanto il loro contenuto invece che quanto la card,
   e un comune lungo spingeva il testo oltre il bordo invece di andare a capo o troncarsi. */
.home-profile
{
	background:     var(--ags-white);
	border:         1px solid var(--ags-border);
	border-radius:  var(--ags-radius-container);
	display:        flex;
	flex-direction: column;
	padding:        var(--ags-space-4) var(--ags-space-3) var(--ags-space-3);
	position:       relative;
	transition:     border-color 0.25s var(--ags-ease-out), box-shadow 0.35s var(--ags-ease-out), translate 0.35s var(--ags-ease-out);
}

.home-profile:hover
{
	border-color: var(--ags-moss);
	box-shadow:   0 18px 34px -20px color-mix(in srgb, var(--ags-forest) 40%, transparent);
	translate:    0 -4px;
}

.home-profile__avatar
{
	align-items:     center;
	background:      var(--ags-green-soft);
	border-radius:   50%;
	color:           var(--ags-forest);
	display:         flex;
	flex:            none;
	font-size:       1.25rem;
	font-weight:     700;
	height:          64px;
	justify-content: center;
	letter-spacing:  0.02em;
	margin-bottom:   var(--ags-space-3);
	-o-object-fit:      cover;
	   object-fit:      cover;
	transition:      box-shadow 0.3s var(--ags-ease-out);
	-webkit-user-select:     none;
	   -moz-user-select:     none;
	        user-select:     none;
	width:           64px;
}

.home-profile__avatar--sand
{
	background: var(--ags-sand);
}

.home-profile__avatar--moss
{
	background: color-mix(in srgb, var(--ags-moss) 26%, var(--ags-white));
}

.home-profile:hover .home-profile__avatar
{
	box-shadow: 0 0 0 3px var(--ags-white), 0 0 0 5px var(--ags-green);
}

/* Stessa riserva di due righe della vetrina del commerciante (.home-shop__name):
   ruolo e città restano allineati tra card vicine indipendentemente dalla
   lunghezza del nome. */
.home-profile__name
{
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display:             -webkit-box;
	font-size:           1.0625rem;
	line-height:         1.3;
	margin:              0 0 2px;
	min-height:          2.6em;
	overflow:            hidden;
}

.home-profile__role
{
	color:       var(--ags-green);
	font-size:   0.8125rem;
	font-weight: 600;
	margin:      0 0 var(--ags-space-1);
}

.home-profile__place,
.home-profile__contacts
{
	color:     var(--ags-muted);
	font-size: 0.875rem;
	margin:    0;
}

.home-profile__place,
.home-profile__contacts
{
	align-items: center;
	display:     flex;
	gap:         6px;
	max-width:   100%;
	min-width:   0;
}

/* Stesso troncamento del comune usato per il commerciante (.home-shop__place-text):
   una riga sola, puntini se non entra, testo integrale nel titolo. */
.home-profile__place-text
{
	min-width:     0;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.home-profile__contacts
{
	color:       var(--ags-forest);
	font-weight: 600;
	margin-top:  auto;
	padding-top: var(--ags-space-1);
}

.home-profile__contacts i
{
	font-size: 0.75rem;
}

/* Commercianti: vetrine orizzontali con l'insegna a sinistra. Al passaggio lo sfondo
   si tinge e la freccia avanza. */
.home-shop
{
	align-items:           center;
	background:            var(--ags-white);
	border:                1px solid var(--ags-border);
	border-radius:         var(--ags-radius-container);
	display:               grid;
	gap:                   var(--ags-space-3);
	grid-template-columns: auto minmax(0, 1fr);
	padding:               var(--ags-space-3);
	position:              relative;
	transition:            background-color 0.3s var(--ags-ease-out), border-color 0.3s var(--ags-ease-out);
}

.home-shop:hover
{
	background:   var(--ags-green-soft);
	border-color: var(--ags-moss);
}

.home-shop__sign
{
	align-items:     center;
	background:      var(--ags-sand);
	border-radius:   var(--ags-radius-control);
	color:           var(--ags-forest);
	display:         flex;
	font-size:       1.5rem;
	font-weight:     700;
	height:          88px;
	justify-content: center;
	letter-spacing:  0.02em;
	-o-object-fit:      cover;
	   object-fit:      cover;
	transition:      background-color 0.3s var(--ags-ease-out);
	-webkit-user-select:     none;
	   -moz-user-select:     none;
	        user-select:     none;
	width:           88px;
}

.home-shop__sign--soft
{
	background: var(--ags-green-soft);
}

.home-shop__sign--moss
{
	background: color-mix(in srgb, var(--ags-moss) 26%, var(--ags-white));
}

/* Sul fondo tinto l'insegna e l'etichetta tornano bianche per restare visibili. */
.home-shop:hover .home-shop__sign,
.home-shop:hover .ags-chip
{
	background: var(--ags-white);
}

/* Due righe riservate sempre, anche quando il nome ne occupa una sola: altrimenti
   l'etichetta e la città che seguono cadono a un'altezza diversa da card a card
   nella stessa riga, e l'insieme sembra sbilenco. Oltre due righe il nome è troncato. */
.home-shop__name
{
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display:             -webkit-box;
	font-size:           1.125rem;
	line-height:         1.3;
	margin:              0 0 var(--ags-space-1);
	min-height:          2.6em;
	overflow:            hidden;
}

/* Etichetta e città sempre su righe separate: con un flusso a capo automatico
   l'etichetta corta ("Vivaio") teneva la città sulla stessa riga mentre quella lunga
   ("Rivendita attrezzature") la spingeva sotto, e le card finivano con altezze diverse. */
.home-shop__body
{
	min-width: 0;
}

.home-shop__meta
{
	align-items:    flex-start;
	color:          var(--ags-muted);
	display:        flex;
	flex-direction: column;
	font-size:      0.875rem;
	gap:            6px;
	margin:         0;
	min-width:      0;
}

/* align-self:stretch (non ereditato da .home-shop__meta, che resta flex-start perché
   l'etichetta non deve allargarsi): senza, la città prendeva la larghezza del proprio
   contenuto invece che della card, e un comune lungo sconfinava oltre il bordo. */
.home-shop__place
{
	align-items: center;
	align-self:  stretch;
	display:     flex;
	gap:         6px;
	max-width:   100%;
	min-width:   0;
}

/* Comuni con provincia tra parentesi possono essere lunghi (es. "Castellaccio
   (Prov. di Frosinone)"): su una card stretta andavano a capo su 3 righe e
   allungavano la card più delle vicine. Il nome del comune resta su una riga sola,
   troncato con puntini; il testo integrale resta leggibile nel titolo al passaggio. */
.home-shop__place-text
{
	min-width:       0;
	overflow:        hidden;
	text-overflow:   ellipsis;
	white-space:     nowrap;
}

/* ------------------------------------------------------------------ */
/* BANNER COLLABORAZIONI                                               */
/* ------------------------------------------------------------------ */

/* Tre strati: verde bosco di ripiego, fotografia aerea che scorre più lenta della
   pagina, velo più denso sotto il testo e più leggero a destra. */
.home-cta-banner
{
	background-color: var(--ags-forest);
	isolation:        isolate;
	overflow:         clip;
	padding-block:    clamp(var(--ags-space-7), 8vw, 120px);
	position:         relative;
}

.home-cta-banner::before
{
	background: var(--home-cta-bg) center / cover no-repeat;
	content:    "";
	inset:      -12% 0;
	position:   absolute;
	z-index:    -2;
}

.home-cta-banner::after
{
	background: linear-gradient(90deg, color-mix(in srgb, var(--ags-forest) 90%, transparent) 0%, color-mix(in srgb, var(--ags-forest) 72%, transparent) 50%, color-mix(in srgb, var(--ags-ink) 30%, transparent) 100%);
	content:    "";
	inset:      0;
	position:   absolute;
	z-index:    -1;
}

.home-cta-banner__content
{
	align-items: center;
	display:     grid;
	gap:         var(--ags-space-4);
}

.home-cta-banner__title
{
	color:          var(--ags-white);
	font-size:      clamp(1.625rem, 1.1rem + 2.1vw, 2.75rem);
	letter-spacing: -0.01em;
	line-height:    1.15;
	margin:         0;
	max-width:      22ch;
	text-wrap:      balance;
}

/* Colonna destra: testo e azione sono una cosa sola, in colonna e allineati a sinistra
   fra loro. Prima erano figli diretti della griglia e il pulsante finiva sotto il titolo. */
.home-cta-banner__aside
{
	display:        flex;
	flex-direction: column;
	gap:            var(--ags-space-3);
}

.home-cta-banner__lead,
.home-cta-banner__conteggio
{
	color:       var(--ags-white);
	margin:      0;
	max-width:   46ch;
	text-wrap:   pretty;
}

/* Il numero di annunci attivi è il dato, non una frase: pesa di più della riga che lo segue */
.home-cta-banner__conteggio
{
	font-size:   1.0625rem;
	font-weight: 600;
}

.home-cta-banner__annunci
{
	margin-top: var(--ags-space-5);
}

.home-cta-banner__actions
{
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--ags-space-2);
}

.home-cta-banner__actions .btn
{
	align-items:     center;
	display:         inline-flex;
	font-weight:     600;
	justify-content: center;
	min-height:      48px;
	min-width:       200px;
	padding-inline:  var(--ags-space-4);
	text-align:      center;
}

/* La CTA primaria su fondo scuro è bianca: il verde bosco di .btn-primary
   non avrebbe contrasto sufficiente sul velo. */
.home-cta-banner__actions .btn-primary
{
	background-color: var(--ags-white);
	border-color:     var(--ags-white);
	color:            var(--ags-forest);
}

.home-cta-banner__actions .btn-primary:hover,
.home-cta-banner__actions .btn-primary:focus
{
	background-color: var(--ags-sand);
	border-color:     var(--ags-sand);
	color:            var(--ags-forest);
}

@media (min-width: 992px)
{
	.home-cta-banner__content
	{
		align-items:           center;
		gap:                   var(--ags-space-6);
		grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
	}

	/* L'azione segue il testo della sua colonna: allineata a sinistra sotto di esso,
	   non spinta al bordo destro della fascia */
	.home-cta-banner__actions
	{
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------------ */
/* MOVIMENTO                                                           */
/* ------------------------------------------------------------------ */

/* Hero: la foto si assesta lentamente e il contenuto sale in sequenza.
   Solo CSS: nessun contenuto dell'hero dipende dal JavaScript. */
@media (prefers-reduced-motion: no-preference)
{
	.home-hero__media::before
	{
		animation: home-hero-assesta 2.4s var(--ags-ease-expo) both;
	}

	/* backwards e non both: a fine animazione la card non conserva la trasformazione,
	   che sposterebbe il menu a tendina della zona. */
	.home-hero__logo,
	.home-hero__title,
	.home-hero__subtitle,
	.home-hero__search
	{
		animation: home-sale 0.8s var(--ags-ease-out) backwards;
	}

	.home-hero__title
	{
		animation-delay: 80ms;
	}

	.home-hero__subtitle
	{
		animation-delay: 160ms;
	}

	.home-hero__search
	{
		animation-delay: 260ms;
	}
}

/* Animazioni legate allo scorrimento. Proprietà separate e non la forma abbreviata
   "animation": il minificatore riordina le dichiarazioni e l'abbreviata azzererebbe la
   linea temporale. Scala e spostamento usano proprietà distinte, così l'assestamento
   dell'hero e la parallasse convivono sullo stesso strato. */
@supports (animation-timeline: view())
{
	@media (prefers-reduced-motion: no-preference)
	{
		.home-hero
		{
			view-timeline: --home-hero block;
		}

		.home-hero__media::before
		{
			animation-duration:        2.4s, 1s;
			animation-fill-mode:       both, both;
			animation-name:            home-hero-assesta, home-hero-parallasse;
			animation-range:           normal, exit;
			animation-timeline:        auto, --home-hero;
			animation-timing-function: var(--ags-ease-expo), linear;
		}

		.home-steps__media
		{
			view-timeline: --home-foto block;
		}

		.home-steps__frame img
		{
			animation-fill-mode:       both;
			animation-name:            home-foto-parallasse;
			animation-range:           cover;
			animation-timeline:        --home-foto;
			animation-timing-function: linear;
		}

		.home-journey
		{
			view-timeline: --home-percorso block;
		}

		.home-journey::after
		{
			animation-fill-mode:       both;
			animation-name:            home-filo;
			animation-range:           cover 15% cover 80%;
			animation-timeline:        --home-percorso;
			animation-timing-function: linear;
		}

		/* Ogni pallino si accende quando il verde lo raggiunge e si spegne se si torna su:
		   frontend.js scrive in --cf-soglia la frazione di filo (0-1) fino al pallino. */
		.js-motion .home-journey__step .home-journey__index
		{
			animation-fill-mode:       both;
			animation-name:            home-pallino-acceso;
			animation-range:           cover calc(14.6% + 65% * var(--cf-soglia, 0)) cover calc(15.4% + 65% * var(--cf-soglia, 0));
			animation-timeline:        --home-percorso;
			animation-timing-function: linear;
		}

		.home-cta-banner
		{
			view-timeline: --home-banner block;
		}

		.home-cta-banner::before
		{
			animation-fill-mode:       both;
			animation-name:            home-banner-parallasse;
			animation-range:           cover;
			animation-timeline:        --home-banner;
			animation-timing-function: linear;
		}
	}
}

@keyframes home-pallino-acceso
{
	from
	{
		background:   var(--ags-white);
		border-color: var(--ags-border);
		color:        var(--ags-muted);
		scale:        0.9;
	}

	to
	{
		background:   var(--ags-forest);
		border-color: var(--ags-forest);
		color:        var(--ags-white);
		scale:        1;
	}
}

@keyframes home-hero-assesta
{
	from
	{
		scale: 1.08;
	}

	to
	{
		scale: 1;
	}
}

@keyframes home-hero-parallasse
{
	from
	{
		translate: 0 0;
	}

	to
	{
		translate: 0 22%;
	}
}

@keyframes home-sale
{
	from
	{
		opacity:   0;
		transform: translateY(18px);
	}

	to
	{
		opacity:   1;
		transform: none;
	}
}

@keyframes home-foto-parallasse
{
	from
	{
		translate: 0 -3.5%;
	}

	to
	{
		translate: 0 3.5%;
	}
}

@keyframes home-filo
{
	from
	{
		transform: scaleY(0);
	}

	to
	{
		transform: scaleY(1);
	}
}

@keyframes home-banner-parallasse
{
	from
	{
		translate: 0 -8%;
	}

	to
	{
		translate: 0 8%;
	}
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                          */
/* ------------------------------------------------------------------ */

/* Su desktop l'hero occupa quasi tutto lo schermo; sotto resta alto quanto il contenuto. */
@media (min-width: 992px)
{
	.home-hero
	{
		min-height: min(86svh, 860px);
	}
}

@media (max-width: 1199.98px)
{
	.home-hero
	{
		padding-block: 120px 80px;
	}
}

@media (max-width: 991.98px)
{
	.home-cta-banner::after
	{
		background: linear-gradient(180deg, color-mix(in srgb, var(--ags-forest) 86%, transparent), color-mix(in srgb, var(--ags-forest) 74%, transparent));
	}
}

@media (max-width: 767.98px)
{
	/* Il padding-top mobile è fissato a 100px da frontend.css (#banner-home). */
	.home-hero
	{
		padding-block: 96px 56px;
	}

	.home-hero__logo
	{
		height: 44px;
	}

	.home-hero__search
	{
		padding: var(--ags-space-3);
	}

	.home-hero__fields
	{
		grid-template-columns: minmax(0, 1fr);
	}

	/* Le 5 opzioni andavano a capo su tre righe (misure invariate, servono al tocco):
	   qui scorrono su una riga sola, come le altre file orizzontali del redesign.
	   La sfumatura sul bordo destro segnala che si può scorrere oltre. */
	.home-hero__options
	{
		flex-wrap:      nowrap;
		margin-inline:  calc(-1 * var(--ags-space-3));
		overflow-x:     auto;
		padding-inline: var(--ags-space-3);
		scroll-padding-inline: var(--ags-space-3);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
		mask-image:         linear-gradient(to right, black calc(100% - 40px), transparent 100%);
	}

	.home-hero__options::-webkit-scrollbar
	{
		display: none;
	}

	.home-hero__option
	{
		flex-shrink: 0;
	}

	.home-hero__option span
	{
		scroll-snap-align: start;
	}

	.home-hero__submit
	{
		min-width: 0;
		width:     100%;
	}

	/* La foto del percorso diventa una striscia bassa: il titolo arriva prima. */
	.home-steps__frame
	{
		aspect-ratio: 16 / 9;
	}

	.home-steps__frame img
	{
		-o-object-position: center 30%;
		   object-position: center 30%;
	}

	/* Professionisti e commercianti: stessa fila scorrevole a tutta larghezza, due card
	   e mezza in vista, così la card tagliata a destra invita a scorrere. */
	.home-people__grid--persone,
	.home-people__grid--attivita
	{
		display:               flex;
		gap:                   var(--ags-space-2);
		margin-inline:         calc(-1 * clamp(16px, 4vw, 32px));
		overflow-x:            auto;
		overscroll-behavior-x: contain;
		padding:               4px clamp(16px, 4vw, 32px) var(--ags-space-3);
		scroll-padding-inline: clamp(16px, 4vw, 32px);
		scroll-snap-type:      x mandatory;
		scrollbar-width:       none;
	}

	.home-people__grid--persone::-webkit-scrollbar,
	.home-people__grid--attivita::-webkit-scrollbar
	{
		display: none;
	}

	.home-people__grid--persone > .home-people__item,
	.home-people__grid--attivita > .home-people__item
	{
		flex:              0 0 clamp(148px, 40%, 220px);
		scroll-snap-align: start;
	}

	.home-people__grid--persone > .home-people__empty,
	.home-people__grid--attivita > .home-people__empty
	{
		flex: 0 0 100%;
	}

	/* Nella fila le card entrano scivolando di lato, non dal basso. */
	.js-motion .home-people__grid--persone[data-reveal-stagger] > *,
	.js-motion .home-people__grid--attivita[data-reveal-stagger] > *
	{
		transform: translateX(24px);
	}

	.js-motion .home-people__grid--persone[data-reveal-stagger].is-revealed > *,
	.js-motion .home-people__grid--attivita[data-reveal-stagger].is-revealed > *
	{
		transform: none;
	}

	/* La vetrina del commerciante nella fila diventa verticale come il ritratto del
	   professionista: insegna in alto, nome, categoria e città sotto. L'insegna resta
	   quadrata (larghezza fissa, non risente dello stretch), unico segno che distingue
	   un'attività da una persona. Senza stretch il blocco testo sotto prendeva la
	   larghezza del proprio contenuto invece che della card (vedi .home-profile sopra). */
	.home-shop
	{
		align-items:    stretch;
		display:        flex;
		flex-direction: column;
		gap:            0;
		padding:        var(--ags-space-3);
	}

	.home-shop__name
	{
		font-size: 1.0625rem;
	}

	.home-profile
	{
		padding: var(--ags-space-3);
	}

	/* Su touch l'hover non esiste: la card riceve subito un piccolo sollievo da terra
	   (non è più un semplice rettangolo bordato) e si comprime leggermente al tocco,
	   come un oggetto fisico premuto. */
	.home-profile
	{
		box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--ags-forest) 55%, transparent);
		transition: border-color 0.25s var(--ags-ease-out), box-shadow 0.25s var(--ags-ease-out), transform 0.2s var(--ags-ease-out);
	}

	.home-profile:has(.home-profile__link:active)
	{
		border-color: var(--ags-moss);
		box-shadow:   0 6px 14px -12px color-mix(in srgb, var(--ags-forest) 55%, transparent);
		transform:    scale(0.97);
	}

	.home-profile:has(.home-profile__link:active) .home-profile__avatar
	{
		box-shadow: 0 0 0 3px var(--ags-white), 0 0 0 5px var(--ags-green);
	}

	.home-profile__avatar
	{
		font-size: 1.125rem;
		height:    56px;
		width:     56px;
	}

	.home-shop__sign
	{
		font-size:     1.125rem;
		height:        56px;
		margin-bottom: var(--ags-space-3);
		width:         56px;
	}

	/* Stessa idea per la vetrina del commerciante: rilievo a riposo e reazione al tocco
	   invece che allo sfondo tinto pensato per il passaggio del mouse. */
	.home-shop
	{
		box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--ags-forest) 45%, transparent);
		transition: background-color 0.25s var(--ags-ease-out), border-color 0.25s var(--ags-ease-out), box-shadow 0.25s var(--ags-ease-out), transform 0.2s var(--ags-ease-out);
	}

	.home-shop:has(.home-shop__link:active)
	{
		background:   var(--ags-green-soft);
		border-color: var(--ags-moss);
		box-shadow:   0 6px 14px -12px color-mix(in srgb, var(--ags-forest) 45%, transparent);
		transform:    scale(0.98);
	}

	.home-shop:has(.home-shop__link:active) .home-shop__sign,
	.home-shop:has(.home-shop__link:active) .ags-chip
	{
		background: var(--ags-white);
	}
}

@media (max-width: 575.98px)
{
	.home-steps__actions
	{
		align-items:    stretch;
		flex-direction: column;
		padding-left:   0;
	}

	/* Su touch l'hover non esiste (o resta "incollato" dopo il tap): la CTA primaria
	   diventa piena da subito, con un'ombra tenue del verde brand per darle rilievo,
	   e reagisce al tocco invece che al passaggio del mouse. */
	.home-steps__btn
	{
		background-color:    var(--ags-forest);
		box-shadow:          0 14px 28px -16px color-mix(in srgb, var(--ags-forest) 65%, transparent);
		color:               var(--ags-white);
		transition:          transform 0.2s var(--ags-ease-out), box-shadow 0.2s var(--ags-ease-out);
		width:               100%;
		-webkit-tap-highlight-color: transparent;
	}

	.home-steps__btn:hover,
	.home-steps__btn:focus
	{
		background-color: var(--ags-forest);
		color:             var(--ags-white);
	}

	.home-steps__btn:active
	{
		box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--ags-forest) 65%, transparent);
		transform:  scale(0.97);
	}

	.home-steps__link
	{
		align-items:                 center;
		display:                     flex;
		justify-content:             center;
		padding-block:               var(--ags-space-2);
		transition:                  opacity 0.2s var(--ags-ease-out);
		-webkit-tap-highlight-color: transparent;
	}

	.home-steps__link:active
	{
		opacity: 0.65;
	}

	.home-cta-banner__actions
	{
		flex-direction: column;
		width:          100%;
	}

	.home-cta-banner__actions .btn
	{
		min-width: 0;
		width:     100%;
	}
}

/* Movimento ridotto */

@media (prefers-reduced-motion: reduce)
{
	.home-hero__search,
	.home-hero__option span,
	.home-steps__link i,
	.home-steps__link svg,
	.home-people__all > i,
	.home-people__all > svg,
	.home-profile,
	.home-shop
	{
		transition: none;
	}

	.home-hero__option:active span
	{
		transform: none;
	}

	.home-profile:hover,
	.home-steps__link:hover i,
	.home-steps__link:hover svg,
	.home-people__all:hover > i,
	.home-people__all:hover > svg
	{
		translate: none;
	}
}