/* ============================================================================
   INSTALLED SECTION — стилі блоку
   ============================================================================ */
/* ── Секція ─────────────────────────────────────────────────────────────────*/


/* ── Прев'ю блоку в редакторі Gutenberg ─────────────────────────────────────*/

/* Swiper у редакторі не ініціалізується → примусово показуємо картки */
.installed__section.is-preview .installed__row.swiper-slide {
	opacity: 1;
}

/* Фото-слайдер теж без ініціалізації — лишаємо тільки перше фото, */
/* щоб решта зображень не стовпом вилазили з картки */
.installed__section.is-preview .installed__slider-photo .installed__photo-slide ~ .installed__photo-slide {
	display: none;
}

.installed__section.is-preview .installed__col--photo {
	overflow: hidden;
}


.installed__section {
	padding: 25px 0;
	margin: 25px 0;
}

.installed__section > .container {
	position: relative;
}

.installed__title {
    font-family: "Days One", sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    color: #000;
    padding-left: 25px;
    border-left: 10px solid #77D14D;
    display: inline-block;
    margin: 50px 0 30px 0;
}

/* ── Головний слайдер-контейнер ─────────────────────────────────────────────*/

.installed__slider {
	padding: 15px;
}

/* ── Картка (slide) ─────────────────────────────────────────────────────────*/

.installed__row.swiper-slide {
	border-radius: 25px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

	/* Усі сусідні слайди приховуємо через opacity, щоб не «вилізали» за межі */
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Показуємо тільки видимі слайди */
.installed__row.swiper-slide-active,
.installed__row.swiper-slide-next,
.installed__row.swiper-slide-next + .swiper-slide {
	opacity: 1;
}

/* Hover-ефект на картці */
.installed__row:hover {
	transform: translateY(-0.5rem);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* ── Колонки всередині картки ───────────────────────────────────────────────*/

/* Фото-колонка */
.installed__col--photo {
	height: 300px;
}

/* Текстова колонка */
.installed__col--details {
	padding: 25px;
	background: #ffffff;
}

/* ── Фото-слайдер (вкладений) ───────────────────────────────────────────────*/

.installed__slider-photo {
	height: 100%;
	border-radius: 22px 22px 0 0;

	/* Скасовуємо будь-який padding, що міг прийти від батьківських правил */
	padding: 0;
}

/* Зображення */
.installed__photo-img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 22px 22px 0 0;
	transition: scale 0.3s ease;
}

.installed__row:hover .installed__photo-img {
	scale: 1.1;
}

/* ── Обкладинка картки + галерея у fancybox ─────────────────────────────── */
/*
 * На головній рендериться лише обкладинка (1 фото на картку).
 * Повна галерея відкривається у fancybox; решта зображень — приховані
 * посилання лише з href і завантажуються тільки при відкритті лайтбоксу.
 */
.installed__photo-cover {
	display: block;
	position: relative;
	height: 100%;
	cursor: zoom-in;
}

/* Приховані посилання на решту галереї — не займають місця і не вантажать зображень. */
.installed__photo-hidden {
	display: none !important;
}

/* Бейдж із кількістю фото — підказка, що за кліком відкриється галерея. */
.installed__photo-count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1;
	font-weight: 600;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	pointer-events: none;
}

.installed__photo-count svg {
	flex: 0 0 auto;
}

/* ── Lazy loading ───────────────────────────────────────────────────────────*/

/*
 * Поки зображення не завантажено — воно прозоре.
 * Клас .lazy-loaded додається через JS після завантаження.
 */
img.lazy-img {
	background-color: #f0f0f0;
	opacity: 0;                         /* повністю прихований, поки не завантажено */
	transition: all 0.3s;
}

img.lazy-loaded {
	opacity: 1;
}

/* Спіннер */
.swiper-lazy-preloader {
	display: block;
	position: absolute;
	inset: 0;
	margin: auto;
	width: 42px;
	height: 42px;
	z-index: 10;
	transform-origin: 50% 50%;
	animation: swiper-preloader-spin 1s steps(12, end) infinite;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cline id='l' x1='60' y1='7' x2='60' y2='27' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23l' opacity='.27'/%3E%3Cuse href='%23l' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse href='%23l' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse href='%23l' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse href='%23l' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse href='%23l' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse href='%23l' opacity='.5' transform='rotate(180 60 60)'/%3E%3Cuse href='%23l' opacity='.5' transform='rotate(210 60 60)'/%3E%3Cuse href='%23l' opacity='.5' transform='rotate(240 60 60)'/%3E%3Cuse href='%23l' opacity='.8' transform='rotate(270 60 60)'/%3E%3Cuse href='%23l' opacity='.8' transform='rotate(300 60 60)'/%3E%3Cuse href='%23l' opacity='.8' transform='rotate(330 60 60)'/%3E%3C/g%3E%3C/svg%3E")
		no-repeat center / 100%;
	pointer-events: none;
}

/* Спіннер зникає, коли зображення завантажилося */
img.lazy-loaded ~ .swiper-lazy-preloader {
	display: none;
}

@keyframes swiper-preloader-spin {
	to { transform: rotate(360deg); }
}

/* ── Стрілки фото-слайдера ──────────────────────────────────────────────────*/

