/* ---------------------------------------------------------------
   Energin — Hero carousel

   Kept out of components.css and loaded only on pages that contain
   the block, the same split the header stylesheet uses.

   Every value that an admin can change arrives as a custom property
   set on the wrapper by the render callback, so nothing below needs
   to be regenerated per page:

     --ehc-speed        transition duration
     --ehc-height       slide height, desktop
     --ehc-height-mobile
     --ehc-dot          inactive dot colour
     --ehc-dot-active   current dot colour
   --------------------------------------------------------------- */

.energin-hero-carousel {
	position: relative;
}

/* The slides are stacked, so anything sliding in starts outside this box
   and has to be clipped rather than widening the page. */
.energin-hero-carousel__viewport {
	overflow: hidden;
}

/* One grid cell, every slide in it. This is what makes the loop free: there
   is no track to rewind, so last -> first is the same move as any other.
   It also means the carousel is as tall as its tallest slide even if a
   height is never set. */
.energin-hero-carousel__track {
	display: grid;
	grid-template-areas: "slide";
}

.energin-hero-carousel__slide {
	grid-area: slide;
	min-width: 0;
	pointer-events: none;
	/* No transition by default, and this matters. When the direction flips,
	   every waiting slide swaps which side it is parked on; if that were
	   transitioned they would all visibly fly across the hero. Only the two
	   slides actually taking part get a transition, below. */
	transition: none;
}

.energin-hero-carousel__slide.is-active {
	pointer-events: auto;
}

.energin-hero-carousel__slide.is-active,
.energin-hero-carousel__slide.is-leaving {
	transition:
		opacity var(--ehc-speed, 600ms) ease,
		transform var(--ehc-speed, 600ms) ease;
}

/* Stacking: the slide arriving must paint over the one leaving. */
.energin-hero-carousel__slide.is-leaving {
	z-index: 1;
}

.energin-hero-carousel__slide.is-active {
	z-index: 2;
}

/* Uniform height. The Cover block writes its own min-height inline, which no
   class selector can outrank, so this is one of the few places the theme has
   to raise its voice — a carousel whose slides differ in height shunts the
   rest of the page up and down every time it turns. */
.energin-hero-carousel__slide > .wp-block-cover {
	min-height: var(--ehc-height, 640px) !important;
}

/* The slide wrapper sits between the carousel and the cover, so the hero
   rules in components.css that key off .energin-hero still apply — but a
   Cover added by hand from the inserter will not carry that class. Repeat the
   gutter here against the wrapper instead, so any Cover dropped in as a slide
   lines its text up with the rest of the site. */
.energin-hero-carousel__slide > .wp-block-cover {
	padding-inline: max(
		var(--wp--custom--gutter),
		(100% - var(--wp--style--global--content-size)) / 2
	);
}

/* --- fade ------------------------------------------------------- */

.energin-hero-carousel.is-effect-fade .energin-hero-carousel__slide {
	opacity: 0;
}

.energin-hero-carousel.is-effect-fade .energin-hero-carousel__slide.is-active {
	opacity: 1;
}

.energin-hero-carousel.is-effect-fade .energin-hero-carousel__slide.is-leaving {
	opacity: 0;
}

/* --- slide ------------------------------------------------------ */

/* Waiting slides park on the side they will enter from, which depends on
   which way the carousel is currently travelling. */
.energin-hero-carousel.is-effect-slide .energin-hero-carousel__slide {
	transform: translateX(100%);
}

.energin-hero-carousel.is-effect-slide[data-direction="prev"] .energin-hero-carousel__slide {
	transform: translateX(-100%);
}

.energin-hero-carousel.is-effect-slide .energin-hero-carousel__slide.is-active {
	transform: translateX(0);
}

.energin-hero-carousel.is-effect-slide .energin-hero-carousel__slide.is-leaving {
	transform: translateX(-100%);
}

.energin-hero-carousel.is-effect-slide[data-direction="prev"] .energin-hero-carousel__slide.is-leaving {
	transform: translateX(100%);
}

/* --- dots ------------------------------------------------------- */

.energin-hero-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	pointer-events: none;
}

