/**
 * Internal Hero — Editorial Photo-Hero system (refresh 2026-05-24).
 *
 * Three variants share parent fingerprints (Libre Baskerville H1, eyebrow + ruler,
 * indigo focus ring, 44px touch target, navy body text on light surfaces). They
 * differ only in surface treatment:
 *   - editorial (V2): solid section-color + subtle dot texture, no photo
 *   - photo     (V1): full-bleed photo + section-color linear-gradient overlay
 *   - split     (V3): section-color drench left + photo bleed right
 *
 * Section identity colors (DESIGN.md Multi-Color Section System):
 *   indigo (master), red (patologie), anthracite (parti-del-corpo),
 *   blue (terapie), orange (approfondimenti / metodologia).
 */

:root {
	--ih-bg-indigo:     var(--color-primary);
	--ih-bg-red:        var(--color-pathology-red-dark);
	--ih-bg-anthracite: var(--color-bodypart-dark-deep);
	--ih-bg-blue:       var(--color-terapie-dark);
	--ih-bg-orange:     var(--color-news-dark);

	--ih-accent-indigo:     var(--color-primary);
	--ih-accent-red:        #f5b7bd;
	--ih-accent-anthracite: var(--color-primary);
	--ih-accent-blue:       #a9c2e8;
	--ih-accent-orange:     #f2c192;
}

/* ────────────────────────────────────────────
   BASE — applies to all variants
   ──────────────────────────────────────────── */

.internal-hero {
	position: relative;
	width: 100%;
	color: #fff;
	background: var(--ih-bg-indigo);
	overflow: hidden;
	isolation: isolate;
	padding: clamp(96px, 12vw, 152px) 0 clamp(48px, 6vw, 88px);
}

.internal-hero--color-red        { background-color: var(--ih-bg-red); }
.internal-hero--color-anthracite { background-color: var(--ih-bg-anthracite); }
.internal-hero--color-blue       { background-color: var(--ih-bg-blue); }
.internal-hero--color-orange     { background-color: var(--ih-bg-orange); }

