From 9b44b1ac4eebcb9ccf915dc61542d8d8eb4f18a6 Mon Sep 17 00:00:00 2001
From: Dekart Deploy Bot <deploy@dekart.school>
Date: Tue, 12 May 2026 13:11:28 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9B=D0=B0=D0=B3=D0=B5=D1=80=D1=8C:=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wp-content/themes/dekart/assets/css/camp.css | 244 +++++++++----------
 wp-content/themes/dekart/assets/js/camp.js   |  43 ++--
 wp-content/themes/dekart/functions.php       |   1 +
 wp-content/themes/dekart/page-camp.php       |  60 ++---
 4 files changed, 175 insertions(+), 173 deletions(-)

diff --git a/wp-content/themes/dekart/assets/css/camp.css b/wp-content/themes/dekart/assets/css/camp.css
index bbe457c..d94707d 100644
--- a/wp-content/themes/dekart/assets/css/camp.css
+++ b/wp-content/themes/dekart/assets/css/camp.css
@@ -1606,55 +1606,136 @@ html {
 }
 
 /* routine END*/
-/* foto */
-.camp-foto-wrapper {
-   display: flex;
-   gap: 20px;
+/* ═══════════════════════════════════════════════
+   GALLERY — lazeweb photo grid + modal
+   ═══════════════════════════════════════════════ */
+.lw-gallery__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
 }
 
-.foto-left-part {
-   width: 50%;
-   overflow: hidden;
+.lw-gallery__item {
+    overflow: hidden;
+    border-radius: 16px;
+    cursor: pointer;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    aspect-ratio: 4 / 3;
 }
 
-.camp-swiper-foto {
-   position: relative;
-   margin-bottom: 5px;
+.lw-gallery__item:hover {
+    transform: scale(1.02);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
 }
 
-.swiper-button-next:after,
-.swiper-button-prev:after {
-   color: #fff;
-   font-weight: 600;
-   font-size: 14px;
-   padding: 5px;
-   border-radius: 50%;
-   height: 28px;
-   width: 28px;
-   display: flex;
-   background: #3bb273;
-   align-items: center;
-   justify-content: center;
+.lw-gallery__thumb {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
 }
 
-/* swiper */
+.lw-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+    align-items: center;
+    justify-content: center;
+}
+
+.lw-modal--open {
+    display: flex;
+}
+
+.lw-modal__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.8);
+}
+
+.lw-modal__content {
+    position: relative;
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+
+.lw-modal__img {
+    display: block;
+    max-width: 100%;
+    max-height: 90vh;
+    object-fit: contain;
+}
+
+.lw-modal__close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: rgba(0,0,0,0.5);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 2;
+    transition: background 0.2s;
+}
+
+.lw-modal__close:hover {
+    background: rgba(0,0,0,0.8);
+}
+
+@media (max-width: 768px) {
+    .lw-gallery__grid {
+        display: flex;
+        gap: 12px;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+        padding-bottom: 8px;
+    }
+
+    .lw-gallery__grid::-webkit-scrollbar {
+        height: 6px;
+    }
+
+    .lw-gallery__grid::-webkit-scrollbar-thumb {
+        background: #ccc;
+        border-radius: 8px;
+    }
+
+    .lw-gallery__item {
+        flex: 0 0 280px;
+        scroll-snap-align: start;
+        aspect-ratio: 4 / 3;
+    }
+}
+
+@media (max-width: 480px) {
+    .lw-gallery__item {
+        flex: 0 0 240px;
+    }
+}
+
+/* swiper (base — used by reviews) */
 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
-
-   /* Center slide text vertically */
-   display: -webkit-box;
-   display: -ms-flexbox;
-   display: -webkit-flex;
    display: flex;
-   -webkit-box-pack: center;
-   -ms-flex-pack: center;
-   -webkit-justify-content: center;
    justify-content: center;
-   -webkit-box-align: center;
-   -ms-flex-align: center;
-   -webkit-align-items: center;
    align-items: center;
 }
 
@@ -1665,36 +1746,6 @@ html {
    object-fit: cover;
 }
 