.energin-hero-carousel__dot {
	pointer-events: auto;
	/* 12px of visible dot inside a 32px target. Anything smaller is a miss on
	   a phone, and the padding cannot come off the dot itself without making
	   the row look loose. */
	position: relative;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.energin-hero-carousel__dot::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 12px;
	height: 12px;
	transform: translate(-50%, -50%);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--ehc-dot, rgba(255, 255, 255, 0.55));
	box-shadow: 0 1px 3px rgba(20, 26, 35, 0.25);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.energin-hero-carousel__dot:hover::before {
	background: var(--ehc-dot-active, #fffefc);
}

.energin-hero-carousel__dot.is-active::before {
	background: var(--ehc-dot-active, #fffefc);
}

.energin-hero-carousel__dot:focus-visible {
	outline: none;
}

.energin-hero-carousel__dot:focus-visible::before {
	outline: 2px solid var(--wp--preset--color--navy, #3e4b60);
	outline-offset: 3px;
}

/* --- arrows ----------------------------------------------------- */

.energin-hero-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--bg-1, #fffefc);
	color: var(--wp--preset--color--navy, #3e4b60);
	box-shadow: 0 2px 12px rgba(20, 26, 35, 0.18);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.energin-hero-carousel__arrow:hover {
	background: var(--wp--preset--color--yellow, #ffdd51);
}

.energin-hero-carousel__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.energin-hero-carousel__arrow--prev {
	left: 16px;
}

.energin-hero-carousel__arrow--next {
	right: 16px;
}

/* --- brandmark -------------------------------------------------- */

/* The glyph is on the carousel, not on the slides, so it holds still while
   the slides move under it. .energin-brandmark::after in components.css
   supplies the image and the size; only the inset is carousel-specific, and
   it repeats the hero's expression so the mark keeps landing on the gutter
   at narrow viewports and on the 1280px measure at wide ones. */
.energin-hero-carousel.energin-brandmark::after {
	z-index: 3;
}

.energin-hero-carousel.energin-brandmark--bottom-right::after {
	right: max(
		var(--wp--custom--gutter),
		(100% - var(--wp--style--global--content-size)) / 2
	);
	bottom: var(--wp--custom--gutter);
}

.energin-hero-carousel.energin-brandmark--bottom-left::after {
	left: max(
		var(--wp--custom--gutter),
		(100% - var(--wp--style--global--content-size)) / 2
	);
	bottom: var(--wp--custom--gutter);
}

/* --- misc ------------------------------------------------------- */

/* Defensive, and scoped so it cannot affect anything else: the theme relies
   on core's common.css for this class, and the carousel's only text labels
   are inside it. */
.energin-hero-carousel .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.energin-hero-carousel__slide.is-active,
	.energin-hero-carousel__slide.is-leaving {
		transition-duration: 1ms;
	}
}

@media (max-width: 991px) {
	.energin-hero-carousel__slide > .wp-block-cover {
		min-height: var(--ehc-height-mobile, 480px) !important;
	}

	.energin-hero-carousel__arrow {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 767px) {
	.energin-hero-carousel__dots {
		bottom: 16px;
	}

	/* components.css already hides .energin-brandmark::after below 767px, so
	   the dots have the bottom of the hero to themselves here. */
	.energin-hero-carousel__arrow {
		display: none;
	}
}

/* --- editor ----------------------------------------------------- */

/* In the editor the slides are stacked vertically and labelled, because
   editing text inside something that moves is unusable. None of the
   transition rules above apply there: the wrapper only gets is-effect-* on
   the front end. */
.energin-hero-carousel__editor-slides > .block-editor-block-list__block {
	position: relative;
	border: 1px dashed var(--wp--preset--color--stroke, #ddd);
}

.energin-hero-carousel__editor-note {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--wp--preset--color--blue-grey, #97a9aa);
}

/* The appender. Given room of its own below the last slide, because it is the
   only way to add one — the slides are Cover blocks and the default inserter
   would hand over a bare one with none of the hero's structure. */
.energin-hero-carousel__add-slide.energin-hero-carousel__add-slide {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 12px;
	padding: 14px;
	border: 1px dashed var(--wp--preset--color--stroke, #ddd);
}