/* ══════════════════════════════════════════════════════
   Hero generale — ali/hero-page block
   Reusable hero for pages (chi-siamo, etc.)
   ══════════════════════════════════════════════════════ */

/* ── Animations ────────────────────────────────────── */
@keyframes csFadeUp  { from { opacity:0; transform:translateY(44px); } to { opacity:1; transform:translateY(0); } }
@keyframes csBounce  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ── Hero section ──────────────────────────────────── */
.cs-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: flex-end;
	padding: 80px 40px 90px;
	overflow: hidden;
}

/* Background image (replaces CSS background-image for better perf).
 *
 * width/height 100% are load-bearing and must not be dropped in favour of the
 * insets: an <img> is a replaced element, so with height:auto it takes its
 * intrinsic size instead of stretching to top/bottom. A consuming theme's
 * `img { height: auto }` reset will beat this on specificity and collapse the
 * hero image — scope such resets below (0,1,0). */
.cs-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Single transform chain: flip, hover-zoom and hover-pan each drive one
	   custom property so they compose instead of overwriting each other. */
	transform: scaleX(var(--cs-fx, 1)) scaleY(var(--cs-fy, 1)) scale(var(--cs-z, 1)) translateX(var(--cs-tx, 0));
}
/* <picture> wrapper must not create a box: the img inside is absolutely positioned. */
.cs-hero-bg-picture { display: contents; }

/* ── Image flip ────────────────────────────────────── */
.cs-hero-bg--flip-h  { --cs-fx: -1; }
.cs-hero-bg--flip-v  { --cs-fy: -1; }
.cs-hero-bg--flip-hv { --cs-fx: -1; --cs-fy: -1; }

