/* ============================================================
   GiveJoy — редизайн 2026 (макети Darya, Figma)
   Перший екран (#about) + блоки проєктів (.gj-proj)
   Десктоп масштабується від макета 1920px через --u.
   ============================================================ */
:root {
  --gj-red: #f70000;
  --gj-navy: #14346f;
  --gj-ink: #041840;
  --gj-ink-55: rgba(4, 24, 64, .55);
  --gj-sky: #20a1ff;
  --gj-orange: #ff8400;
  --gj-blue: #0038a8;
  --gj-card-bg: #f5f9ff;
  --gj-card-border: #2d7fdd;
  --gj-grey: #959595;
  --gj-mont: 'Mont', 'Montserrat', sans-serif;
  --gj-montserrat: 'Montserrat', sans-serif;
  --u: calc(100vw / 1920);
  --gj-font-fix: .9;
}

.gj-hero, .gj-hero *, .gj-proj, .gj-proj * { box-sizing: border-box; }
:where(.gj-hero, .gj-proj) :where(p, h1, h2, figure) { margin: 0; }

/* ---------------- Перший екран ---------------- */
.gj-hero {
  position: relative;
  overflow: hidden;
  background: #fff url(hero-bg.webp) center top / cover no-repeat;
  font-family: var(--gj-montserrat);
}
.gj-hero__ribbon,
.gj-hero__smile,
.gj-hero__logo { position: absolute; display: block; pointer-events: none; }
.gj-hero__ribbon { left: 0; top: 0; width: 100%; height: auto; }

.gj-hero__slogan {
  margin: 0;
  font-family: var(--gj-montserrat);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gj-ink);
}
.gj-hero__slogan span { display: block; }
.gj-hero__slogan span:first-child { color: var(--gj-orange); }

.gj-hero__cards { display: grid; }
.gj-hero__card {
  background: var(--gj-card-bg);
  border: 1px solid var(--gj-card-border);
  border-radius: 15px;
  box-shadow: 0 19px 24px rgba(24, 63, 108, .4);
  font-weight: 500;
  line-height: 1.62;
  color: var(--gj-ink-55);
}
.gj-hero__card b { font-weight: 600; color: var(--gj-sky); }

.gj-hero__note {
  border-left: 3px solid var(--gj-sky);
  line-height: 1.62;
  color: var(--gj-navy);
}
.gj-hero__note b { font-weight: 700; }
.gj-hero__note a {
  font-weight: 700;
  font-style: italic;
  color: var(--gj-orange);
  text-decoration: underline;
}
.gj-hero__note a:hover { color: var(--gj-sky); }

.gj-hero__cert { margin: 0; }
.gj-hero__cert a {
  display: block;
  overflow: hidden;
  border: 6px solid var(--gj-sky);
  border-radius: 10px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, .25);
  cursor: zoom-in;
}
.gj-hero__cert img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gj-hero__cert figcaption {
  font-weight: 500;
  font-style: italic;
  line-height: 1.62;
  color: var(--gj-grey);
  text-align: center;
}

