/*
Theme Name: YADRO Lab
Theme URI: https://yadrolab.org
Author: YADRO Lab
Description: Класична PHP-тема YADRO Lab (ACF + Polylang + Contact Form 7). Побудована за design_handoff_wordpress_theme/README.md.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: yadrolab
*/

/* ==========================================================================
   1. FONTS
   ========================================================================== */
@font-face {
  font-family: 'Esqadero FF CY 4F';
  src: url('assets/fonts/Esqadero_FF_CY_4F_Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clear Sans';
  src: url('assets/fonts/Clear_Sans_Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clear Sans';
  src: url('assets/fonts/Clear_Sans_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clear Sans';
  src: url('assets/fonts/Clear_Sans_Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Clear Sans';
  src: url('assets/fonts/Clear_Sans_Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. DESIGN TOKENS (custom properties) — значення з README "Design Tokens"
   ========================================================================== */
:root{
  --yl-teal: #01494F;
  --yl-teal-dark: #013F44;
  --yl-teal-darker: #012E32;
  --yl-red: #E20B17;
  --yl-coral: #EE7654;
  --yl-wine: #97394E;
  --yl-amber: #DA8B50;
  --yl-white: #ffffff;
  --yl-paper: #F7F5F2;
  --yl-paper-dim: #EFECE7;
  --yl-paper-dim-2: #E5E1DA;
  --yl-line-on-teal: rgba(255,255,255,.16);
  --yl-line-on-paper: rgba(1,73,79,.14);

  --yl-font-head: 'Esqadero FF CY 4F', Georgia, serif;
  --yl-font-body: 'Clear Sans', Arial, sans-serif;

  --yl-max: 1440px;
  --yl-pad: 64px;
  --yl-gap-card: 22px;
}
@media (max-width: 900px){
  :root{ --yl-pad: 24px; }
}
@media (max-width: 480px){
  :root{ --yl-pad: 16px; }
}

/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--yl-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--yl-teal);
  background: var(--yl-paper);
}
/* Клас додає main.js, поки відкрите мобільне меню (.yl-header__nav.is-open) —
   блокує скрол фонового контенту, щоб сторінка не прокручувалась "крізь"
   відкрите меню. */
body.yl-menu-open{ overflow:hidden; }
/* Видима фокус-обводка для клавіатурної навігації по бургеру, пунктах
   меню й мовному перемикачу — раніше цих елементів не було видно при
   Tab-навігації. */
.yl-burger:focus-visible,
.yl-nav a:focus-visible,
.yl-lang a:focus-visible{
  outline: 2px solid var(--yl-red);
  outline-offset: 2px;
}
h1,h2,h3,h4{
  font-family: var(--yl-font-head);
  font-weight: 400;
  margin: 0 0 .4em;
  line-height: 1.1;
}
p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin:0; padding:0; list-style:none; }
button, input, textarea{ font-family: inherit; font-size: inherit; }
/* Уся сторінка (не лише текст) обмежена 1440px і центрована — README,
   "Design Tokens: Content max-width: 1440px, centered". На широких
   екранах з обох боків видно білі/paper поля; секції всередині (шапка,
   hero, teal-блоки) фарбовані на всю ширину ЦІЄЇ обгортки, а не вікна
   браузера. */
.yl-site{ max-width: var(--yl-max); margin: 0 auto; background: var(--yl-paper); }

.yl-wrap{ max-width: var(--yl-max); margin: 0 auto; padding-left: var(--yl-pad); padding-right: var(--yl-pad); }
.yl-kicker{
  font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--yl-red); margin-bottom: 10px; display:block;
}
.yl-kicker.is-on-dark{ color: var(--yl-coral); }
.yl-btn{
  display:inline-block; padding: 14px 26px; font-weight: 500; font-size: 15px; border: 1px solid transparent; cursor:pointer;
}
.yl-btn--filled{ background: var(--yl-red); color: #fff; }
.yl-btn--filled:hover{ background: #c30a15; }
.yl-btn--outline{ background: transparent; border-color: currentColor; }
.yl-btn--outline:hover{ background: rgba(255,255,255,.08); }
.yl-btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 22px; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.yl-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--yl-paper);
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #01494F, #E20B17, #97394E, #DA8B50, #EE7654) 1;
}
.yl-header__inner{
  max-width: var(--yl-max); margin: 0 auto; padding: 18px var(--yl-pad);
  display:flex; align-items:center; gap: 48px;
}
.yl-header__left{ display:flex; align-items:center; gap: 48px; min-width:0; }
.yl-header__logo svg,.yl-header__logo img{ height: 34px; width:auto; display:block; flex:none; }
.yl-nav{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.yl-nav li{ position:relative; }
.yl-nav a{ font-weight:500; font-size:16px; white-space:nowrap; display:inline-flex; align-items:center; }
.yl-nav a:hover{ color: var(--yl-red); }
.yl-nav > li.current-menu-item > a,
.yl-nav > li.current_page_item > a{ color: var(--yl-red); border-bottom:2px solid var(--yl-red); padding-bottom:2px; }
/* Каретка ▾ на пунктах із підменю */
.yl-nav .menu-item-has-children > a::after{
  content:"\25BE"; margin-left:6px; font-size:.72em; opacity:.7;
}
/* Випадне підменю */
.yl-nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:210px;
  background: var(--yl-paper); border:1px solid var(--yl-line-on-paper);
  padding:8px 0; z-index:60; box-shadow:0 6px 20px rgba(1,46,50,.12);
}
.yl-nav .menu-item-has-children:hover > .sub-menu,
.yl-nav .menu-item-has-children:focus-within > .sub-menu{ display:block; }
.yl-nav .sub-menu li a{ display:block; padding:9px 18px; font-size:15px; color: var(--yl-teal); border-bottom:none; }
.yl-nav .sub-menu li a:hover{ background:#fff; color: var(--yl-red); }
.yl-nav .sub-menu li.current-menu-item > a,
.yl-nav .sub-menu li.current_page_item > a{ color: var(--yl-red); border-bottom:none; }
.yl-header__right{ display:flex; align-items:center; gap:18px; margin-left:auto; flex:none; }
.yl-lang{ display:flex; gap:8px; font-size:14px; font-weight:500; }
.yl-lang a{ color: rgba(1,73,79,.35); }
.yl-lang a.current-lang{ color: var(--yl-red); }
/* Touch-таргет ≥44x44 (WCAG 2.5.5 / Apple HIG) для пунктів мовного
   перемикача — раніше це був голий текст без власної зони дотику. */
.yl-lang a{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; }
.yl-burger{
  display:none; background:none; border:none; font-size:24px; cursor:pointer; color: var(--yl-teal); line-height:1;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
@media (max-width: 900px){
  .yl-header__nav{ display:none; }
  .yl-header__nav.is-open{
    display:block; position:absolute; top:100%; left:0; right:0; background: var(--yl-paper);
    border-bottom:1px solid var(--yl-line-on-paper); padding: 8px var(--yl-pad) 20px;
    box-shadow: 0 12px 24px rgba(1,46,50,.14);
  }
  .yl-header__nav.is-open .yl-nav{ flex-direction:column; gap:14px; }
  .yl-burger{ display:flex; }
  /* Корінна причина накладення в шапці на вузьких екранах: жоден
     елемент .yl-header__right (лого/мова/CTA/бургер) не стискався й не
     зменшувався — на ~390px це давало дефіцит ~70-80px ширини, який
     браузер "вирішував" накладенням елементів один на одного замість
     переносу. Тут звужуємо CTA й лого, щоб усе гарантовано влазило. */
  .yl-header__logo svg,.yl-header__logo img{ height: 26px; }
  .yl-header__left{ gap: 16px; }
  .yl-header__right{ gap: 10px; }
  .yl-header__right .yl-btn{ padding: 9px 14px; font-size: 13px; white-space: nowrap; }
  /* Клієнт попросив: на мобільному текст перемикача мови має бути
     жирнішим і того ж кольору, що й бургер (var(--yl-teal), суцільний,
     без прозорості) — раніше він був rgba(1,73,79,.35) (бляклий) для
     неактивної мови й font-weight:500. Стосується лише посилання на
     ІНШУ мову (не .current-lang, який лишається виділеним кольором
     var(--yl-red), як і раніше). */
  .yl-lang a{ font-weight:700; color: var(--yl-teal); }
  .yl-lang a.current-lang{ color: var(--yl-red); }
}
@media (max-width: 480px){
  /* На найвужчих екранах (iPhone SE/12/13 mini тощо, 375-390px) навіть
     стиснутий варіант вище може бути затісним — ще трохи компактніше.
     Раніше тут ще й ховали мовний перемикач (.yl-lang{display:none}),
     щоб гарантовано звільнити місце — але відтоді лого й CTA стали ще
     компактнішими (22px / 12px+8x12), тож клієнт попросив повернути
     перемикач і спробувати вмістити все разом. Додатково стиснуто сам
     .yl-lang (менший gap і font-size) саме на цій ширині, щоб дати
     запас місця поруч із лого+CTA+бургером. */
  .yl-header__inner{ gap: 8px; }
  .yl-header__left{ gap: 10px; }
  /* Логотип-wordmark має пропорції ~5.4:1 (viewBox 595x111) — навіть
     невелика висота дає відносно широкий SVG (22px висоти ≈ 118px
     ширини). При поверненні мовного перемикача на цій ширині це майже
     впритул до нього; зменшено до 20px (≈107px ширини), щоб гарантовано
     лишався зазор. */
  .yl-header__logo svg,.yl-header__logo img{ height: 20px; }
  .yl-lang{ gap: 4px; font-size: 12px; }
  .yl-lang a{ min-width: 24px; min-height: 24px; }
  /* Клієнт запропонував: на найвужчих екранах показувати лише ОДНЕ
     посилання — те, на яке можна перемкнутись (не поточну мову). У
     розмітці (inc/polylang.php, yadrolab_language_switcher()) поточна
     мова рендериться з класом .current-lang — просто ховаємо його тут,
     лишається клікабельне посилання на іншу мову. Економить ще трохи
     ширини в шапці на цьому брейкпоінті. */
  .yl-lang a.current-lang{ display:none; }
  .yl-header__right{ gap: 6px; }
  .yl-header__right .yl-btn{ padding: 8px 12px; font-size: 12px; }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
/* Hero точно за концептом (design-reference, data-dc-tpl 21–33):
   фото grayscale+contrast, зверху тіловий multiply 0.82, зверху лівий
   градієнт; контент притиснутий до низу секції. */
.yl-hero{
  position: relative; overflow: hidden;
  min-height: 620px;
  display:flex; align-items:flex-end;
  background: var(--yl-teal); color:#fff;
}
.yl-hero__bg{
  position:absolute; inset:0; z-index:0; margin:0;
  width:100%; height:100%; object-fit:cover;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.08);
}
/* Шар 1 — суцільний тіл, multiply 0.82 (робить фото зелено-тіловим) */
.yl-hero__bg::after{
  content:''; position:absolute; inset:0;
  background: #01494F; mix-blend-mode: multiply; opacity: .82;
}
/* Шар 2 — лівий темний градієнт */
.yl-hero__tint{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(1,52,56,.92) 0%, rgba(1,52,56,.55) 55%, rgba(1,52,56,.2) 100%);
  pointer-events:none;
}
.yl-hero__content{
  position:relative; z-index:2;
  padding: 96px var(--yl-pad) 72px;
  max-width: 1180px;
  display:flex; flex-direction:column; gap:32px;
}
.yl-hero__eyebrow{
  display:flex; align-items:center; gap:14px; margin:0;
  color: var(--yl-coral);
}
.yl-hero__eyebrow::before{
  content:''; width:34px; height:1px; background: var(--yl-red); flex:none;
}
.yl-hero__title-1{ margin:0; color: var(--yl-coral); font-size: 32px; line-height:1.15; max-width:940px; }
.yl-hero__title-2{ margin:0; color:#fff; font-size: clamp(24px, 4vw, 54px); line-height:1.1; max-width:1180px; }
.yl-hero__body{ margin:0; font-size:20px; line-height:1.6; max-width: 640px; color: rgba(255,255,255,.86); }
.yl-hero .yl-btn-row{ margin-top:0; padding-top:8px; gap:16px; }
.yl-hero .yl-btn--outline{ border-color: rgba(255,255,255,.5); }
/* .yl-hero__title-1 і .yl-hero__body не мали окремого мобільного розміру —
   на 390px успадковували десктопні 32px/20px, що затісно для eyebrow-рядка
   над заголовком. Трохи зменшено під мобільний. */
@media (max-width: 900px){
  .yl-hero__title-1{ font-size: 24px; }
  .yl-hero__body{ font-size: 16px; }
  /* Порожній проміжок над "CARPATHIAN REGION..." на скріншоті клієнта —
     це НЕ padding контенту (спершу здавалось, що причина в ньому, але
     зменшення padding-top не дало візуального ефекту): .yl-hero має
     фіксовану min-height:620px і align-items:flex-end — контент
     притискається до НИЗУ секції. Секція заввишки 620px на мобільному,
     де контенту реально менше (нижче й тонший заголовок), просто
     лишає порожній простір ЗВЕРХУ, а не через padding. Справжній фікс —
     зменшити min-height секції на мобільному. padding-top лишаємо
     зменшеним (32px замість 96px) — це теж коректно, просто саме по
     собі малопомітно без цієї зміни. */
  .yl-hero{ min-height: 480px; }
  .yl-hero__content{ padding-top: 32px; }
}

/* ==========================================================================
   6. LIVE STRIP
   ========================================================================== */
.yl-live{
  background: var(--yl-teal-darker); color:#fff; font-size:14px;
  padding: 16px var(--yl-pad);
  display:flex; align-items:center; gap: 28px; flex-wrap:wrap;
}
.yl-live__dot{
  width:8px; height:8px; border-radius:50%; background: var(--yl-red); flex:none;
  animation: yl-live-pulse 1.6s ease-in-out infinite;
}
.yl-live__label{ display:flex; align-items:center; gap:10px; font-weight:500; white-space:nowrap; }
.yl-live__cta{ margin-left:auto; color: var(--yl-coral); font-weight:500; }
@keyframes yl-live-pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
/* .yl-live — рядок із кількома inline-елементами й gap:28px не мав
   окремого мобільного розміру: на 390px 14px-текст із desktop-відступами
   між елементами виглядав затісно. Зменшено шрифт і gap лише тут. */
@media (max-width: 900px){
  .yl-live{ font-size: 14px; gap: 6px; }
}

/* ==========================================================================
   7. NUMBERS
   ========================================================================== */
.yl-numbers{ background: var(--yl-paper); padding: 70px var(--yl-pad); }
.yl-numbers__head{
  display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap;
  border-bottom: 1px solid var(--yl-line-on-paper); padding-bottom: 24px; margin-bottom: 1px;
}
.yl-numbers__head h2{ font-size: 34px; max-width: 620px; }
.yl-numbers__note{
  font-size:13px; max-width:340px; border-left: 2px solid var(--yl-amber); padding-left:18px;
}
/* .yl-numbers__head h2 не мав мобільного розміру — на 390px успадковував
   десктопні 34px. Зменшено, щоб не тіснити .yl-numbers__note поруч. */
@media (max-width: 900px){
  .yl-numbers__head h2{ font-size: 24px; }
}
.yl-numbers__grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--yl-line-on-paper);
  border-top: 1px solid var(--yl-line-on-paper);
}
.yl-stat{ background: var(--yl-paper); padding: 32px 28px 30px; }
.yl-stat__num{ font-size:60px; font-weight:300; line-height:1; }
.yl-stat__label{ color: var(--yl-red); font-weight:500; margin: 6px 0 4px; }
.yl-stat__desc{ font-size:14px; margin:0; }
.yl-stat--cta{ background: var(--yl-teal); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; }
.yl-stat--cta a{ color: var(--yl-coral); font-weight:500; }
@media (max-width: 900px){
  .yl-numbers__grid{ grid-template-columns: repeat(2,1fr); }
  /* .yl-stat__num не мав мобільного розміру — 60px десктопний в картці
     на пів-ширини (2 колонки) на 390px виглядав надто масивно. */
  .yl-stat__num{ font-size: 44px; }
}
@media (max-width: 480px){ .yl-numbers__grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   8. DIVIDER (decorative pulsing rings)
   ========================================================================== */
.yl-divider{ position:relative; height: 64px; background: var(--yl-paper); }
.yl-divider hr{ position:absolute; top:50%; left:0; right:0; margin:0; border:none; border-top:1px solid var(--yl-line-on-paper); }
.yl-divider__rings{ position:absolute; top:50%; left:50%; width:1px; height:1px; }
.yl-divider__rings span{
  position:absolute; top:0; left:0; width: 10px; height:10px; margin:-5px;
  border:1px solid var(--yl-red); border-radius:50%; opacity:0;
  animation: yl-ping 2.4s ease-out infinite;
}
.yl-divider__rings span:nth-child(2){ animation-delay:.8s; }
.yl-divider__rings span:nth-child(3){ animation-delay:1.6s; }
@keyframes yl-ping{ 0%{ transform:scale(.4); opacity:.8;} 100%{ transform:scale(6); opacity:0;} }

/* ==========================================================================
   9. COMPETENCIES
   ========================================================================== */
.yl-comp{ background: var(--yl-paper); padding: 88px var(--yl-pad); }
.yl-section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:44px;
}
.yl-section-head h2{ font-size: 30px; max-width: 640px; }
.yl-section-head__link{ font-weight:500; border-bottom:1px solid var(--yl-line-on-paper); white-space:nowrap; }
.yl-comp__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--yl-gap-card); }
.yl-comp__card{ background:#fff; border-top:3px solid var(--yl-teal); padding: 30px 28px 28px; }
.yl-comp__index{ font-size:26px; color: var(--yl-line-on-paper); }
.yl-comp__card h3{ font-size:22px; margin: 8px 0 10px; }
.yl-comp__for{
  font-size:13px; border-top:1px solid var(--yl-line-on-paper); padding-top:14px; margin-top:14px;
}
@media (max-width: 900px){
  .yl-comp__grid{ grid-template-columns: 1fr; }
  /* .yl-section-head h2 (використовується і в Competencies, і в Projects)
     не мав мобільного розміру — 30px на 390px завеликий для секційного
     заголовка поруч зі стрілкою-посиланням. */
  .yl-section-head h2{ font-size: 24px; }
}

/* ==========================================================================
   10. PROJECTS
   ========================================================================== */
.yl-projects{ background: var(--yl-paper-dim); padding: 88px var(--yl-pad); }
.yl-projects__grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.yl-project{ background:#fff; }
.yl-project__photo{
  position:relative; min-height:230px; background-size:cover; background-position:center;
  display:flex; align-items:flex-start; padding-top:20px;
}
.yl-project__photo::after{
  content:''; position:absolute; inset:0; background: var(--yl-tint, rgba(1,73,79,.68)); mix-blend-mode: multiply; transition: opacity .3s;
}
.yl-project:hover .yl-project__photo::after{ opacity:0; }
.yl-project__status{
  position:relative; z-index:1; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; background: var(--yl-red); color:#fff;
}
.yl-project__status.is-completed{ background: var(--yl-teal); }
.yl-project__body{ padding: 28px; }
.yl-project__meta{ font-size:13px; margin-bottom:8px; }
.yl-project__body h3{ font-size:22px; }
.yl-project__role{ font-weight:500; margin: 6px 0; }
.yl-project__slug{ font-size:12px; color: rgba(1,73,79,.55); }
@media (max-width: 900px){ .yl-projects__grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   11. HOW WE JOIN (formats)
   ========================================================================== */
.yl-join{ display:grid; grid-template-columns: 1fr 1fr; background: var(--yl-teal); color:#fff; }
.yl-join__intro{ padding: 88px 56px 88px var(--yl-pad); position:relative; }
.yl-join__intro h2{ font-size:32px; color:#fff; max-width:480px; }
.yl-join__intro p{ font-size:18px; line-height:1.65; max-width:460px; }
.yl-join__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background: rgba(255,255,255,.08); }
.yl-join__tile{ background: var(--yl-teal-dark); padding: 30px 26px; }
.yl-join__tile-index{ color: var(--yl-coral); font-size:22px; display:block; margin-bottom:8px; }
.yl-join__tile h4{ font-size:19px; font-weight:500; font-family: var(--yl-font-body); margin:0 0 6px; }
.yl-join__tile p{ font-size:14px; margin:0; }
@media (max-width: 900px){
  .yl-join{ grid-template-columns:1fr; } .yl-join__grid{ grid-template-columns:1fr 1fr; }
  /* .yl-join__intro h2/p не мали мобільного розміру — 32px/18px десктопні
     значення затісні в колонці-вступі на 390px. */
  .yl-join__intro h2{ font-size: 24px; }
  .yl-join__intro p{ font-size: 15px; }
}

/* ==========================================================================
   12. COMMUNITY
   ========================================================================== */
.yl-community{ display:grid; grid-template-columns: 1fr 1fr; background: var(--yl-paper); }
.yl-community__photo{
  min-height:440px; background-size:cover; background-position:center;
  position:relative; display:flex; align-items:flex-end; padding:24px;
}
.yl-community__photo::after{ content:''; position:absolute; inset:0; background: rgba(1,73,79,.55); mix-blend-mode:multiply; }
.yl-community__caption{ position:relative; z-index:1; background: var(--yl-teal-darker); color:#fff; font-size:12px; padding:8px 14px; }
.yl-community__body{ padding: 80px 64px 80px 56px; }
.yl-community__body h2{ font-size:30px; }
.yl-quote{ background:#fff; border-left:3px solid var(--yl-red); padding:20px 22px; margin: 18px 0; }
.yl-quote p{ font-size:17px; font-style:italic; margin:0 0 8px; }
.yl-quote cite{ font-size:13px; font-style:normal; }
.yl-mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background: var(--yl-line-on-paper); margin: 18px 0; }
.yl-mini-stats > div{ background:#fff; padding: 20px 22px; }
.yl-mini-stats .num{ font-size:34px; font-weight:300; display:block; }
.yl-mini-stats .label{ font-size:14px; }
@media (max-width: 900px){
  .yl-community{ grid-template-columns:1fr; } .yl-community__body{ padding: 56px var(--yl-pad); }
  /* .yl-community__body h2 і .yl-quote p не мали мобільного розміру —
     30px/17px десктопні на 390px завеликі/затісні в одноколонковій
     розкладці. */
  .yl-community__body h2{ font-size: 24px; }
  .yl-quote p{ font-size: 15px; }
}

/* ==========================================================================
   13. GEOGRAPHY
   ========================================================================== */
/* align-items:center — карта (.yl-geo__map) фіксованої висоти через
   aspect-ratio, тому за замовчуванням (stretch) вона притискається до
   верху блоку, а порожній простір лишається знизу, коли текстова колонка
   зліва вища за карту. center вирівнює карту по вертикалі всередині своєї
   половини блоку. */
.yl-geo{ display:grid; grid-template-columns: 34% 66%; align-items:center; background: var(--yl-teal-dark); color:#fff; }
.yl-geo__aside{ padding: 80px 40px 80px var(--yl-pad); }
.yl-geo__aside h2{ font-size:26px; color:#fff; }
.yl-geo-list{ display:flex; flex-direction:column; gap:1px; background:#fff; margin:18px 0; }
.yl-geo-row{
  display:flex; justify-content:space-between; padding:13px 16px; background: var(--yl-teal-dark);
  transition: background .2s;
}
.yl-geo-row .count{ color: var(--yl-coral); font-weight:500; }
.yl-geo-row[data-cc-active="true"]{ background: var(--yl-teal-darker); }
.yl-geo__foot{ font-size:12px; color: rgba(255,255,255,.5); }
/* aspect-ratio задається інлайново з PHP (front-page.php), розрахований
   від реального viewBox поточного SVG (inc/geo-map.php,
   yadrolab_get_geo_map_aspect_ratio()) — так підтримується будь-який
   SVG, який клієнт завантажить, автоматично. 960/640 тут — лише запасний
   варіант, якщо з якоїсь причини інлайновий style не застосувався.
   Раніше тут був захардкоджений 1240/620, що НЕ збігався з реальним
   960:640 вбудованої карти — SVG розтягувався нерівномірно, і мітки міст
   "спливали" відносно контурів країн (клік в адмінці ≠ позиція на сайті). */
.yl-geo__map{ width:100%; aspect-ratio: 960/640; overflow:hidden; }
/* .yl-geo-map — обгортка навколо самого SVG (вбудованого або завантаженого
   клієнтом через Кастомайзер, template-parts/geo-map.php). position:relative
   потрібен, щоб міста (.yl-geo-map__cities, HTML-шар поверх SVG) рахували
   свої X/Y-відсотки відносно розміру карти, а не всієї сторінки. */
.yl-geo-map{ position:relative; width:100%; height:100%; }
.yl-geo-map svg{ display:block; width:100%; height:100%; }
.yl-geo-countries path{ transition: fill .2s, stroke-width .2s; }
.yl-geo-countries path.is-active{ fill: var(--yl-red) !important; }
/* Мітки міст — CPT geo_city, координати у % (inc/geo-map.php,
   yadrolab_get_geo_cities()). HTML-шар поверх SVG, а не елементи всередині
   самого файлу — тому працює однаково зі старою вбудованою картою і з
   будь-яким SVG, завантаженим клієнтом, незалежно від його розмітки. */
.yl-geo-map__cities{ position:absolute; inset:0; pointer-events:none; }
/* ВАЖЛИВО: на координаті (left/top у %) стоїть САМА КРАПКА, а не центр
   «крапка+підпис». Раніше .yl-geo-map__city був flex-рядком (крапка+текст)
   із transform:translate(-50%,-50%), тобто на координаті опинявся центр
   усього рядка — і крапку зсувало вліво на пів-ширини підпису (для
   довгого «Ужгород · штаб» — на ~50px). У пікері адмінки на кліку стоїть
   гола крапка, тож вони не збігались. Тепер .yl-geo-map__city — це точка-
   якір рівно на координаті, крапка центрується на ній, а підпис іде
   праворуч від неї (як у макеті). */
.yl-geo-map__city{ position:absolute; }
.yl-geo-map__dot{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background: var(--yl-red); }
.yl-geo-map__city em{ position:absolute; left:0; top:50%; transform:translateY(-50%); margin-left:12px; font-style:normal; font-size:13px; color:#fff; font-weight:400; white-space:nowrap; }
.yl-geo-map__city.is-hq .yl-geo-map__dot{ width:12px; height:12px; }
.yl-geo-map__city.is-hq em{ font-weight:500; font-size:14px; margin-left:14px; }
@media (max-width: 900px){
  .yl-geo{ grid-template-columns:1fr; }
  /* .yl-geo__aside h2 не мав мобільного розміру — 26px десктопний трохи
     завеликий для вузької колонки на 390px. */
  .yl-geo__aside h2{ font-size: 22px; }
}
/* На вузьких екранах контури країн (fill/stroke заданi як атрибути
   прямо в SVG-розмітці, inc/geo-map.php) стають майже невиразними: та
   сама різниця кольорів (#013F44 фон / #0A5A60 країни), яка нормально
   читається на широкому десктопному блоці, на телефоні через дрібний
   масштаб і тонку 1.4px обводку (у координатах viewBox, тобто ще
   тонша візуально) зливається в суцільну пляму. Явно перебиваємо
   fill/stroke країн і товщину обводки лише на мобільному — контраст
   вищий, кордони видно навіть на маленькому екрані. Стосується лише
   вбудованої карти (атрибути на <path data-cc="...">); завантажена
   клієнтом власна SVG-карта (Кастомайзер) може мати інші атрибути —
   це поза контролем теми. */
@media (max-width: 600px){
  .yl-geo-countries path{
    fill: #12747c !important;
    stroke: rgba(255,255,255,.85) !important;
    stroke-width: 2.2px !important;
  }
  /* Підписи міст (em) мають фіксований font-size і white-space:nowrap —
     на десктопі, де карта широка, сусідні міста (напр. Ужгород, Львів,
     Ів.-Франківськ) стоять далеко одне від одного в пікселях і підписи
     не перетинаються. На мобільному та сама карта стискається в
     ширину ~340-390px, а X/Y-координати міст (у %) лишаються тими
     самими — тому в пікселях міста опиняються набагато ближче одне
     до одного, і однакового розміру підписи накладаються текст на
     текст. Зменшуємо шрифт і відступ від крапки, щоб підписи не
     зливались. */
  .yl-geo-map__city em{ font-size:10px; margin-left:7px; }
  .yl-geo-map__city.is-hq em{ font-size:11px; margin-left:8px; }
  .yl-geo-map__dot{ width:6px; height:6px; }
  .yl-geo-map__city.is-hq .yl-geo-map__dot{ width:9px; height:9px; }
}

/* ==========================================================================
   14. HISTORY / TIMELINE
   ========================================================================== */
.yl-history{ background: var(--yl-paper); padding: 80px var(--yl-pad) 88px; }
.yl-history h2{ font-size: 30px; margin-bottom: 52px; }
.yl-timeline{ display:grid; grid-template-columns: repeat(5,1fr); gap:28px; border-top:2px solid var(--yl-line-on-paper); padding-top:20px; }
.yl-timeline__era .range{ font-size:22px; display:block; margin-bottom:10px; }
.yl-timeline__era .range.is-current{ color: var(--yl-coral); }
.yl-timeline__era p{ font-size:14px; margin:0; }
@media (max-width: 900px){
  .yl-timeline{ grid-template-columns: 1fr 1fr; }
  /* .yl-history h2 не мав мобільного розміру — 30px десктопний завеликий
     на 390px. */
  .yl-history h2{ font-size: 24px; }
}
@media (max-width: 480px){ .yl-timeline{ grid-template-columns: 1fr; } }

/* ==========================================================================
   15. MATERIALS + UPDATES
   ========================================================================== */
.yl-mat-upd{ display:grid; grid-template-columns: 58% 42%; }
.yl-materials{ background: var(--yl-paper-dim); padding: 80px 48px 80px var(--yl-pad); }
.yl-materials h2{ font-size:30px; }
.yl-mat-list{ display:flex; flex-direction:column; gap:1px; background: var(--yl-line-on-paper); margin-top:20px; }
.yl-mat-card{ display:flex; gap:20px; background:#fff; padding:24px 26px; }
.yl-mat-badge{ flex:none; width:78px; height:56px; display:flex; align-items:center; justify-content:center; background: var(--yl-teal); color:#fff; font-size:12px; }
.yl-mat-card h4{ font-size:20px; font-weight:500; font-family:var(--yl-font-body); margin:0 0 6px; }
.yl-mat-card p{ font-size:15px; margin:0 0 6px; }
.yl-mat-card .meta{ font-size:13px; color: rgba(1,73,79,.6); }
.yl-updates{ background: var(--yl-paper-dim-2); padding: 80px var(--yl-pad) 80px 48px; }
.yl-updates h2{ font-size:26px; }
/* Тепер .yl-update-item — посилання <a> (веде на повний текст новини,
   single.php), а не просто <div>: тому знімаємо стандартне підкреслення
   і колір посилання, лишаючи вигляд ідентичним попередньому, плюс легке
   виділення кольором при наведенні, щоб було видно, що це клікабельно. */
.yl-update-item{
  display:block; border-bottom:1px solid var(--yl-line-on-paper);
  padding-bottom:20px; margin-bottom:20px;
  color: inherit; text-decoration:none;
}
.yl-update-item:hover .title{ color: var(--yl-red); }
.yl-update-item .date{ font-size:13px; display:block; margin-bottom:6px; }
.yl-update-item .title{ font-size:17px; font-weight:500; }
.yl-updates__cta{ color: var(--yl-red); font-weight:500; font-size:15px; }
@media (max-width: 900px){
  .yl-mat-upd{ grid-template-columns:1fr; }
  /* Жоден заголовок у цьому блоці не мав мобільного розміру — на 390px
     успадковували десктопні значення (30px/26px/20px/17px), завеликі
     для одноколонкової розкладки на телефоні. */
  .yl-materials h2{ font-size: 24px; }
  .yl-updates h2{ font-size: 22px; }
  .yl-mat-card h4{ font-size: 18px; }
  .yl-update-item .title{ font-size: 16px; }
}

/* ==========================================================================
   16. PARTNERS MARQUEE
   ========================================================================== */
.yl-partners{ background: var(--yl-paper); padding: 72px var(--yl-pad); border-top:1px solid var(--yl-line-on-paper); position:relative; }
.yl-partners__head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; flex-wrap:wrap; gap:16px; }
.yl-partners__head h2{ font-size:22px; }
.yl-marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.yl-marquee__track{ display:flex; gap:16px; width:max-content; animation: yl-marquee 26s linear infinite; }
.yl-marquee:hover .yl-marquee__track{ animation-play-state: paused; }
.yl-marquee__item{ min-height:78px; min-width:150px; border:1px solid var(--yl-line-on-paper); display:flex; align-items:center; justify-content:center; padding:10px; }
.yl-marquee__item img{ max-height:48px; width:auto; }
@keyframes yl-marquee{ to{ transform: translateX(-50%); } }

/* ==========================================================================
   17. FINAL CTA + FORM
   ========================================================================== */
.yl-final{ position:relative; overflow:hidden; background: var(--yl-teal); color:#fff; padding: 88px var(--yl-pad); }
.yl-final::before{ content:''; position:absolute; inset:0; z-index:0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px); }
/* README screen 14: фото-панель праворуч (44%), тонована; форма-картка
   лягає поверх неї. */
.yl-final__photo{
  position:absolute; top:0; right:0; bottom:0; width:44%; z-index:0;
  background-size:cover; background-position:center;
  filter: grayscale(1) contrast(1.05);
}
.yl-final__photo::after{ content:''; position:absolute; inset:0; background:#01494F; mix-blend-mode:multiply; opacity:.72; }
/* Декоративні концентричні кільця знизу-зліва */
.yl-final__rings{ position:absolute; left:-30px; bottom:-30px; width:1px; height:1px; z-index:0; }
.yl-final__rings span{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.13); border-radius:50%;
}
.yl-final__rings span:nth-child(1){ width:190px; height:190px; }
.yl-final__rings span:nth-child(2){ width:320px; height:320px; }
.yl-final__rings span:nth-child(3){ width:460px; height:460px; animation: yl-ring-pulse 3.4s ease-in-out infinite; }
@keyframes yl-ring-pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.yl-final__grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:start; }
.yl-final__intro h2{ font-size: 40px; color:#fff; line-height:1.1; }
.yl-final__intro p{ font-size:18px; line-height:1.65; }
.yl-final__note{ font-size:15px; color: rgba(255,255,255,.62); }
.yl-final__form{ background: var(--yl-paper); color: var(--yl-teal); padding:34px; }
.yl-final__form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.yl-final__form label{ font-size:13px; font-weight:500; display:block; margin-bottom:6px; }
.yl-final__form input, .yl-final__form textarea{
  width:100%; background:#fff; border:1px solid var(--yl-line-on-paper); padding: 11px 12px; margin-bottom:14px;
}
.yl-final__form textarea{ min-height:96px; resize:vertical; }
.yl-final__form button{ width:100%; }
.wpcf7-form-control-wrap{ display:block; }
@media (max-width: 900px){
  .yl-final__grid{ grid-template-columns:1fr; } .yl-final__form .row{ grid-template-columns:1fr; }
  /* .yl-final__intro h2/p не мали мобільного розміру — 40px/18px десктопні
     задосить великі для 390px, особливо h2 (40px). */
  .yl-final__intro h2{ font-size: 28px; }
  .yl-final__intro p{ font-size: 16px; }
}

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.yl-footer{ background: var(--yl-teal-darker); color:#fff; padding: 64px var(--yl-pad) 40px; }
.yl-footer__grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.yl-footer__logo svg{ height:52px; width:auto; margin-bottom:16px; }
.yl-footer__blurb{ font-size:14px; max-width:380px; line-height:1.55; }
.yl-footer__legal{ font-size:13px; color: rgba(255,255,255,.55); }
.yl-footer__col-title{
  color: var(--yl-coral); font-size:13px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; font-family: var(--yl-font-body); margin:0 0 18px;
}
.yl-footer nav ul{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:0; padding:0; list-style:none; }
.yl-footer nav a{ font-size:15px; }
.yl-footer nav a:hover{ color: var(--yl-coral); }
.yl-footer__contact p{ margin:0 0 14px; font-size:15px; }
.yl-footer__contact a:hover{ color: var(--yl-coral); }
.yl-footer__social{ color: rgba(255,255,255,.8); }
.yl-footer__contact .yl-btn{ margin-top:6px; }
.yl-footer__bottom{ border-top:1px solid rgba(255,255,255,.14); padding-top:20px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color: rgba(255,255,255,.7); }
.yl-footer__bottom a{ text-decoration:underline; }
@media (max-width: 900px){ .yl-footer__grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   19. EU FUNDING BLOCK (донорський блок / грант Interreg NEXT LEAD-UP)
   ========================================================================== */
.yl-eu{
  background: var(--yl-paper);
  color: var(--yl-teal);
  padding: 40px var(--yl-pad);
  /* Горизонтальні лінії прибрано за побажанням клієнта: більше немає
     ні верхньої межі блоку, ні лінії під рядком логотипів. Замість них
     — одна вертикальна вісь (2/3) через логотипи і текст (нижче). */
}
.yl-eu__inner{ max-width: var(--yl-max); margin: 0 auto; }

.yl-eu__logos{
  display:flex; align-items:center; flex-wrap:wrap; gap:32px;
  margin-bottom: 36px;
}
/**
 * Дві зони за макетом: ліва рівно 2/3 ширини блоку, права рівно 1/3 —
 * тепер через CSS Grid (2fr auto 1fr: ліва зона / розділювач / права
 * зона), а не flex. З flex зони стискались до ширини вмісту (мало
 * логотипів — вузька зона), і розділювач опинявся одразу після
 * останнього лого замість межі 2/3, як у макеті Illustrator. Grid-трек
 * має фіксовану частку від повної ширини незалежно від вмісту, а
 * розділювач отримує власну auto-колонку і не "з'їдає" простір жодної
 * зони. Логотипи всередині зони прижаті до лівого краю зони (flex
 * всередині клітинки), з проміжком між ними.
 */
.yl-eu__logos--split{
  display:grid; grid-template-columns: 2fr auto 1fr; align-items:center;
  flex-wrap:unset; gap:0;
}
.yl-eu__logos-group{
  display:flex; align-items:center; flex-wrap:nowrap; gap:24px;
  min-width:0;
  /* Розносимо логотипи по всій ширині своєї зони (2/3 / 1/3), як у
     макеті: перший — біля лівого краю зони, останній — біля межі
     (розділювача / правого краю блоку). Без цього вони кучкувались
     ліворуч, лишаючи половину зони порожньою перед розділювачем.
     flex-wrap:nowrap + масштабування картинок нижче: логотипи НЕ
     переносяться на другий рядок, коли зона вузька (права зона = лише
     1/3 ширини), а пропорційно зменшуються, щоб влізти. */
  justify-content: space-between;
}
/* Явно фіксуємо колонку гріда для кожної групи: без розділювача-<div>
   між лівою і правою групою (прибрали лінію на прохання клієнта)
   авто-розміщення Grid ставило б праву групу одразу в 2-гу колонку
   (auto, вузьку) замість 3-ї (1fr) — праву зону "зносило" вліво і
   2/3-1/3 ламалось. grid-column прив'язує групу до її колонки незалежно
   від того, чи є між ними елемент-розділювач. */
/* padding-right / padding-left тут — симетричний відступ обабіч межі
   2/3-1/3 (там, де раніше стояла лінія-розділювач). Без нього при
   justify-content:space-between останнє лого лівої зони й перше лого
   правої опинялись впритул одне до одного. 28px = той самий відступ,
   що й margin у .yl-eu__logos-divider--main / .yl-eu__body-divider
   раніше — зберігає той самий "повітряний" проміжок навіть без лінії. */
.yl-eu__logos-group--left{ grid-column: 1; padding-right: 28px; }
.yl-eu__logos-group--right{ grid-column: 3; padding-left: 28px; }
.yl-eu__logo-item{ display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; flex:0 1 auto; }
/* Стандарт — 56px заввишки (більші лого, ближче до макета). Визначена
   height потрібна SVG (лише з viewBox, без width/height) — інакше з
   height:auto вони схлопуються в 0. max-width:100% + object-fit:contain
   дають запасний варіант: коли зона тісна (права 1/3) і три широкі лого
   не влазять, картинка пропорційно зменшується (вписується у доступну
   ширину без спотворення й без переносу на другий рядок). */
.yl-eu__logo-img{ height:56px; width:auto; max-width:100%; object-fit:contain; display:block; }
.yl-eu__logo-fallback{
  font-family: var(--yl-font-body); font-weight:500; font-size:14px;
  color: var(--yl-teal); opacity:.55; white-space:nowrap;
}
.yl-eu__partnership-label{
  font-family: var(--yl-font-body); font-weight:700; font-size:15px; line-height:1.25;
  max-width:130px; color: var(--yl-teal);
}
.yl-eu__logos-divider{ width:1px; align-self:stretch; background: var(--yl-line-on-paper); margin: 0 4px; flex-shrink:0; }
/* Головний вертикальний розділювач між лівою (2/3) і правою (1/3)
   групами логотипів. margin:0 28px = відступ логотипів від лінії
   («отступ от нее»). ТОЧНО ТАКИЙ САМИЙ відступ у .yl-eu__body-divider
   нижче — завдяки цьому обидва розділювачі (над текстом і під ним)
   стоять на одній вертикалі: 2fr auto 1fr з однаковою auto-колонкою в
   обох сітках дають однакову межу 2/3. */
.yl-eu__logos-empty{ font-size:13px; color: rgba(1,73,79,.55); }
@media (max-width: 900px){
  .yl-eu__logos-divider{ display:none; }
  /* .yl-eu__logos--split (грід 2fr|auto|1fr на десктопі) переходить у
     звичайний flex-контейнер на мобільному, а обидві групи-обгортки
     (--left/--right, потрібні лише для десктопної розкладки 2/3-1/3)
     стають display:contents — їхні діти (.yl-eu__logo-item) "спливають"
     і стають прямими елементами .yl-eu__logos--split. Це потрібно, щоб
     наскрізна нумерація :nth-child нижче рахувала ВСІ логотипи по
     порядку (1,2,3,4,5,6...), а не окремо в межах кожної групи —
     клієнт попросив конкретну розкладку за позицією (1-й — свій рядок,
     2-й і 3-й — другий рядок, 4-6-й — третій рядок), яка не залежить
     від того, в яку "групу" (ліва/права) кожне лого віднесено в
     адмінці. */
  .yl-eu__logos--split{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    row-gap:20px; column-gap:28px;
  }
  .yl-eu__logos-group--left, .yl-eu__logos-group--right{ display:contents; }
  /* Базова висота логотипу на мобільному — 60px, однакова для
     ВСІХ логотипів у всіх рядах (round 9: клієнт вирішив, що
     логотипи не повинні відрізнятись за розміром між рядами).
     !important (round 8): поле «Розмір лого — висота в пікселях» в
     адмінці рендериться як inline style="height:...px" прямо на <img>
     (template-parts/eu-funding-block.php, yadrolab_render_eu_logo_item)
     — інлайновий стиль має вищий пріоритет за будь-яке правило класу,
     тому без !important адмінське значення (напр. 60px чи 80px)
     пробивалось би й на мобільному, ігноруючи цей CSS повністю. Мета —
     розділити: на десктопі значення з адмінки працює як і мало (керує
     висотою логотипу), а на мобільному розмір ЗАВЖДИ визначає лише
     CSS за позицією логотипу — незалежно від того, яке число
     адміністратор поставить у полі. */
  .yl-eu__logo-img{ height:60px !important; max-width:150px; }
  /* Висота комірки за замовчуванням (стосується насамперед 3-го ряду
     з тієї ж причини, що й вище) — повернено з 40px назад на 60px.
     min-height (не height) — щоб текстовий підпис
     .yl-eu__partnership-label, який у 2 рядки може бути вищим за
     60px, не обрізався. */
  .yl-eu__logo-item{ min-height:60px; }
  /* 2-й ряд (round 9): клієнт вирішив зробити висоту логотипу
     ОДНАКОВОЮ з рештою (60px, базове правило .yl-eu__logo-img вище) —
     тому окреме зменшення висоти КОМІРКИ до 40px тут більше не
     потрібне: комірка 40px заввишки з картинкою 60px усередині
     обрізала б або розтягувала б картинку. Це правило прибрано —
     2-й ряд тепер теж використовує базове .yl-eu__logo-item{
     min-height:60px; } без окремого перевизначення. */
  .yl-eu__logo-fallback{ font-size:13px; }
  .yl-eu__partnership-label{ font-size:13px; max-width:110px; }
  /* Фіксована розкладка за позицією. ВАЖЛИВО: display:contents на
     .yl-eu__logos-group--left/--right (вище) НЕ змінює батька для
     CSS-селектора :nth-child — той усе одно рахує позицію елемента
     всередині його справжнього батька в DOM (тобто окремо в межах
     group--left і окремо в межах group--right), а не наскрізно по
     всіх 5-6 логотипах разом. Тому це точковий фікс під ПОТОЧНИЙ стан
     (3 лого в group--left, 2 у group--right) — рахуємо позицію в межах
     кожної групи окремо, підганяючи під те саме бажане розташування
     (1-й — свій рядок; 2-й і 3-й — другий рядок; 4-й і 5-й, які в
     розмітці є 1-м і 2-м лого групи --right, — третій рядок).
     Якщо кількість/розподіл логотипів між групами зміниться в
     адмінці — цю розкладку доведеться підправити (найнадійніше —
     наскрізна нумерація через невелику правку PHP-шаблону, а не CSS).
     ПОТОЧНИЙ стан (6 лого: 3+3) — 3-й рядок теж має бути з ТРЬОХ
     логотипів (4-й, 5-й, 6-й = 1-й,2-й,3-й у group--right), тому
     нижче flex-basis розрахований на 33.333%, а не 50%. */
  .yl-eu__logos-group--left .yl-eu__logo-item:nth-child(1){ flex: 1 1 100%; }
  .yl-eu__logos-group--left .yl-eu__logo-item:nth-child(2),
  .yl-eu__logos-group--left .yl-eu__logo-item:nth-child(3){ flex: 1 1 calc(50% - 14px); }
  .yl-eu__logos-group--right .yl-eu__logo-item:nth-child(1),
  .yl-eu__logos-group--right .yl-eu__logo-item:nth-child(2),
  .yl-eu__logos-group--right .yl-eu__logo-item:nth-child(3){ flex: 1 1 calc(33.333% - 19px); }
  /* 1-й логотип має бути на всю ширину РЯДКА, а не лише сам <div>
     .yl-eu__logo-item на всю ширину — контейнер і так її займає
     (flex:1 1 100% вище), але сама картинка <img> лишається у своєму
     природному розмірі (width:auto) і не заповнює контейнер, тим паче
     коли клієнт задав власну висоту через поле "Розмір лого" в адмінці
     (рендериться як inline style="height:...px" в HTML — має вищий
     пріоритет за клас, тому саме там треба перебити важливістю).
     !important тут виправданий: інакше не переважити inline-стиль. */
  .yl-eu__logos-group--left .yl-eu__logo-item:nth-child(1) .yl-eu__logo-img{
    width:100% !important; height:auto !important; max-width:none !important;
  }
  /* 3-й лого (кругла іконка «парасолька») — раніше окремо зменшувалось
     (спершу на 20%, потім ще на 30%, до 19px), але клієнт вирішив
     (round 9) зробити його однакового розміру з рештою логотипів —
     тепер теж 60px, як у базовому правилі .yl-eu__logo-img вище. Це
     правило лишається потрібним заради !important: для цього лого в
     адмінці задано власну висоту (80px), яка рендериться інлайном і
     без !important повністю ігнорує будь-яке правило класу на
     мобільному. */
  .yl-eu__logos-group--left .yl-eu__logo-item:nth-child(3) .yl-eu__logo-img{
    height:60px !important;
  }
}
@media (max-width: 480px){
  /* На зовсім вузьких екранах (iPhone SE/12/13 тощо) розмір логотипу
     (round 9) теж вирівняно до 60px — той самий, що й на ≤900px-блоці
     вище, за проханням клієнта (однаковий розмір логотипів скрізь на
     мобільному, без додаткового зменшення на найвужчих екранах).
     !important з тієї самої причини, що й у 900px-блоці вище (round 8)
     — інакше на цій ширині знову пробивалось би інлайнове значення
     з адмінки. */
  .yl-eu__logo-img{ height:60px !important; max-width:120px; }
  .yl-eu__logos{ gap:16px; margin-bottom:28px; }
  /* .yl-eu__logos-group тепер display:contents (див. блок 900px вище) —
     проміжок між логотипами задається на самому flex-контейнері
     .yl-eu__logos--split, а не на групах-обгортках. */
  .yl-eu__logos--split{ row-gap:16px; column-gap:20px; }
  .yl-eu__grant-code, .yl-eu__title{ font-size:12px; }
  .yl-eu__disclaimer, .yl-eu__description, .yl-eu__link, .yl-eu__facts{ font-size:12px; }
}

/* Та сама сітка, що й у логотипів (2fr | лінія | 1fr) — щоб вертикальний
   розділювач між текстом і фактами став ТОЧНО під розділювачем логотипів,
   утворивши одну вертикальну вісь на 2/3 ширини блоку. gap:0 — відступи
   задає сам розділювач (margin), як у логотипів. */
.yl-eu__body{ display:grid; grid-template-columns: 2fr auto 1fr; gap:0; align-items:stretch; }
.yl-eu__body-divider{ width:1px; background: var(--yl-line-on-paper); margin: 0 28px; }
.yl-eu__meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; margin:0 0 12px; }
.yl-eu__grant-code{ font-weight:700; font-size:13px; letter-spacing:.02em; color: var(--yl-teal); white-space:nowrap; }
.yl-eu__title{ font-weight:600; font-size:13px; line-height:1.4; text-transform:uppercase; letter-spacing:.01em; }
.yl-eu__disclaimer, .yl-eu__description{ font-size:13px; line-height:1.6; color: rgba(1,73,79,.82); margin:0 0 10px; }
.yl-eu__link{ font-size:13px; color: var(--yl-teal); text-decoration:underline; word-break:break-all; }

.yl-eu__facts{ font-size:13px; line-height:1.7; }
.yl-eu__facts p{ margin:0 0 4px; white-space:nowrap; }
.yl-eu__facts strong{ font-weight:700; }
.yl-eu__partners-title{ margin:14px 0 6px !important; font-weight:700; }
.yl-eu__partners-list{ list-style:none; padding:0; margin:0; }
.yl-eu__partners-list li{ position:relative; padding-left:14px; margin-bottom:4px; }
.yl-eu__partners-list li::before{ content:'•'; position:absolute; left:0; color: var(--yl-coral); }

@media (max-width: 900px){
  .yl-eu__body{ grid-template-columns: 1fr; gap:24px; }
  .yl-eu__body-divider{ display:none; }
}

/* ==========================================================================
   20. UTILITIES / A11Y
   ========================================================================== */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
[data-animate-count]{ font-variant-numeric: tabular-nums; }

/* ==========================================================================
   21. SINGLE POST PAGE
   ========================================================================== */
.yl-single-wrap{
  max-width:860px;
  margin:0 auto;
  padding:64px var(--yl-pad) 80px;
}
.yl-single-meta{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.yl-single-back{
  font-size:14px;
  color:var(--yl-teal);
  text-decoration:none;
  white-space:nowrap;
}
.yl-single-back:hover{ text-decoration:underline; }
.yl-single-metainfo{ font-size:13px; color:#666; }
.yl-single-metainfo a{ color:var(--yl-teal); text-decoration:none; }

.yl-single-title{
  font-family:var(--yl-font-head);
  font-size:clamp(26px,4vw,40px);
  line-height:1.2;
  margin:0 0 24px;
  text-wrap:balance;
  color:#111;
}
.yl-single-cover{ margin:0 0 36px; }
.yl-single-cover img{ width:100%; height:auto; border-radius:6px; display:block; }
.yl-single-video{ margin:0 0 36px; }
.yl-single-video iframe,
.yl-single-video > *{ width:100%!important; aspect-ratio:16/9; height:auto!important; border-radius:6px; display:block; }

.yl-page-content{
  font-size:17px;
  line-height:1.72;
  color:#1a1a1a;
  margin-bottom:36px;
}
.yl-page-content h2{ font-family:var(--yl-font-head); font-size:24px; margin:2em 0 .6em; color:#111; }
.yl-page-content h3{ font-family:var(--yl-font-head); font-size:20px; margin:1.6em 0 .5em; color:#111; }
/* .yl-page-content h2/h3 не мали мобільного розміру. h2 (24px) трохи
   зменшено під 390px; h3 (20px) вже в межах норми — не чіпаємо. */
@media (max-width: 600px){
  .yl-page-content h2{ font-size: 22px; }
}
.yl-page-content p{ margin:0 0 1.2em; }
.yl-page-content ul,
.yl-page-content ol{ padding-left:24px; margin:0 0 1.2em; }
.yl-page-content blockquote{
  border-left:4px solid var(--yl-teal);
  margin:1.5em 0; padding:.5em 1.2em;
  color:var(--yl-teal); font-style:italic;
}
.yl-page-content img{ max-width:100%; height:auto; border-radius:4px; }
.yl-page-content figure{ margin:1.5em 0; }
.yl-page-content figcaption{ font-size:13px; color:#666; margin-top:6px; }
.yl-page-content iframe{ max-width:100%; }

/* Галерея */
.yl-single-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px; margin:36px 0;
}
.yl-gallery-thumb{
  background:none; border:none; padding:0;
  cursor:pointer; border-radius:4px; overflow:hidden;
  aspect-ratio:4/3;
}
.yl-gallery-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .25s; display:block; }
.yl-gallery-thumb:hover img{ transform:scale(1.04); }

/* Lightbox */
.yl-lightbox{
  padding:0; border:none;
  background:rgba(0,0,0,.88);
  max-width:96vw; max-height:96vh;
  border-radius:6px;
}
.yl-lightbox::backdrop{ background:rgba(0,0,0,.7); }
.yl-lightbox__img{ max-width:90vw; max-height:90vh; display:block; border-radius:4px; }
.yl-lightbox__close{
  position:absolute; top:12px; right:16px;
  background:none; border:none; color:#fff;
  font-size:22px; cursor:pointer; line-height:1;
}

/* PDF */
.yl-single-pdf{ margin:36px 0; }
.yl-single-pdf__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.yl-single-pdf__preview iframe{
  width:100%; height:520px;
  border:1px solid var(--yl-line-on-paper);
  border-radius:4px; display:block;
}

/* Файли */
.yl-single-files{ margin:36px 0; }
.yl-single-files__title{ font-family:var(--yl-font-head); font-size:18px; margin:0 0 14px; }
.yl-single-files__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.yl-single-files__item{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  background:var(--yl-paper);
  border-radius:6px; padding:10px 14px;
  transition:background .18s;
}
.yl-single-files__item:hover{ background:var(--yl-paper-dim); }
.yl-single-files__icon{ font-size:20px; flex-shrink:0; }
.yl-single-files__name{ flex:1; font-size:14px; color:#1a1a1a; }
.yl-single-files__name small{ color:#888; margin-left:6px; }
.yl-single-files__ext{
  font-size:11px; font-weight:700;
  color:var(--yl-teal);
  background:rgba(1,73,79,.08);
  padding:2px 7px; border-radius:3px; flex-shrink:0;
}

/* Схожі записи */
.yl-single-related{
  padding-top:56px;
  padding-bottom:72px;
  border-top:1px solid var(--yl-line-on-paper);
  background:var(--yl-paper-dim);
}
.yl-single-related__header{
  display:flex; align-items:baseline;
  justify-content:space-between;
  gap:16px; margin-bottom:28px;
}
.yl-single-related__title{ font-family:var(--yl-font-head); font-size:22px; margin:0; color:#111; }
.yl-single-related__all{ font-size:14px; color:var(--yl-teal); text-decoration:none; white-space:nowrap; }
.yl-single-related__all:hover{ text-decoration:underline; }

.yl-related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
@media(max-width:1100px){ .yl-related-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:720px){  .yl-related-grid{ grid-template-columns:repeat(2,1fr); } }
.yl-related-card{ background:var(--yl-paper); border-radius:8px; overflow:hidden; }
.yl-related-card__link{ display:block; text-decoration:none; color:inherit; }
.yl-related-card__photo{
  height:160px;
  background-size:cover; background-position:center;
  margin-bottom:0;
  background-color:var(--yl-paper-dim);
}
.yl-related-card__body{ padding:16px 18px 20px; }
.yl-related-card__date{ font-size:12px; color:#888; display:block; margin-bottom:6px; }
.yl-related-card__title{
  font-family:var(--yl-font-head);
  font-size:16px; font-weight:400;
  margin:0 0 6px; line-height:1.3; color:#111;
}
.yl-related-card__link:hover .yl-related-card__title{ color:var(--yl-teal); text-decoration:underline; }
.yl-related-card__excerpt{ font-size:13px; color:#666; margin:0; line-height:1.5; }

@media(max-width:600px){
  .yl-single-wrap{ padding-top:40px; padding-bottom:48px; }
  .yl-related-grid{ grid-template-columns:1fr; }
  .yl-single-gallery{ grid-template-columns:repeat(2,1fr); }
  .yl-single-pdf__preview iframe{ height:320px; }
}