.uuwg-mission {
  margin-block-start: 0;
}

.uuwg-mission .container {
  height: fit-content;
  display: grid;
  grid-template-columns: minmax(0, 593fr) minmax(0, 630fr);
  grid-template-rows: auto;
  gap: 57px;
  align-items: start;
}

/* --- Текстова колонка --- */

.uuwg-mission__heading {
  margin-bottom: 32px;
  color: var(--wp--preset--color--blue-500);
}

.uuwg-mission__paragraph {
  color: var(--wp--preset--color--blue-200);
  font-size: var(--wp--preset--font-size--text-body);
  font-weight: 500;
  line-height: 120%;
  margin-bottom: 16px;
}

.uuwg-mission__paragraph:last-of-type {
  margin-bottom: 0;
}

.uuwg-mission__button {
  margin-top: 60px;
  font-weight: 600;
  display: inline-block;
  cursor: pointer;
}

/* --- Колаж --- */

.uuwg-mission__collage {
  max-width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1.1fr;
  grid-template-rows: auto auto;
  gap: 12.25px;
  justify-items: center;
  align-items: center;
}

.uuwg-mission__photo {
  position: relative;
  border-radius: var(--wp--custom--border-radius--card);
}

.uuwg-mission__photo-frame {
  width: 100%;
  height: 100%;
  border-radius: var(--wp--custom--border-radius--card);
  /* overflow: hidden; */
  /* округлення кутів і обрізка фото залишаються тут */
}

.uuwg-mission__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wp--custom--border-radius--card);
}

.uuwg-mission__photo--1 img {
  aspect-ratio: 222.36 / 199.08;
}

.uuwg-mission__photo--2 img {
  aspect-ratio: 300.15 / 199.08;
}

.uuwg-mission__photo--3 img {
  aspect-ratio: 232.36 / 276.26;
}

/* Фото 1 — верхнє, займає перший стовпчик */
.uuwg-mission__photo--1 {
  grid-column: 1;
  grid-row: 1;
  margin-left: auto;
}

/* Фото 2 — нижнє ліве */
.uuwg-mission__photo--2 {
  grid-column: 1;
  grid-row: 2;
  margin-left: auto;
}

/* Фото 3 — праве, високе, розтягнуте на обидва рядки */
.uuwg-mission__photo--3 {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-right: auto;
}

/* --- Бейджі --- */

.uuwg-mission__badge {
  position: absolute;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--text-sm, 0.875rem);
  font-weight: 600;
  padding: var(--wp--custom--pill--padding-y) var(--wp--custom--pill--padding-x);
  border-radius: var(--wp--custom--border-radius--button, 999px);
  white-space: nowrap;
  z-index: 2;
}

.uuwg-mission__badge--top-right {
  top: 1.5rem;
  right: -0.75rem;
  /* прив'язка до краю фото, не до фіксованого px від центру */
}

.uuwg-mission__badge-1 {
  top: 1.5rem;
  right: -2.75rem;
}

.uuwg-mission__badge--floating {
  left: 2.25rem;
  top: calc(50% - 4rem);
  z-index: 3;
}

/* Декоративні пелюстки з макету (світло-блакитні листя) —
   плейсхолдер, замінити на реальний SVG-асет із Figma */

.uuwg-mission__photo--3::before,
.uuwg-mission__photo--3::after {
  position: absolute;
  width: 154px;
  height: 154px;
  pointer-events: none;
  top: -90px;
  right: -49px;
  transform: rotate(-104deg);
}

.uuwg-mission__photo--3::before {
  content: url('../../assets/images/decorative/flower-back.svg');
  z-index: -1;
}

.uuwg-mission__photo--3::after {
  content: url('../../assets/images/decorative/flower-front.svg');
  filter: blur(1px);
  z-index: 0;
}

.uuwg-mission__photo--2::before,
.uuwg-mission__photo--2::after {
  position: absolute;
  width: 154px;
  height: 154px;
  pointer-events: none;
  bottom: -90px;
  left: -30px;
  transform: rotate(80deg);
}

.uuwg-mission__photo--2::before {
  content: url('../../assets/images/decorative/flower-back.svg');
  z-index: -1;
}

.uuwg-mission__photo--2::after {
  content: url('../../assets/images/decorative/flower-front.svg');
  filter: blur(1px);
  z-index: 0;
}

/* --- Адаптив --- */

@media (max-width: 900px) {
  .uuwg-mission .container {
    grid-template-columns: 1fr;
  }

  .uuwg-mission__collage {
    grid-template-columns: 1fr 1fr;
  }

  .uuwg-mission__collage {
    padding-top: 10.68px;
    padding-right: 33.31px;
    padding-bottom: 82.52px;
    padding-left: 64.29px;
  }

  .uuwg-mission__badge--floating {
    left: -1.75rem;
  }
}


@media screen and (max-width: 768px) {
  .uuwg-mission .container {
    gap: 50px;
  }

  .uuwg-mission__heading {
    margin-bottom: 24px;
  }

  .uuwg-mission__paragraph {
    margin-bottom: 12px;
  }

  .uuwg-mission__button.wp-element-button {
    margin-top: 32px;
  }

  .uuwg-mission__photo--2::before,
  .uuwg-mission__photo--2::after,
  .uuwg-mission__photo--3::before,
  .uuwg-mission__photo--3::after {
    width: 93.68px;
    height: 94.02px;
  }

  .uuwg-mission__photo--2::before,
  .uuwg-mission__photo--2::after {
    bottom: -56px;
    left: -16px;
  }

  .uuwg-mission__photo--3::before,
  .uuwg-mission__photo--3::after {
    top: -59px;
    right: -19px;
  }

  .uuwg-mission__badge--top-right {
    right: -4.75rem;
  }

  .uuwg-mission__badge--floating {
    left: 2.25rem;
  }

}

@media screen and (max-width: 500px) {
  .uuwg-mission__collage {
    padding-top: 0;
    padding-right: 2.31px;
    padding-bottom: 52.52px;
    padding-left: 0;
  }

  .uuwg-mission__photo img {
    width: 90%;
    height: 90%;
  }

  .uuwg-mission__photo--1 img,
  .uuwg-mission__photo--2 img {
    margin-left: auto;
  }

  .uuwg-mission__photo--3 img {
    margin-right: auto;
  }

  .uuwg-mission__button.wp-element-button {
    display: flex;
    align-items: center;
    margin: 32px auto 0 auto;
    justify-content: center;
  }

  .uuwg-mission__badge--floating {
    left: -0.75rem;
  }
}

@media screen and (max-width: 375px) {


  .uuwg-mission__photo--2::before,
  .uuwg-mission__photo--2::after,
  .uuwg-mission__photo--3::before,
  .uuwg-mission__photo--3::after {
    width: 72.6px;
    height: 72.94px;
  }

  .uuwg-mission__photo--2::before,
  .uuwg-mission__photo--2::after {
    bottom: -56px;
    left: -16px;
  }

  .uuwg-mission__photo--3::before,
  .uuwg-mission__photo--3::after {
    top: -59px;
    right: -19px;
  }
}