feat(web): add transparent hero photos for all kids checkups

web/src/lib/media.js

@@ -57,6 +57,14 @@ import cutTrimester2 from '../assets/checkups/hero-vedenie-beremennosti-2-trim.w
 import cutTrimester3 from '../assets/checkups/hero-vedenie-beremennosti-3-trim.webp';
 import cutParents from '../assets/checkups/hero-zdorovye-roditeli.webp';
 import cutPressure from '../assets/checkups/hero-davlenie-v-poryadke.webp';
+// Детские программы: оригинальные прозрачные WebP из архива, без изменения карточек.
+import cutKidsMini from '../assets/checkups/hero-detskiy-mini.webp';
+import cutKidsGut from '../assets/checkups/hero-zdorovyy-zhkt.webp';
+import cutKidsYear from '../assets/checkups/hero-mne-god.webp';
+import cutKidsSchool from '../assets/checkups/hero-pervoklashka.webp';
+import cutKidsKindergarten from '../assets/checkups/hero-ya-v-sad.webp';
+import cutKidsTeen from '../assets/checkups/hero-ya-podrostok.webp';
+import cutKidsNewborn from '../assets/checkups/hero-ya-rodilsya.webp';
 
 // Направления: фото для плитки и специальность, врачей которой показываем на странице услуги
 // (связей врач ↔ услуга в базе почти нет, поэтому подбираем по специальности).
@@ -105,19 +113,19 @@ const CHECKUP_MEDIA = {
   // серо-синий фон шапки (#7886a9) — давление и родители
   'davlenie-v-poryadke': { photo: ckPressure, icon: icoTonometer, cutout: cutPressure, cutoutRatio: 1.374, heroBg: '#7886a9' },
   'zdorovye-roditeli': { photo: ckParents, icon: icoFamily, cutout: cutParents, cutoutRatio: 1.202, heroBg: '#7886a9' },
-  'mne-god': { photo: ckYear, icon: icoBaby },
+  'mne-god': { photo: ckYear, icon: icoBaby, cutout: cutKidsYear, cutoutRatio: 0.9587 },
-  'chek-ap-ya-v-sad': { photo: ckKindergarten, icon: icoPlayground },
+  'chek-ap-ya-v-sad': { photo: ckKindergarten, icon: icoPlayground, cutout: cutKidsKindergarten, cutoutRatio: 0.93 },
-  pervoklashka: { photo: ckSchool, icon: icoSchool },
+  pervoklashka: { photo: ckSchool, icon: icoSchool, cutout: cutKidsSchool, cutoutRatio: 0.9025 },
-  'chek-ap-ya-podrostok': { photo: ckTeen, icon: icoTeen },
+  'chek-ap-ya-podrostok': { photo: ckTeen, icon: icoTeen, cutout: cutKidsTeen, cutoutRatio: 0.9886 },
-  detskiy: { photo: ckMini, icon: icoStethoscope },
+  detskiy: { photo: ckMini, icon: icoStethoscope, cutout: cutKidsMini, cutoutRatio: 0.9587 },
-  'zdorovyy-zhkt': { photo: ckGut, icon: icoStomach },
+  'zdorovyy-zhkt': { photo: ckGut, icon: icoStomach, cutout: cutKidsGut, cutoutRatio: 0.7147 },
   // программ ниже в макете нет — берём близкие по смыслу фото макета
   'vedenie-beremennosti-1-trimestr': { photo: ckPregnancy, icon: icoPregnant, cutout: cutTrimester1, cutoutRatio: 1.048 },
   'vedenie-beremennosti-2-trim': { photo: ckPregnancy, icon: icoPregnant, cutout: cutTrimester2, cutoutRatio: 1.215 },
   'vedenie-beremennosti-3-trim': { photo: ckPregnancy, icon: icoPregnant, cutout: cutTrimester3, cutoutRatio: 1.191 },
   'poslerodovoy-chek-ap-cherez-mesyats': { photo: ckWoman, icon: icoFemale, cutout: cutPostpartum, cutoutRatio: 1.007 },
   'zdorovaya-zhenshchina-40': { photo: ckWoman, icon: icoFemale, cutout: cutWoman40, cutoutRatio: 1.054 },
-  'chek-ap-ya-rodilsya': { photo: ckYear, icon: icoBaby },
+  'chek-ap-ya-rodilsya': { photo: ckYear, icon: icoBaby, cutout: cutKidsNewborn, cutoutRatio: 0.9444 },
 };
 
 export function checkupMedia(checkup) {
@@ -132,7 +140,7 @@ export function checkupMedia(checkup) {
     // вырезанная фигура на фоне шапки, как в макете: справа на всю высоту, без рамки
     cutout: m.cutout || '',
     // свой цвет фона шапки, если в макете он не коралловый
-    heroBg: m.heroBg || '',
+    heroBg: m.heroBg || (checkup.audience === 'kids' && m.cutout ? 'var(--orange)' : ''),
     // ширина/высота файла фигуры: по ней шапка понимает, поместится ли фигура справа от текста
     cutoutRatio: m.cutoutRatio || 0,
   };

web/src/pages/CheckupPage.css

@@ -516,6 +516,12 @@
     -webkit-mask-image: none;
     mask-image: none;
   }
+  /* Детские портреты с лицом у верхнего края: показываем фигуру целиком,
+     а не увеличиваем её до ширины шапки с обрезкой головы. */
+  .checkup-hero--kids .checkup-hero__image--cutout img {
+    object-fit: contain;
+    object-position: right bottom;
+  }
 }
 
 @media (max-width: 767px) {

web/src/pages/CheckupPage.jsx

@@ -41,7 +41,7 @@ export default function CheckupPage() {
   return (
     <div className="checkup-page">
       <section
-        className={`checkup-hero${cutout ? ' checkup-hero--cutout' : ''}`}
+        className={`checkup-hero${cutout ? ' checkup-hero--cutout' : ''}${cutout && c.audience === 'kids' ? ' checkup-hero--kids' : ''}`}
         style={heroBg ? { '--checkup-hero-bg': heroBg } : undefined}
       >
         <div className={`container checkup-hero__row${cutout ? ' checkup-hero__row--cutout' : ''}`}>