/* ============================================================
   СПРК · Приёмные родители Казахстана
   Казахстанская тема поверх шаблона Charitics.
   Грузится ПОСЛЕ style.css — переопределяет токены и добавляет
   золотой акцент, орнамент шаңырак и «вау»-детали.
   Палитра: небесный (aspan kök) + золото степи (altyn).
   Шрифты: Montserrat (заголовки/акцент) + Golos Text (текст).
   ============================================================ */

:root {
  /* — фирменная палитра СПРК (по логотипу): бирюза-тил + коралл — */
  --ul-primary: #159AAD;      /* бирюза-тил, основной */
  --ul-secondary: #EF6E5D;    /* коралл, акцент */
  --ul-c3: #D5EEF1;           /* светлый бирюзовый tint */
  --ul-c4: #F1FAFB;           /* ледяной фон-подложка */
  --ul-c5: #16A9BD;
  --ul-black: #103C47;        /* глубокий тил (тёмные секции/текст) */
  --ul-p: #3B4A52;
  --ul-gray: #3B4A52;
  --ul-gray3: #EDF6F7;

  /* кнопка: бирюза → глубокий тил (белый текст читается) */
  --ul-gradient: linear-gradient(100deg, #17A9BD 0%, #0E7E90 100%);

  /* коралловый акцент (бывш. золото) — теги, прогресс, звёзды, детали */
  --kz-gold: #EF6E5D;
  --kz-gold-2: #F58A7C;
  --kz-gold-grad: linear-gradient(100deg, #EF6E5D 0%, #F58A7C 100%);
  --kz-ink: #ffffff;

  /* тёмный текст на коралловых плашках */
  --kz-on-coral: #ffffff;

  /* шрифты */
  --font-primary: "Golos Text", system-ui, sans-serif;
  --font-quicksand: "Montserrat", system-ui, sans-serif;
  --font-caveat: "Montserrat", system-ui, sans-serif;
}

/* базовая типографика — чуть плотнее для кириллицы */
body {
  font-family: var(--font-primary);
  letter-spacing: -0.006em;
}

/* заголовки — Montserrat, увереннее */
.ul-section-title,
.ul-banner-title,
.ul-donation-title,
.ul-event-title,
.ul-blog-title,
.ul-single-accordion-item__title,
.ul-donate-form-title,
.ul-footer-widget-title {
  font-family: var(--font-quicksand);
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────
   EYEBROW (sub-title) — золотой, с короткой чертой,
   без слоп-точек и лишнего мусора
   ───────────────────────────────────────────── */
.ul-section-sub-title {
  color: var(--ul-primary);
  font-family: var(--font-quicksand);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ul-section-sub-title--2,
.ul-section-heading .ul-section-sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ul-section-sub-title--2::before,
.ul-section-heading .ul-section-sub-title::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--kz-gold-grad);
  border-radius: 2px;
}

/* на тёмных секциях eyebrow — золотой */
.ul-banner-sub-title,
.text-white .ul-section-sub-title,
.ul-events .ul-section-sub-title,
.ul-donate-form-section-txt .ul-section-sub-title {
  color: var(--kz-gold-2);
}

/* ─────────────────────────────────────────────
   HERO — глубина + казахстанское свечение
   ───────────────────────────────────────────── */
.ul-banner {
  background:
    radial-gradient(1100px 620px at 82% 8%, rgba(245, 179, 1, 0.16), transparent 60%),
    radial-gradient(900px 700px at 8% 92%, rgba(18, 181, 201, 0.28), transparent 62%),
    linear-gradient(160deg, #0C3143 0%, #082A38 60%, #061F2A 100%);
}
.ul-banner::before {
  opacity: 0.5;
  mix-blend-mode: soft-light;
}

/* line-mask заголовок hero — построчный reveal без «выезда» за край */
.kz-line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.kz-hero-line { display: block; }

/* акцентное слово в заголовке hero — золотой градиент */
.kz-accent {
  background: linear-gradient(100deg, #FF9E8C 0%, #EF6E5D 55%, #E85544 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* шаңырак — золотой орнаментальный знак за фото героя */
.kz-shanyrak {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -6%;
  width: clamp(300px, 34vw, 620px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.5;
}
.kz-shanyrak svg { width: 100%; height: 100%; display: block; }

/* hero-стата — крупнее и заметнее (п.9) */
.ul-banner-stat { gap: clamp(10px, 0.9vw, 16px); }
.ul-banner-stat .imgs > * {
  width: clamp(52px, 3.6vw, 68px) !important;
  height: clamp(52px, 3.6vw, 68px) !important;
  border-width: 3px !important;
}
.ul-banner-stat .number {
  background: var(--kz-gold-grad);
  color: var(--kz-ink) !important;
  font-weight: 800;
  font-size: clamp(15px, 1.05vw, 19px) !important;
}
.ul-banner-stat .txt {
  font-size: clamp(16px, 1.15vw, 21px);
  font-weight: 600;
  line-height: 1.25;
}

/* ─────────────────────────────────────────────
   КНОПКИ — золотое свечение при наведении
   ───────────────────────────────────────────── */
.ul-btn {
  font-family: var(--font-quicksand);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.ul-btn:hover {
  transform: translateY(-3px);
}

/* золотая CTA — вариант для «Стать семьёй» */
.kz-btn-gold {
  background: var(--kz-gold-grad) !important;
  color: var(--kz-ink) !important;
}
.kz-btn-gold:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
}
.kz-btn-gold .flaticon-fast-forward-double-right-arrows-symbol { color: var(--kz-ink); }

/* ─────────────────────────────────────────────
   ПРОГРЕСС-БАРЫ программ — золото на голубом треке
   ───────────────────────────────────────────── */
.ul-progress-container { background: var(--ul-c3) !important; }
.ul-progressbar { background: var(--kz-gold-grad) !important; }
.ul-progress-label { color: var(--kz-ink) !important; }

/* теги на карточках программ */
.ul-donation-img .tag {
  background: var(--kz-gold-grad);
  color: var(--kz-ink);
  font-weight: 700;
  font-family: var(--font-quicksand);
}

/* карточки программ — равная высота (п.3), подъём + золотая линия БЕЗ тени (п.7) */
.ul-donations-slider .swiper-slide { height: auto; }
.ul-donation {
  border: 1px solid #E7F1F4;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ul-donation-txt { display: flex; flex-direction: column; flex-grow: 1; }
.ul-donation-txt .ul-donation-btn { margin-top: auto; }
.ul-donation::after {
  content: "";
  position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px;
  background: var(--kz-gold-grad);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.ul-donation:hover { transform: translateY(-8px); border-color: #CFE9EF; box-shadow: none; }
.ul-donation:hover::after { transform: scaleX(1); }

/* фон секции «Программы»: светлый (карточки читаемы) + фото в круглой форме справа */
.ul-donations { background: var(--ul-c4) !important; }
.ul-donations::before,
.ul-donations::after {
  background:
    linear-gradient(200deg, rgba(8,42,56,0.60) 0%, rgba(11,60,78,0.82) 100%),
    url(../img/donations-bg.png) no-repeat center center/cover !important;
}

/* ─────────────────────────────────────────────
   СТАТИСТИКА — золотые иконки, крупные числа
   ───────────────────────────────────────────── */
.ul-stats-item i { color: var(--kz-gold) !important; }
.ul-stats-item .number {
  font-family: var(--font-quicksand);
  font-weight: 800;
  color: #fff;
}

/* ─────────────────────────────────────────────
   ОТЗЫВЫ — золотые звёзды
   ───────────────────────────────────────────── */
.ul-review-rating i { color: var(--kz-gold); }

/* section-title: тонкая золотая подпись-черта под крупными заголовками секций */
.ul-section-heading .ul-section-title { position: relative; }

/* ─────────────────────────────────────────────
   БЛОК ВКЛАДА — премиальный, с фото рук (п.5)
   ───────────────────────────────────────────── */
.ul-donate-form-section {
  background:
    linear-gradient(120deg, rgba(8,42,56,0.94) 0%, rgba(11,60,78,0.86) 45%, rgba(10,162,192,0.30) 100%),
    url(../img/donate-form-bg.jpg) no-repeat center center/cover !important;
  box-shadow: 0 30px 70px -30px rgba(8,42,56,0.55) !important;
}
.ul-donate-form-section::before {
  background: radial-gradient(70% 90% at 100% 0%, rgba(245,179,1,0.22), transparent 60%) !important;
  mix-blend-mode: normal !important;
}
/* стеклянная панель формы */
.ul-donate-form-wrapper {
  background: linear-gradient(160deg, rgba(12,49,67,0.72), rgba(8,42,56,0.72)) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.ul-donate-form-wrapper::before { background: none !important; }
.ul-donate-form-title { color: #fff; }
/* кнопки-суммы — стеклянные, активная золотая */
.ul-donate-form-label {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #EAF6F9 !important;
  font-family: var(--font-quicksand);
  font-weight: 700;
  transition: .25s ease;
}
.ul-donate-form-label:hover { border-color: var(--kz-gold) !important; color: #fff !important; }
input:checked + .ul-donate-form-label {
  background: var(--kz-gold-grad) !important;
  color: var(--kz-ink) !important;
  border-color: transparent !important;
}
.ul-donate-form-custom-input { color: #fff !important; }
.ul-donate-form-custom-input::placeholder { color: rgba(234,246,249,0.6) !important; }
/* правый блок с прогрессом */
.ul-donate-form-section-txt .ul-donation-progress-label { color: #EAF6F9; }

/* гасим оранжевые декор-мазки родного шаблона — они выбиваются из палитры */
.ul-about-vectors,
.ul-events-vectors,
.ul-footer-vectors,
.ul-donate-form-vector { display: none !important; }

/* ─────────────────────────────────────────────
   ХЕДЕР — читаемая навигация
   ───────────────────────────────────────────── */
.ul-header-nav > a,
.ul-header-nav .has-sub-menu > a { font-family: var(--font-quicksand); font-weight: 600; }

/* ─────────────────────────────────────────────
   GSAP reveal — стартовые состояния (без FOUC)
   применяются только если есть класс js-ready на <html>
   ───────────────────────────────────────────── */
.js-ready .kz-hero-line { visibility: hidden; }
/* reveal секций — CSS-переход + IntersectionObserver добавляет .kz-in (один раз) */
.js-ready .kz-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js-ready .kz-rv.kz-in {
  opacity: 1;
  transform: none;
}

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .kz-hero-line,
  .kz-rv { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .kz-shanyrak { animation: none !important; }
}

/* ─────────────────────────────────────────────
   Мелкие правки для кириллицы/локали
   ───────────────────────────────────────────── */
.ul-donation-title,
.ul-event-title a,
.ul-blog-title { line-height: 1.25; }

.ul-footer-about-txt,
.ul-section-descr,
.ul-banner-descr { line-height: 1.7; }

/* ─────────────────────────────────────────────
   1) ЛОГО — круглый официальный знак, крупный
   ───────────────────────────────────────────── */
.logo { width: auto !important; height: clamp(60px, 5.4vw, 82px) !important; max-width: none !important; }
.ul-footer-about .logo { width: auto !important; height: clamp(84px, 7.5vw, 108px) !important; max-width: none !important; }
.logo-container { display: inline-flex; align-items: center; }

/* закругление фото в блоке «О союзе» */
.ul-about-imgs .img-wrapper { border-radius: 24px; overflow: hidden; }
.ul-about-imgs .img-wrapper img { border-radius: 24px; }

/* блок вклада: процент на прогресс-баре — белым; «другая сумма» — чёрным на белом */
.ul-donate-form-section-txt .ul-progress-label,
.ul-donate-form-section-txt .ul-donation-progress-label { color: #fff !important; }
.custom-amount-wrapper .ul-donate-form-label { padding: 0 !important; overflow: hidden; }
.ul-donate-form-custom-input {
  background: #fff !important;
  color: #10222b !important;
  border-radius: 10px;
  padding: 12px 16px;
}
.ul-donate-form-custom-input::placeholder { color: #6a7a80 !important; }

/* ─────────────────────────────────────────────
   2) ФОТО не должны растягиваться — object-fit: cover везде
   (шаблон задаёт aspect-ratio, но забывает object-fit)
   ───────────────────────────────────────────── */
/* добавляем cover ТОЛЬКО тем картинкам, у которых шаблон его забыл
   (у галереи, событий, отзывов object-fit уже есть — их не трогаем).
   Высота берётся из собственного aspect-ratio картинки — height не задаём. */
.ul-donation-img img,
.ul-blog-img img,
.ul-team-member-img img,
.ul-about-block .block-right img,
.ul-blog-sidebar-post .img img {
  width: 100% !important;
  object-fit: cover !important;
}

/* ─────────────────────────────────────────────
   6) СТАТИСТИКА — фото в кругах (stat-bg.png), overlay полупрозрачный
   ───────────────────────────────────────────── */
.ul-stats-item::before {
  background-color: rgba(8, 42, 56, 0.62) !important;
  opacity: 1 !important;
}
.ul-stats-item:hover::before {
  background-color: rgba(8, 42, 56, 0.46) !important;
  opacity: 1 !important;
}
.ul-stats-item .number { text-shadow: 0 2px 10px rgba(0,0,0,0.35); }

/* ─────────────────────────────────────────────
   8) БЛОГ — отступы карточек, фото, без hover-тени
   ───────────────────────────────────────────── */
.ul-blogs-slider .swiper-slide { height: auto; }
.ul-blog {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.ul-blog-txt { padding: clamp(18px, 1.5vw, 26px); display: flex; flex-direction: column; flex-grow: 1; }
.ul-blog-txt .ul-blog-btn { margin-top: auto; }
.ul-blog:hover { transform: translateY(-6px); box-shadow: none; }
.ul-blog-img { overflow: hidden; }

/* карточки, команда, отзывы — гасим любые hover-тени шаблона (п.7) */
.ul-donation:hover,
.ul-blog:hover,
.ul-team-member:hover,
.ul-event:hover,
.ul-review:hover { box-shadow: none !important; }

/* ─────────────────────────────────────────────
   ФИКСЫ: фон под лого, иконка кнопки, пагинация отзывов
   ───────────────────────────────────────────── */
/* убираем белый blob-фон под логотипом в шапке */
.ul-header .logo-container::before,
.ul-header .logo-container::after { display: none !important; }

/* иконка-кружок в кнопке: тёмно-бирюзовая на белом кружке (была нечитаемой) */
.ul-btn i { color: var(--ul-primary) !important; background-color: #fff !important; }
.kz-btn-gold { color: #fff !important; }
.kz-btn-gold i { color: var(--ul-secondary) !important; }

/* пагинация каруселей — центрируем, свои буллеты (плыла) */
.ul-testimonial-slider-pagination,
.ul-dontations-slider-pagination {
  position: static !important;
  display: flex; justify-content: center; align-items: center; gap: 9px;
  margin-top: clamp(26px, 2.6vw, 44px); width: 100%;
}
.ul-testimonial-slider-pagination .swiper-pagination-bullet,
.ul-dontations-slider-pagination .swiper-pagination-bullet {
  width: 9px; height: 9px; margin: 0 !important;
  background: #B9D5DA; opacity: 1; border-radius: 999px;
  transition: width .3s ease, background .3s ease;
}
.ul-testimonial-slider-pagination .swiper-pagination-bullet-active,
.ul-dontations-slider-pagination .swiper-pagination-bullet-active {
  width: 28px; background: var(--kz-gold-grad);
}

/* карточки отзывов — равная высота, аккуратные отступы */
.ul-testimonial-slider .swiper-slide { height: auto; }
.ul-review { height: 100%; display: flex; flex-direction: column; }
.ul-review-descr { flex-grow: 1; }

/* ─────────────────────────────────────────────
   БЛОК РУКОВОДИТЕЛЯ (Жанна Ким)
   ───────────────────────────────────────────── */
.kz-founder-card {
  background: linear-gradient(135deg, #F1FAFB 0%, #E7F4F6 100%);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 54px);
  position: relative;
  overflow: hidden;
}
.kz-founder-card::before {
  content: "";
  position: absolute; top: -40%; right: -8%;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,110,93,0.14), transparent 70%);
  pointer-events: none;
}
.kz-founder-img {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  max-width: 430px;
  box-shadow: 0 24px 60px -30px rgba(16,60,71,0.5);
}
.kz-founder-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 5 / 6; }
.kz-founder-badge {
  position: absolute; left: 18px; bottom: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kz-gold-grad); color: #fff; font-size: 24px;
  box-shadow: 0 10px 24px -8px rgba(239,110,93,0.6);
}
.kz-founder-txt { padding-left: clamp(0px, 2vw, 32px); }
.kz-founder-role {
  color: var(--ul-primary);
  font-family: var(--font-quicksand);
  font-weight: 700;
  font-size: clamp(15px, 1vw, 18px);
  margin: 6px 0 14px;
}
.kz-founder-quote {
  position: relative;
  margin: 22px 0 4px;
  padding: 6px 0 6px 20px;
  border-left: 3px solid var(--kz-gold-2);
  font-style: italic;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.5;
  color: var(--ul-black);
}
@media screen and (max-width: 767px) {
  .kz-founder-img { max-width: 100%; margin-inline: auto; }
}