/* Plaza hero — full-width, scroll-snap based hero slider.
 * Full-bleed by default: breaks out of constrained theme containers
 * (e.g. a regular Divi row) to span the viewport, matching the RevSlider
 * forcefullwidth behaviour it replaces. */
.plaza-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}
.plaza-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.plaza-hero__track::-webkit-scrollbar { display: none; }
.plaza-hero__slide {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: block;
	aspect-ratio: var(--ph-ar, 1920/900);
}
.plaza-hero__slide picture,
.plaza-hero__img {
	display: block;
	width: 100%;
	height: 100%;
}
.plaza-hero__img { object-fit: cover; }
/* Past the 1920 grid the slider this replaces does NOT stretch the creative:
   the stage keeps spanning the viewport but the creative stays 1920 wide and
   centred, with the stage background either side (measured at 2560: creative
   1920x900 at x=320). Filling the stage instead would crop the creative. */
.plaza-hero:not(.plaza-hero--banner) .plaza-hero__slide picture {
	max-width: var(--ph-grid, 1920px);
	margin-inline: auto;
}

/* Hero stage geometry: mirrors the RevSlider "Home Slider" grid it replaces
 * (per-breakpoint stage ratios, desktop height capped at the grid height on
 * wider viewports — RevSlider does not upscale above the desktop grid).
 * The creatives the plazas design are 1920x900, 1030x770, 778x960 and
 * 480x854; the stage ratios measured on the live slider are 1920/900,
 * 1024/768, 778/960 and 480/854.
 * Defaults are the fleet-standard grid; per-plaza overrides come as inline
 * custom props (plc_hero_geometry option). The banner variant keeps its own
 * creative-driven sizing. */
.plaza-hero:not(.plaza-hero--banner) .plaza-hero__slide {
	aspect-ratio: var(--ph-ar-d, 1920/900);
	max-height: var(--ph-cap, 900px);
}
@media (max-width: 1023.98px) {
	.plaza-hero:not(.plaza-hero--banner) .plaza-hero__slide {
		/* 4:3 measured on the live stage in this range (the notebook creative
		   is 1030x770 but the grid it is drawn on is 1024x768). */
		aspect-ratio: var(--ph-ar-n, 1024/768);
		max-height: none;
	}
}
@media (max-width: 777.98px) {
	.plaza-hero:not(.plaza-hero--banner) .plaza-hero__slide {
		aspect-ratio: var(--ph-ar-t, 778/960);
	}
}
@media (max-width: 479.98px) {
	.plaza-hero:not(.plaza-hero--banner) .plaza-hero__slide {
		aspect-ratio: var(--ph-ar-m, 480/854);
	}
}

/* Arrows: always visible (touch devices too). */
.plaza-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 20px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s;
}
.plaza-hero__nav:hover,
.plaza-hero__nav:focus-visible { background: rgba(0, 0, 0, 0.6); }
.plaza-hero__prev { left: 16px; }
.plaza-hero__next { right: 16px; }

.plaza-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}
.plaza-hero__dot {
	width: 11px;
	height: 11px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}
.plaza-hero__dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* Banner variant: contained creative on a solid background, headline,
 * "n / m" counter instead of dots. */
/* Banner composition, measured layer by layer on the live fleet banner: the
 * headline runs across the top, the call to action sits at mid height, the
 * arrows and the counter at the bottom, and the creative is contained in the
 * middle. Desktop and mobile share the arrangement, only the scale changes,
 * because the earlier mobile layout dropped the headline onto the creative. */
