/**
 * BLOG E ARTICOLO: redesign "premium sobrio".
 *
 * Pagine: Modules/Frontend/resources/views/blog.blade.php e blog_articolo.blade.php
 *
 * Regole rispettate qui:
 * - solo token --ags-*; il colore delle categorie arriva dal gestionale come custom property
 *   --categoria impostata sull'elemento, con il verde del sito come ripiego;
 * - le immagini di sfondo arrivano da custom property impostate nel Blade con asset();
 * - nessun !important;
 * - la comparsa allo scroll vale solo con js-motion (frontend.js, direttiva v-comparsa per il
 *   markup disegnato da Vue); le animazioni legate allo scorrimento solo dove il browser le
 *   supporta e il movimento non è ridotto.
 *
 * Forme: campi, pulsanti e insegne 8px, card 12px, etichette di categoria tonde.
 */

/* ==========================================================================
   HERO BLOG E RICERCA
   ========================================================================== */

/* Vue monta tutta la pagina, ma l'hero non ha contenuti da nascondere: resta visibile
   subito sotto l'header trasparente. Prima del montaggio si nascondono solo filtri ed elenco. */
#app-blog[v-cloak]
{
	display: block;
}

#app-blog[v-cloak] .blog-filtri,
#app-blog[v-cloak] .blog-sezione
{
	visibility: hidden;
}

.blog-hero
{
	background-color: var(--ags-ink); /* ripiego se la foto non arriva */
	isolation:        isolate;
	overflow:         clip;
	/* Stessa fascia di cerca-utenti (titolo e sottotitolo, stessa altezza): il menu
	   trasparente sovrapposto richiede la sua altezza più un respiro vero sopra al
	   titolo. Sotto, lo stesso margine di cerca-utenti. */
	padding-block:    calc(var(--ags-space-7) + var(--ags-space-6)) var(--ags-space-6);
	position:         relative;
}

.blog-hero__media
{
	inset:    0;
	overflow: hidden;
	position: absolute;
	z-index:  -1;
}

/* Foto del vivaio: si assesta al caricamento e scorre più lenta della pagina. */
.blog-hero__media::before
{
	background:       var(--blog-hero-bg) 70% 45% / cover no-repeat;
	content:          "";
	inset:            0;
	position:         absolute;
	/* A larghezza piena la foto copre esattamente la fascia, senza margine per spostare
	   l'inquadratura con background-position: uno zoom leggero, ancorato a sinistra, libera
	   lo spazio centrale e sposta le persone verso il vuoto a destra (come in cerca-utenti). */
	transform:        scale(1.25);
	transform-origin: 15% 35%;
}

/* Velo direzionale: pieno a sinistra sotto il testo, leggero a destra dove stanno le persone.
   In alto una sfumatura tiene leggibile il menu dell'header trasparente. */
.blog-hero__media::after
{
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--ags-ink) 55%, transparent) 0%, transparent 34%),
		linear-gradient(90deg, color-mix(in srgb, var(--ags-ink) 90%, transparent) 0%, color-mix(in srgb, var(--ags-ink) 70%, transparent) 42%, color-mix(in srgb, var(--ags-forest) 22%, transparent) 100%);
	content:    "";
	inset:      0;
	position:   absolute;
}

/* Senza il campo di ricerca (ora solo in barra di navigazione) il blocco è più corto: per
   mantenere l'altezza dell'hero invariata il titolo e il sottotitolo respirano di più, con un
   sottotitolo leggermente più ampio e leggibile al posto del campo rimosso. */
.blog-hero__content
{
	max-width: 620px;
}

.blog-hero__title
{
	color:          var(--ags-white);
	/* Stessa scala del titolo di cerca-utenti e come-funziona: le fasce condividono
	   il layout, il titolo deve avere lo stesso peso visivo. Il titolo di cerca-utenti
	   va su due righe, questo su una sola: min-height riserva lo spazio di due righe
	   in entrambi, così le due fasce restano della stessa altezza. */
	font-size:      clamp(2rem, 1.5rem + 2.5vw, 3rem);
	font-weight:    700;
	letter-spacing: -0.015em;
	line-height:    1.1;
	margin:         0 0 var(--ags-space-2);
	min-height:     2.2em;
}

.blog-hero__subtitle
{
	color:       color-mix(in srgb, var(--ags-white) 88%, transparent);
	font-size:   clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.5;
	margin:      0 0 var(--ags-space-4);
	min-height:  3em;
	max-width:   46ch;
}

/* ==========================================================================
   BARRA FILTRI E ORDINAMENTO
   ========================================================================== */

/* La barra si aggancia sotto l'header, che diventa fisso scorrendo: con top a 0 finiva
   nascosta dietro l'header. */
.blog-filtri
{
	--blog-header-h: 68px;

	background-color: var(--ags-white);
	border-bottom:    1px solid var(--ags-border);
	padding-block:    var(--ags-space-2);
	position:         sticky;
	top:              var(--blog-header-h);
	z-index:          20;
}

.blog-filtri__barra
{
	align-items:     center;
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--ags-space-2) var(--ags-space-4);
	justify-content: space-between;
}

.blog-chips
{
	display:         flex;
	flex:            1 1 auto;
	gap:             var(--ags-space-1);
	min-width:       0;
	overflow-x:      auto;
	padding-bottom:  2px;
	scrollbar-width: none;
}

.blog-chips::-webkit-scrollbar
{
	display: none;
}

.blog-chips--tag
{
	margin-top: var(--ags-space-2);
}