/* ── Image fit ─────────────────────────────────────── */
/* `contain` letterboxes: fill the gaps with the dark token instead of white. */
.cs-hero--fit-contain { background: var(--block-dark, #1a2332); }

/* ── Image hover effects ───────────────────────────── */
.cs-hero--hov-zoom .cs-hero-bg,
.cs-hero--hov-zoom-out .cs-hero-bg,
.cs-hero--hov-pan .cs-hero-bg {
	transition: transform 1.2s cubic-bezier(.22,1,.36,1);
	will-change: transform;
}
.cs-hero--hov-gray .cs-hero-bg,
.cs-hero--hov-bright .cs-hero-bg {
	transition: filter .6s ease;
}
.cs-hero--hov-zoom:hover .cs-hero-bg      { --cs-z: 1.07; }
.cs-hero--hov-zoom-out .cs-hero-bg        { --cs-z: 1.07; }
.cs-hero--hov-zoom-out:hover .cs-hero-bg  { --cs-z: 1; }
.cs-hero--hov-pan .cs-hero-bg             { --cs-z: 1.08; }
.cs-hero--hov-pan:hover .cs-hero-bg       { --cs-tx: -3%; }
.cs-hero--hov-gray .cs-hero-bg            { filter: grayscale(1); }
.cs-hero--hov-gray:hover .cs-hero-bg      { filter: grayscale(0); }
.cs-hero--hov-bright .cs-hero-bg          { filter: brightness(.82); }
.cs-hero--hov-bright:hover .cs-hero-bg    { filter: brightness(1); }

/* Gradient overlay */
.cs-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: var(--cs-hero-ov, 1);
	background:
		linear-gradient(170deg, color-mix(in srgb, var(--block-accent) 10%, transparent) 0%, transparent 40%),
		linear-gradient(to top, color-mix(in srgb, var(--block-dark) 92%, transparent) 0%, color-mix(in srgb, var(--block-dark) 50%, transparent) 35%, color-mix(in srgb, var(--block-dark) 12%, transparent) 65%, transparent 100%);
}

/* ── Overlay variants (readability) ────────────────── */
/* Uniform scrim — the safest bet over a busy or light photo. */
.cs-hero--ov-scrim::before {
	background: color-mix(in srgb, var(--block-dark) 58%, transparent);
}
/* Darkens the edges, keeps the subject visible in the middle. */
.cs-hero--ov-vignette::before {
	background:
		radial-gradient(ellipse at center, transparent 30%, color-mix(in srgb, var(--block-dark) 82%, transparent) 100%),
		color-mix(in srgb, var(--block-dark) 20%, transparent);
}
/* Mirror of the default gradient — for content aligned to the top. */
.cs-hero--ov-top::before {
	background:
		linear-gradient(190deg, color-mix(in srgb, var(--block-accent) 10%, transparent) 0%, transparent 40%),
		linear-gradient(to bottom, color-mix(in srgb, var(--block-dark) 92%, transparent) 0%, color-mix(in srgb, var(--block-dark) 50%, transparent) 35%, color-mix(in srgb, var(--block-dark) 12%, transparent) 65%, transparent 100%);
}
.cs-hero--ov-none::before {
	background: none;
}

/* Content */
.cs-hero-content {
	position: relative;
	z-index: 2;
	max-width: 1140px;
	width: 100%;
	margin: 0 auto;
	animation: csFadeUp .9s cubic-bezier(.22,1,.36,1) both;
}

.cs-hero h1 {
	font-family:var(--block-font-heading);
	/* 400 suits a serif display face, which is what the default heading font is.
	   A campaign on a sans heading face needs more weight to carry the same
	   presence at the same size — hence the titleWeight attribute rather than a
	   changed default, which would restyle every existing hero. */
	font-weight: var(--cs-hero-title-weight, 400);
	font-size: clamp(2.8rem, 6vw, 4.5rem);
	color: #fff;
	margin: 0 0 16px;
	max-width: 600px;
	line-height: 1.08;
	text-shadow: 0 2px 40px rgba(0,0,0,.3);
}
.cs-hero h1 em {
	font-style: italic;
	color: var(--block-accent-pale, #8cd5e5);
	text-shadow: 0 2px 40px color-mix(in srgb, var(--block-accent) 30%, transparent);
}

.cs-hero-sub {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	color: rgba(255,255,255,.85);
	max-width: 520px;
	margin: 0;
	line-height: 1.6;
	text-shadow: 0 1px 20px rgba(0,0,0,.4);
	animation: csFadeUp .9s cubic-bezier(.22,1,.36,1) .15s both;
}

/* ── Overtitle ─────────────────────────────────────── */
.cs-hero-overtitle {
	font-family:var(--block-font-body);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--block-accent-pale, #8cd5e5);
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cs-hero-overtitle::before {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--block-accent-pale, #8cd5e5);
	border-radius: 1px;
	flex-shrink: 0;
}
.cs-hero-overtitle-img {
	max-height: 48px;
	width: auto;
	margin: 0 0 18px;
	filter: brightness(0) invert(1);
}
.cs-hero-overtitle-img--small  { max-height: 30px; }
.cs-hero-overtitle-img--large  { max-height: 72px; }
.cs-hero-overtitle-img--xlarge { max-height: 110px; }

/* ── Title sizes ──────────────────────────────────── */
.cs-hero h1.cs-hero-title--small { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 700px; }
.cs-hero h1.cs-hero-title--large { font-size: clamp(3.2rem, 7.5vw, 5.5rem); max-width: 800px; }

/* ── Content position ─────────────────────────────── */
.cs-hero--va-top    { align-items: flex-start; }
.cs-hero--va-center { align-items: center; }

.cs-hero--ha-center .cs-hero-content { text-align: center; }
.cs-hero--ha-center .cs-hero-overtitle { justify-content: center; }
.cs-hero--ha-center h1,
.cs-hero--ha-center .cs-hero-sub,
.cs-hero--ha-center .cs-hero-panel { margin-left: auto; margin-right: auto; }
.cs-hero--ha-center .cs-hero-ctas { justify-content: center; }
.cs-hero--ha-center .cs-hero-overtitle-img { display: block; margin-left: auto; margin-right: auto; }

.cs-hero--ha-right .cs-hero-content { text-align: right; }
.cs-hero--ha-right .cs-hero-overtitle { justify-content: flex-end; flex-direction: row-reverse; }
.cs-hero--ha-right h1,
.cs-hero--ha-right .cs-hero-sub,
.cs-hero--ha-right .cs-hero-panel { margin-left: auto; }
.cs-hero--ha-right .cs-hero-ctas { justify-content: flex-end; }
.cs-hero--ha-right .cs-hero-overtitle-img { display: block; margin-left: auto; }

/* ── Text shadow strength ─────────────────────────── */
.cs-hero--ts-none h1,
.cs-hero--ts-none h1 em,
.cs-hero--ts-none .cs-hero-sub { text-shadow: none; }
.cs-hero--ts-strong h1,
.cs-hero--ts-strong h1 em { text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.55); }
.cs-hero--ts-strong .cs-hero-sub { text-shadow: 0 1px 10px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.5); }

/* ── Text panel (background behind the copy) ──────── */
.cs-hero-panel {
	max-width: 720px;
	padding: 36px 40px;
	border-radius: 20px;
}
/* The panel already bounds the line length — drop the per-element caps. */
.cs-hero-panel h1,
.cs-hero-panel .cs-hero-sub { max-width: none; }
.cs-hero-panel--glass {
	background: color-mix(in srgb, var(--block-dark) 70%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.14);
}
.cs-hero-panel--dark {
	background: color-mix(in srgb, var(--block-dark) 84%, transparent);
}
.cs-hero-panel--accent {
	background: color-mix(in srgb, var(--block-accent-deep, var(--block-accent)) 88%, transparent);
}

/* Panel opacity — how much of the photo shows through. The middle step is the
   default (no modifier class) because a panel exists to make copy readable and
   a bright photo eats a thin one; --op-soft is the old 45% glass, kept for
   images dark or flat enough to carry it, --op-solid for the worst photos. */
.cs-hero-panel--glass.cs-hero-panel--op-soft    { background: color-mix(in srgb, var(--block-dark) 45%, transparent); }
.cs-hero-panel--glass.cs-hero-panel--op-solid   { background: color-mix(in srgb, var(--block-dark) 92%, transparent); }
.cs-hero-panel--dark.cs-hero-panel--op-soft     { background: color-mix(in srgb, var(--block-dark) 62%, transparent); }
.cs-hero-panel--dark.cs-hero-panel--op-solid    { background: var(--block-dark, #1a2332); }
.cs-hero-panel--accent.cs-hero-panel--op-soft   { background: color-mix(in srgb, var(--block-accent-deep, var(--block-accent)) 66%, transparent); }
.cs-hero-panel--accent.cs-hero-panel--op-solid  { background: var(--block-accent-deep, var(--block-accent, #3DAABD)); }
.cs-hero-panel--accent h1 em { color: #fff; }

/* Inside a panel the overtitle sits on a known dark fill, so it takes white
   rather than the pale accent: at .72rem it needs 4.5:1, which the pale step
   only reaches over an opaque panel. Outside a panel it keeps the accent tint —
   there the backdrop is the image plus its overlay, not a flat fill. */
.cs-hero-panel .cs-hero-overtitle { color: #fff; }

/* CTA group */
.cs-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
	animation: csFadeUp .9s cubic-bezier(.22,1,.36,1) .3s both;
}
.cs-hero-ctas .cs-hero-cta {
	margin-top: 0;
	animation: none;
}

/* CTA button */
.cs-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding: 14px 32px;
	border: 2px solid transparent;
	background: #fff;
	color: var(--block-dark, #1a2332) !important;
	font-family:var(--block-font-body);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: var(--block-btn-radius, 50px);
	text-decoration: none !important;
	transition: all .3s cubic-bezier(.22,1,.36,1);
	animation: csFadeUp .9s cubic-bezier(.22,1,.36,1) .3s both;
	box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.cs-hero-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
/* Only the filled (white) pill shifts its ink on hover. The outline variant sits
   directly on the image, where the accent's text step is a dark colour on a dark
   backdrop — it stays white. */
.cs-hero-cta:not(.cs-hero-cta--outline):hover {
	color: var(--block-accent-text, var(--block-accent, #3DAABD)) !important;
}
/* No blanket nudge here: every hero CTA now carries a chosen icon, and
   ali_block_button_icon() already tags the directional ones (.ali-btn-icon--arrow,
   .ali-btn-icon--down) for the rules in base.css. A rule on `svg` moved the
   pictograms too, and it moved them DOWN 3px while the button itself lifts 2px —
   so a pencil or a heart slid 5px away from its label on hover. */
.cs-hero-cta svg {
	transition: transform .3s ease;
}

/* CTA outline variant (second button) */
.cs-hero-cta--outline {
	background: transparent;
	color: #fff !important;
	border-color: rgba(255,255,255,.5);
	box-shadow: none;
}
.cs-hero-cta--outline:hover {
	background: rgba(255,255,255,.10);
	border-color: #fff;
	box-shadow: 0 4px 20px rgba(0,0,0,.15);
}


/* Scroll indicator */
.cs-hero-scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: rgba(255,255,255,.5);
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	animation: csBounce 2.5s ease infinite;
}
.cs-hero-scroll::after {
	content: '';
	display: block;
	width: 1px;
	height: 36px;
	background: rgba(255,255,255,.3);
	margin: 8px auto 0;
}

/* ── Gradient variant (no image, navy bg + teal circles) ── */
.cs-hero--gradient {
	background: var(--block-dark, #1a2332);
	min-height: 38vh;
	padding: 80px 40px 56px;
}
.cs-hero--gradient::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--block-accent) 10%, transparent) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.cs-hero--gradient::after {
	content: '';
	position: absolute;
	bottom: -100px;
	left: -80px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--block-accent) 6%, transparent) 0%, transparent 70%);
	pointer-events: none;
}
.cs-hero--gradient h1 {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	text-shadow: none;
}
.cs-hero--gradient h1.cs-hero-title--small { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.cs-hero--gradient h1.cs-hero-title--large { font-size: clamp(2.8rem, 6.5vw, 4.5rem); }
.cs-hero--gradient h1 em {
	color: var(--block-accent, #3DAABD);
}
.cs-hero--gradient .cs-hero-sub {
	color: rgba(255,255,255,.82);
	text-shadow: none;
}

/* ── Height variants ───────────────────────────────── */
.cs-hero--h-auto { min-height: auto !important; }
.cs-hero--h-50   { min-height: 50vh !important; }
.cs-hero--h-100  { min-height: 100vh !important; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
	.cs-hero {
		min-height: 60vh;
		padding: 60px 24px 70px;
	}
	.cs-hero h1 {
		font-size: clamp(2.2rem, 8vw, 3rem);
	}
	.cs-hero h1.cs-hero-title--small { font-size: clamp(1.6rem, 5vw, 2rem); }
	.cs-hero h1.cs-hero-title--large { font-size: clamp(2.6rem, 9vw, 3.6rem); }
	.cs-hero-scroll {
		display: none;
	}
	.cs-hero--gradient {
		min-height: 28vh;
		padding: 60px 24px 40px;
	}
	.cs-hero-ctas {
		flex-direction: column;
		align-items: flex-start;
	}
	.cs-hero--ha-center .cs-hero-ctas { align-items: center; }
	.cs-hero--ha-right .cs-hero-ctas  { align-items: flex-end; }
	.cs-hero-panel { padding: 26px 24px; border-radius: 16px; }
}
@media (max-width: 520px) {
	.cs-hero--gradient {
		min-height: 24vh;
	}
}

/* ── Reduced motion: skip entrance/bounce animations (csFadeUp uses "both"
      fill from opacity:0, so removing it leaves elements fully visible). ── */
@media (prefers-reduced-motion: reduce) {
	.cs-hero-content,
	.cs-hero-sub,
	.cs-hero-ctas,
	.cs-hero-cta,
	.cs-hero-scroll {
		animation: none;
	}
	/* Hover transforms are motion too — keep the static state. */
	.cs-hero-bg { transition: none; }
	.cs-hero--hov-zoom:hover .cs-hero-bg,
	.cs-hero--hov-pan:hover .cs-hero-bg { --cs-z: 1; --cs-tx: 0; }
	.cs-hero--hov-zoom-out .cs-hero-bg,
	.cs-hero--hov-pan .cs-hero-bg { --cs-z: 1; }
}