/*
 * Abello Restyling — hero.
 * 1) Copertine in cima alle pagine con template "trasparent" (Home, Storia, Il negozio, Blog, Prodotti):
 *    foto a tutta larghezza con parallax e velo ghisa da sinistra (proposta A, scelta il 2026-10-03).
 *    Gradienti e opacità scritti nei blocchi (style in linea, has-background-dim-*) sono neutralizzati qui.
 * 2) Hero di Shop e categorie (pattern sincronizzato "Hero categoria", classe .hero-categoria).
 * Solo variabili di tokens.css.
 */

/* ================================================================ 1. Copertine (proposta A "velo laterale")
   Foto a tutta larghezza con parallax (script del tema + js/parallax-focus.js), velo ghisa da sinistra,
   testo in basso a sinistra con filetto ottone. Su mobile il velo sale dal basso. */
.is-align-system > .wp-block-cover.alignfull:first-child {
	position: relative;
	display: flex !important;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: var(--ab-hero-min-h) !important;
	margin-top: 0;
	padding: 0;
	background: var(--ab-color-dark);
	color: var(--ab-color-on-dark);
	overflow: hidden;
}
/* velature scritte nei blocchi (gradiente verde, accent-fade, dim 30/50): sostituite dal velo dei token */
.is-align-system > .wp-block-cover.alignfull:first-child > .wp-block-cover__background { display: none !important; }
.is-align-system > .wp-block-cover.alignfull:first-child > .wp-block-cover__image-background {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	z-index: 0;
}
.is-align-system > .wp-block-cover.alignfull:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ab-hero-veil-cat);
	pointer-events: none;
}
.is-align-system > .wp-block-cover.alignfull:first-child > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ab-width-max);
	margin: 0 auto;
	padding: var(--ab-space-9) var(--ab-gutter);
	color: var(--ab-color-on-dark);
}
.is-align-system > .wp-block-cover.alignfull:first-child > .wp-block-cover__inner-container::before {
	content: "";
	display: block;
	width: var(--ab-space-8);
	height: var(--ab-border-rule);
	margin-bottom: var(--ab-space-5);
	background: var(--ab-color-accent-on-dark);
}
.is-align-system > .wp-block-cover.alignfull:first-child > .wp-block-cover__inner-container > * {
	max-width: var(--ab-hero-copy);
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left !important;
}
.is-align-system > .wp-block-cover.alignfull:first-child h1 {
	max-width: var(--ab-measure-title);
	margin: 0 0 var(--ab-space-5);
	font-family: var(--ab-font-display);
	font-size: var(--ab-text-6xl) !important;
	font-weight: var(--ab-weight-regular);
	line-height: var(--ab-leading-display);
	letter-spacing: var(--ab-tracking-display);
	color: var(--ab-color-on-dark);
	text-wrap: balance;
}
/* sottotitolo: nei contenuti è un H3 (Home, Storia, Blog) o un paragrafo (Il negozio, Prodotti) */
.is-align-system > .wp-block-cover.alignfull:first-child :is(h2, h3, p) {
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-lg) !important;
	font-weight: var(--ab-weight-regular);
	line-height: var(--ab-leading-snug);
	letter-spacing: normal;
	color: var(--ab-color-on-dark-muted);
	margin: 0 0 var(--ab-space-6);
	max-width: var(--ab-measure-short);
}
.is-align-system > .wp-block-cover.alignfull:first-child .wp-block-buttons { gap: var(--ab-space-4) var(--ab-space-5); margin-top: var(--ab-space-2); }
.is-align-system > .wp-block-cover.alignfull:first-child .wp-block-button__link { font-size: var(--ab-text-ui); padding: var(--ab-space-4) var(--ab-space-6); }
.is-align-system > .wp-block-cover.alignfull:first-child .is-style-outline .wp-block-button__link {
	color: var(--ab-color-on-dark);
	border: var(--ab-border-hair) solid var(--ab-color-accent-on-dark);
	background: transparent;
}
.is-align-system > .wp-block-cover.alignfull:first-child .is-style-outline .wp-block-button__link:hover { background: color-mix(in srgb, var(--ab-color-accent-on-dark) 18%, transparent); }

@media (max-width: 781.98px) {
	.is-align-system > .wp-block-cover.alignfull:first-child::after { background: var(--ab-hero-veil-mobile); }
	.is-align-system > .wp-block-cover.alignfull:first-child > .wp-block-cover__inner-container { padding: var(--ab-space-10) var(--ab-gutter) var(--ab-space-7); }
}

