/**
 * Roze Kittens Blocks — front-end additions.
 * Replaces the CSS Elementor used to generate from widget controls.
 */

/* ---- Parallax: overlay color (was {{WRAPPER}} .widget-parallax:before) ---- */
.widget-parallax:before {
	background: var(--rk-parallax-bg, transparent);
}

/* ---- Countdown: text color (was Elementor color selectors) ---- */
.countdown-inner-box .time_circles > div > h4,
.countdown-inner-box .time_circles > div > span {
	color: var(--rk-countdown-text, #fff);
}

/* ---- Kitty Gallery: margin fix (was .elementor-widget-* selector in main.css) ---- */
.kitten-gallery-box .circle-kitty-gallery,
.kitten-custom-gallery-box .circle-custom-kitty-gallery {
	margin-bottom: 0 !important;
}

/* ---- Image Grid (moved from the widget's inline <style>) ---- */
.rk-image-grid {
	display: grid;
	gap: var(--rk-grid-gap, 15px);
}

.rk-image-grid.rk-grid-three {
	grid-template-columns: repeat(3, 1fr);
}

.rk-image-grid.rk-grid-four {
	grid-template-columns: repeat(4, 1fr);
}

.rk-image-grid .kitty-box a {
	display: block;
	position: relative;
}

.rk-image-grid .kitty-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rk-image-grid .kitty-img-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
}

.rk-image-grid .kitty-box .kitty-img-wrap .inner {
	width: 100%;
	height: 100%;
	clip-path: circle(50%);
	overflow: hidden;
	animation-fill-mode: both;
	transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
	border-radius: var(--rk-grid-radius, 0);
}

.rk-image-grid .kitty-box .kitty-img-wrap .kitty-image {
	opacity: 1;
	top: 0;
	left: 0;
	height: 100%;
	transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}

.rk-image-grid .kitty-box .kitty-img-wrap .kitty-image.second-image {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}

/* Hover: main image fades out, second image fades in + zooms */
.rk-image-grid .kitty-box:hover .kitty-img-wrap .kitty-image {
	opacity: 0;
}

.rk-image-grid .kitty-box:hover .kitty-img-wrap .kitty-image.second-image {
	opacity: 1;
	transform: scale(1.05);
}

/* Single-image boxes (image-empty): image stays visible and just zooms */
.rk-image-grid .kitty-box .kitty-image.image-empty img {
	transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}

.rk-image-grid .kitty-box:hover .kitty-image.image-empty {
	opacity: 1;
}

.rk-image-grid .kitty-box:hover .kitty-image.image-empty img {
	transform: scale(1.05);
}

@media (max-width: 1024px) {
	.rk-image-grid.rk-grid-three,
	.rk-image-grid.rk-grid-four {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.rk-image-grid.rk-grid-three,
	.rk-image-grid.rk-grid-four {
		grid-template-columns: 1fr;
	}
}