.blog-chip
{
	align-items:      center;
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    999px;
	color:            var(--ags-ink);
	cursor:           pointer;
	display:          inline-flex;
	flex:             0 0 auto;
	font-family:      var(--ags-font);
	font-size:        0.875rem;
	font-weight:      600;
	gap:              8px;
	line-height:      1.4;
	min-height:       44px;
	padding:          8px 16px;
	transition:       border-color 0.25s var(--ags-ease-out), background-color 0.25s var(--ags-ease-out), color 0.25s var(--ags-ease-out);
	white-space:      nowrap;
}

.blog-chip:hover
{
	background-color: var(--ags-green-soft);
	border-color:     var(--ags-moss);
	color:            var(--ags-forest);
}

.blog-chip.attivo
{
	background-color: var(--ags-forest);
	border-color:     var(--ags-forest);
	color:            var(--ags-white);
}

.blog-chip:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

/* Numero di articoli della categoria dentro la scelta. */
.blog-chip__conteggio
{
	background-color: var(--ags-sand);
	border-radius:    999px;
	color:            var(--ags-muted);
	font-size:        0.75rem;
	line-height:      1;
	min-width:        22px;
	padding:          4px 7px;
	text-align:       center;
}

.blog-chip.attivo .blog-chip__conteggio
{
	background-color: color-mix(in srgb, var(--ags-white) 18%, transparent);
	color:            var(--ags-white);
}

/* Periodo e ordinamento restano appaiati: su mobile occupano insieme una riga sola. */
.blog-filtri__controlli
{
	align-items: center;
	display:     flex;
	flex:        none;
	gap:         var(--ags-space-2);
}

/* Menu proprio e non un <select>: il reset dei form dà ai select altezza e corpo di testo da
   campo, fuori scala in una barra di pillole, e le voci native non si possono vestire. */
.blog-periodo
{
	flex:     none;
	position: relative;
}

/* Stessa forma delle pillole di categoria accanto: la barra resta un'unica famiglia. */
.blog-periodo__scelta
{
	align-items:      center;
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    999px;
	color:            var(--ags-ink);
	cursor:           pointer;
	display:          inline-flex;
	font-family:      var(--ags-font);
	font-size:        0.875rem;
	font-weight:      600;
	gap:              8px;
	line-height:      1.4;
	min-height:       44px;
	padding:          8px 14px;
	transition:       border-color 0.25s var(--ags-ease-out), background-color 0.25s var(--ags-ease-out), color 0.25s var(--ags-ease-out);
	white-space:      nowrap;
	width:            100%;
}

.blog-periodo__scelta:hover
{
	background-color: var(--ags-green-soft);
	border-color:     var(--ags-moss);
	color:            var(--ags-forest);
}

.blog-periodo.attivo .blog-periodo__scelta
{
	background-color: var(--ags-forest);
	border-color:     var(--ags-forest);
	color:            var(--ags-white);
}

.blog-periodo__scelta:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.blog-periodo__valore
{
	flex:          1;
	overflow:      hidden;
	text-align:    left;
	text-overflow: ellipsis;
}

.blog-periodo__scelta > i,
.blog-periodo__scelta > svg
{
	flex:      none;
	font-size: 0.8125rem;
	opacity:   0.7;
}

.blog-periodo__freccia
{
	transition: rotate 0.25s var(--ags-ease-out);
}

.blog-periodo.aperto .blog-periodo__freccia
{
	rotate: 180deg;
}

/* Il menu si allinea a destra della pillola: da quel lato non può uscire dallo schermo. */
.blog-periodo__menu
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-container);
	box-shadow:       var(--ags-shadow-soft);
	display:          flex;
	flex-direction:   column;
	gap:              2px;
	inset-inline-end: 0;
	min-width:        100%;
	padding:          6px;
	position:         absolute;
	top:              calc(100% + 6px);
	width:            -moz-max-content;
	width:            max-content;
	z-index:          30;
}

.blog-periodo__voce
{
	align-items:      center;
	background:       none;
	border:           0;
	border-radius:    var(--ags-radius-control);
	color:            var(--ags-ink);
	cursor:           pointer;
	display:          flex;
	font-family:      var(--ags-font);
	font-size:        0.875rem;
	font-weight:      600;
	gap:              var(--ags-space-4);
	justify-content:  space-between;
	min-height:       40px;
	padding:          8px 10px;
	text-align:       left;
	transition:       background-color 0.2s var(--ags-ease-out), color 0.2s var(--ags-ease-out);
	white-space:      nowrap;
}

.blog-periodo__voce:hover
{
	background-color: var(--ags-sand);
}

.blog-periodo__voce:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: -2px;
}

.blog-periodo__voce.attiva
{
	background-color: var(--ags-green-soft);
	color:            var(--ags-forest);
}

/* La spunta resta nel flusso anche da spenta: le voci non cambiano larghezza scegliendo. */
.blog-periodo__voce > i,
.blog-periodo__voce > svg
{
	flex:      none;
	font-size: 0.75rem;
	opacity:   0;
}

.blog-periodo__voce.attiva > i,
.blog-periodo__voce.attiva > svg
{
	opacity: 1;
}

.blog-ordinamento
{
	background-color: var(--ags-sand);
	border-radius:    var(--ags-radius-control);
	display:          flex;
	flex:             none;
	gap:              4px;
	padding:          4px;
}