.internal-hero__container {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

.internal-hero__inner {
	max-width: 680px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Eyebrow + 16px ruler stripe (parent fingerprint, DESIGN.md eyebrow-ruler rule) */
.internal-hero__eyebrow {
	position: relative;
	display: inline-block;
	padding-left: 28px;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.internal-hero__eyebrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--ih-accent-indigo);
	transform: translateY(-50%);
}

.internal-hero--color-red        .internal-hero__eyebrow::before { background: var(--ih-accent-red); }
.internal-hero--color-anthracite .internal-hero__eyebrow::before { background: var(--ih-accent-anthracite); }
.internal-hero--color-blue       .internal-hero__eyebrow::before { background: var(--ih-accent-blue); }
.internal-hero--color-orange     .internal-hero__eyebrow::before { background: var(--ih-accent-orange); }

/* Title — Libre Baskerville, inline style also enforces (see template) to defeat
   the cascade-override bug noted in MEMORY (project_serif_cascade_residual). */
.internal-hero__title {
	font-family: 'Libre Baskerville', Georgia, serif !important;
	font-size: clamp(2.4rem, 5.4vw, 4rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.012em;
	color: #ffffff !important;
	margin: 0;
	text-shadow: none;
}

.internal-hero__subtitle {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: clamp(1.05rem, 1.55vw, 1.2rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
	max-width: 62ch;
	margin: 0;
}

.internal-hero__subtitle p { margin: 0 0 0.5em; }
.internal-hero__subtitle p:last-child { margin-bottom: 0; }

.internal-hero__breadcrumb {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	letter-spacing: 0.01em;
}

.internal-hero__breadcrumb a,
.internal-hero__breadcrumb .rank-math-breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.internal-hero__breadcrumb a:hover,
.internal-hero__breadcrumb .rank-math-breadcrumb a:hover {
	opacity: 0.85;
	text-decoration: underline;
}

.internal-hero__breadcrumb .separator { opacity: 0.6; margin: 0 0.4em; }
.internal-hero__breadcrumb .last { color: rgba(255, 255, 255, 0.95); }

.internal-hero__meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 4px 0 0;
}
.internal-hero__meta i { font-size: 0.9em; opacity: 0.9; }

.internal-hero__cta {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Focus ring stays indigo across all section colors (parent fingerprint, a11y). */
.internal-hero a:focus-visible,
.internal-hero button:focus-visible {
	outline: 3px solid var(--ih-accent-indigo);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ────────────────────────────────────────────
   VARIANT — EDITORIAL (V2)
   navy bloc + subtle dot texture, no photo
   ──────────────────────────────────────────── */

.internal-hero--editorial {
	padding: clamp(112px, 14vw, 168px) 0 clamp(56px, 7vw, 96px);
}

.internal-hero__texture {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 1.5px 1.5px, rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
	opacity: 0.55;
}

.internal-hero--editorial.internal-hero--color-red       .internal-hero__texture,
.internal-hero--editorial.internal-hero--color-anthracite .internal-hero__texture,
.internal-hero--editorial.internal-hero--color-orange    .internal-hero__texture {
	background-image:
		radial-gradient(circle at 1.5px 1.5px, rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px);
	opacity: 0.6;
}

/* ────────────────────────────────────────────
   VARIANT — PHOTO (V1)
   full-bleed photo + linear-gradient overlay left to right
   ──────────────────────────────────────────── */

.internal-hero--photo {
	background-color: var(--ih-bg-indigo);
	background-image:
		linear-gradient(90deg,
			rgba(33, 31, 84, 0.88) 0%,
			rgba(33, 31, 84, 0.78) 38%,
			rgba(33, 31, 84, 0.45) 72%,
			rgba(33, 31, 84, 0.30) 100%),
		var(--hero-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.internal-hero--photo.internal-hero--color-anthracite {
	background-color: var(--ih-bg-anthracite);
	background-image:
		linear-gradient(90deg,
			rgba(17, 24, 39, 0.88) 0%,
			rgba(17, 24, 39, 0.78) 38%,
			rgba(17, 24, 39, 0.45) 72%,
			rgba(17, 24, 39, 0.30) 100%),
		var(--hero-image);
}

.internal-hero--photo.internal-hero--color-blue {
	background-color: var(--ih-bg-blue);
	background-image:
		linear-gradient(90deg,
			rgba(35, 74, 138, 0.88) 0%,
			rgba(35, 74, 138, 0.78) 38%,
			rgba(35, 74, 138, 0.45) 72%,
			rgba(35, 74, 138, 0.30) 100%),
		var(--hero-image);
}

.internal-hero--photo.internal-hero--color-red {
	background-color: var(--ih-bg-red);
	background-image:
		linear-gradient(90deg,
			rgba(126, 29, 36, 0.88) 0%,
			rgba(126, 29, 36, 0.78) 38%,
			rgba(126, 29, 36, 0.45) 72%,
			rgba(126, 29, 36, 0.30) 100%),
		var(--hero-image);
}

.internal-hero--photo.internal-hero--color-orange {
	background-color: var(--ih-bg-orange);
	background-image:
		linear-gradient(90deg,
			rgba(178, 86, 24, 0.88) 0%,
			rgba(178, 86, 24, 0.78) 38%,
			rgba(178, 86, 24, 0.45) 72%,
			rgba(178, 86, 24, 0.30) 100%),
		var(--hero-image);
}

/* ────────────────────────────────────────────
   VARIANT — SPLIT (V3)
   section-color drench left + photo bleed right
   ──────────────────────────────────────────── */

.internal-hero--split .internal-hero__container {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	max-width: 1320px;
}

.internal-hero--split .internal-hero__inner {
	max-width: none;
}

.internal-hero--split .internal-hero__image {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
	aspect-ratio: 4 / 5;
	background: rgba(255, 255, 255, 0.04);
}

.internal-hero--split .internal-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────── */

@media (max-width: 900px) {
	.internal-hero--split .internal-hero__container {
		grid-template-columns: 1fr;
	}
	.internal-hero--split .internal-hero__image {
		aspect-ratio: 16 / 10;
		order: -1;
		margin-top: 8px;
	}
}

@media (max-width: 768px) {
	.internal-hero--photo {
		background-image:
			linear-gradient(90deg,
				rgba(33, 31, 84, 0.85) 0%,
				rgba(33, 31, 84, 0.85) 100%),
			var(--hero-image);
	}
	.internal-hero--photo.internal-hero--color-anthracite {
		background-image:
			linear-gradient(90deg,
				rgba(17, 24, 39, 0.85) 0%,
				rgba(17, 24, 39, 0.85) 100%),
			var(--hero-image);
	}
	.internal-hero--photo.internal-hero--color-blue {
		background-image:
			linear-gradient(90deg,
				rgba(35, 74, 138, 0.85) 0%,
				rgba(35, 74, 138, 0.85) 100%),
			var(--hero-image);
	}
	.internal-hero--photo.internal-hero--color-red {
		background-image:
			linear-gradient(90deg,
				rgba(126, 29, 36, 0.85) 0%,
				rgba(126, 29, 36, 0.85) 100%),
			var(--hero-image);
	}
}

@media (max-width: 600px) {
	.internal-hero {
		padding: clamp(88px, 22vw, 128px) 0 44px;
	}
	.internal-hero--editorial {
		padding: clamp(96px, 24vw, 144px) 0 52px;
	}
	.internal-hero__inner { gap: 16px; }
	.internal-hero__title {
		font-size: clamp(1.6rem, 6.5vw, 2.4rem);
		overflow-wrap: break-word;
		word-break: break-word;
		/* manual (non auto): evita sillabazioni brutte su termini medici ("fac-cettale").
		   word-break resta come rete anti-overflow su parole molto lunghe. */
		hyphens: manual;
		text-wrap: balance;
	}
	.internal-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.internal-hero__cta .fcm-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ────────────────────────────────────────────
   ACCESSIBILITY
   ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.internal-hero,
	.internal-hero *,
	.internal-hero a {
		animation: none !important;
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.internal-hero__title { color: CanvasText !important; }
	.internal-hero { background: Canvas; color: CanvasText; }
}

@media print {
	.internal-hero {
		background: #fff !important;
		color: #000 !important;
		padding: 24px 0;
	}
	.internal-hero__texture,
	.internal-hero__cta,
	.internal-hero--split .internal-hero__image { display: none; }
	.internal-hero__title { color: #000 !important; }
	.internal-hero__subtitle,
	.internal-hero__breadcrumb,
	.internal-hero__meta,
	.internal-hero__eyebrow { color: #333 !important; }
}