-.camp-swiper-foto {
-   height: 350px;
-}
-
-.camp-swiper-foto img {
-   border-radius: 30px;
-}
-
-.camp-swiper-foto-thumbsSlider {
-   height: 80px;
-}
-
-.camp-swiper-foto-thumbsSlider img {
-   width: 100%;
-   height: auto;
-   aspect-ratio: 1 / 1;
-   border-radius: 10px;
-   transition: .2s;
-   cursor: pointer;
-}
-
-.camp-swiper-foto-thumbsSlider img:hover {
-   opacity: .6;
-}
-
-.foto-content {
-   width: calc(50% - 20px);
-   white-space: pre-line;
-}
-
 /* swiper END */
 
 /* faq */
@@ -2550,46 +2601,6 @@ html {
       font-size: clamp(12px, 1.5vw, 18px);
    }
 
-   .camp-foto-wrapper {
-      gap: clamp(13px, 1.67vw, 20px);
-   }
-
-   .camp-swiper-foto {
-      margin-bottom: clamp(3px, .42vw, 5px);
-   }
-
-   .swiper-button-next:after,
-   .swiper-button-prev:after {
-      font-size: clamp(9px, 1.17vw, 14px);
-      padding: clamp(3px, .42vw, 5px);
-      height: clamp(18px, 2.33vw, 28px);
-      width: clamp(18px, 2.33vw, 28px);
-   }
-
-   .swiper-slide {
-      font-size: clamp(12px, 1.5vw, 18px);
-   }
-
-   .camp-swiper-foto {
-      height: clamp(228px, 29.17vw, 350px);
-   }
-
-   .camp-swiper-foto img {
-      border-radius: clamp(20px, 2.5vw, 30px);
-   }
-
-   .camp-swiper-foto-thumbsSlider {
-      height: clamp(52px, 6.67vw, 80px);
-   }
-
-   .camp-swiper-foto-thumbsSlider img {
-      border-radius: clamp(6px, .83vw, 10px);
-   }
-
-   .foto-content {
-      width: calc(50% - clamp(13px, 1.67vw, 20px));
-   }
-
    .faq-wrapper {
       gap: clamp(20px, 2.5vw, 30px);
    }
@@ -2898,29 +2909,6 @@ html {
       left: 10px;
    }
 