.blog-ordinamento button
{
	align-items:   center;
	background:    transparent;
	border:        none;
	border-radius: var(--ags-radius-control);
	color:         var(--ags-muted);
	cursor:        pointer;
	display:       inline-flex;
	font-family:   var(--ags-font);
	font-size:     0.875rem;
	font-weight:   600;
	gap:           6px;
	min-height:    40px;
	padding:       6px 14px;
	transition:    background-color 0.25s var(--ags-ease-out), box-shadow 0.25s var(--ags-ease-out), color 0.25s var(--ags-ease-out);
	white-space:   nowrap;
}

.blog-ordinamento button:hover
{
	color: var(--ags-ink);
}

.blog-ordinamento button.attivo
{
	background-color: var(--ags-white);
	box-shadow:       var(--ags-shadow-soft);
	color:            var(--ags-forest);
}

.blog-ordinamento button:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

/* ==========================================================================
   SEZIONE ELENCO ARTICOLI
   ========================================================================== */

/* La luce sfocata delle foglie sta in alto, sfuma nella crema e scorre lenta con la pagina:
   stesso fondo del percorso di Come funziona. */
.blog-sezione
{
	background-color: var(--ags-cream);
	isolation:        isolate;
	min-height:       60vh;
	overflow:         clip;
	padding-block:    var(--ags-space-6) var(--ags-space-8);
	position:         relative;
}

.blog-sezione::before
{
	background: var(--blog-luce-bg) center / cover no-repeat;
	content:    "";
	filter:     blur(26px) saturate(1.15);
	height:     1240px;
	inset:      -140px -48px auto;
	opacity:    0.3;
	position:   absolute;
	z-index:    -2;
}

.blog-sezione::after
{
	background:
		radial-gradient(ellipse 60% 420px at 50% 0%, color-mix(in srgb, var(--ags-white) 70%, transparent) 0%, transparent 100%),
		linear-gradient(to bottom, color-mix(in srgb, var(--ags-cream) 30%, transparent) 0, color-mix(in srgb, var(--ags-cream) 62%, transparent) 480px, var(--ags-cream) 1000px);
	content:    "";
	height:     1400px; /* più alto della luce anche quando scorre: nessun bordo visibile */
	inset:      0 0 auto;
	position:   absolute;
	z-index:    -1;
}

.blog-risultati
{
	color:         var(--ags-muted);
	font-size:     0.9375rem;
	margin-bottom: var(--ags-space-4);
}

.blog-risultati b
{
	color: var(--ags-ink);
}

/* Etichetta della categoria, tinta con il colore scelto nel gestionale. Il testo mescola il
   colore con l'inchiostro per restare leggibile su qualunque tinta. */
.blog-categoria
{
	--categoria: var(--ags-green);

	align-self:       flex-start;
	background-color: color-mix(in srgb, var(--categoria) 14%, var(--ags-white));
	border-radius:    999px;
	color:            color-mix(in srgb, var(--categoria) 55%, var(--ags-ink));
	display:          inline-flex;
	font-size:        0.75rem;
	font-weight:      700;
	letter-spacing:   0.02em;
	line-height:      1.2;
	padding:          5px 11px;
}

/* Segnaposto per gli articoli senza immagine: tessera nel colore della categoria con icona. */
.blog-segnaposto
{
	--categoria: var(--ags-green);

	align-items:     center;
	background:
		radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--categoria) 26%, var(--ags-white)) 0%, transparent 62%),
		linear-gradient(135deg, color-mix(in srgb, var(--categoria) 16%, var(--ags-white)) 0%, color-mix(in srgb, var(--categoria) 44%, var(--ags-white)) 100%);
	color:           color-mix(in srgb, var(--categoria) 70%, var(--ags-ink));
	display:         flex;
	font-size:       2.5rem;
	justify-content: center;
}

.blog-segnaposto > *
{
	opacity: 0.55;
}

/* ==========================================================================
   ARTICOLO IN EVIDENZA
   ========================================================================== */

.blog-evidenza
{
	background-color:      var(--ags-white);
	border:                1px solid var(--ags-border);
	border-radius:         var(--ags-radius-container);
	box-shadow:            0 30px 60px -44px color-mix(in srgb, var(--ags-forest) 50%, transparent);
	display:               grid;
	grid-template-columns: minmax(0, 1fr);
	margin-bottom:         var(--ags-space-6);
	overflow:              hidden;
	transition:            border-color 0.3s var(--ags-ease-out), box-shadow 0.4s var(--ags-ease-out);
}

.blog-evidenza:hover
{
	border-color: var(--ags-moss);
	box-shadow:   0 36px 70px -40px color-mix(in srgb, var(--ags-forest) 60%, transparent);
}

.blog-evidenza__media
{
	background-color: var(--ags-sand);
	display:          block;
	min-height:       240px;
	overflow:         hidden;
	position:         relative;
}

/* Immagine leggermente ingrandita: lo spazio in più serve alla parallasse e allo zoom. */
.blog-evidenza__media > img,
.blog-evidenza__media > .blog-segnaposto
{
	height:     100%;
	inset:      0;
	-o-object-fit: cover;
	   object-fit: cover;
	position:   absolute;
	scale:      1.08;
	transition: scale 0.8s var(--ags-ease-out);
	width:      100%;
}

.blog-evidenza:hover .blog-evidenza__media > *
{
	scale: 1.12;
}

.blog-evidenza__body
{
	display:         flex;
	flex-direction:  column;
	gap:             var(--ags-space-3);
	justify-content: center;
	padding:         var(--ags-space-5) var(--ags-space-4);
}

