/* ==========================================================================
   ESS — Pubblicità (gr-ads)
   ==========================================================================
   Stile degli annunci serviti dal componente <twig:GrAd/>. Il modulo emette
   markup con classi semantiche gr-ad* e NON porta CSS: lo stile è del sito.

   Markup prodotto dal modulo (@GrAds/components/GrAd.html.twig):
     <div class="gr-ad gr-ad--CODE" role="complementary" aria-label="Pubblicità">
       <a class="gr-ad__link"><img class="gr-ad__img" width height loading="lazy"></a>
       <span class="gr-ad__sponsor">Sponsorizzato da X</span>
     </div>

   Principi:
   - Non invasivo: l'annuncio non deve competere col contenuto né spostarlo.
   - Coerente col tema: nessun border-radius (--ess-radius-* è 0 per scelta,
     il design ESS è squadrato), token --ess-*, nessuna classe Tailwind.
   - Zero CLS: il componente emette width/height sull'<img>, da cui il browser
     ricava l'aspect-ratio e riserva lo spazio prima del download.
   - Sempre riconoscibile come pubblicità (vedi § Trasparenza).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.gr-ad {
	display: block;
	max-width: 100%;
	margin-inline: auto;
	text-align: center;
}

.gr-ad__link {
	display: block;
	text-decoration: none;
	line-height: 0; /* toglie il gap del baseline sotto l'immagine inline */
}

/* max-width + height:auto rendono il creativo responsive senza rompere
   l'aspect-ratio calcolato dagli attributi width/height. */
.gr-ad__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* Markup grezzo: solo per i banner gestiti dall'admin (il modulo non lo emette
   mai per i creativi self-service degli sponsor — difesa anti-XSS). */
.gr-ad__html {
	max-width: 100%;
	overflow: hidden;
}

.gr-ad__html img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Trasparenza — l'annuncio dev'essere sempre riconoscibile
   --------------------------------------------------------------------------
   Il modulo rende .gr-ad__sponsor SOLO se il banner ha advertiserName
   valorizzato: senza, l'annuncio uscirebbe privo di contrassegno visibile.
   Il wrapper ha già aria-label="Pubblicità" per gli screen reader; qui si
   copre il caso visivo con un fallback, così l'etichetta non manca mai.
   -------------------------------------------------------------------------- */

.gr-ad__sponsor,
.gr-ad:not(:has(.gr-ad__sponsor))::after {
	display: block;
	margin-top: var(--ess-space-1);
	font-family: var(--ess-font-body);
	font-size: 0.6875rem;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ess-muted-aa);
}

.gr-ad:not(:has(.gr-ad__sponsor))::after {
	content: 'Sponsorizzato';
}

/* --------------------------------------------------------------------------
   Contenitori degli slot
   --------------------------------------------------------------------------
   Il componente non rende NULLA quando nessun banner è eleggibile (stato
   normale del sito finché non ci sono sponsor), ma il contenitore nel template
   resta nel DOM. Va quindi neutralizzato, o resterebbe una fascia vuota.

   La regola è scritta al positivo — stile SOLO :has(.gr-ad) — invece che al
   negativo (:not(:has(...)) { display:none }). Così, se un browser non
   supporta :has(), il degrado è «slot senza stile» (invisibile: niente
   padding, niente fondo, niente margini) e non «fascia vuota su ogni pagina».
   Progressive enhancement: il caso peggiore non si vede.
   -------------------------------------------------------------------------- */

/* Banda — homepage e pre-footer. Fondo "carta" per staccare l'annuncio dal
   contenuto editoriale: serve insieme alla non invasività e alla
   riconoscibilità come pubblicità. */
.ess-ad-band:has(.gr-ad) {
	padding-block: var(--ess-space-8);
	background: var(--ess-surface);
	border-block: 1px solid var(--ess-line);
}

/* Slot in-content — blog e territorio. */
.ess-ad-inline:has(.gr-ad) {
	margin-block: var(--ess-space-8);
}

/* Slot sidebar — scheda azienda e scheda prodotto. Si accoda ai widget senza
   una cornice propria: la colonna ha già il suo ritmo verticale. */
.ess-ad-aside:has(.gr-ad) {
	margin-bottom: var(--ess-space-6);
}

/* Slot lista — sopra i risultati. */
.ess-ad-listing:has(.gr-ad) {
	margin-bottom: var(--ess-space-6);
}

/* --------------------------------------------------------------------------
   Hero categoria — sponsor o editoriale, stessa chrome (Fase 3)
   --------------------------------------------------------------------------
   Sfondo immagine + gradiente scuro → testo bianco sempre leggibile (WCAG),
   coerente con l'hero della homepage. Il gradiente è nell'attributo style
   inline del partial (varia con l'immagine). Qui: layout, tipografia, CTA.
   -------------------------------------------------------------------------- */

.ess-cathero {
	position: relative;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	border-bottom: 4px solid var(--ess-limone);
}

.ess-cathero__inner {
	padding-block: clamp(40px, 7vw, 88px);
	max-width: 760px;
}

/* Breadcrumb DENTRO l'hero (niente più barra bianca sopra il banner).
   Con il breadcrumb bilanciamo la spaziatura verticale: padding-top compatto
   (il breadcrumb siede vicino all'header) e padding-bottom ridotto rispetto al
   base, così il blocco non resta "in alto" con troppo vuoto sotto. */
.ess-cathero--with-crumbs .ess-cathero__inner {
	padding-top: clamp(12px, 2vw, 16px);
	padding-bottom: clamp(38px, 5.5vw, 62px);
}

.ess-cathero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	/* stacco contenuto ma coeso col titolo: gap più contenuto dei 40px iniziali */
	margin: 0 0 clamp(18px, 3vw, 28px);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
}

.ess-cathero__breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.ess-cathero__breadcrumb a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.ess-cathero__breadcrumb [aria-current="page"] {
	color: #ffffff;
	font-weight: 600;
}

.ess-cathero__crumb-sep {
	color: rgba(255, 255, 255, 0.5);
}

.ess-cathero__eyebrow {
	margin: 0 0 var(--ess-space-2);
	font-family: var(--ess-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ess-limone);
}

.ess-cathero__title {
	margin: 0;
	font-family: var(--ess-font-heading);
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.1;
	color: #ffffff;
}

.ess-cathero__sub {
	margin: var(--ess-space-3) 0 0;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.5;
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.92);
}

.ess-cathero__cta {
	margin-top: var(--ess-space-6);
}

/* Etichetta "Sponsorizzato da…" su una slide sponsor del carosello home. */
.ess-hero-slide__sponsor {
	display: inline-flex;
	align-items: center;
	margin-left: var(--ess-space-3);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* Etichetta trasparenza dello sponsor, in un angolo, sempre leggibile. */
.ess-cathero__sponsor {
	position: absolute;
	right: var(--ess-space-3);
	bottom: var(--ess-space-3);
	padding: 2px 8px;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 2px;
}