-   .camp-foto-wrapper {
-      gap: 10px;
-      flex-direction: column;
-   }
-
-   .foto-content,
-   .foto-left-part {
-      width: 100%;
-   }
-
-   .camp-swiper-foto {
-      height: 250px;
-      margin-bottom: 5px;
-   }
-
-   .camp-swiper-foto-thumbsSlider {
-      height: auto;
-   }
-
-   .foto-content {
-      font-size: 16px;
-   }
-
    .more .btn-more {
       height: 24px;
       background: #fff;
diff --git a/wp-content/themes/dekart/assets/js/camp.js b/wp-content/themes/dekart/assets/js/camp.js
index f26a0ba..fc8fc59 100644
--- a/wp-content/themes/dekart/assets/js/camp.js
+++ b/wp-content/themes/dekart/assets/js/camp.js
@@ -1,20 +1,31 @@
-var swiper = new Swiper(".camp-swiper-foto-thumbsSlider", {
- spaceBetween: 10,
- slidesPerView: 7,
- freeMode: true,
- watchSlidesVisibility: true,
- watchSlidesProgress: true,
+// Gallery modal
+document.addEventListener('click', function(e) {
+    var thumb = e.target.closest('.lw-gallery__thumb');
+    if (thumb) {
+        var modal = document.getElementById('lw-modal-gallery');
+        var img = modal.querySelector('.lw-modal__img');
+        img.src = thumb.dataset.full;
+        modal.classList.add('lw-modal--open');
+        document.body.style.overflow = 'hidden';
+        return;
+    }
+    var close = e.target.closest('.lw-modal__close, .lw-modal__overlay');
+    if (close) {
+        var modal = document.getElementById('lw-modal-gallery');
+        modal.classList.remove('lw-modal--open');
+        document.body.style.overflow = '';
+        return;
+    }
 });
-var swiper2 = new Swiper(".camp-swiper-foto", {
- spaceBetween: 10,
- slidesPerView: 1,
- navigation: {
-	nextEl: ".swiper-button-next",
-	prevEl: ".swiper-button-prev",
- },
- thumbs: {
-	swiper: swiper,
- },
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        var modal = document.getElementById('lw-modal-gallery');
+        if (modal.classList.contains('lw-modal--open')) {
+            modal.classList.remove('lw-modal--open');
+            document.body.style.overflow = '';
+        }
+    }
 });
 
 const btnCloseModalPrograms = document.querySelector('.btn-close-programs');
diff --git a/wp-content/themes/dekart/functions.php b/wp-content/themes/dekart/functions.php
index 4059d84..facf721 100644
--- a/wp-content/themes/dekart/functions.php
+++ b/wp-content/themes/dekart/functions.php
@@ -685,6 +685,7 @@ function add_carbon() {
 				->set_help_text( 'Добавьте реальные фото детей из лагеря. Формат: WebP, 1:1 или 4:3.' )
 				->add_fields( array(
 					Field::make( 'image', 'foto', 'Фотография' )
+						->set_help_text( 'Оптимальный размер: 1200x800px, до 300Кб' ),
 				)),
 			Field::make( 'separator', 'fotos_extra_sep', 'Дополнительно' ),
 			Field::make( 'rich_text', 'fotos_content', 'Текст под галереей' ),
diff --git a/wp-content/themes/dekart/page-camp.php b/wp-content/themes/dekart/page-camp.php
index 68a9bad..4dfe1b0 100644
--- a/wp-content/themes/dekart/page-camp.php
+++ b/wp-content/themes/dekart/page-camp.php
@@ -426,37 +426,39 @@ $metrics = [
 
 	<section class="section-reveal section-bg foto" data-bg="mint">
 	 <h2 class="camp_title">Наши фотографии</h2>
-	 <div class="camp-foto-wrapper">
-		<?php 
-			$fotos = carbon_get_post_meta($post_id, 'fotos' );
-			$fotos_content = carbon_get_post_meta($post_id, 'fotos_content' );
-			$fotos_link_vk = carbon_get_post_meta($post_id, 'fotos_link_vk' );
-			$HTMLimgs = "";
-			if (is_array($fotos)) {
-				foreach ($fotos as $item) { 
-					$img = wp_get_attachment_url($item['foto']);
-                    $alt = esc_attr(get_post_meta( $item['foto'], '_wp_attachment_image_alt', true ));
-                    $HTMLimgs .= "<div class='swiper-slide'>
-                                    <img loading='lazy' src='" . esc_url($img) . "' alt='$alt' width='560' height='420'>
-                                  </div>";
-				}
-			} ?>
-		<div class="foto-left-part">
-		   <div class="swiper-container camp-swiper-foto">
-			  <div class="swiper-wrapper">
-					<?php echo $HTMLimgs; ?>
-			  </div>
-			  <div class="swiper-button-next"></div>
-			  <div class="swiper-button-prev"></div>
-		   </div>
-		   <div thumbsSlider="" class="swiper-container camp-swiper-foto-thumbsSlider">
-			  <div class="swiper-wrapper">
-					<?php echo $HTMLimgs; ?>
-			  </div>
-		   </div>
+	 <?php
+		$fotos = carbon_get_post_meta($post_id, 'fotos' );
+		if (is_array($fotos) && !empty($fotos)) :
+	 ?>
+	 <div class="lw-gallery">
+		<div class="lw-gallery__grid">
+			<?php foreach ($fotos as $item) :
+				$img_id = $item['foto'];
+				$img_url = wp_get_attachment_url($img_id);
+				$full_url = wp_get_attachment_image_url($img_id, 'full');
+				$alt = esc_attr(get_post_meta($img_id, '_wp_attachment_image_alt', true));
+			?>
+			<div class="lw-gallery__item">
+				<img class="lw-gallery__thumb"
+					 src="<?php echo esc_url($img_url); ?>"
+					 alt="<?php echo $alt; ?>"
+					 loading="lazy"
+					 width="400" height="300"
+					 data-full="<?php echo esc_url($full_url); ?>">
+			</div>
+			<?php endforeach; ?>
 		</div>
-		<div class="foto-content"><?php echo esc_html($fotos_content); ?></div>
 	 </div>
+	 <div class="lw-modal" id="lw-modal-gallery" role="dialog" aria-modal="true" aria-label="Просмотр фото">
+		<div class="lw-modal__overlay"></div>
+		<div class="lw-modal__content">
+			<button class="lw-modal__close" aria-label="Закрыть">
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
+			</button>
+			<img class="lw-modal__img" src="" alt="">
+		</div>
+	 </div>
+	 <?php endif; ?>
 	</section>
 
 	<section class="section-reveal section-bg camp-reviews" data-bg="white">