.blog-evidenza__etichette
{
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.blog-evidenza__badge
{
	align-items:      center;
	background-color: var(--ags-forest);
	border-radius:    999px;
	color:            var(--ags-white);
	display:          inline-flex;
	font-size:        0.75rem;
	font-weight:      700;
	gap:              6px;
	letter-spacing:   0.02em;
	line-height:      1.2;
	padding:          5px 11px;
}

.blog-evidenza__titolo
{
	font-size:      clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight:    700;
	letter-spacing: -0.01em;
	line-height:    1.2;
	margin:         0;
	text-wrap:      balance;
}

.blog-evidenza__titolo a
{
	color:           var(--ags-ink);
	text-decoration: none;
	transition:      color 0.2s var(--ags-ease-out);
}

.blog-evidenza__titolo a:hover
{
	color: var(--ags-green);
}

.blog-evidenza__estratto
{
	color:       var(--ags-muted);
	font-size:   1rem;
	line-height: 1.6;
	margin:      0;
	max-width:   48ch;
}

.blog-evidenza .blog-card__meta
{
	border-top:  0;
	padding-top: 0;
}

.blog-evidenza__cta
{
	align-items: center;
	display:     inline-flex;
	font-weight: 600;
	gap:         10px;
	min-height:  48px;
	padding-inline: var(--ags-space-4);
}

.blog-evidenza__cta i,
.blog-evidenza__cta svg
{
	transition: translate 0.25s var(--ags-ease-out);
}

.blog-evidenza__cta:hover i,
.blog-evidenza__cta:hover svg
{
	translate: 4px 0;
}

@media (min-width: 992px)
{
	.blog-evidenza
	{
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.blog-evidenza__media
	{
		min-height: 420px;
	}

	.blog-evidenza__body
	{
		padding: var(--ags-space-6) var(--ags-space-5);
	}
}

/* ==========================================================================
   GRIGLIA E CARD ARTICOLO
   ========================================================================== */

/* Griglia con ritmo: il primo articolo occupa due colonne e due righe, poi file da tre. */
.blog-griglia
{
	display:               grid;
	gap:                   var(--ags-space-4);
	grid-template-columns: minmax(0, 1fr);
}

.blog-griglia__item
{
	display:   flex;
	min-width: 0;
}

.blog-griglia__item > .blog-card
{
	flex: 1;
}

/* Le card della stessa fila entrano una dopo l'altra. */
.js-motion .blog-griglia__item[data-reveal]
{
	transition-delay: calc(var(--i, 0) * 90ms);
}

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

	.blog-griglia__item--grande
	{
		grid-column: 1 / -1;
	}
}

@media (min-width: 992px)
{
	.blog-griglia
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.blog-griglia__item--grande
	{
		grid-column: span 2;
		grid-row:    span 2;
	}
}

/* Tutta la card porta all'articolo: il collegamento del titolo la copre. */
.blog-card
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-container);
	display:          flex;
	flex-direction:   column;
	overflow:         hidden;
	position:         relative;
	transition:       border-color 0.3s var(--ags-ease-out), box-shadow 0.4s var(--ags-ease-out), translate 0.4s var(--ags-ease-out);
}

.blog-card:hover
{
	border-color: var(--ags-moss);
	box-shadow:   0 22px 40px -26px color-mix(in srgb, var(--ags-forest) 42%, transparent);
	translate:    0 -4px;
}

.blog-card__media
{
	aspect-ratio:     16 / 10;
	background-color: var(--ags-sand);
	overflow:         hidden;
	position:         relative;
}

.blog-card__media > img,
.blog-card__media > .blog-segnaposto
{
	display:    flex;
	height:     100%;
	-o-object-fit: cover;
	   object-fit: cover;
	transition: scale 0.6s var(--ags-ease-out);
	width:      100%;
}

.blog-card:hover .blog-card__media > *
{
	scale: 1.05;
}

.blog-card__body
{
	display:        flex;
	flex-direction: column;
	gap:            var(--ags-space-2);
	padding:        var(--ags-space-3) var(--ags-space-3) var(--ags-space-3);
}

.blog-card__titolo
{
	font-size:   1.125rem;
	font-weight: 700;
	line-height: 1.35;
	margin:      0;
}

.blog-card__link
{
	color:           var(--ags-ink);
	text-decoration: none;
	transition:      color 0.2s var(--ags-ease-out);
}

.blog-card__link::after
{
	content:  "";
	inset:    0;
	position: absolute;
}

.blog-card:hover .blog-card__link
{
	color: var(--ags-forest);
}

.blog-card__link:focus-visible
{
	outline: none;
}

.blog-card__link:focus-visible::after
{
	border-radius:  var(--ags-radius-container);
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.blog-card__estratto
{
	-webkit-box-orient: vertical;
	color:              var(--ags-muted);
	display:            -webkit-box;
	font-size:          0.9375rem;
	line-clamp:         3;
	-webkit-line-clamp: 3;
	line-height:        1.6;
	margin:             0;
	overflow:           hidden;
}

.blog-card__meta
{
	border-top:  1px solid var(--ags-border);
	color:       var(--ags-muted);
	display:     flex;
	flex-wrap:   wrap;
	font-size:   0.8125rem;
	gap:         var(--ags-space-2);
	margin-top:  auto;
	padding-top: var(--ags-space-2);
}

.blog-card__meta > span
{
	align-items: center;
	display:     inline-flex;
	gap:         6px;
}

/* Articolo grande: l'immagine riempie l'altezza delle due righe, il titolo cresce. */
.blog-griglia__item--grande .blog-card__media
{
	aspect-ratio: auto;
	flex:         1;
	min-height:   280px;
}

.blog-griglia__item--grande .blog-card__body
{
	padding: var(--ags-space-4);
}

.blog-griglia__item--grande .blog-card__titolo
{
	font-size:      clamp(1.3rem, 1rem + 0.9vw, 1.75rem);
	letter-spacing: -0.01em;
	line-height:    1.25;
	text-wrap:      balance;
}

.blog-griglia__item--grande .blog-segnaposto
{
	font-size: 4rem;
}

/* ==========================================================================
   STATI: SKELETON E CARICAMENTO
   ========================================================================== */

.blog-skeleton
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-container);
	overflow:         hidden;
	padding-bottom:   var(--ags-space-4);
}