/* ================================================================ 2. Hero di Shop e categorie */
.wp-block-cover.hero-categoria {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--ab-hero-cat-min-h) !important;
	margin-bottom: var(--ab-space-7);
	padding: var(--ab-space-9) 0 var(--ab-space-7);
	background: var(--ab-color-dark);
	color: var(--ab-color-on-dark);
	overflow: hidden;
}
/* velo sopra l'immagine (se la categoria non ha immagine resta il fondo ghisa pieno) */
.wp-block-cover.hero-categoria:has(figure.hero-categoria-img)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ab-hero-veil-cat);
	pointer-events: none;
}
/* il pattern ha un gradiente verde in linea: sostituito dal fondo pieno */
.wp-block-cover.hero-categoria > .wp-block-cover__background { display: none !important; }
.hero-categoria .wp-block-cover__inner-container {
	position: static;   /* l'immagine si posiziona rispetto alla copertina intera */
	width: 100%;
	max-width: var(--ab-width-wide);
	margin: 0 auto;
	padding: 0 var(--ab-gutter);
	box-sizing: border-box;
}
.hero-categoria .wp-block-columns { gap: 0; margin: 0; }
.hero-categoria .wp-block-column:not(:has(> figure.hero-categoria-img)) { position: relative; z-index: 2; flex-basis: 62% !important; }
.hero-categoria .wp-block-column:not(:has(> figure.hero-categoria-img))::before {
	content: "";
	display: block;
	width: var(--ab-space-8);
	height: var(--ab-border-rule);
	margin-bottom: var(--ab-space-5);
	background: var(--ab-color-accent-on-dark);
}
.hero-categoria .wp-block-column:has(> figure.hero-categoria-img) { position: static; flex: 0 0 0 !important; min-width: 0; padding: 0; }
.hero-categoria .hero-categoria-parent {
	margin: 0 0 var(--ab-space-3);
	font-size: var(--ab-text-ui) !important;
	opacity: 1;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ab-color-on-dark-muted);
}
.hero-categoria .hero-categoria-parent a { color: var(--ab-color-accent-on-dark) !important; text-decoration: underline !important; text-underline-offset: var(--ab-underline-offset); }
.hero-categoria h1,
.woocommerce-shop .hero-categoria h1 {   /* il genitore nasconde l'H1 nello Shop: qui deve restare visibile */
	display: block;
	margin: 0 0 var(--ab-space-4);
	font-family: var(--ab-font-display);
	font-size: var(--ab-text-5xl) !important;
	font-weight: var(--ab-weight-medium);
	line-height: var(--ab-leading-title);
	letter-spacing: var(--ab-tracking-display);
	color: var(--ab-color-on-dark);
	hyphens: auto;
	overflow-wrap: normal;
}
.hero-categoria .wp-block-column > p:not(.hero-categoria-parent) {
	max-width: var(--ab-measure);
	margin: 0;
	font-size: var(--ab-text-md) !important;
	line-height: var(--ab-leading-text);
	color: var(--ab-color-on-dark-muted);
}

/* link alle sottocategorie */
.hero-categoria .hero-categoria-sub { display: flex; flex-wrap: wrap; gap: var(--ab-space-2); margin-top: var(--ab-space-6); }
.hero-categoria .hero-categoria-pill {
	display: inline-block;
	padding: var(--ab-space-2) var(--ab-space-4);
	border: var(--ab-border-hair) solid color-mix(in srgb, var(--ab-color-accent-on-dark) 70%, transparent);
	border-radius: var(--ab-radius-2);
	background: color-mix(in srgb, var(--ab-color-dark) 70%, transparent);
	color: var(--ab-color-on-dark);
	font-size: var(--ab-text-ui);
	line-height: var(--ab-leading-snug);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ab-duration-fast) var(--ab-ease), color var(--ab-duration-fast) var(--ab-ease);
}
.hero-categoria .hero-categoria-pill:hover,
.hero-categoria .hero-categoria-pill:focus-visible { background: var(--ab-color-accent-on-dark); color: var(--ab-color-dark); }

/* immagine della categoria o dello Shop: a tutta larghezza dietro al velo, con parallax (js/parallax-focus.js) */
.wp-block-cover.hero-categoria figure.hero-categoria-img,
.wp-block-cover.hero-categoria figure.hero-categoria-img--foto {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}
.wp-block-cover.hero-categoria figure.hero-categoria-img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: 50% 50%;
	background: none;
	border-radius: 0;
	box-shadow: none;
	mix-blend-mode: normal;
}

@media (max-width: 781.98px) {
	.wp-block-cover.hero-categoria { padding: var(--ab-space-10) 0 var(--ab-space-5); margin-bottom: var(--ab-space-5); }
	.wp-block-cover.hero-categoria:has(figure.hero-categoria-img)::after { background: var(--ab-hero-veil-cat-mobile); }
	.hero-categoria .wp-block-column:not(:has(> figure.hero-categoria-img)) { flex-basis: 100% !important; }
	.hero-categoria .wp-block-columns { gap: var(--ab-space-5); }
	/* su mobile le sottocategorie scorrono in orizzontale invece di occupare mezza pagina */
	.hero-categoria .hero-categoria-sub {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		margin-right: calc(-1 * var(--ab-gutter));
		padding: 0 var(--ab-gutter) var(--ab-space-2) 0;
		scrollbar-width: thin;
	}
	.hero-categoria .hero-categoria-pill { scroll-snap-align: start; }
}

/* ================================================================ 3. Navigazione sovrapposta (vedi header.css) */
/* ombra in cima alla foto, sotto il menu */
.is-align-system > .wp-block-cover.alignfull:first-child::before,
.wp-block-cover.hero-categoria::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--ab-header-h) * 1.6);
	z-index: 1;
	background: var(--ab-nav-shade);
	pointer-events: none;
}
/* la hero di Shop e categorie si allunga dell'altezza dell'header, così il testo resta dov'era */
.wp-block-cover.hero-categoria {
	min-height: calc(var(--ab-hero-cat-min-h) + var(--ab-header-h)) !important;
	padding-top: calc(var(--ab-space-9) + var(--ab-header-h));
}
@media (max-width: 1189.98px) {
	.wp-block-cover.hero-categoria { padding-top: calc(var(--ab-space-7) + var(--ab-header-h-mobile)); }
}