/**
 * Front-page hero carousel.
 *
 * Before kg-hero-carousel.js runs, .kg-hero-carousel is a plain stack of cover blocks,
 * which is also what the Site Editor shows and what a visitor without JavaScript gets.
 * Everything below only tightens that stack and then styles the mounted Splide.
 */

.kg-hero-carousel {
	position: relative;
	/* Distance from the window edge to the 1280px content column the rest of the
	   front page uses, so the banner text and the controls line up with it. */
	--kg-banner-gutter: max(var(--wp--preset--spacing--50, 1.5rem), calc((100% - 1280px) / 2));
}

/* Keep the stacked fallback from running the page long: show the first banner and
   let the rest follow only once JS has had its chance. */
.kg-hero-carousel:not(.is-ready) > .kg-hero-slide + .kg-hero-slide {
	display: none;
}

.kg-hero-carousel .kg-hero-slide {
	min-height: clamp(22rem, 46vw, 32rem);
}

/* Hold the slide text in the same column as the hero above and the sections below.
   WordPress gives the cover's inner container a full-width constrained layout, so the
   alignment is done here with the same gutter the controls use, and the cover itself
   carries no padding. The bottom padding keeps the text clear of the controls. */
.kg-hero-carousel .wp-block-cover__inner-container {
	padding-inline: var(--kg-banner-gutter);
	padding-block: clamp(2.5rem, 5vw, 4rem) 3.5rem;
}

.kg-hero-carousel .kg-eyebrow {
	margin-bottom: 0;
}

/* --- Splide chrome ------------------------------------------------------- */

.kg-hero-carousel .splide__arrow {
	width: 2.75rem;
	height: 2.75rem;
	background: rgba(5, 16, 35, 0.72);
	border: 1px solid rgba(243, 246, 249, 0.28);
	border-radius: 4px;
	opacity: 1;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.kg-hero-carousel .splide__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: #f3f6f9;
}

.kg-hero-carousel .splide__arrow:hover:not(:disabled),
.kg-hero-carousel .splide__arrow:focus-visible {
	background: rgba(5, 16, 35, 0.92);
	border-color: var(--wp--preset--color--kg-leaf, #61b431);
}

/* Both arrows sit together at the bottom right, inside the content column. Splide's
   default is one arrow on each side, which runs straight through the headline. */
.kg-hero-carousel .splide__arrows {
	position: absolute;
	right: var(--kg-banner-gutter);
	bottom: 1.4rem;
	z-index: 2;
	display: flex;
	gap: 0.4rem;
}

.kg-hero-carousel .splide__arrow {
	position: static;
	transform: none;
}

.kg-hero-carousel .splide__pagination {
	left: var(--kg-banner-gutter);
	right: auto;
	bottom: 1.4rem;
	justify-content: flex-start;
	gap: 0.4rem;
	padding: 0;
	transform: none;
}

.kg-hero-carousel .splide__pagination__page {
	width: 2rem;
	height: 3px;
	margin: 0;
	border-radius: 2px;
	background: rgba(243, 246, 249, 0.38);
	opacity: 1;
	transition: background 0.18s ease, transform 0.18s ease;
}

.kg-hero-carousel .splide__pagination__page.is-active {
	background: var(--wp--preset--color--kg-lime, #a1c623);
	transform: none;
}

.kg-hero-carousel .splide__pagination__page:focus-visible {
	outline: 2px solid var(--wp--preset--color--kg-leaf, #61b431);
	outline-offset: 2px;
}

/* Phones: the arrows crowd a narrow slide, and the dots are enough to navigate. */
@media (max-width: 600px) {
	.kg-hero-carousel .splide__arrows { display: none; }
	.kg-hero-carousel .wp-block-cover__inner-container { padding-bottom: 2.6rem; }
	.kg-hero-carousel .splide__pagination { bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.kg-hero-carousel .splide__arrow,
	.kg-hero-carousel .splide__pagination__page { transition: none; }
}