/* Riflesso che scorre sui segnaposto finché gli articoli non arrivano. */
.blog-skeleton__media,
.blog-skeleton__riga
{
	animation:        blog-riflesso 1.4s linear infinite;
	background-color: var(--ags-sand);
	background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ags-white) 70%, transparent) 50%, transparent 100%);
	background-repeat: no-repeat;
	background-size:  50% 100%;
}

.blog-skeleton__media
{
	aspect-ratio: 16 / 10;
}

.blog-skeleton__riga
{
	border-radius: var(--ags-radius-control);
	height:        14px;
	margin-inline: var(--ags-space-3);
	margin-top:    var(--ags-space-2);
}

.blog-skeleton__riga--short
{
	width: 40%;
}

.blog-skeleton__riga--medium
{
	width: 70%;
}

.blog-skeleton__riga--long
{
	width: 85%;
}

.blog-sentinella
{
	padding-block: var(--ags-space-5) 0;
	text-align:    center;
}

.blog-spinner
{
	color: var(--ags-forest);
}

@keyframes blog-riflesso
{
	from
	{
		background-position: -100% 0;
	}

	to
	{
		background-position: 200% 0;
	}
}

/* ==========================================================================
   DETTAGLIO ARTICOLO
   ========================================================================== */

/* Barra di avanzamento della lettura in cima alla pagina: esiste solo dove il browser
   collega le animazioni allo scroll. */
.blog-progresso
{
	display: none;
}

.blog-articolo-hero
{
	background-color: var(--ags-sand);
	border-bottom:    1px solid var(--ags-border);
	padding-block:    calc(68px + var(--ags-space-5)) var(--ags-space-5);
}

/* Titolo, testo, tag e condivisione condividono la stessa colonna di lettura. */
.blog-articolo__colonna,
.blog-contenuto,
.blog-tag-lista,
.blog-condividi
{
	margin-inline: auto;
	max-width:     44rem;
}

.blog-breadcrumb
{
	align-items:   center;
	color:         var(--ags-muted);
	display:       flex;
	flex-wrap:     wrap;
	font-size:     0.875rem;
	gap:           6px;
	margin-bottom: var(--ags-space-4);
}

.blog-breadcrumb a
{
	color:           var(--ags-forest);
	text-decoration: none;
}

.blog-breadcrumb a:hover
{
	color:           var(--ags-green);
	text-decoration: underline;
}

.blog-breadcrumb i,
.blog-breadcrumb svg
{
	color:     var(--ags-muted);
	font-size: 0.75rem;
}

.blog-articolo__titolo
{
	color:          var(--ags-ink);
	font-size:      clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
	font-weight:    700;
	letter-spacing: -0.015em;
	line-height:    1.15;
	margin:         var(--ags-space-2) 0 var(--ags-space-3);
	text-wrap:      balance;
}

.blog-articolo__sottotitolo
{
	color:         var(--ags-muted);
	font-size:     1.1875rem;
	line-height:   1.55;
	margin-bottom: var(--ags-space-3);
}

.blog-articolo__meta
{
	align-items: center;
	color:       var(--ags-muted);
	display:     flex;
	flex-wrap:   wrap;
	font-size:   0.875rem;
	gap:         var(--ags-space-1) var(--ags-space-4);
}

.blog-articolo__meta > span
{
	align-items: center;
	display:     inline-flex;
	gap:         6px;
}

.blog-articolo-corpo
{
	background-color: var(--ags-white);
	padding-block:    var(--ags-space-6) var(--ags-space-7);
}

/* La copertina è più larga della colonna di testo, centrata sopra di essa. */
.blog-articolo__copertina
{
	aspect-ratio:  16 / 9;
	border-radius: var(--ags-radius-container);
	box-shadow:    0 30px 60px -44px color-mix(in srgb, var(--ags-forest) 50%, transparent);
	display:       block;
	margin:        0 auto var(--ags-space-6);
	max-width:     62rem;
	-o-object-fit:    cover;
	   object-fit:    cover;
	width:         100%;
}

/* ==========================================================================
   CORPO TESTO EDITORIALE (COLONNA DI LETTURA, 16PX)
   ========================================================================== */

.blog-contenuto
{
	color:       var(--ags-ink);
	font-family: var(--ags-font);
	font-size:   16px;
	line-height: 1.7;
}

.blog-contenuto > *:first-child
{
	margin-top: 0;
}

.blog-contenuto h2,
.blog-contenuto h3,
.blog-contenuto h4,
.blog-contenuto h5,
.blog-contenuto h6
{
	color:          var(--ags-ink);
	font-weight:    700;
	letter-spacing: -0.01em;
	line-height:    1.3;
}

.blog-contenuto h2
{
	font-size:     1.5rem;
	margin-bottom: var(--ags-space-2);
	margin-top:    var(--ags-space-5);
}

.blog-contenuto h3
{
	font-size:     1.25rem;
	margin-bottom: var(--ags-space-2);
	margin-top:    var(--ags-space-4);
}

.blog-contenuto h4
{
	font-size:     1.125rem;
	margin-bottom: var(--ags-space-1);
	margin-top:    var(--ags-space-4);
}

