/* ============================================================
   МРЄ · скло на фото
   Матове скло поверх фотографії. Працює на обидва напрями:
   на «Відновленні» під ним природа, на «Допомозі ЗСУ» - польові
   знімки фонду. Тема лишається та сама, змінюється лише акцент.

   Умова, без якої ефект розсипається: під склом має бути
   фотографія з перепадом яскравості. На пласкій підкладці
   розмивати нічого, і скло читається як брудна пляма.
   ============================================================ */

:root{
  --glass-blur:22px;
  --glass-bg:rgba(255,255,255,.12);
  --glass-bg-strong:rgba(255,255,255,.18);
  --glass-border:rgba(255,255,255,.30);
  --glass-sheen:rgba(255,255,255,.42);
  --glass-shadow:0 28px 64px -28px rgba(8,18,12,.62);
}

/* ---------- 1. СЦЕНА З ФОТО -------------------------------- */
/* Текст на сцені світлий, тому локально перевизначаємо семантичні
   токени. Усі компоненти всередині підхоплюють їх самі, без
   окремих правил на кожен.                                      */
.photo-scene,
.expand{
  --fg:#FFFFFF;
  --fg-soft:rgba(255,255,255,.88);
  --fg-mute:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.22);
  --line-soft:rgba(255,255,255,.14);
  --accent-tint:rgba(255,255,255,.16);
  --accent-on-tint:#FFFFFF;
  --accent-line:rgba(255,255,255,.55);
  color:var(--fg);
}

/* Розкладка сцени. На .expand не переносимо: там свій каркас,
   а overflow:hidden зробив би з секції скрол-контейнер і зламав
   би position:sticky всередині неї.                            */
.photo-scene{position:relative;isolation:isolate;overflow:hidden}

.photo-scene__img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  /* Легкий підйом насиченості: під склом фото трохи гасне. */
  filter:saturate(1.14) contrast(1.05);
}

/* Скрим. Без нього білий текст на світлій ділянці фото
   провалюється нижче порогу контрасту.                        */
.photo-scene::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(76deg,rgba(10,22,16,.86) 0%,rgba(10,22,16,.58) 46%,rgba(10,22,16,.20) 100%),
    linear-gradient(0deg,rgba(10,22,16,.45) 0%,transparent 42%);
}
/* Той самий скрим, але нейтральний, для теми «Допомога ЗСУ». */
.photo-scene--cool::after{
  background:
    linear-gradient(76deg,rgba(8,18,32,.86) 0%,rgba(8,18,32,.56) 46%,rgba(8,18,32,.18) 100%),
    linear-gradient(0deg,rgba(8,18,32,.45) 0%,transparent 42%);
}

/* ---------- 2. СКЛО ---------------------------------------- */
.glass{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(165%);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-sheen);
  color:#fff;
  overflow:hidden;
}

/* Відблиск у верхньому лівому куті. Саме він робить поверхню
   схожою на скло, а не на напівпрозорий прямокутник.          */
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(134deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 34%,transparent 62%);
}
.glass>*{position:relative}

.glass--strong{background:var(--glass-bg-strong);--glass-blur:30px}
.glass--flat{border-radius:0}
.glass--pad{padding:var(--s-5)}

/* Розмиття підтримують не всі. Там, де його немає, скло стає
   щільною підкладкою: вигляд інший, читабельність та сама.    */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:rgba(12,24,18,.78)}
  .photo-scene--cool .glass{background:rgba(10,20,34,.78)}
}

/* ---------- 3. КОМПОНЕНТИ ВСЕРЕДИНІ СКЛА -------------------- */
.glass{
  --fg:#FFFFFF;
  --fg-soft:rgba(255,255,255,.90);
  --fg-mute:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.20);
  --line-soft:rgba(255,255,255,.13);
}
.glass .stat__n{color:#fff}
.glass .facts dt{color:rgba(255,255,255,.68)}
.glass .facts dd{color:#fff}
.glass a{color:#fff}

/* Головна кнопка на склі не може бути білим по білому. */
.glass .btn--primary,
.photo-scene .btn--primary,
.expand .btn--primary{
  background:#fff;color:var(--c-green-900);border-color:#fff;
}
.photo-scene--cool .btn--primary,
.photo-scene--cool .glass .btn--primary,
.expand--cool .btn--primary{color:var(--c-blue-900)}
.glass .btn--primary:hover,
.photo-scene .btn--primary:hover,
.expand .btn--primary:hover{background:rgba(255,255,255,.86)}

.photo-scene .btn--ghost,
.expand .btn--ghost{color:#fff;border-color:rgba(255,255,255,.72)}
.photo-scene .btn--ghost:hover,
.expand .btn--ghost:hover{background:rgba(255,255,255,.14)}
.photo-scene .link-go,
.expand .link-go{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* Пігулка на склі: тонка, без заливки. */
.photo-scene .pill,
.expand .pill{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.42);
  color:#fff;
}

/* Хлібні крихти на фото. */
.photo-scene .crumbs a,
.expand .crumbs a{color:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.3)}
.photo-scene .crumbs li+li::before,
.expand .crumbs li+li::before{color:rgba(255,255,255,.4)}

/* ---------- 4. СМУГА ЧИСЕЛ НА СКЛІ -------------------------- */
.glass-strip{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
}
.glass-strip>*{
  padding:var(--s-5);
  border-right:1px solid rgba(255,255,255,.16);
}
.glass-strip>*:last-child{border-right:0}
@media (max-width:640px){
  .glass-strip>*{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .glass-strip>*:last-child{border-bottom:0}
}

/* ---------- 5. ГЕРОЙ НА ФОТО -------------------------------- */
.hero-photo{
  display:flex;align-items:center;
  min-height:clamp(560px,74vh,780px);
  padding-block:clamp(3rem,2rem + 5vw,6rem);
}
.hero-photo .hero__title{color:#fff;max-width:15ch}
.hero-photo .hero__lead{color:rgba(255,255,255,.9)}

/* Герой новини. Той самий компонент, але нижчий і вирівняний
   донизу: у новини заголовок довгий, панелі фактів немає, а
   головна дія читача - піти в текст, а не залишитись у героя.
   Тому висоти рівно стільки, щоб було видно початок статті.   */
.hero-photo--news{
  align-items:flex-end;
  min-height:clamp(340px,46vh,520px);
  padding-block:clamp(2rem,1.5rem + 3vw,3.5rem);
}
.hero-photo--news .hero__title{
  font-size:var(--t-h2);max-width:32ch;
  margin:var(--s-4) 0 var(--s-4);
}
.hero-photo--news .hero__lead{max-width:56ch;margin-bottom:0}

/* Скрим героя новини щільніший за спільний. Причина заміряна: у
   спільному правилі третій стоп гасне до .20, а заголовок новини
   довгий і доходить до правого краю колонки - на 768px він давав
   1,8:1 замість 4,5:1. Спільне правило не чіпаємо, воно працює на
   короткому заголовку піднапряму й на синій темі.                */
.hero-photo--news.photo-scene::after{
  background:
    linear-gradient(76deg,rgba(10,22,16,.88) 0%,rgba(10,22,16,.68) 46%,rgba(10,22,16,.46) 100%),
    linear-gradient(0deg,rgba(10,22,16,.45) 0%,transparent 42%);
}

/* Дрібний текст у герої йде на 12-14px, тому напівпрозорий білий
   для нього недостатній: крихти давали 2,2:1, рядок дати 2,4:1.  */
.hero-photo--news .crumbs a,
.hero-photo--news .crumbs [aria-current]{color:rgba(255,255,255,.92)}
.hero-photo--news .news-card__meta{color:rgba(255,255,255,.9)}
.hero-photo--news .byline{color:rgba(255,255,255,.9)}
.hero-photo--news .byline b{color:#fff}
.hero-photo--news .byline>*:not(:last-child)::after{color:rgba(255,255,255,.45)}


/* На вузькому екрані кутовий градієнт лишає верх кадру світлим, а
   текст доходить саме туди. Тому там скрим вертикальний.         */
@media (max-width:720px){
  .hero-photo--news.photo-scene::after{
    background:linear-gradient(0deg,rgba(10,22,16,.94) 0%,rgba(10,22,16,.86) 52%,rgba(10,22,16,.72) 100%);
  }
}

/* Обведення фокуса в герої. Базове бере --accent-strong, а це
   темно-зелений: на притемненому фото виходить 1,05:1 замість 3:1
   за WCAG 1.4.11. Білий контур із темним підбоєм читається і на
   світлих, і на темних ділянках кадру.                           */
.photo-scene :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 5px rgba(10,22,16,.75);
}

/* Підпис знімка. Донор має бачити, що фото наше, а не стокове. */
/* Атрибуція знімка. Для CC BY вона обов’язкова, тому це не
   декоративний підпис, а умова ліцензії.                      */
.photo-credit{
  position:absolute;right:var(--gutter);bottom:var(--s-3);z-index:1;
  font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.35;
  color:rgba(255,255,255,.66);
  max-width:min(62ch,54vw);text-align:right;
}
@media (max-width:700px){
  .photo-credit{position:static;display:block;max-width:none;text-align:left;margin-top:var(--s-5)}
}

@media print{
  .photo-scene__img,.photo-scene::after{display:none}
  .photo-scene{--fg:#000;--fg-soft:#222;--fg-mute:#555;min-height:0}
  .glass{background:none;border:1px solid #999;box-shadow:none;color:#000;backdrop-filter:none}
  .glass::before{display:none}
}