.plaza-hero--banner {
	/* The slider this replaces draws on a 1920x900 grid that is centred and
	   never upscaled: above 1920 the layers keep their pixel size and the
	   grid just sits in the middle, below it everything scales by
	   width/1920. Measured on the live fleet banner at 2560/1920/1440/1030/778.
	   Every layer offset below is therefore "grid px * scale". */
	/* Careful: a length divided by a number is still a length, so there is no
	   unitless "scale" variable to multiply by. Every offset is therefore
	   written twice, as "grid px" and as "grid px expressed in vw", and
	   min()/max() picks the right one either side of 1920. */
	--pb-text-size: 85;                    /* grid px, per slide from the hub */
	--pb-text-weight: 700;                 /* per slide from the hub */
	/* 143px in from the grid edge: 7.45vw below 1920, and the centred grid's
	   own offset above it. */
	--pb-pad: max(calc(143 * 100vw / 1920), calc((100vw - 1920px) / 2 + 143px));
	--pb-accent: #ed145b;                  /* the fleet's banner button colour */
}
.plaza-hero--banner .plaza-hero__slide {
	position: relative;
	box-sizing: border-box;
	/* The live slider stops growing at the 1920x900 grid: past that width the
	   stage keeps its 900px height instead of getting taller. */
	aspect-ratio: 1920/900;
	max-height: 900px;
	background: var(--pb-bg, #082051);
	/* Grid rows, not percentage padding: percentage padding resolves against
	   the width, which shrank the creative to a third of the stage. */
	display: grid;
	grid-template-rows: 11% 1fr 13%;
	padding-inline: var(--pb-pad);
}
.plaza-hero--banner .plaza-hero__slide picture {
	grid-row: 2;
	min-height: 0;   /* a grid item defaults to min-height:auto and would grow */
	min-width: 0;
	overflow: hidden;
}
.plaza-hero--banner .plaza-hero__slide picture {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.plaza-hero--banner .plaza-hero__img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;   /* the creative is never cropped, only centred */
	object-position: center;
}
.plaza-hero__text {
	position: absolute;
	/* 58px from the top of a 900px grid, so the same 6.44% at every scale */
	top: 6.44%;
	left: var(--pb-pad, 8%);
	z-index: 3;
	/* 1357px of the 1920 grid: the headline runs across the top, it is not a
	   narrow left column */
	max-width: min(1357px, calc(1357 * 100vw / 1920));
	color: #fff;
	font-family: Montserrat, Helvetica, Arial, Lucida, sans-serif;
	font-weight: var(--pb-text-weight, 700);
	font-size: min(
		calc(var(--pb-text-size, 85) * 1px),
		calc(var(--pb-text-size, 85) * 100vw / 1920)
	);
	line-height: 1.06;   /* 90/85 on the live slider */
	text-align: left;
	text-shadow: 3px 2px 0 rgba(0, 0, 0, .25);
}

.plaza-hero__cta {
	position: absolute;
	left: var(--pb-pad, 8%);
	top: 44%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;   /* pill, as on the fleet's banner */
	background: var(--pb-accent, #ed145b);
	color: #fff;
	font-family: Montserrat, Helvetica, Arial, Lucida, sans-serif;
	font-weight: 600;
	font-size: clamp(12px, 1.05vw, 15px);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: filter .2s ease, transform .2s ease;
}
.plaza-hero__slide:hover .plaza-hero__cta {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.plaza-hero__pager {
	position: absolute;
	left: calc(var(--pb-pad, 8%) - 4px);
	bottom: 6.5%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
}
.plaza-hero__counter {
	color: #fff;
	font-family: Montserrat, Helvetica, Arial, Lucida, sans-serif;
	font-weight: 500;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
/* On the banner the arrows are bare chevrons beside the counter, not the
   round overlay buttons the hero uses. */
.plaza-hero--banner .plaza-hero__nav {
	position: static;
	transform: none;
	width: 32px;
	height: 32px;
	border-radius: 0;
	background: transparent;
	font-size: 17px;
	line-height: 32px;
	opacity: .85;
}
.plaza-hero--banner .plaza-hero__nav:hover,
.plaza-hero--banner .plaza-hero__nav:focus-visible {
	background: transparent;
	opacity: 1;
}

/* At 480 and below the live slider switches to its phone grid, where the
   headline sits much closer to the edge (12px of 480 = 2.5%) than the 7.45%
   it keeps on every wider breakpoint. Measured at 480 and 390. */
@media (max-width: 480px) {
	.plaza-hero--banner { --pb-pad: 2.9%; }
	/* On its phone grid the live banner stage is nearly square (480x444
	   measured), not the 2.13 of the desktop grid. */
	.plaza-hero--banner .plaza-hero__slide {
		aspect-ratio: 480/444;
		max-height: none;
	}
}

@media (max-width: 777.98px) {
	.plaza-hero__slide {
		aspect-ratio: var(--ph-ar-m, var(--ph-ar, 1920/900));
	}
	.plaza-hero--banner .plaza-hero__slide { grid-template-rows: 15% 1fr 14%; }
	/* The scale formula keeps matching the live slider down to 480 (34px at
	   778, measured 34), only the headline is allowed to run wider because a
	   phone has no room for the 1357px grid box. */
	.plaza-hero__text { max-width: 88%; }
	.plaza-hero__cta { padding: 9px 15px; font-size: 11.5px; top: 46%; }
	.plaza-hero__counter { font-size: 13px; }
	.plaza-hero--banner .plaza-hero__nav { width: 28px; height: 28px; font-size: 15px; line-height: 28px; }
	.plaza-hero__nav {
		width: 38px;
		height: 38px;
		font-size: 16px;
		line-height: 38px;
	}
	.plaza-hero__prev { left: 8px; }
	.plaza-hero__next { right: 8px; }
}

/* Legacy page decoration: the Divi row these blocks sit in can carry a corner
 * radius from the previous design (on this fleet a 100px top-left radius on the
 * phone breakpoint), and a rounded row clips the full-bleed slider inside it.
 * The block owns its own geometry, so the inherited rounding is switched off
 * here rather than on 22 pages by hand. */
.plaza-hero,
.plaza-hero__slide,
.plaza-hero__img { border-radius: 0; }
.et_pb_row:has(.plaza-hero),
.et_pb_column:has(.plaza-hero),
.et_pb_module:has(.plaza-hero),
.et_pb_code_inner:has(.plaza-hero) { border-radius: 0 !important; }