/* ------------------------------------------------------------------
   Hero slider

   Slides are plain core Media & Text blocks sitting inside a Group
   block that carries the class "ino-hero-slider". Nothing here is a
   custom block, so the client edits every slide with the normal block
   controls, and adds a slide by duplicating a Media & Text block.

   Typography and colour inside a slide are deliberately NOT set here.
   They are block attributes, so the editor controls stay in charge of
   them. This file only handles what the editor cannot express: the
   stacking of the slides and the numbered controls.

   Frontend only. This file is not loaded into the editor canvas, so in
   the editor the slides stay stacked and every one of them is visible
   and editable.

   Note on selectors: this stylesheet is enqueued before Mai's, so a
   rule that only ties on specificity loses. The control styles below
   are written with the .ino-hero-slider ancestor for that reason.
   ------------------------------------------------------------------ */

.ino-hero-slider {
	position: relative;
	--ino-hero-panel: #053801;
	--ino-hero-panel-hover: #0a6a01;
	/* Literal values on purpose. The theme re-points its colour
	   variables inside dark sections, so reading a palette variable
	   here is not safe: it resolved to white for one viewer. */
	--ino-hero-accent: #ffffff;
	--ino-hero-accent-text: #053801;
}

/* The track is created by hero-slider.js; without JS the slides simply
   stack and all of them stay readable.

   A Group block puts its children in an inner container that carries
   the content-column width, so the slides do not reach the viewport
   edges on their own. Break the track out, and mirror
   the site-wide 2500px cap from custom.css above that width.

   The margins are percentages of the inner container, not viewport
   units: the container is itself centred, so centring inside it is the
   same as centring in the viewport, and it stays correct at any width. */
.ino-hero-slider__track {
	position: relative;
	display: grid;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

@media only screen and (min-width: 2500px) {

	.ino-hero-slider__track {
		width: 2500px;
		max-width: 2500px;
		margin-left: calc(50% - 1250px);
		margin-right: calc(50% - 1250px);
	}
}

.entry-content > .ino-hero-slider.alignfull > .wp-block-group__inner-container {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.ino-hero-slider__track > .wp-block-media-text {
	grid-area: 1 / 1;
	min-height: min(70vh, 620px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.ino-hero-slider__track > .wp-block-media-text.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease, visibility 0s linear 0s;
}

/* Text panel ------------------------------------------------------- */

.ino-hero-slider .wp-block-media-text__content {
	padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem);
}

.ino-hero-slider .wp-block-media-text__content > * {
	max-width: 34rem;
}

/* Image half ------------------------------------------------------- */

.ino-hero-slider .wp-block-media-text__media {
	min-height: 100%;
}

/* Controls --------------------------------------------------------- */

/* The controls sit flush with the bottom right corner of the photo.
   hero-slider.js puts them inside the track so they are positioned
   against the slide itself, which is the only box guaranteed to match
   the photo's edges at every width including the 2500px cap. */
.ino-hero-slider__nav {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
}

/* Line the hero copy up with the site container on wide screens, the
   same way custom.css does for the site's other full-width bands. */
@media only screen and (min-width: 1450px) {

	.ino-hero-slider .wp-block-media-text__content {
		padding-left: calc((100vw - var(--breakpoint-xl)) / 2);
	}
}

@media only screen and (min-width: 2500px) {

	.ino-hero-slider .wp-block-media-text__content {
		padding-left: calc((2500px - var(--breakpoint-xl)) / 2);
	}
}

/* The lead-in gives the bar a little colour before the first tile. */
.ino-hero-slider .ino-hero-slider__dots {
	display: flex;
	margin: 0;
	padding: 0 0 0 clamp(1rem, 2vw, 2rem);
	list-style: none;
	background: var(--ino-hero-panel);
}

.ino-hero-slider .ino-hero-slider__dots li {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ino-hero-slider .ino-hero-slider__dot,
.ino-hero-slider .ino-hero-slider__next {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 0;
	background: var(--ino-hero-panel);
	color: #fff;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Mai's button rule (`button:hover` in main.min.css) restyles every
   bare button on hover, focus and active: transform, border, shadow
   and filter all change. These are navigation, not calls to action,
   and they must not move or resize under the pointer, so every
   geometry-affecting property is pinned here rather than left to win
   on specificity alone. */
.ino-hero-slider .ino-hero-slider__dot,
.ino-hero-slider .ino-hero-slider__next,
.ino-hero-slider .ino-hero-slider__dot:hover,
.ino-hero-slider .ino-hero-slider__next:hover,
.ino-hero-slider .ino-hero-slider__dot:focus,
.ino-hero-slider .ino-hero-slider__next:focus,
.ino-hero-slider .ino-hero-slider__dot:focus-visible,
.ino-hero-slider .ino-hero-slider__next:focus-visible,
.ino-hero-slider .ino-hero-slider__dot:active,
.ino-hero-slider .ino-hero-slider__next:active {
	--button-transform: none;
	--button-transform-hover: none;
	transform: none;
	scale: none;
	border: 0;
	box-shadow: none;
	filter: none;
	text-decoration: none;
}

.ino-hero-slider .ino-hero-slider__dot {
	min-width: 4.5rem;
}

.ino-hero-slider .ino-hero-slider__dot:hover {
	background: var(--ino-hero-panel-hover);
}

.ino-hero-slider .ino-hero-slider__dot.is-active,
.ino-hero-slider .ino-hero-slider__dot.is-active:hover {
	background: var(--ino-hero-accent);
	color: var(--ino-hero-accent-text);
}

.ino-hero-slider .ino-hero-slider__next {
	gap: 0.6rem;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ino-hero-slider .ino-hero-slider__next:hover {
	background: var(--ino-hero-panel-hover);
}

/* currentColor keeps the focus ring readable on every tile. */
.ino-hero-slider .ino-hero-slider__dot:focus-visible,
.ino-hero-slider .ino-hero-slider__next:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -6px;
}

/* Small screens ---------------------------------------------------- */

@media only screen and (max-width: 600px) {

	.ino-hero-slider__track > .wp-block-media-text {
		min-height: 0;
	}

	.ino-hero-slider .wp-block-media-text__media {
		min-height: 15rem;
	}

	.ino-hero-slider .wp-block-media-text__media img {
		height: 15rem;
		object-fit: cover;
	}

	/* Room for the overlaid controls under the last element. */
	.ino-hero-slider .wp-block-media-text__content {
		padding-bottom: 6.5rem;
	}

	/* Centred rather than tucked into the corner, which reads better on
	   a narrow screen where the slide is stacked. */
	.ino-hero-slider__nav {
		left: 0;
		right: 0;
		justify-content: center;
	}

	.ino-hero-slider .ino-hero-slider__dots {
		padding-left: 0;
	}

	.ino-hero-slider .ino-hero-slider__dot {
		min-width: 3.25rem;
		min-height: 3.25rem;
		padding: 0 0.5rem;
		font-size: 1.125rem;
	}

	.ino-hero-slider .ino-hero-slider__next {
		min-height: 3.25rem;
		padding: 0 0.9rem;
		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ino-hero-slider__track > .wp-block-media-text,
	.ino-hero-slider__track > .wp-block-media-text.is-active {
		transition: none;
	}
}