/* Стрілки видимі тільки при наведенні на картку */
.installed__row .installed-photo__button-prev,
.installed__row .installed-photo__button-next {
	opacity: 0;
	transition: opacity 0.3s ease, scale 0.2s ease;
	background: none;
	width: auto;
	height: 30px;
	top: 60%;
}

.installed__row:hover .installed-photo__button-prev,
.installed__row:hover .installed-photo__button-next {
	opacity: 1;
}

.installed-photo__button-prev:hover,
.installed-photo__button-next:hover {
	scale: 1.1;
}

.installed-photo__button-prev svg,
.installed-photo__button-next svg {
	background: #77d14d;
	border-radius: 5px;
}

/* Позиціювання стрілок фото-слайдера */
.installed-photo__button-prev {
	left: 22px;
}

.installed-photo__button-next {
	right: 22px;
}

/* Прибираємо стандартний псевдоелемент Swiper */
.installed-photo__button-prev::after,
.installed-photo__button-next::after {
	content: none;
}

/* ── Пагінація фото-слайдера ────────────────────────────────────────────────*/

/* Контейнер пагінації — унікальний клас із індексом генерується у PHP */
.installed__slider-photo [class*="installed-photo__pagination-"] {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
}

.installed__slider-photo [class*="installed-photo__pagination-"] .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border: none;
	background: #ffffff;
	margin: 0;
	border-radius: 50%;
	opacity: 1;
	transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
	cursor: pointer;
}

.installed__slider-photo [class*="installed-photo__pagination-"] .swiper-pagination-bullet-active {
	width: 20px;
	background: #77d14d;
	border-radius: 3px;
}

/* ── Стрілки головного слайдера ─────────────────────────────────────────────*/

.installed__button-prev,
.installed__button-next {
	/*
	 * Приховані за замовчуванням — показуються через медіазапит (≥ 1400px)
	 * або через JS (showInstalledArrows).
	 */
	display: none;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: #77d14d;
	border-radius: 5px;
	top: 57%;
	box-shadow:
		0 20px 25px -5px rgba(119, 209, 77, 0.5),
		0 8px 10px -6px rgba(119, 209, 77, 0.5);
	transition: scale 0.2s ease, opacity 0.2s ease;
	border: none;
	cursor: pointer;
}

.installed__button-prev::after,
.installed__button-next::after {
	content: none;
}

.installed__button-prev svg,
.installed__button-next svg {
	width: 20px;
	flex-shrink: 0;
}

.installed__button-prev:hover,
.installed__button-next:hover {
	scale: 1.1;
	opacity: 1;
}

/* Позиціювання головних стрілок */
.installed__button-prev {
	left: -40px;
}

.installed__button-next {
	right: -40px;
}

/* ── Текстовий блок картки ──────────────────────────────────────────────────*/

.installed__subtitle {
	font-family: "Murecho", sans-serif;
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 20px;
}

.installed__subtitle a {
	color: #000;
	text-decoration: none;
	transition: color 0.2s ease;
}

.installed__subtitle a:hover {
	color: #77d14d;
}

.installed__info-items {
	display: flex;
	flex-direction: column;
	gap: 15px;
	color: #006045;
	margin-bottom: 30px;
}

.installed__info {
	font-family: "Murecho", sans-serif;
	font-weight: 400;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.installed__info::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #77d14d;
}

.installed__info--title {
	margin-right: auto;
}

.installed__info--value {
	font-weight: 700;
}

/* ── Кнопка «Детальніше» ────────────────────────────────────────────────────*/

.installed__button {
	display: block;
	padding: 15px 25px;
	background: #000;
	color: #fff;
	font-family: "Murecho", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 15px;
	box-shadow:
		0 10px 15px -3px rgba(92, 92, 122, 0.2),
		0 4px 6px -4px rgba(92, 92, 122, 0.2);
	transition: background 0.3s ease, scale 0.2s ease;
}

.installed__button:hover {
	background: #77d14d;
	scale: 1.05;
}

/* ── Пагінація головного слайдера ───────────────────────────────────────────*/

.installed_swiper-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60px;
}

.installed_swiper-pagination .swiper-pagination-bullet {
	border: 1px solid #fff;
	background: #ebe6e7;
	opacity: 1;
}

.installed_swiper-pagination .swiper-pagination-bullet-active {
	background: #7ACF55;
	border-color: #7ACF55;
}

/* ── Адаптивність ───────────────────────────────────────────────────────────*/

@media (min-width: 768px) {
	.installed__col--photo {
		height: 200px;
	}

	.installed__photo-img {
		height: 200px;
	}

	/*
	 * Коли слайдер ще не ініціалізований (наприклад, на десктопі з малою
	 * кількістю слайдів), відображаємо картки у grid-розкладці.
	 */
	.installed__slider:not(.swiper-initialized) > .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(3, 350px);
		justify-content: space-between;
	}
}

@media (min-width: 992px) {
	.installed__section {
		padding: 50px 0;
		margin: 50px 0;
	}

	.installed__title {
		margin: 0 0 50px;
		font-size: 42px;
	}
}

@media (min-width: 1400px) {
	/* На широкому екрані показуємо стрілки та прибираємо кульки-пагінацію */
	.installed__button-prev,
	.installed__button-next {
		display: flex;
	}

	.installed__slider .installed_swiper-pagination {
		display: none;
	}
}