.gj-hero__lang {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--gj-orange);
  border: 1px solid #fff;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  font-family: var(--gj-mont);
  font-weight: 600;
  line-height: 1.3;
  z-index: 2;
}
.gj-hero__lang a, .gj-hero__lang span { color: #fff; text-decoration: none; }
.gj-hero__lang [aria-current] { color: var(--gj-navy); }
.gj-hero__lang a:hover { color: var(--gj-navy); }

@media (min-width: 1025px) {
  .gj-hero {
    min-height: calc(1080 * var(--u));
    padding: calc(493 * var(--u)) 0 calc(60 * var(--u)) calc(220 * var(--u));
  }
  .gj-hero__smile { left: calc(1502 * var(--u)); top: calc(71 * var(--u)); width: calc(241 * var(--u)); height: auto; }
  .gj-hero__logo { left: calc(200 * var(--u)); top: calc(158 * var(--u)); width: calc(506 * var(--u)); height: auto; }
  .gj-hero__lang {
    left: 118px;
    top: calc(320.7 * var(--u));
    width: max(calc(88 * var(--u)), 56px);
    height: max(calc(198 * var(--u)), 132px);
    padding-left: max(calc(30 * var(--u)), 16px);
    gap: max(calc(30 * var(--u)), 18px);
    font-size: max(calc(20 * var(--u)), 14px);
  }
  .gj-hero__main { width: calc(966 * var(--u)); }
  .gj-hero__slogan, .gj-hero__cards, .gj-hero__note { position: relative; z-index: 1; }
  .gj-hero__slogan { font-size: calc(66.406 * var(--u)); }
  .gj-hero__cards {
    grid-template-columns: 1fr 1fr;
    gap: calc(46 * var(--u));
    margin-top: calc(25 * var(--u));
  }
  .gj-hero__card {
    min-height: calc(195 * var(--u));
    padding: calc(25 * var(--u));
    font-size: max(calc(18 * var(--u)), 12px);
  }
  .gj-hero__note {
    margin-top: calc(25 * var(--u));
    padding-left: calc(25 * var(--u));
    font-size: max(calc(19 * var(--u)), 12.5px);
  }
  .gj-hero__cert {
    position: absolute;
    right: calc(100 * var(--u));
    top: calc(262.3 * var(--u));
    width: calc(500 * var(--u));
    z-index: 1;
  }
  .gj-hero__cert a {
    height: calc(708.65 * var(--u));
    border-width: calc(6 * var(--u));
    border-radius: calc(10 * var(--u));
  }
  .gj-hero__cert figcaption {
    margin-top: calc(20 * var(--u));
    font-size: max(calc(18 * var(--u)), 12px);
    white-space: nowrap;
  }
}

@media (max-width: 1024px) {
  .gj-hero {
    padding: 195px 25px 60px;
    background-position: center bottom;
  }
  .gj-hero__ribbon, .gj-hero__smile, .gj-hero__logo, .gj-hero__lang { display: none; }
  .gj-hero__main { display: flex; flex-direction: column; max-width: 390px; margin: 0 auto; }
  .gj-hero__slogan { order: 1; font-size: clamp(20px, 6.03vw, 26.5px); }
  .gj-hero__cert { order: 2; margin: 25px auto 0; width: 100%; max-width: 360px; }
  .gj-hero__cert a {
    aspect-ratio: 360 / 510.23;
    border-width: 4.56px;
    border-radius: 7.6px;
    box-shadow: 7.6px 7.6px 11.4px rgba(0, 0, 0, .25);
  }
  .gj-hero__cert figcaption { margin-top: 10px; font-size: 14px; }
  .gj-hero__cards { order: 3; gap: 28px; margin-top: 25px; }
  .gj-hero__card {
    padding: 21px 21px 19px;
    border-width: .85px;
    border-radius: 12.7px;
    box-shadow: 0 16px 10px rgba(24, 63, 108, .4);
    font-size: 14px;
  }
  .gj-hero__note { order: 4; margin-top: 28px; padding-left: 15px; border-left-width: 2.8px; font-size: 14px; }
}

/* Посилання на новий сайт над логотипом */
.gj-hero__newsite { font-weight: 600; line-height: 1.3; color: #fff; }
.gj-hero__newsite a { font-weight: 700; color: var(--gj-orange); text-decoration: underline; text-underline-offset: .15em; }
.gj-hero__newsite a:hover, .gj-hero__newsite a:focus-visible { color: #fff; }
@media (min-width: 1025px) {
  .gj-hero__newsite {
    position: absolute;
    left: calc(200 * var(--u));
    top: calc(72 * var(--u));
    z-index: 1;
    font-size: max(calc(30 * var(--u)), 16px);
  }
}
@media (max-width: 1024px) {
  .gj-hero__newsite { order: 0; margin-bottom: 14px; font-size: 16px; color: var(--gj-navy); }
}

/* ---------------- Блоки проєктів ---------------- */
.gj-proj {
  position: relative;
  background: #fff;
  font-family: var(--gj-mont);
  color: var(--gj-navy);
  scroll-margin-top: 20px;
}
.gj-proj__media {
  position: relative;
  overflow: hidden;
  background: var(--gj-navy);
}
.gj-proj__media video,
.gj-proj__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gj-proj__media a { display: block; width: 100%; height: 100%; cursor: zoom-in; }

.gj-proj__body { display: flex; flex-direction: column; }
.gj-proj__title { font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--gj-red); }
.gj-proj__lead { border-left: 3px solid var(--gj-sky); font-weight: 500; line-height: 1.45; color: var(--gj-navy); }
.gj-proj__accent { font-weight: 700; line-height: 1.45; text-transform: uppercase; color: var(--gj-orange); }

.gj-proj__photos { display: flex; justify-content: space-between; }
.gj-proj__photo {
  display: block;
  flex: none;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(20, 52, 111, .5);
  border-radius: 15px;
  cursor: zoom-in;
}
.gj-proj__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gj-proj__photo:hover img { transform: scale(1.05); }

.gj-proj__card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid var(--gj-sky);
  border-radius: 15px;
  box-shadow: 0 19px 24px rgba(24, 63, 108, .4);
}
.gj-proj__logo { flex: none; display: block; height: auto; }
.gj-proj__divider { flex: none; align-self: stretch; background: var(--gj-sky); }
.gj-proj__cta { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gj-proj__cta-title { font-weight: 600; line-height: 1.25; text-transform: uppercase; color: var(--gj-navy); white-space: nowrap; }
.gj-proj__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--gj-orange);
  border: 1.075px solid #fff;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 5.373px 5.373px 10.746px rgba(0, 0, 0, .45);
  transition: transform .2s ease, filter .2s ease;
}
.gj-proj__btn:hover, .gj-proj__btn:focus-visible { color: #fff; transform: translateY(-2px); filter: brightness(1.05); }
.gj-proj__btn img { display: block; flex: none; }
.gj-proj__pay { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.gj-proj__pay img { display: block; width: auto; }

@media (min-width: 1025px) {
  .gj-proj {
    display: grid;
    grid-template-columns: calc(563.33 * var(--u)) auto;
    column-gap: calc(100.65 * var(--u));
    min-height: calc(1080 * var(--u));
    padding: calc(40 * var(--u)) 0 calc(40 * var(--u)) calc(297 * var(--u));
  }
  .gj-proj--fund { padding-left: calc(332 * var(--u)); grid-template-columns: calc(562.5 * var(--u)) auto; column-gap: calc(66.5 * var(--u)); }
  .gj-proj__media { width: 100%; height: calc(1000 * var(--u)); }
  .gj-proj__body { width: calc(var(--w, 770) * var(--u)); }
  .gj-proj--fund .gj-proj__body { justify-content: center; }
  .gj-proj__title { font-size: calc(var(--t, 64) * var(--u)); }
  .gj-proj__lead { margin-top: calc(15 * var(--u)); padding-left: calc(25 * var(--u)); font-size: max(calc(30 * var(--u)), 15px); }
  .gj-proj__accent { margin-top: calc(16 * var(--u)); font-size: max(calc(30 * var(--u)), 15px); }
  .gj-proj__photos { margin-top: calc(35 * var(--u)); margin-bottom: auto; }
  .gj-proj__photo { width: calc(240 * var(--u)); }
  .gj-proj__card {
    margin-top: calc(35 * var(--u));
    min-height: calc(330.3 * var(--u));
    padding: calc(42.5 * var(--u)) calc(48 * var(--u));
  }
  .gj-proj--fund .gj-proj__lead { margin-top: calc(34 * var(--u)); }
  .gj-proj--fund .gj-proj__card { margin-top: calc(39 * var(--u)); }
  .gj-proj__logo { width: calc(199.4 * var(--u)); }
  .gj-proj__divider { width: 1px; margin: 0 calc(40 * var(--u)); }
  /* Mont не підключений, Montserrat ширший на ~10% — компенсуємо, щоб рядки не переносились */
  .gj-proj__cta-title { font-size: calc(var(--ct, 37.824) * var(--gj-font-fix) * var(--u)); }
  .gj-proj__btn {
    max-width: calc(394 * var(--u));
    height: calc(72.234 * var(--u));
    margin-top: calc(9 * var(--u));
    gap: calc(7 * var(--u));
    border-radius: calc(13.133 * var(--u));
    font-size: calc(25.485 * var(--u));
    letter-spacing: calc(1.0194 * var(--u));
  }
  .gj-proj__btn img { width: calc(28.96 * var(--u)); height: calc(28.96 * var(--u)); }
  .gj-proj__pay { max-width: calc(394 * var(--u)); margin-top: calc(23.6 * var(--u)); }
  .gj-proj__pay img { height: calc(20.738 * var(--u)); }
}

@media (max-width: 1024px) {
  .gj-proj { display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: 40px 20px; }
  .gj-proj__media { width: 100%; max-width: 400px; aspect-ratio: 563.33 / 1000; margin: 0 auto 30px; border-radius: 0; }
  .gj-proj__title { font-size: clamp(28px, 8.4vw, 38px); }
  .gj-proj__lead { margin-top: 12px; padding-left: 16px; font-size: 18px; }
  .gj-proj__accent { margin-top: 14px; font-size: 18px; }
  .gj-proj__photos { margin-top: 22px; gap: 10px; }
  .gj-proj__photo { flex: 1 1 0; width: auto; border-radius: 10px; }
  .gj-proj__card { flex-direction: column; margin-top: 30px; padding: 26px 20px; gap: 20px; }
  .gj-proj__logo { width: 150px; }
  .gj-proj__divider { width: 100%; height: 1px; align-self: auto; }
  .gj-proj__cta-title { font-size: clamp(18px, 5.2vw, 24px); white-space: normal; }
  .gj-proj__btn {
    max-width: 340px;
    min-height: 56px;
    margin-top: 16px;
    padding: 10px 16px;
    gap: 8px;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: .72px;
  }
  .gj-proj__btn img { width: 24px; height: 24px; }
  .gj-proj__pay { max-width: 340px; margin-top: 18px; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
  .gj-proj__pay img { height: 16px; }
}

/* ---------------- Слайдер (блок лікарні) ---------------- */
.gj-slider { position: relative; width: 100%; height: 100%; }
.gj-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gj-slider__track::-webkit-scrollbar { display: none; }
.gj-slider__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.gj-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px; padding: 0;
  border: 0; border-radius: 6px;
  background: rgba(20, 52, 111, .35); color: #fff;
  font-size: 44px; line-height: 1; cursor: pointer;
  transition: background .2s ease;
}
.gj-slider__nav:hover, .gj-slider__nav:focus-visible { background: rgba(20, 52, 111, .7); color: #fff; }
.gj-slider__prev { left: 10px; }
.gj-slider__next { right: 10px; }
.gj-slider__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.gj-slider__dot {
  width: 10px; height: 10px; padding: 0;
  border: 1px solid #fff; border-radius: 50%;
  background: rgba(255, 255, 255, .45); cursor: pointer;
}
.gj-slider__dot[aria-current="true"] { background: var(--gj-orange); border-color: var(--gj-orange); }

/* ---------------- Лайтбокс ---------------- */
.gj-lb {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 40, .9);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.gj-lb.is-open { opacity: 1; visibility: visible; }
.gj-lb__img { max-width: 90vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.gj-lb__close, .gj-lb__nav {
  position: absolute; border: 0; background: none; color: #fff; cursor: pointer;
  font-size: 44px; line-height: 1; padding: 10px 16px; opacity: .8;
}
.gj-lb__close:hover, .gj-lb__nav:hover { opacity: 1; background: none; color: #fff; }
.gj-lb__close { top: 12px; right: 16px; }
.gj-lb__prev { left: 10px; top: 50%; transform: translateY(-50%); font-size: 64px; }
.gj-lb__next { right: 10px; top: 50%; transform: translateY(-50%); font-size: 64px; }
.gj-lb.is-single .gj-lb__nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gj-proj__photo img, .gj-proj__btn, .gj-lb { transition: none; }
  .gj-slider__track { scroll-behavior: auto; }
}

/* ---------------- Відступ під блоками історій (фон section-bg.svg з «вкладкою») ---------------- */
.elementor-element.elementor-element-d7351a6,
.elementor-element.elementor-element-6a5b313,
.elementor-element.elementor-element-a129aa2,
.elementor-element.elementor-element-05607aa,
.elementor-element.elementor-element-01da190 {
  --margin-bottom: 75px;
  margin-bottom: 75px !important;
}