її нема — тож задаємо пропорцію вихідної картинки. */
.fc-books { aspect-ratio: 463 / 367; }
.ms-sicon-fc > .lot-in, .card-book.lot-in { aspect-ratio: 101 / 81; }
.ms-sicon-lp > .lot-in,
.hd-card-deco > .lot-in,
.hsf-card-deco > .lot-in { aspect-ratio: 100 / 97; }
.fc-books { --lw: 108.271%; --lh: 107.828%; --lx: -6.696%; --ly: -5.015%;
pointer-events: none; }
.ms-sicon-fc > .lot-in,
.card-book.lot-in { --lw: 108.271%; --lh: 107.961%; --lx: -6.696%; --ly: -5.022%; }
/* Пазл рахуємо по КІНЦЕВОМУ кадру: одна деталь на початку зсунута й повернута,
зібраний вигляд — саме той, що на статичній картинці. */
.ms-sicon-lp > .lot-in,
.hd-card-deco > .lot-in,
.hsf-card-deco > .lot-in,
.lp-puzzle-top > .lot-in { --lw: 106.929%; --lh: 104.153%; --lx: -5.426%; --ly: -2.102%; }
.lp-puzzle-top > .lot-in { aspect-ratio: 436 / 423; }
.hd-sc-g { --lw: 102.630%; --lh: 102.997%; --lx: -0.588%; --ly: -1.673%; }
.pm-people { --lw: 105.343%; --lh: 109.391%; --lx: -3.259%; --ly: -6.165%; }
.age-bush { --lw: 106.067%; --lh: 99.261%; --lx: -3.044%; --ly: 0.350%; }
.age-pav-people { --lw: 40.008%; --lh: 36.401%; --lx: 27.852%; --ly: 63.425%; }
.hsf-sc-kids { --lw: 102.567%; --lh: 101.456%; --lx: -2.194%; --ly: -1.131%; }
/* ---- Відступ між заголовком і текстом на планшеті й телефоні ----
Клієнт: «при зменшеному вікні й на мобільному відступ між заголовками й текстом дуже малий».
На десктопі (макет) відступ пропорційний кеглю: під заголовком сторінки послуг ≈ 0.56 кегля,
під заголовком розділу ≈ 0.68, під заголовком історії ≈ 0.9. А тут стояли фіксовані 12–22px,
які не росли разом із заголовком — на планшеті (кегль 36–48px) пропорція падала до 0.29–0.37.
Тому добиваємо різницю padding-bottom у em (від кегля самого заголовка): --hb — цільова
пропорція з макета, --hg — відступ, який уже дають наявні margin (заміряний, однаковий
для телефона й планшета). padding, а не margin — щоб не схлопувався з margin сусіднього блоку. */
@media (max-width: 1199.98px) {
.hero-title, .hsf-h1, .pm-h1, .hd-h1, .age-h1, .vol-h1 { --hb: 0.56; }
.h2-fsc, .h2-shelter, .h2-cd, .h2-rs, .age-h2, .vol-h2,
.hsf-t1, .hsf-t2, .pm-t1, .pm-t2, .hd-t1, .hd-t2, .hd-t3, .hd-t4 { --hb: 0.68; }
.bg-h1, .care-h1, .lp-h1, .fc-h1 { --hb: 0.9; }
.hsf-h1, .pm-h1, .hd-h1 { --hg: 14px; }
.hero-title, .age-h1, .vol-h1, .bg-h1, .care-h1, .lp-h1 { --hg: 16px; }
.h2-fsc, .h2-shelter, .h2-cd, .h2-rs, .age-h2, .vol-h2 { --hg: 14px; }
.hsf-t1, .hsf-t2, .pm-t1, .pm-t2 { --hg: 12px; }
.hd-t1, .hd-t2, .hd-t3, .hd-t4 { --hg: 18px; }
.fc-h1 { --hg: 22px; }
.hero-title, .hsf-h1, .pm-h1, .hd-h1, .age-h1, .vol-h1,
.h2-fsc, .h2-shelter, .h2-cd, .h2-rs, .age-h2, .vol-h2,
.hsf-t1, .hsf-t2, .pm-t1, .pm-t2, .hd-t1, .hd-t2, .hd-t3, .hd-t4,
.bg-h1, .care-h1, .lp-h1, .fc-h1 {
padding-bottom: max(0px, calc(var(--hb) * 1em - var(--hg)));
}
}
/* ---- Кільця-діаграми, де дуга = відсоток (Healthy & Supportive, Holistic Development) ----
Клієнт: «кільця не відповідають цифрам». Кільця були картинками з макета: на Holistic усі шість
(97/77/94/88/63/68%) — один і той самий hd-ring.svg, на Healthy 100% і 97% теж одна картинка.
Тепер дугу малює CSS за --pct із самої розмітки. Кольори й товщина — з тих SVG:
товщина 11.7 з 120 = 9.75% діаметра = 19.5% радіуса. --draw (0..360deg) — анімація домальовування. */
.pct-ring {
border-radius: 50%; pointer-events: none;
background: conic-gradient(var(--ring-on) calc(var(--pct) * 1%), var(--ring-off) 0);
-webkit-mask:
radial-gradient(farthest-side, #0000 80.5%, #000 calc(80.5% + 0.6px)),
conic-gradient(#000 var(--draw, 360deg), #0000 0);
-webkit-mask-composite: source-in;
mask:
radial-gradient(farthest-side, #0000 80.5%, #000 calc(80.5% + 0.6px)),
conic-gradient(#000 var(--draw, 360deg), #0000 0);
mask-composite: intersect;
}
.hsf-donut { --ring-on: #7A00D0; --ring-off: #D8B5F1; }
.hd-donut { --ring-on: #FF9B00; --ring-off: #3F64B3; }
.hsf-donut > .hsf-ring, .hsf-donut > .hsf-tip,
.hd-donut > .hd-ring, .hd-donut > .hd-tip { display: none !important; }
@media (max-width: 1199.98px) {
.hsf-donut > .pct-ring, .hd-donut > .pct-ring {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
.hsf-donut::before { content: none; } /* старе мобільне кільце (помаранчеве, з іншої сторінки) */
}
/* Previous / Next між історіями — той самий вигляд, що й на сторінках Our Impact (стрілка в колі +
текст), за вказівкою клієнта. Стоять під контентом перед футером; горизонтальні координати —
базові з цього файлу (пара по центру полотна), висоту задає CSS кожної історії. Фон тут світлий,
тож текст чорний, а білі стрілки інвертовано. */
.s-pager-story .nav-prev-label, .s-pager-story .nav-next-label { color: #000; opacity: 1; text-decoration: none; }
.s-pager-story .nav-prev-arrow, .s-pager-story .nav-next-arrow { filter: invert(1); }
.s-pager-story .nav-prev-off,
.s-pager-story .nav-next-off .nav-next-label, .s-pager-story .nav-next-off .nav-next-arrow { opacity: .2; }
@media (min-width: 1200px) {
/* над секціями з фото: на Caring рамка останнього фото тягнеться під футер і перекривала посилання */
.s-sec.s-pager-story { z-index: 3; }
}
@media (max-width: 1199.98px) {
.s-pager-story { order: 19; display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 34px var(--pad) 40px; }
}
/* Картка Related Stories (≤1279): текст обтікає іконку в правому верхньому куті.
Раніше під іконку резервувалась висота біля заголовка — при заголовку в один рядок між ним і
текстом лишався великий проміжок (клієнт: «зробіть заголовок ближче до тексту»). Тепер заголовок
стоїть над текстом зі звичайним відступом, а на початку тексту — невидимий float розміром із ту
частину іконки, що заходить на текст. Розміри (--ic-w / --ic-h) рахує main.js під кожну ширину. */
@media (max-width: 1199.98px) {
.card-body-wrap::before, .pm-card-body::before, .age-card-body::before,
.hsf-card-body::before, .hd-card-body::before,
.care-intro::before, .fc-intro::before, .bg-intro::before, .lp-body-1::before {
content: ""; float: right; width: var(--ic-w, 0px); height: var(--ic-h, 0px);
}
}
/* Телефон у ландшафті (клієнт: «шрифти завеликі, хоча верстка складається нормально»).
Ширина 844-932px потрапляє в планшетну розкладку, а з нею й планшетні розміри тексту —
на екрані заввишки ~400px це завелико. Верстку лишаємо планшетною, текст — як на телефоні. */
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 500px) {
.page { --h1: 34px; --h2: 28px; --body: 17px; --cap: 14px; --num: 30px; --ring-num: 24px; }
.card-title { font-size: 22px; }
}