/* Kost Blora locations page. */
.klo-page,
.klo-page * {
	box-sizing: border-box;
}

.klo-page {
	--klo-ink: #123e56;
	--klo-deep: #073d5d;
	--klo-muted: #637b8a;
	--klo-line: #dce9ef;
	--klo-soft: #f5f9fa;
	--klo-yellow: #f6cd55;
	--klo-teal: #25a7a0;
	--klo-coral: #f27689;
	--klo-white: #fff;
	--klo-ease: cubic-bezier(0.22, 1, 0.36, 1);
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw);
	overflow: clip;
	background: #fff;
	color: #465c68;
	font-family: Inter, "Nunito Sans", "Segoe UI", Arial, sans-serif;
	letter-spacing: 0;
}

body.kbhs-locations-page {
	overflow-x: hidden;
	background: #fff !important;
}

body.kbhs-locations-page #page,
body.kbhs-locations-page .site,
body.kbhs-locations-page .site-content,
body.kbhs-locations-page .content-area,
body.kbhs-locations-page .ast-container,
body.kbhs-locations-page .entry-content,
body.kbhs-locations-page .elementor,
body.kbhs-locations-page .elementor-section,
body.kbhs-locations-page .elementor-container,
body.kbhs-locations-page .elementor-widget-container {
	background: #fff !important;
}

body.kbhs-locations-page .site-footer,
body.kbhs-locations-page footer#colophon,
body.kbhs-locations-page .ast-footer-copyright,
body.kbhs-locations-page #ast-scroll-top,
body.kbhs-locations-page .ast-scroll-top-icon {
	display: none !important;
}

.klo-page a {
	color: inherit;
	text-decoration: none;
}

.klo-page a:visited,
.klo-page a:active,
.klo-page a:focus {
	color: inherit;
}

.klo-page button,
.klo-page input {
	font: inherit;
	letter-spacing: 0;
}

.klo-shell {
	width: min(100% - 40px, 1180px);
	margin: 0 auto;
}

.klo-hero {
	position: relative;
	display: flex;
	min-height: 32rem;
	overflow: hidden;
	background: var(--klo-deep);
	border-bottom-right-radius: 160px;
}

.klo-hero__media,
.klo-hero__overlay {
	position: absolute;
	inset: 0;
}

.klo-hero__media {
	background-image: var(--klo-hero-image);
	background-position: center;
	background-size: cover;
	transform: scale(1.01);
}

.klo-hero__overlay {
	background:
		linear-gradient(90deg, rgba(7, 61, 93, 0.68), rgba(7, 61, 93, 0.28) 48%, rgba(7, 61, 93, 0.56)),
		rgba(0, 0, 0, 0.22);
}

.klo-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: inherit;
	padding: 60px 0;
}

.klo-hero h1 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-size: clamp(54px, 8vw, 96px);
	line-height: 0.95;
	font-weight: 1000;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}

.klo-list {
	padding: 46px 0 84px;
	background: #fff;
}

.klo-region {
	margin-top: 54px;
}

.klo-region:first-child {
	margin-top: 0;
}

.klo-region > h2 {
	margin: 0;
	color: #526873;
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1.02;
	font-weight: 1000;
	letter-spacing: 0;
	text-transform: capitalize;
}

.klo-area {
	position: sticky;
	top: 84px;
	z-index: 6;
	margin-top: 18px;
	padding: 14px 0 10px;
	background: #fff;
}

.klo-area__label {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 48px;
	padding: 8px 18px;
	border-radius: 0 14px;
	background: rgba(246, 205, 85, 0.22);
	color: #526873;
	box-shadow: inset 0 0 0 1px rgba(246, 205, 85, 0.32);
}

.klo-area h3 {
	margin: 0;
	color: #526873;
	font-size: 25px;
	line-height: 1.1;
	font-weight: 1000;
	letter-spacing: 0;
}

.klo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.klo-card {
	position: relative;
	display: flex;
	min-height: 10rem;
	overflow: hidden;
	border-radius: 18px;
	background: var(--klo-soft);
	color: #fff !important;
	box-shadow: 0 14px 32px rgba(7, 61, 93, 0.1);
	transform: translateZ(0);
}

.klo-card__media,
.klo-card__shade {
	position: absolute;
	inset: 0;
}

.klo-card__media {
	background-image: var(--klo-card-image);
	background-position: center;
	background-size: cover;
	transition: transform 520ms var(--klo-ease);
}

.klo-card__shade {
	background:
		linear-gradient(36deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.36) 50%, rgba(7, 61, 93, 0.1) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.04));
}

.klo-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	width: 100%;
	min-height: inherit;
	padding: 24px;
}

.klo-card strong,
.klo-card small {
	display: block;
	color: #fff;
	text-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

.klo-card strong {
	font-size: 26px;
	line-height: 1.06;
	font-weight: 1000;
	letter-spacing: 0;
}

.klo-card small {
	font-size: 16px;
	line-height: 1.3;
	font-weight: 850;
}

.klo-empty {
	display: grid;
	gap: 14px;
	max-width: 620px;
	margin: 0 auto;
	padding: 54px 24px;
	text-align: center;
}

.klo-empty h2 {
	margin: 0;
	color: #526873;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 1000;
}

.klo-empty p {
	margin: 0;
	color: var(--klo-muted);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 650;
}

.klo-empty a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 46px;
	margin: 8px auto 0;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--klo-deep);
	color: #fff !important;
	font-size: 15px;
	font-weight: 1000;
}

.klo-card[data-klo-reveal] {
	opacity: 0;
	transform: translateY(16px);
}

.klo-card[data-klo-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 420ms var(--klo-ease), transform 420ms var(--klo-ease);
}

@media (hover: hover) and (pointer: fine) {
	.klo-card:hover .klo-card__media {
		transform: scale(1.08);
	}

	.klo-card:hover {
		box-shadow: 0 18px 38px rgba(7, 61, 93, 0.16);
	}
}

@media (max-width: 767px) {
	.klo-shell {
		width: calc(100% - 32px);
	}

	.klo-hero {
		min-height: 22rem;
		border-bottom-right-radius: 0;
	}

	.klo-hero__overlay {
		background: rgba(0, 0, 0, 0.5);
	}

	.klo-hero__inner {
		padding: 34px 0;
	}

	.klo-hero h1 {
		font-size: 48px;
		line-height: 0.98;
	}

	.klo-list {
		padding: 38px 0 64px;
	}

	.klo-region {
		margin-top: 46px;
	}

	.klo-region > h2 {
		font-size: 34px;
	}

	.klo-area {
		top: 72px;
		margin-top: 14px;
		padding: 10px 0 8px;
	}

	.klo-area__label {
		min-height: 42px;
		padding: 7px 14px;
		border-radius: 0 12px;
	}

	.klo-area h3 {
		font-size: 22px;
	}

	.klo-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		margin-top: 6px;
	}

	.klo-card {
		min-height: 10rem;
		border-radius: 16px;
		box-shadow: 0 12px 28px rgba(7, 61, 93, 0.1);
	}

	.klo-card__media {
		transition: none;
	}

	.klo-card__body {
		padding: 22px;
	}

	.klo-card strong {
		font-size: 25px;
	}

	.klo-card small {
		font-size: 15px;
	}
}