/* ==========================================================================
   POTR Hero
   --------------------------------------------------------------------------
   Sizing system: 1u = 1% of the block width (container query unit), capped
   at 14.4px so the composition stops growing past 1440px wide. The mockup
   was designed at 1366px, so every desktop number below is "mockup px / 13.66".
   ========================================================================== */

.potr-hero:not(#potr){
	--u: min(1cqw, 14.4px);

	/* Swap these in a child theme / Customizer CSS to change fonts site-wide. */
	--potr-font-display: "Kudryashev Display", "Kudryashev Display Contrast", "POTR Display", "Bodoni Moda", "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
	--potr-font-body: "POTR Sans", "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	container-type: inline-size;
	container-name: potr-hero;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	margin-block: 0;
	max-width: none;
}

.potr-hero *:not(#potr),
.potr-hero *:not(#potr)::before,
.potr-hero *:not(#potr)::after{
	box-sizing: border-box;
}

/* Optional: break out of a constrained theme container if the theme lacks alignfull support. */
.potr-hero.potr-hero--breakout:not(#potr){
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Top area: gradient + stage ---------- */

.potr-hero__top:not(#potr){
	position: relative;
	overflow: hidden;
	/* Fitted to colours sampled from the mockup: vertical base blend + wide radial glow low-centre. */
	background:
		radial-gradient(ellipse 50% 72% at 50% 75%, var(--potr-glow) 0%, transparent 100%),
		linear-gradient(180deg, var(--potr-top) 0%, var(--potr-bottom) 62%, var(--potr-bottom) 100%);
}

.potr-hero__top.has-bg-image:not(#potr){
	background: var(--potr-bottom);
}

.potr-hero__bg:not(#potr){
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* The stage is the 1440px-max composition box. All positions are relative to it. */
.potr-hero__stage:not(#potr){
	/* Desktop / tablet values (unitless, multiplied by --u). */
	--s-h: 48.83;        /* stage height                     */
	--p-left: 23.73;     /* portrait left edge               */
	--p-top: 1.67;       /* portrait top edge                */
	--p-w: 52.6;         /* portrait width                   */
	--t-top: 18.81;      /* title block top                  */
	--f1: 14.64;         /* line 1 font-size                 */
	--ls1: 0.043;        /* line 1 letter-spacing (em)       */
	--f2: 9.13;          /* line 2 font-size                 */
	--ls2: 0.043;        /* line 2 letter-spacing (em)       */
	--gap: -0.27;         /* gap between line 1 and line 2    */
	--sx: 1.14;          /* horizontal stretch of the title. The stand-in font is narrower than the
	                        mockup's font. Set to 1 when the original font file is installed. */

	position: relative;
	width: 100%;
	max-width: calc(var(--u) * 100);
	margin-inline: auto;
	height: calc(var(--u) * var(--s-h) - var(--potr-trim, 0px));
}

/* ---------- Portrait ---------- */

.potr-hero__portrait:not(#potr){
	position: absolute;
	z-index: 2;
	left: calc(var(--u) * var(--p-left));
	top: calc(var(--u) * var(--p-top) - var(--potr-trim, 0px));
	width: calc(var(--u) * var(--p-w));
	height: auto;
	max-width: none;
	margin: 0;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Title ---------- */
/* Each line is rendered twice: a back copy (behind the portrait) and a front copy
   (in front of the portrait) that is clipped so only the part right of --potr-from-N shows.
   The front copy is aria-hidden, so screen readers read the title once. */

.potr-hero__title:not(#potr){
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--u) * var(--t-top) - var(--potr-trim, 0px));
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: var(--potr-font-display);
	font-weight: 400;
	font-variation-settings: "opsz" 24; /* lower = sturdier hairlines, higher = thinner */
	font-optical-sizing: none;
	text-transform: uppercase;
	color: var(--potr-title);
	/* Neutralise theme heading styles. */
	letter-spacing: normal;
	text-shadow: none;
	/* Intentionally NO z-index / transform / opacity here:
	   the spans below must stack against the portrait, not against this element. */
}

.potr-hero__line:not(#potr){
	position: relative;
	display: block;
	width: max-content;
	margin-inline: auto;
	line-height: 1;
	white-space: nowrap;
}

.potr-hero__line--1:not(#potr){
	--pad: calc(var(--ls1) * 1em * var(--potr-ls-k, 1)); /* balances trailing letter-spacing so the line stays centred */
	font-size: calc(var(--u) * var(--f1));
	letter-spacing: calc(var(--ls1) * 1em * var(--potr-ls-k, 1));
	padding-left: var(--pad);
	left: calc(var(--u) * 0.37); /* the mockup's line 1 sits a few px right of centre */
}

.potr-hero__line--2:not(#potr){
	--pad: calc(var(--ls2) * 1em * var(--potr-ls-k, 1));
	font-size: calc(var(--u) * var(--f2));
	letter-spacing: calc(var(--ls2) * 1em * var(--potr-ls-k, 1));
	padding-left: var(--pad);
	margin-top: calc(var(--u) * var(--gap));
}

.potr-hero__text:not(#potr){
	position: relative;
	z-index: 1; /* behind portrait (z-index: 2) */
	display: block;
	transform: scaleX(calc(1 + (var(--sx, 1) - 1) * var(--potr-ls-k, 1)));
	transform-origin: 50% 50%;
}

.potr-hero__text--front:not(#potr){
	position: absolute;
	inset: 0 0 0 var(--pad);
	z-index: 3; /* in front of portrait */
	pointer-events: none;
}

.potr-hero__line--1 .potr-hero__text--front:not(#potr){
	clip-path: inset(0 0 0 var(--potr-from-1, 51%));
}

.potr-hero__line--2 .potr-hero__text--front:not(#potr){
	clip-path: inset(0 0 0 var(--potr-from-2, 34%));
}

/* ---------- Intro strip ---------- */

.potr-hero__intro:not(#potr){
	background: var(--potr-intro-bg);
	padding: calc(var(--u) * 3.4) calc(var(--u) * 5);
}

.potr-hero__intro-text:not(#potr){
	max-width: calc(var(--u) * 85);
	margin: 0 auto;
	text-align: center;
	font-family: var(--potr-font-body);
	font-weight: 300;
	font-size: max(15px, calc(var(--u) * 1.713));
	line-height: 1.54;
	letter-spacing: 0;
	color: var(--potr-intro-text);
}

.potr-hero__intro-text a:not(#potr){
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ==========================================================================
   Mobile layout (no mobile mockup was provided, so this is a faithful
   adaptation: same layering effect, portrait enlarged, taller stage).
   Switches on when the BLOCK is narrower than 560px (container query,
   so it also behaves correctly inside the editor).
   ========================================================================== */

@container potr-hero (max-width: 559px) {
	.potr-hero__stage:not(#potr){
		--s-h: 108;      
		--p-w: 92;       
		--p-left: 8;     
		--p-top: 3;      
		--t-top: 33.8;   
		--f1: 17.2;
		--ls1: 0.043;
		--f2: 10.9;
		--ls2: 0.043;
		--gap: 0.3;
	}

	/* On a narrow screen the portrait covers too much of the title, so the whole title sits
	   in front of it (keeps "ON THE ROAD" fully legible). Desktop/tablet keep the layered effect. */
	.potr-hero__line--1 .potr-hero__text--front:not(#potr),
	.potr-hero__line--2 .potr-hero__text--front:not(#potr){
		clip-path: none;
	}

	.potr-hero__intro:not(#potr){
		padding: calc(var(--u) * 8) calc(var(--u) * 6);
	}

	.potr-hero__intro-text:not(#potr){
		font-size: max(17px, calc(var(--u) * 4.6));
		line-height: 1.55;
	}
}