.blog-contenuto p
{
	margin-bottom: var(--ags-space-3);
}

.blog-contenuto ul,
.blog-contenuto ol
{
	margin-bottom: var(--ags-space-3);
	padding-left:  var(--ags-space-4);
}

.blog-contenuto li
{
	margin-bottom: var(--ags-space-1);
}

.blog-contenuto a
{
	color:                 var(--ags-forest);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.blog-contenuto a:hover
{
	color: var(--ags-green);
}

/* Citazione: fondo tinto invece del filo laterale colorato. */
.blog-contenuto blockquote
{
	background-color: var(--ags-green-soft);
	border-radius:    var(--ags-radius-container);
	color:            var(--ags-forest);
	font-size:        1.0625rem;
	font-style:       italic;
	margin:           var(--ags-space-4) 0;
	padding:          var(--ags-space-3) var(--ags-space-4);
}

.blog-contenuto img
{
	border-radius: var(--ags-radius-container);
	display:       block;
	height:        auto;
	margin:        var(--ags-space-4) auto;
	max-width:     100%;
}

.blog-contenuto figure
{
	margin: var(--ags-space-4) 0;
}

.blog-contenuto figcaption
{
	color:      var(--ags-muted);
	font-size:  0.875rem;
	margin-top: var(--ags-space-1);
	text-align: center;
}

/* Tag */
.blog-tag-lista
{
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--ags-space-1);
	margin-top: var(--ags-space-5);
}

.blog-tag
{
	align-items:      center;
	background-color: var(--ags-sand);
	border-radius:    999px;
	color:            var(--ags-ink);
	display:          inline-flex;
	font-size:        0.8125rem;
	font-weight:      600;
	min-height:       36px;
	padding:          6px 14px;
	text-decoration:  none;
	transition:       background-color 0.2s var(--ags-ease-out), color 0.2s var(--ags-ease-out);
}

.blog-tag:hover
{
	background-color: var(--ags-green-soft);
	color:            var(--ags-forest);
}

/* Condivisione: etichetta e un unico gruppo di pulsanti uniti. */
.blog-condividi
{
	align-items: center;
	border-top:  1px solid var(--ags-border);
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--ags-space-3);
	margin-top:  var(--ags-space-5);
	padding-top: var(--ags-space-4);
}

.blog-condividi__label
{
	color:       var(--ags-ink);
	font-weight: 600;
}

.blog-condividi__gruppo
{
	border:        1px solid var(--ags-border);
	border-radius: var(--ags-radius-control);
	display:       inline-flex;
	overflow:      hidden;
}

.blog-condividi__btn
{
	align-items:      center;
	background-color: var(--ags-white);
	border:           0;
	color:            var(--ags-ink);
	cursor:           pointer;
	display:          inline-flex;
	font-size:        1rem;
	height:           44px;
	justify-content:  center;
	text-decoration:  none;
	transition:       background-color 0.2s var(--ags-ease-out), color 0.2s var(--ags-ease-out);
	width:            48px;
}

.blog-condividi__btn + .blog-condividi__btn
{
	border-left: 1px solid var(--ags-border);
}

.blog-condividi__btn:hover
{
	background-color: var(--ags-green-soft);
	color:            var(--ags-forest);
}

.blog-condividi__btn:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: -2px;
}

/* ==========================================================================
   ARTICOLI CORRELATI
   ========================================================================== */

.blog-correlati
{
	background-color: var(--ags-sand);
	border-top:       1px solid var(--ags-border);
	padding-block:    var(--ags-space-7);
}

.blog-sezione-titolo
{
	color:          var(--ags-ink);
	font-size:      clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight:    700;
	letter-spacing: -0.01em;
	margin-bottom:  var(--ags-space-5);
}

/* I correlati sono quattro: nella griglia a tre colonne dell'elenco l'ultimo resterebbe solo
   su una riga a metà. Due o quattro colonne li chiudono sempre in righe piene. */
@media (min-width: 992px) and (max-width: 1199.98px)
{
	.blog-correlati .blog-griglia
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px)
{
	.blog-correlati .blog-griglia
	{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.blog-correlati__azioni
{
	margin-top: var(--ags-space-6);
	text-align: center;
}

.blog-correlati__azioni .btn
{
	align-items: center;
	display:     inline-flex;
	font-weight: 600;
	gap:         8px;
	min-height:  48px;
}

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: no-preference)
{
	.blog-hero__media::before
	{
		animation: blog-assesta 2.4s var(--ags-ease-expo) both;
	}

	.blog-hero__title,
	.blog-hero__subtitle
	{
		animation: blog-sale 0.8s var(--ags-ease-out) backwards;
	}

	.blog-hero__subtitle
	{
		animation-delay: 90ms;
	}
}

/* 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 e convivono sullo stesso strato. */
@supports (animation-timeline: view())
{
	@media (prefers-reduced-motion: no-preference)
	{
		.blog-hero
		{
			view-timeline: --blog-hero block;
		}

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

		.blog-sezione
		{
			view-timeline: --blog-sezione block;
		}

		.blog-sezione::before
		{
			animation-fill-mode:       both;
			animation-name:            blog-luce;
			animation-range:           cover;
			animation-timeline:        --blog-sezione;
			animation-timing-function: linear;
		}

		.blog-evidenza
		{
			view-timeline: --blog-evidenza block;
		}

		.blog-evidenza__media > *
		{
			animation-fill-mode:       both;
			animation-name:            blog-foto-parallasse;
			animation-range:           cover;
			animation-timeline:        --blog-evidenza;
			animation-timing-function: linear;
		}
	}
}

@supports (animation-timeline: scroll())
{
	@media (prefers-reduced-motion: no-preference)
	{
		.blog-progresso
		{
			animation-fill-mode:       both;
			animation-name:            blog-progresso;
			animation-timeline:        scroll(root block);
			animation-timing-function: linear;
			background-color:          var(--ags-green);
			display:                   block;
			height:                    3px;
			inset:                     0 0 auto;
			position:                  fixed;
			transform-origin:          0 50%;
			z-index:                   110;
		}
	}
}

@keyframes blog-assesta
{
	from
	{
		scale: 1.08;
	}

	to
	{
		scale: 1;
	}
}

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

	to
	{
		translate: 0 22%;
	}
}

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

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

