From 3bb44c4e805df99a5f76693c85ced729b79aa793 Mon Sep 17 00:00:00 2001
From: Dana Medical Developer <dev@dana-medical.ru>
Date: Wed, 14 Oct 2026 14:06:48 +0000
Subject: [PATCH] fix(onec): increase client timeout to 60s for 1C large
 catalog responses

---
 internal/onec/client.go       |  2 +-
 web/src/lib/media.js          |  4 ++-
 web/src/pages/CheckupPage.css | 46 ++++++++++++++++++++---------------
 web/src/pages/CheckupPage.jsx |  4 +--
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/internal/onec/client.go b/internal/onec/client.go
index 53050fc..eafb7af 100644
--- a/internal/onec/client.go
+++ b/internal/onec/client.go
@@ -39,7 +39,7 @@ func New(base, key, authHeader string) *Client {
 		Base:       strings.TrimRight(strings.TrimSpace(base), "/"),
 		Key:        strings.TrimSpace(key),
 		AuthHeader: authHeader,
-		HTTP:       &http.Client{Timeout: 20 * time.Second},
+		HTTP:       &http.Client{Timeout: 60 * time.Second},
 	}
 }
 
diff --git a/web/src/lib/media.js b/web/src/lib/media.js
index 93d954a..caf67b0 100644
--- a/web/src/lib/media.js
+++ b/web/src/lib/media.js
@@ -101,7 +101,7 @@ const CHECKUP_MEDIA = {
   'zdorovaya-devoch-a': { photo: ckGirl, icon: icoFemale, hero: checkupHeroGirl },
   'proverit-svoe-zhenskoe-zdorove-': { photo: ckWoman, icon: icoCheckup, cutout: cutWomanHealth },
   'planirovannie-beremennosti': { photo: ckPregnancy, icon: icoPregnant, cutout: cutPlanning },
-  'profilaktika-raka-sheyki-matki': { photo: ckCervix, icon: icoRibbon, cutout: cutCervix },
+  'profilaktika-raka-sheyki-matki': { photo: ckCervix, icon: icoRibbon, cutout: cutCervix, cutoutCenter: true },
   // серо-синий фон шапки (#7886a9) — давление и родители
   'davlenie-v-poryadke': { photo: ckPressure, icon: icoTonometer, cutout: cutPressure, heroBg: '#7886a9' },
   'zdorovye-roditeli': { photo: ckParents, icon: icoFamily, cutout: cutParents, heroBg: '#7886a9' },
@@ -133,6 +133,8 @@ export function checkupMedia(checkup) {
     cutout: m.cutout || '',
     // свой цвет фона шапки, если в макете он не коралловый
     heroBg: m.heroBg || '',
+    // главное в кадре по центру — при нехватке места фигура обрезается с двух сторон, а не только слева
+    cutoutCenter: Boolean(m.cutoutCenter),
   };
 }
 
diff --git a/web/src/pages/CheckupPage.css b/web/src/pages/CheckupPage.css
index 195e13b..1e41b31 100644
--- a/web/src/pages/CheckupPage.css
+++ b/web/src/pages/CheckupPage.css
@@ -125,8 +125,8 @@
 }
 
 .checkup-hero__image--card {
-  width: 360px;
-  height: 270px;
+  width: 480px;
+  height: 360px;
   align-self: center;
   border-radius: 24px;
 }
@@ -289,8 +289,8 @@
     height: 400px;
   }
   .checkup-hero__image--card {
-    width: 280px;
-    height: 210px;
+    width: 340px;
+    height: 255px;
   }
   .checkup-content__head {
     flex-direction: column;
@@ -443,31 +443,41 @@
 }
 
 /* ---------- вырезанная фигура в шапке ----------
-   Фото без фона справа на всю высоту шапки, низом к краю, как в макете. Широкий снимок
-   уменьшается целиком (без обрезки), чтобы не заходить на текст; справа может выходить за сетку. */
+   Фигура срезана сверху и снизу, поэтому всегда на всю высоту шапки (срез совпадает с краями)
+   и не выходит за правую линию сетки. Если снимок шире места справа от текста, лишнее уходит
+   влево под плавное растворение — без прямого среза. */
 .checkup-hero__row--cutout .checkup-hero__copy {
-  max-width: 560px;
+  max-width: 520px;
 }
 
 .checkup-hero__image--cutout {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 592px;
-  right: min(0px, calc((100% - 100vw) / 2 + 80px));
+  left: 548px;
+  right: 0;
   width: auto;
   height: auto;
-  overflow: visible;
+  overflow: hidden;
   pointer-events: none;
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px);
+  mask-image: linear-gradient(to right, transparent 0, #000 72px);
 }
 
 .checkup-hero__image--cutout img {
   position: absolute;
-  inset: 0;
-  width: 100%;
+  right: 0;
+  bottom: 0;
+  width: auto;
   height: 100%;
-  object-fit: contain;
-  object-position: right bottom;
+  max-width: none;
+}
+
+/* главное в кадре по центру (лента у «Профилактики рака шейки матки») — центрируем, а не к линии */
+.checkup-hero__image--center img {
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 @media (max-width: 1023px) {
@@ -475,8 +485,8 @@
     max-width: 55%;
   }
   .checkup-hero__image--cutout {
-    left: 58%;
-    right: calc(-1 * var(--gutter));
+    left: 56%;
+    right: 0;
     width: auto;
     height: auto;
   }
@@ -490,14 +500,12 @@
   .checkup-hero__image--cutout {
     top: 0;
     bottom: 0;
-    left: 18%;
+    left: 12%;
     right: calc(-1 * var(--gutter));
     width: auto;
     height: auto;
   }
   .checkup-hero__image--cutout img {
-    object-fit: cover;
-    object-position: 70% bottom;
     opacity: 0.5;
   }
 }
diff --git a/web/src/pages/CheckupPage.jsx b/web/src/pages/CheckupPage.jsx
index 4d78c42..1261afa 100644
--- a/web/src/pages/CheckupPage.jsx
+++ b/web/src/pages/CheckupPage.jsx
@@ -27,7 +27,7 @@ export default function CheckupPage() {
   if (!checkup.data || checkup.data.slug !== slug) return <p className="state checkup-loading">Загружаем…</p>;
 
   const c = checkup.data;
-  const { hero, photo, cutout, heroBg } = checkupMedia(c);
+  const { hero, photo, cutout, heroBg, cutoutCenter } = checkupMedia(c);
   const items = c.items?.length ? c.items.map(cleanText) : checklistItems(c.blocks);
   const intro = introText(c.blocks);
   const lead = cleanText(c.lead);
@@ -64,7 +64,7 @@ export default function CheckupPage() {
             </div>
           </div>
           {cutout ? (
-            <div className="checkup-hero__image checkup-hero__image--cutout">
+            <div className={`checkup-hero__image checkup-hero__image--cutout${cutoutCenter ? ' checkup-hero__image--center' : ''}`}>
               <img src={cutout} alt="" />
             </div>
           ) : hero ? (