/* =====================================================================
   EXPERIENCE ITALY — SHARED PAGE HEADER
   ---------------------------------------------------------------------
   The photographic header used by every inner page. Height, scrim and
   focal point are set per page from the plugin and arrive as inline
   custom properties / styles; everything else lives here.

   The scrim is its own layer above the <img> — never bake darkening
   into the image file.
   ===================================================================== */

.ei-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(48px, 6vw, 88px) 24px;
	min-height: var(--ei-ph-height, clamp(300px, 36vw, 440px));
	overflow: hidden;
	isolation: isolate;
}

/* ---- photographic variant -------------------------------------------
   The site header is transparent and overlaid on this photograph, so the
   header's own height has to be cleared before the kicker starts or the
   logo lands on top of it. Blocksy does not expose a header-height
   custom property, so this is a measured allowance for the middle row
   (143px unstuck) plus breathing room. */
.ei-ph--image {
	background-color: #262220;
	padding-top: clamp(150px, 15vw, 210px);
}

.ei-ph__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position is set inline from the focal point */
	z-index: -2;
}

.ei-ph__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* gradient set inline from the scrim strength */
}

/* ---- plain variant (no image chosen) --------------------------------
   Deliberately dark, not ivory. The site header over this is transparent
   with the WHITE logo, so a light ground here would erase the logo the
   moment a page lost its header image. */
.ei-ph--plain {
	background-color: var(--ei-espresso, #262220);
	min-height: 0;
	padding-top: clamp(150px, 15vw, 200px);
	padding-bottom: clamp(48px, 6vw, 76px);
}

.ei-ph--plain .ei-ph__kicker { color: var(--ei-terracotta-lift-2, #E9C3A8); }
.ei-ph--plain .ei-ph__kicker::after { background-color: rgba(233, 195, 168, .5); }
.ei-ph--plain .ei-ph__title { color: #F8F2E9; }
.ei-ph--plain .ei-ph__title em,
.ei-ph--plain .ei-ph__title i { color: var(--ei-terracotta-lift-2, #E9C3A8); }
.ei-ph--plain .ei-ph__lede { color: rgba(248, 242, 233, .86); }

/* ---- content --------------------------------------------------------- */
.ei-ph__inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
	margin: 0 auto;
}

.ei-ph .ei-ph__kicker {
	font-family: var(--ei-sans, "Jost", sans-serif);
	font-size: 17.5px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 20px;
	color: var(--ei-terracotta, #A15C38);
}

.ei-ph .ei-ph__kicker::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	margin: 18px auto 0;
	background-color: rgba(161, 92, 56, .45);
}

.ei-ph .ei-ph__title {
	font-family: var(--ei-serif, "Playfair Display", Georgia, serif) !important;
	font-weight: 500 !important;
	font-size: clamp(36px, 4.6vw, 58px) !important;
	line-height: 1.12 !important;
	margin: 0;
	color: var(--ei-ink, #2B2420);
}

.ei-ph .ei-ph__title em,
.ei-ph .ei-ph__title i {
	font-style: italic;
	font-weight: 400;
	color: var(--ei-terracotta, #A15C38);
}

.ei-ph .ei-ph__lede {
	font-family: var(--ei-sans, "Jost", sans-serif);
	font-size: 18.5px;
	line-height: 1.75;
	margin: 22px 0 0;
	color: #5C534B;
}

/* ---- over a photograph, the type inverts ----------------------------- */
.ei-ph--image .ei-ph__kicker {
	color: var(--ei-terracotta-lift-2, #E9C3A8);
}

.ei-ph--image .ei-ph__kicker::after {
	background-color: rgba(233, 195, 168, .5);
}

.ei-ph--image .ei-ph__title {
	color: #F8F2E9;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.ei-ph--image .ei-ph__title em,
.ei-ph--image .ei-ph__title i {
	color: var(--ei-terracotta-lift-2, #E9C3A8);
}

.ei-ph--image .ei-ph__lede {
	color: rgba(248, 242, 233, .88);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

/* ---- mobile ---------------------------------------------------------- */
@media (max-width: 767px) {
	/* padding-bottom only — a padding-block shorthand here would reset
	   the top padding that keeps the kicker clear of the overlaid logo. */
	.ei-ph {
		min-height: 0;
		padding-bottom: clamp(52px, 14vw, 76px);
	}

	.ei-ph--image,
	.ei-ph--plain {
		padding-top: clamp(124px, 28vw, 156px);
	}

	.ei-ph .ei-ph__lede {
		font-size: 17px;
	}

	/* Wide tracking plus a big size makes a two-word kicker wrap on a
	   phone — ease both back a little rather than let it break. */
	.ei-ph .ei-ph__kicker {
		font-size: 15px;
		letter-spacing: 0.24em;
	}
}

/* Respect users who have asked for less motion/contrast noise: keep the
   header static (it never animates, but guard future additions). */
@media (prefers-reduced-motion: reduce) {
	.ei-ph, .ei-ph__img { transition: none !important; animation: none !important; }
}