From 97c25af0600622335ed1656c9a78d0dcc192ed02 Mon Sep 17 00:00:00 2001
From: Dekart Deploy Bot <deploy@dekart.school>
Date: Sun, 10 May 2026 23:07:59 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9B=D0=B0=D0=B3=D0=B5=D1=80=D1=8C:=20=D0=A1?=
 =?UTF-8?q?=D0=B5=D0=BA=D1=86=D0=B8=D1=8F=20=D0=BF=D1=80=D0=BE=D0=B3=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BC=D0=BC=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wp-content/themes/dekart/assets/css/camp.css | 224 +++++++++----------
 wp-content/themes/dekart/assets/js/camp.js   |  13 +-
 wp-content/themes/dekart/page-camp.php       |  65 +++---
 3 files changed, 145 insertions(+), 157 deletions(-)

diff --git a/wp-content/themes/dekart/assets/css/camp.css b/wp-content/themes/dekart/assets/css/camp.css
index afb09bc..5d2016c 100644
--- a/wp-content/themes/dekart/assets/css/camp.css
+++ b/wp-content/themes/dekart/assets/css/camp.css
@@ -805,141 +805,137 @@ p {
 
 
 /* programs */
-.programs-wrapper {
-   flex-wrap: wrap;
-   display: flex;
-   gap: 30px;
+.programs__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 32px;
 }
 
-.programs__item {
-   width: calc(33.33% - 20px);
-   display: flex;
-   flex-direction: column;
-   gap: 20px;
+@media (min-width: 641px) {
+    .programs__grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+    }
 }
 
-.programs__item_img {
-   border-radius: 30px;
-   width: auto;
-   height: 350px;
-   object-fit: cover;
+@media (min-width: 1024px) {
+    .programs__grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 30px;
+    }
 }
 
-.programs__item p {
-   margin: 0;
+.programs__card {
+    display: flex;
+    flex-direction: column;
+    border-radius: 20px;
+    background: #fff;
+    overflow: hidden;
+    transition: transform .25s ease, box-shadow .25s ease;
 }
 
-.scroll-icon-wrapper {
-   display: none;
+.programs__card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
 }
 
-.programs__item_title {
-   font-size: 26px;
-   line-height: 1.2;
-   color: #212121;
-   font-weight: 600;
-   flex: 1;
+.programs__image {
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    object-fit: cover;
+    display: block;
 }
 
-.programs__item_date {
-   font-weight: 600;
-   font-size: 18px;
+.programs__body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 20px;
+    flex: 1;
 }
 
-.programs__item_text {
-   font-size: 16px;
-   line-height: 1.3;
-   color: #212121;
-   font-weight: 500;
+.programs__name {
+    font-family: Montserrat, sans-serif;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: #1c2b2d;
+    margin: 0;
 }
 
-.programs__item_price {
-   font-size: 26px;
-   color: #212121;
-   font-weight: 600;
+@media (min-width: 641px) {
+    .programs__name { font-size: 20px; }
 }
 
-.btn-details {
-   width: fit-content;
-   color: #ffffff;
-   border: 2px solid #3bb273;
-   background-color: #3bb273;
-   font-weight: 600;
-   text-transform: uppercase;
-   border-radius: 30px;
-   padding: 15px 30px;
-   transition: .3s;
+@media (min-width: 1024px) {
+    .programs__name { font-size: 22px; }
 }
 
-.btn-details:hover {
-   background-color: transparent;
-   color: #212121;
+.programs__date {
+    font-size: 14px;
+    font-weight: 400;
+    color: #999;
+    margin: 0;
 }
 
-.modal-programs,
-.modal-mentors {
-   position: fixed;
-   top: -12px;
-   right: -28px;
-   bottom: 0;
-   left: 0;
-   display: none;
-   align-items: center;
-   justify-content: center;
-   background-color: #000000ce;
-   z-index: 100;
+.programs__desc {
+    font-size: 15px;
+    line-height: 1.4;
+    color: #555;
+    font-weight: 400;
+    margin: 0;
+    flex: 1;
 }
 
-.modal-programs.open {
-   display: flex;
+.programs__footer {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    margin-top: 4px;
 }
 
-.modal-mentors.open {
-   display: flex;
+.programs__price {
+    font-family: Montserrat, sans-serif;
+    font-size: 24px;
+    font-weight: 700;
+    color: #3bb273;
+    line-height: 1.2;
 }
 
-.modal-programs-wrapper {
-   position: relative;
-   display: flex;
-   gap: 30px;
-   border-radius: 30px;
-   background-color: #fff;
-   padding: 40px;
-   max-width: 90%;
-   max-height: 90%;
+.programs__duration {
+    font-size: 14px;
+    color: #999;
+    font-weight: 400;
 }
 
-.modal-programs__content p {
-   margin-bottom: 15px;
+.programs__btn {
+    width: 100%;
+    padding: 14px 20px;
+    font-size: 15px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #3bb273;
+    border: 2px solid #3bb273;
+    background: transparent;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: .2s;
+    margin-top: 12px;
 }
 
-.programs__content {
-   white-space: pre-line;
+.programs__btn:hover,
+.programs__btn:focus-visible {
+    background: #3bb273;
+    color: #fff;
+    outline: none;
 }
 
-.btn-close-modal {
-   position: absolute;
-   bottom: 100%;
-   left: 100%;
+@media (min-width: 641px) {
+    .programs__btn { width: 100%; }
 }
 
-.btn-close-mentors {
-    position: absolute;
-    bottom: 100%;
-    left: 100%;
-}
-
-.modal-programs__img {
-   min-width: 260px;
-   height: 260px;
-   border-radius: 30px;
-   overflow: hidden;
-}
-
-.modal-programs__img img {
-	width: 100%;
-	height: 100%;
-	object-fit: contain;
+@media (min-width: 1024px) {
+    .programs__btn { width: 100%; }
 }
 
 /* programs END */
@@ -2059,11 +2055,13 @@ p {
 
    .programs__item_img {
       border-radius: clamp(20px, 2.5vw, 30px);
-      height: clamp(228px, 29.17vw, 350px);
+      aspect-ratio: 3 / 2;
+      height: auto;
    }
 
    .programs__item_title {
       font-size: clamp(17px, 2.17vw, 26px);
+      font-weight: 500;
    }
 
    .programs__item_date {
@@ -2075,7 +2073,8 @@ p {
    }
 
    .programs__item_price {
-      font-size: clamp(17px, 2.17vw, 26px);
+      font-size: clamp(20px, 2.5vw, 28px);
+      color: #3bb273;
    }
 
    .btn-details {
@@ -2526,21 +2525,11 @@ p {
         padding: 0 20px;
    }
 
-   .programs {
-        padding-left: 0;
-        padding-right: 0;
-   }
 
    .programs .camp_title {
       padding: 0 15px 25px 15px;
    }
 
-   .scroll-icon-wrapper {
-      margin-top: -20px;
-      display: flex;
-      justify-content: flex-end;
-      padding-right: 15px;
-   }
 
    .programs-wrapper {
       width: 100%;
@@ -2566,17 +2555,15 @@ p {
       border-radius: 5px;
    }
 
-   .programs__item {
-      width: 100%;
-      gap: 10px;
-   }
 
    .programs__item_img {
-      height: 250px;
+      aspect-ratio: 3 / 2;
+      height: auto;
    }
 
    .programs__item_title {
       font-size: 22px;
+      font-weight: 500;
    }
 
    .btn-details {
@@ -2783,11 +2770,6 @@ p {
 		max-width: 95%;
 		flex-direction: column;
 	}
-	.btn-close-modal,
-	.btn-close-mentors	{
-		left: auto;
-		right: -28px;
-	}
 	.modal-programs__img {
 		height: auto;
 		border-radius: 10px;
diff --git a/wp-content/themes/dekart/assets/js/camp.js b/wp-content/themes/dekart/assets/js/camp.js
index 3f9b93b..9b5086b 100644
--- a/wp-content/themes/dekart/assets/js/camp.js
+++ b/wp-content/themes/dekart/assets/js/camp.js
@@ -48,10 +48,11 @@ document.addEventListener("click", function (event) {
 	}
 
  if (target.classList.contains("btn-program")) {
-	modalPrograms.querySelector('.modal-programs__img').innerHTML = target.parentNode.querySelector('.programs__item_img').outerHTML;
-	modalPrograms.querySelector('.programs__item_title').textContent = target.parentNode.querySelector('.programs__item_title').textContent;
-	modalPrograms.querySelector('.programs__item_price').textContent = target.parentNode.querySelector('.programs__item_price').textContent;
-	modalPrograms.querySelector('.programs__content').innerHTML = target.parentNode.querySelector('.programs_content').innerHTML;
+	const card = target.closest('.programs__card');
+	modalPrograms.querySelector('.modal-programs__img').innerHTML = card.querySelector('.programs__image').outerHTML;
+	modalPrograms.querySelector('.programs__item_title').textContent = card.querySelector('.programs__name').textContent;
+	modalPrograms.querySelector('.programs__item_price').textContent = card.querySelector('.programs__price').textContent;
+	modalPrograms.querySelector('.programs__content').innerHTML = card.querySelector('.programs_content').innerHTML;
 	modalPrograms.classList.add('open');
 	return;
  }
@@ -76,7 +77,7 @@ document.addEventListener("click", function (event) {
         '.hero-media-search__container',
         '.about-us__wrapper',
         '.infograph h2', '.infograph .camp_text', '.infograph-wrapper',
-        '.programs h2', '.programs-wrapper > div',
+        '.programs h2', '\.programs__grid > article',
         '.mentors h2', '.mentors-wrapper > div',
         '.routine h2', '.routine__item',
         '.foto h2', '.camp-foto-wrapper',
@@ -102,7 +103,7 @@ document.addEventListener("click", function (event) {
         observer.observe(el);
     });
 
-    document.querySelectorAll('.programs-wrapper > div, .mentors-wrapper > div').forEach((card, i) => {
+    document.querySelectorAll('.programs__grid > article, .mentors-wrapper > div').forEach((card, i) => {
         card.style.transitionDelay = (i * 0.08) + 's';
     });
 })();
diff --git a/wp-content/themes/dekart/page-camp.php b/wp-content/themes/dekart/page-camp.php
index 77ee063..416b19a 100644
--- a/wp-content/themes/dekart/page-camp.php
+++ b/wp-content/themes/dekart/page-camp.php
@@ -260,34 +260,39 @@ $metrics = [
 	</section>
 
 	<section class="programs" itemscope itemtype="https://schema.org/ItemList">
-	 <h2 class="camp_title" itemprop="name">Летние программы</h2>
-	 <div class="scroll-icon-wrapper" style="mix-blend-mode: multiply;">
-		<img src="<?php echo get_template_directory_uri(); ?>/assets/images/icons/scroll-hand.svg" alt="" width="42" height="42" loading="lazy">
-	 </div>
-	 <div class="programs-wrapper">
-		<?php 
-		$programs = carbon_get_post_meta($post_id, 'programs' );
-		if (is_array($programs)) {
-			foreach ($programs as $item) { 
-				$programs_img = $item['programs_img'];
-				$programs_title = $item['programs_title'];
-				$programs_date = $item['programs_date'];
-				$programs_text = $item['programs_text'];
-				$programs_price = $item['programs_price'];
-				$programs_days = $item['programs_days'];
-				$programs_content = $item['programs_content'];?>
-				<div class="programs__item">
-					<img class="programs__item_img" loading="lazy" width="360" height="350" src="<?php echo wp_get_attachment_url($programs_img); ?>" alt="<?php echo get_post_meta( $programs_img, '_wp_attachment_image_alt', true ); ?>">
-					<p class="programs__item_title"><?php echo esc_html($programs_title); ?></p>
-					<p class="programs__item_date"><?php echo esc_html($programs_date); ?></p>
-					<p class="programs__item_text"><?php echo esc_html($programs_text); ?></p>
-					<p class="programs__item_price">от <?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽ / <?php echo esc_html($programs_days); ?></p>
-					<div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div>
-					<button class="btn-details btn-program">Подробнее</button>
-				</div>
-			<?php }
-		} ?>
-	 </div>
+		<div class="container">
+			<h2 class="camp_title" itemprop="name">Летние программы</h2>
+			<div class="programs__grid">
+				<?php
+				$programs = carbon_get_post_meta($post_id, 'programs');
+				if (is_array($programs)) {
+					foreach ($programs as $item) {
+						$programs_img = $item['programs_img'];
+						$programs_title = $item['programs_title'];
+						$programs_date = $item['programs_date'];
+						$programs_text = $item['programs_text'];
+						$programs_price = $item['programs_price'];
+						$programs_days = $item['programs_days'];
+						$programs_content = $item['programs_content'];?>
+				<article class="programs__card">
+					<img class="programs__image" loading="lazy" width="360" height="225" src="<?php echo wp_get_attachment_url($programs_img); ?>" alt="<?php echo get_post_meta($programs_img, '_wp_attachment_image_alt', true); ?>">
+					<div class="programs__body">
+						<h3 class="programs__name"><?php echo esc_html($programs_title); ?></h3>
+						<p class="programs__date"><?php echo esc_html($programs_date); ?></p>
+						<p class="programs__desc"><?php echo esc_html($programs_text); ?></p>
+						<div class="programs__footer">
+							<span class="programs__price"><?php echo number_format((int)$programs_price, 0, ',', ' '); ?> ₽</span>
+							<span class="programs__duration"><?php echo esc_html($programs_days); ?></span>
+						</div>
+						<div class="programs_content" style="display: none;"><?php echo wp_kses_post($programs_content); ?></div>
+						<button class="programs__btn btn-program" aria-label="Подробнее о программе <?php echo esc_attr($programs_title); ?>">Подробнее</button>
+					</div>
+				</article>
+				<?php
+					}
+				} ?>
+			</div>
+		</div>
 	</section>
 
 	<?php getBanner('', $post_id); ?>
@@ -645,9 +650,9 @@ $metrics = [
 
 </main>
 
-<div class="modal-programs">
+<div class="modal-programs" role="dialog" aria-modal="true" aria-label="Программа лагеря">
  <div class="modal-programs-wrapper">
-	<button class="btn-close-modal btn-close-programs"><svg role="presentation"
+	<button class="btn-close-modal btn-close-programs" aria-label="Закрыть"><svg role="presentation"
 		  class="t-popup__close-icon t-popup__close-icon_cross" width="23px" height="23px" viewBox="0 0 23 23"
 		  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 		  <g stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd">