/* ГНМЦ · Концепт 4 — стилі головної сторінки */
.hero{
  position:relative; min-height:min(92vh, 820px); display:flex; align-items:flex-end;
  overflow:hidden; color:#fff; margin-top:calc(-1 * var(--header-h));
  padding-top:var(--header-h);
}
.hero-media{
  position:absolute; inset:0; z-index:0; background:var(--blue-900);
  /* фолбек-фото під відео (не JS, завжди на місці — навіть до інʼєкції video/poster) */
  background-image:url('../../shared/assets/photos/photo-hero-bg.jpg');
  background-size:cover; background-position:center;
}
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,20,50,.55) 0%, rgba(0,30,70,.55) 40%, rgba(0,20,50,.92) 100%),
             linear-gradient(90deg, rgba(0,50,110,.55), rgba(0,50,110,.05) 55%);
}
.hero-content{ position:relative; z-index:2; padding-block:clamp(3rem,8vw,6rem); width:100%; }
.hero-eyebrow{ color:#dfeaff; }
.hero-eyebrow::before{ background:var(--yellow); }
.hero h1{ color:#fff; max-width:16ch; margin-top:.5rem; }
.hero-lede{ max-width:52ch; font-size:clamp(1rem,1.6vw,1.15rem); color:#dfeaff; margin-top:1rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }
.hero-stats{ display:flex; gap:clamp(1.4rem,4vw,3rem); margin-top:2.6rem; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-head); font-size:1.6rem; color:#fff; }
.hero-stats div span{ font-size:.78rem; color:#cfe1fb; }
.hero-scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
  color:#fff; display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; opacity:.85;
}
.hero-scroll-cue svg{ width:20px; height:20px; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce){ .hero-scroll-cue svg{ animation:none; } }
@media (max-width:720px){ .hero{ align-items:center; } .hero-scroll-cue{ display:none; } }

.alert-band{ background:linear-gradient(180deg,#fff, var(--grey-100)); }
.alert-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.6rem; }
.alert-head svg{ width:26px; height:26px; color:var(--red); }
.alert-head h2{ color:var(--red); margin:0; font-size:clamp(1.2rem,2.4vw,1.6rem); }
/* alert-grid завжди рендерить рівно 3 картки — 2-колонковий проміжний брейкпоінт
   лишав дірку (2+1), тому одразу 3 → 1 колонка без проміжного кроку */
.alert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:880px){ .alert-grid{ grid-template-columns:1fr; } }

/* directions-grid: 5 напрямів не діляться рівно на жодну кількість колонок > 1,
   тож замість grid (лишає дірку в останньому ряду) — flex-wrap з центруванням:
   останній неповний ряд автоматично центрується, дірки бути не може на жодній ширині */
.directions-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); }
.directions-grid > .direction-card{ flex:0 1 calc(33.333% - var(--gap) * 2 / 3); }
@media (max-width:960px){ .directions-grid > .direction-card{ flex:0 1 calc(50% - var(--gap) / 2); } }
@media (max-width:640px){ .directions-grid > .direction-card{ flex:0 1 100%; } }

.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
@media (max-width:960px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .stats-grid{ grid-template-columns:1fr 1fr; gap:.9rem; } }

/* about.html — «ДП «ГНМЦ» у фактах»: усі 9 фактів (не 4, як на головній), 4 колонки
   лишали дірку 4+4+1. 3 колонки ділять 9 націло; на мобільній — одразу 1 колонка
   (2 колонки дали б дірку 2+2+2+2+1), щоб дірки не було на жодній ширині */
.facts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:720px){ .facts-grid{ grid-template-columns:1fr; gap:.9rem; } }

.iso-band{ padding-block:clamp(3rem,6vw,4.6rem); color:#fff; }
.iso-flex{ display:flex; align-items:center; gap:clamp(1.6rem,4vw,3rem); flex-wrap:wrap; }
.iso-flex-text{ flex:1; min-width:260px; }
.iso-flex-text .eyebrow{ color:#bcd6ff; }
.iso-flex-text .eyebrow::before{ background:var(--yellow); }
.iso-flex-text h2{ color:#fff; }
.iso-flex-text p{ color:#dbe8fc; max-width:64ch; }
.iso-actions{ display:flex; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }

.partners-band{ padding-block:clamp(2.4rem,5vw,3.6rem); }

.news-preview-grid{ display:grid; grid-template-columns:2fr 1fr; gap:var(--gap); align-items:start; }
@media (max-width:960px){ .news-preview-grid{ grid-template-columns:1fr; } }
.news-preview-main{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
@media (max-width:640px){ .news-preview-main{ grid-template-columns:1fr; } }
.seminar-mini{ background:#fff; border-radius:var(--radius-m); box-shadow:var(--shadow-s); padding:1.3rem 1.4rem; margin-bottom:1rem; transition:box-shadow var(--dur-m), transform var(--dur-m); }
.seminar-mini:hover{ box-shadow:var(--shadow-m); transform:translateY(-3px); }
.seminar-mini-date{ display:flex; align-items:center; gap:.5em; font-weight:700; color:var(--blue-700); font-size:.82rem; margin-bottom:.5rem; }
.seminar-mini h4{ font-family:var(--font-head); font-size:.94rem; color:var(--ink-soft); margin:0 0 .6rem; font-weight:700; line-height:1.35; }

.about-teaser{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:900px){ .about-teaser{ grid-template-columns:1fr; } }
.about-teaser-media{ position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-l); aspect-ratio:4/3; }
.about-teaser-media img{ width:100%; height:100%; object-fit:cover; }
.about-teaser-badge{
  position:absolute; bottom:1.2rem; left:1.2rem; background:#fff; border-radius:var(--radius-m);
  padding:.9rem 1.2rem; box-shadow:var(--shadow-m); display:flex; align-items:center; gap:.7rem;
}
.about-teaser-badge strong{ display:block; font-family:var(--font-head); font-size:1.3rem; color:var(--blue-700); }
.about-teaser-badge span{ font-size:.72rem; color:var(--grey-600); }
.about-teaser-list{ display:grid; gap:.7rem; margin:1.4rem 0 1.8rem; }

.cta-band{
  background:var(--grad-blue); color:#fff; border-radius:var(--radius-l);
  padding:clamp(2.4rem,6vw,3.6rem); margin-inline:clamp(1.1rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  top:-140px; right:-80px;
}
.cta-band h2{ color:#fff; margin:0; max-width:22ch; }
.cta-band p{ color:#dfeaff; margin:.5rem 0 0; }
.cta-band-actions{ position:relative; z-index:1; display:flex; gap:1rem; flex-wrap:wrap; }