.kk-hero-swiper {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	/* Keep overflow visible so decorative stars can sit in the layout gap. */
	overflow: visible;
}

.kk-hero-swiper__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 4rem;
	padding-top: var(--wp--preset--spacing--70, 3rem);
	padding-bottom: var(--wp--preset--spacing--70, 3rem);
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

/* Desktop: keep the two-column hero within 600px (image scales to fit). */
@media (min-width: 781px) {
	.kk-hero-swiper__layout {
		max-height: 600px;
	}

	.kk-hero-swiper__image {
		/* Layout pad + pagination row (~2rem) leave the rest for the photo. */
		max-height: calc(600px - 2 * var(--wp--preset--spacing--70, 3rem) - 2rem);
	}
}

.kk-hero-swiper__text {
	position: relative;
	max-width: 34rem;
	min-width: 0;
}

.kk-hero-swiper__heading {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--wp--preset--font-family--hepta-slab, "Hepta Slab", serif);
	font-size: 3.375rem; /* 54px */
	line-height: 1.185; /* 64px / 54px */
	font-weight: 400;
	color: var(--wp--preset--color--ink, #1c1c1c);
}

.kk-hero-swiper__description {
	position: relative;
	z-index: 1;
	margin-top: 1rem;
	margin-bottom: 1.25rem;
	font-size: 1.25rem; /* 20px */
	color: var(--wp--preset--color--ink, #1c1c1c);
}

.kk-hero-swiper__cta-wrap {
	position: relative;
	z-index: 1;
	margin-top: 0.5rem;
}

.kk-hero-swiper__cta {
	display: inline-flex;
	text-decoration: none;
}

/* Decorative stars — homepage PNG placements */
.kk-hero-swiper__deco {
	position: absolute;
	pointer-events: none;
	user-select: none;
	display: block;
	height: auto;
}

/* Blue star sits behind the heading (top-right of text column). */
.kk-hero-swiper__deco--blue {
	width: 7.5rem; /* ~120px; asset is 150×169 */
	top: -0.75rem;
	right: 0.5rem;
	z-index: 0;
	transform: rotate(-6deg);
}

.kk-hero-swiper__media {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0; /* allow grid column to shrink below slide intrinsic width */
	/* overflow visible so the green star can overlap the image corner */
	overflow: visible;
}

/* Green star overlaps the bottom-left corner of the hero image. */
.kk-hero-swiper__deco--green {
	width: 7rem; /* ~112px; asset is 160×145 */
	left: -1.25rem;
	bottom: 2.75rem; /* above pagination row, on the photo corner */
	z-index: 3;
	transform: rotate(8deg);
}

.kk-hero-swiper__swiper {
	width: 100%;
	max-width: min(517px, 100%);
	min-width: 0;
	box-sizing: border-box;
	border-radius: 1.5rem;
	overflow: hidden;
}

.kk-hero-swiper__swiper .swiper-wrapper {
	min-width: 0;
}

.kk-hero-swiper__swiper .swiper-slide {
	display: flex;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.kk-hero-swiper__slide-link {
	display: block;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.kk-hero-swiper__image {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.kk-hero-swiper__empty {
	padding: 1rem;
	border: 1px dashed var(--wp--preset--color--hairline, #dddddd);
	border-radius: 8px;
	color: var(--wp--preset--color--ink-soft, #3c3c3b);
}

/* Pagination dots: align with the simple dot style in homepage PNG. */
.kk-hero-swiper__pagination {
	margin-top: 1rem;
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	text-align: center;
}

.kk-hero-swiper__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	opacity: 1;
	background: var(--wp--preset--color--ink-soft, #3c3c3b);
}

.kk-hero-swiper__pagination .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--cream, #f2f0eb);
}

@media (max-width: 780px) {
	.kk-hero-swiper__layout {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.kk-hero-swiper__text {
		max-width: 100%;
	}

	.kk-hero-swiper__swiper {
		max-width: 100%;
	}

	.kk-hero-swiper__heading {
		font-size: 2rem; /* fallback on small screens */
	}

	.kk-hero-swiper__deco--blue {
		width: 5rem;
		top: -0.5rem;
		right: 0;
	}

	/*
	 * Mobile: green star sits in the gap to the right of the CTA,
	 * above the top-right of the swiper (see annotated screenshot).
	 * Media stays position:relative so top negative pulls into the gap.
	 */
	.kk-hero-swiper__deco--green {
		width: 4.75rem;
		left: auto;
		right: 0.25rem;
		top: -3.75rem;
		bottom: auto;
		transform: rotate(12deg);
	}
}

/* -------------------------------------------------------------------------
   Editor-only helpers (canvas preview + slide management)
   ------------------------------------------------------------------------- */

.kk-hero-swiper--editor .kk-hero-swiper__preview {
	width: 100%;
	max-width: min(517px, 100%);
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--wp--preset--color--hairline, #dddddd);
	aspect-ratio: 4 / 5;
}

.kk-hero-swiper--editor .kk-hero-swiper__image--editor {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kk-hero-swiper--editor .kk-hero-swiper__preview .kk-hero-swiper__empty {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 1.5rem;
	box-sizing: border-box;
}

.kk-hero-swiper--editor .kk-hero-swiper__canvas-actions {
	margin-top: 0.75rem;
}

.kk-hero-swiper--editor .kk-hero-swiper__thumb-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	align-items: center;
}

.kk-hero-swiper--editor .kk-hero-swiper__thumb {
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.5rem;
	overflow: hidden;
	cursor: pointer;
	background: var(--wp--preset--color--hairline, #dddddd);
	line-height: 3.5rem;
	text-align: center;
	font-size: 1.25rem;
	color: var(--wp--preset--color--ink, #1c1c1c);
}

.kk-hero-swiper--editor .kk-hero-swiper__thumb.is-selected {
	border-color: var(--wp--preset--color--ink, #1c1c1c);
}

.kk-hero-swiper--editor .kk-hero-swiper__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kk-hero-swiper--editor .kk-hero-swiper__thumb--add {
	font-weight: 600;
	background: var(--wp--preset--color--cream, #f2f0eb);
	border: 1px dashed var(--wp--preset--color--ink-soft, #3c3c3b);
}

/*
 * Inspector sidebar lives outside the block canvas, so these rules must NOT
 * depend on `.kk-hero-swiper--editor` (that class is only on the canvas).
 */
.kk-hero-swiper__inspector-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 100%;
	min-width: 0;
}

.kk-hero-swiper__inspector-slide {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: start;
	padding: 0.4rem;
	border-radius: 0.5rem;
	border: 1px solid transparent;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.kk-hero-swiper__inspector-slide.is-selected {
	border-color: var(--wp--preset--color--hairline, #dddddd);
	background: rgba(0, 0, 0, 0.03);
}

.kk-hero-swiper__inspector-thumb {
	width: 3.5rem;
	height: 3.5rem;
	max-width: 3.5rem;
	padding: 0;
	border: 0;
	border-radius: 0.4rem;
	overflow: hidden;
	cursor: pointer;
	background: var(--wp--preset--color--hairline, var(--kk-color-hairline, #dddddd));
	flex-shrink: 0;
}

.kk-hero-swiper__inspector-thumb img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	display: block;
}

.kk-hero-swiper__inspector-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.65rem;
	padding: 0.25rem;
	text-align: center;
	box-sizing: border-box;
}

.kk-hero-swiper__inspector-actions {
	min-width: 0;
	max-width: 100%;
}

.kk-hero-swiper__inspector-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
	margin-top: 0.35rem;
	max-width: 100%;
}

.kk-hero-swiper__inspector-hint {
	margin: 0;
	opacity: 0.8;
}

.kk-hero-swiper__inspector-link {
	grid-column: 1 / -1;
	min-width: 0;
	max-width: 100%;
	margin-top: 0.35rem;
	overflow: hidden;
}

.kk-hero-swiper__inspector-link-label {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.kk-hero-swiper__inspector-link .block-editor-link-control {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}