@keyframes blog-luce
{
	from
	{
		translate: 0 -60px;
	}

	to
	{
		translate: 0 60px;
	}
}

@keyframes blog-foto-parallasse
{
	from
	{
		translate: 0 -3%;
	}

	to
	{
		translate: 0 3%;
	}
}

@keyframes blog-progresso
{
	from
	{
		transform: scaleX(0);
	}

	to
	{
		transform: scaleX(1);
	}
}

/* ==========================================================================
   RESPONSIVE E MOVIMENTO RIDOTTO
   ========================================================================== */

@media (max-width: 767.98px)
{
	.blog-hero
	{
		padding-top: calc(var(--ags-space-7) + var(--ags-space-4));
	}

	/* Su mobile il testo occupa tutta la larghezza: velo uniforme più deciso. */
	.blog-hero__media::after
	{
		background: linear-gradient(to bottom, color-mix(in srgb, var(--ags-ink) 60%, transparent) 0%, color-mix(in srgb, var(--ags-ink) 72%, transparent) 50%, color-mix(in srgb, var(--ags-ink) 86%, transparent) 100%);
	}

	/* In colonna senza andare a capo: con l'a capo attivo la riga prenderebbe la larghezza di
	   tutte le categorie insieme e la pagina scorrerebbe di lato. */
	.blog-filtri__barra
	{
		align-items:    stretch;
		flex-direction: column;
		flex-wrap:      nowrap;
	}

	/* Periodo e ordinamento a metà schermo ciascuno: da soli si prendevano due terzi della
	   larghezza per pochi stati. */
	.blog-filtri__controlli
	{
		display:               grid;
		gap:                   var(--ags-space-1);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.blog-periodo__scelta
	{
		font-size:      0.8125rem;
		min-height:     38px;
		padding:        6px 12px;
	}

	.blog-periodo__voce
	{
		font-size:  0.8125rem;
		gap:        var(--ags-space-3);
		min-height: 42px;
	}

	.blog-ordinamento
	{
		padding: 3px;
	}

	.blog-ordinamento button
	{
		flex:            1;
		font-size:       0.8125rem;
		gap:             5px;
		justify-content: center;
		min-height:      32px;
		padding-inline:  8px;
	}

	/* Su due righe (categorie e controlli) la barra agganciata sotto l'header si prendeva un
	   quarto dello schermo per tutta la lettura: su mobile resta in cima alla lista. */
	.blog-filtri
	{
		position: static;
	}

	/* ---------- ELENCO: CARD IN FORMATO LISTA ----------
	   A piena larghezza ogni articolo occupava mezza schermata, di cui un terzo era un blocco
	   immagine quasi vuoto. In orizzontale la miniatura fa da ancora visiva e restano cinque
	   articoli in vista: l'apertura grande resta all'articolo in evidenza. */

	.blog-griglia
	{
		gap: var(--ags-space-2);
	}

	.blog-card
	{
		align-items:    center;
		border-radius:  var(--ags-radius-container);
		flex-direction: row;
		gap:            var(--ags-space-2);
		padding:        10px;
	}

	.blog-card__media,
	.blog-card__media:has(> .blog-segnaposto),
	.blog-griglia__item--grande .blog-card__media,
	.blog-griglia__item--grande .blog-card__media:has(> .blog-segnaposto)
	{
		aspect-ratio:  1;
		border-radius: var(--ags-radius-control);
		flex:          none;
		min-height:    0;
		width:         92px;
	}

	.blog-segnaposto,
	.blog-griglia__item--grande .blog-segnaposto
	{
		font-size: 1.5rem;
	}

	.blog-card__body,
	.blog-griglia__item--grande .blog-card__body
	{
		gap:       6px;
		min-width: 0;
		padding:   0;
	}

	.blog-card__titolo,
	.blog-griglia__item--grande .blog-card__titolo
	{
		-webkit-box-orient: vertical;
		display:            -webkit-box;
		font-size:          1rem;
		letter-spacing:     -0.005em;
		line-clamp:         2;
		-webkit-line-clamp: 2;
		line-height:        1.3;
		overflow:           hidden;
		text-wrap:          initial;
	}

	/* L'estratto raddoppiava l'altezza della card per un testo che in lista non si legge. */
	.blog-card__estratto
	{
		display: none;
	}

	/* Dentro una card già bordata il filetto dei metadati era un bordo dentro un bordo. */
	.blog-card__meta
	{
		border-top:  0;
		font-size:   0.75rem;
		gap:         var(--ags-space-2);
		margin-top:  0;
		padding-top: 0;
	}

	/* Il segnaposto di caricamento segue la forma nuova, altrimenti la lista sobbalza
	   quando arrivano gli articoli. */
	.blog-skeleton
	{
		align-items:           center;
		border-radius:         var(--ags-radius-container);
		display:               grid;
		gap:                   6px var(--ags-space-2);
		grid-template-columns: 92px minmax(0, 1fr);
		padding:               10px;
	}

	.blog-skeleton__media
	{
		aspect-ratio:  1;
		border-radius: var(--ags-radius-control);
		grid-row:      span 3;
	}

	.blog-skeleton__riga
	{
		margin-inline: 0;
		margin-top:    0;
	}

	.blog-evidenza__media:has(> .blog-segnaposto)
	{
		min-height: 140px;
	}

	.blog-evidenza__body
	{
		padding: var(--ags-space-4) var(--ags-space-3);
	}

	/* L'apertura si prendeva il 59% dello schermo: con l'estratto su due righe e senza pulsante
	   scende sotto la metà, così sotto si intravede la lista e si capisce che c'è altro. */
	.blog-evidenza__estratto
	{
		-webkit-box-orient: vertical;
		display:            -webkit-box;
		line-clamp:         2;
		-webkit-line-clamp: 2;
		overflow:           hidden;
	}

	.blog-evidenza__azione
	{
		display: none;
	}

	/* Togliendo il pulsante spariva l'unico bersaglio ampio: il collegamento del titolo copre
	   tutta la card, come già fa nelle card della lista. */
	.blog-evidenza
	{
		position: relative;
	}

	.blog-evidenza__titolo a::after
	{
		content:  "";
		inset:    0;
		position: absolute;
	}

	/* ---------- DETTAGLIO ARTICOLO ----------
	   L'apertura era la parte più debole: percorso di navigazione grigio, titolo e metadati
	   compressi in cima e nessuno stacco verso il testo. Qui il ritmo verticale segue la
	   gerarchia: categoria, titolo, data, poi il testo con un attacco più grande. */

	.blog-articolo-hero
	{
		padding-block: calc(68px + var(--ags-space-4)) var(--ags-space-5);
	}

	/* Riga sola e discreta: su mobile è orientamento, non contenuto. */
	.blog-breadcrumb
	{
		flex-wrap:     nowrap;
		font-size:     0.8125rem;
		margin-bottom: var(--ags-space-3);
		overflow:      hidden;
	}

	.blog-articolo__titolo
	{
		letter-spacing: -0.02em;
		line-height:    1.18;
		margin:         var(--ags-space-3) 0 var(--ags-space-2);
	}

	.blog-articolo__sottotitolo
	{
		font-size:     1.0625rem;
		margin-bottom: var(--ags-space-3);
	}

	/* Una riga sola: bastano data e tempo di lettura. */
	.blog-articolo__meta
	{
		flex-wrap: nowrap;
		gap:       var(--ags-space-3);
	}

	.blog-articolo__meta > .blog-articolo__letture
	{
		display: none;
	}

	.blog-articolo-corpo
	{
		padding-block: var(--ags-space-5) var(--ags-space-6);
	}

	/* La copertina entra nel corpo scavalcando il bordo della fascia: la pagina si apre con
	   l'immagine invece che con il fondo piatto. */
	.blog-articolo__copertina
	{
		aspect-ratio:  4 / 3;
		margin-bottom: var(--ags-space-5);
		margin-top:    calc(-1 * var(--ags-space-6));
	}

	/* Attacco del pezzo: primo paragrafo più grande, come nell'impaginato di una rivista. */
	.blog-contenuto > p:first-of-type
	{
		color:       var(--ags-ink);
		font-size:   1.0625rem;
		line-height: 1.65;
	}

	.blog-contenuto h2
	{
		margin-top: var(--ags-space-5);
	}

	/* Cinque pulsanti stretti in un angolo: a piena larghezza diventano bersagli comodi. */
	.blog-condividi
	{
		align-items:    stretch;
		flex-direction: column;
		gap:            var(--ags-space-2);
	}

	.blog-condividi__gruppo
	{
		display: flex;
	}

	.blog-condividi__btn
	{
		flex:  1;
		width: auto;
	}

	.blog-correlati
	{
		padding-block: var(--ags-space-6);
	}

	.blog-sezione-titolo
	{
		margin-bottom: var(--ags-space-3);
	}

	/* Chiusura della pagina: azione unica e piena, non una pillola centrata. */
	.blog-correlati__azioni
	{
		margin-top: var(--ags-space-5);
	}

	.blog-correlati__azioni .btn
	{
		justify-content: center;
		width:           100%;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.blog-card,
	.blog-card__media > *,
	.blog-evidenza,
	.blog-evidenza__media > *,
	.blog-evidenza__cta i,
	.blog-evidenza__cta svg,
	.blog-chip
	{
		transition: none;
	}

	.blog-card:hover,
	.blog-evidenza__cta:hover i,
	.blog-evidenza__cta:hover svg
	{
		translate: none;
	}

	.blog-card:hover .blog-card__media > *,
	.blog-evidenza:hover .blog-evidenza__media > *
	{
		scale: 1;
	}

	.blog-skeleton__media,
	.blog-skeleton__riga
	{
		animation: none;
	}
}

/**
 * ARTICOLI CORRELATI E FOOTER
 *
 * La siepe del footer è trasparente fra le foglie e lascia vedere il crema di
 * fondo del sito: funziona perché quasi ovunque la sezione sopra è chiara. Qui
 * .blog-correlati usa il tono sabbia, diverso dal crema: senza questa regola
 * si vedrebbe una riga più chiara proprio al confine tra le due sezioni.
 */
article:has(> .blog-correlati:last-child) + footer.ags-footer--dark
{
	background-color: var(--ags-sand);
}