/* Certifications-Section — Figma 2001:630, 1440x997.76 */

.certs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 100px var(--gutter);
  background: var(--c-surface-ice);

}

/* --- header --------------------------------------------------------------- */

.certs__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-right: 20px;
  flex-shrink: 0;
}

.certs__swoosh {
  position: absolute;
  right: 0;
  top: calc(50% - 1px);
  transform: translateY(-50%);
  width: 601px;
  height: 170px;
}

.certs__swoosh > img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.certs__intro {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.certs__title {
  width: 100%;
  max-width: var(--content-w);
  flex-shrink: 0;
  color: var(--c-text);
  word-break: break-word;
}

.certs__lead {
  width: 800px;
  flex-shrink: 0;
  color: var(--c-text-soft);
  word-break: break-word;
}

.certs__lead strong {
  font-weight: 600;
}

/* --- partner logos -------------------------------------------------------- */

.certs__logos {
  position: relative;
  flex-shrink: 0;
  width: 193px;
  height: 137.3604px;
}

.certs__logo {
  position: absolute;
}

.certs__logo > img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.certs__logo--24 {
  left: 0;
  top: 14.7795px;
  width: 112.1486px;
  height: 113.8873px;
}

.certs__logo--25 {
  left: 108.6712px;
  top: 0;
  width: 84.3288px;
  height: 68.6801px;
  opacity: 0.94;
}

.certs__logo--26 {
  left: 112.1487px;
  top: 72.1577px;
  width: 65.2027px;
  height: 65.2027px;
  opacity: 0.68;
  overflow: hidden;
}

/* Кроп исходника внутри квадратной рамки — проценты из макета. */
.certs__logo--26 > img {
  position: absolute;
  left: -15.53%;
  top: -3.21%;
  width: 131.8%;
  height: 106.71%;
}

/* --- certificate cards ---------------------------------------------------- */

.certs__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

.certs__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 400px;
  flex-shrink: 0;
}

/* Обёртки повёрнутых рамок хранят габаритный бокс из макета; сдвиг компенсирует
   то, что Figma отдаёт координату повёрнутого угла, а не угла бокса. */
.certs__frame-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.certs__frame-box--1 {
  top: 7.3184px;
  width: 289.7379px;
  height: 399.184px;
}

.certs__frame-box--3 {
  left: 12.3131px;
  width: 297.2695px;
  height: 400.7619px;
}

.certs__frame {
  display: flex;
  align-items: flex-start;
  flex: none;
  flex-shrink: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--c-white);
}

.certs__frame--1 {
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 2px 4px rgba(0, 20, 31, 0.04)) drop-shadow(0 8px 12px rgba(0, 20, 31, 0.1));
}

.certs__frame--2 {
  filter: drop-shadow(0 2px 4px rgba(0, 20, 31, 0.04)) drop-shadow(0 12px 16px rgba(0, 20, 31, 0.13));
}

.certs__frame--3 {
  transform: rotate(1.8deg);
  filter: drop-shadow(0 2px 4px rgba(0, 20, 31, 0.04)) drop-shadow(0 8px 12px rgba(0, 20, 31, 0.1));
}

.certs__photo {
  position: relative;
  flex-shrink: 0;
  height: 360px;
  border-radius: 6px;
  overflow: hidden;
}

.certs__photo-img {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
}

.certs__frame--1 .certs__photo {
  width: 247.572px;
}

.certs__photo-img--1 {
  left: -0.15%;
  width: 100.29%;
}

.certs__frame--2 .certs__photo {
  width: 245.384px;
}

.certs__photo-img--2 {
  left: -1.03%;
  width: 102.06%;
}

.certs__frame--3 .certs__photo {
  width: 253.097px;
}

.certs__photo-img--3 {
  left: -0.69%;
  width: 101.38%;
}

/* Подписи в макете — текст по размеру содержимого; ширины строк зафиксированы
   значениями из Figma, иначе метрики Geist в браузере дают до 2px разницы. */
.certs__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: var(--certs-label-w);
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
  line-height: normal;
  word-break: break-word;
}

.certs__label--1 {
  --certs-label-w: 209px;
  --certs-meta-w: 106px;
}

.certs__label--2 {
  --certs-label-w: 224px;
  --certs-meta-w: 134px;
}

.certs__label--3 {
  --certs-label-w: 251px;
  --certs-meta-w: 166px;
}

.certs__label-title {
  width: 100%;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--c-text);
}

.certs__label-meta {
  width: var(--certs-meta-w);
  flex-shrink: 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--c-text-meta);
}

/* --- divider and badges --------------------------------------------------- */

.certs__divider {
  width: 100%;
  height: 1px;
  flex-shrink: 0;
  background: var(--c-line-certs);
  opacity: 0.6;
}

.certs__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-shrink: 0;
}

/* Ширина бейджа взята из макета, подпись занимает остаток — так строка
   подписи получает ровно ту же ширину, что и текстовая нода в Figma. */
.certs__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--certs-badge-w);
  flex-shrink: 0;
  padding: 24px 32px;
  border-radius: 16px;
  background: var(--c-white);
  filter: drop-shadow(0 4px 5px rgba(2, 10, 13, 0.15));
}

.certs__badge--gmp {
  --certs-badge-w: 177px;
}

.certs__badge--iso {
  --certs-badge-w: 147px;
}

.certs__badge--non-gmo {
  --certs-badge-w: 204px;
}

.certs__badge--eco {
  --certs-badge-w: 195px;
}

.certs__badge-glyph {
  position: absolute;
  inset: 6.25% 6.25% 3.13% 6.25%;
}

.certs__badge-glyph > img {
  width: 100%;
  height: 100%;
  max-width: none;
  position: absolute;
}

.certs__badge-text {
  flex: 1 0 0;
  min-width: 0;
  color: var(--c-text);
  white-space: nowrap;
  word-break: break-word;
}

/* --- mobile artboard — Figma 50:333, 461x2015 ------------------------------
   Одна колонка: шапка без заголовка и без декора, карточки друг под другом и
   без поворотов, бейджи сеткой 2x2. Вертикальный ритм макета — 56px между
   блоками, поля 100px сверху и снизу.
   -------------------------------------------------------------------------- */

/* --- наведение -------------------------------------------------------------
   Рамка сертификата в макете повёрнута, и её поворот держится на обёртке
   .certs__frame. Поэтому подъём вешаем на .certs__card — иначе translateY
   перебил бы rotate и лист встал бы ровно.
   -------------------------------------------------------------------------- */

.certs__card {
  transition: transform var(--dur) var(--ease);
}

.certs__card:hover {
  transform: translateY(var(--lift));
}

.certs__photo-img {
  transition: filter var(--dur) var(--ease);
}

.certs__card:hover .certs__photo-img {
  filter: brightness(1.03);
}

.certs__badge {
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.certs__badge:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 14px rgba(2, 10, 13, 0.22));
}

/* --- широкий экран ---------------------------------------------------------
   Ряд сертификатов, разделитель и плашки идут во всю ширину секции (поля
   gutter). Шапка — в общей колонке 1280.
   -------------------------------------------------------------------------- */

.certs__header {
  max-width: var(--content-w);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .certs {
    gap: 56px;
  }

  /* В мобильном макете шапка — это только пилюля и лид, по центру колонки;
     подложка, заголовок и логотипы партнёров в поддереве 50:334 отсутствуют. */
  .certs__header {
    gap: 0;
    padding-right: 0;
  }

  .certs__swoosh,
  .certs__title,
  .certs__logos {
    display: none;
  }

  .certs__intro {
    align-items: center;
  }

  .certs__lead {
    width: 100%;
    text-align: center;
  }

  /* --- cards --- */

  .certs__row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* Карточка шире колонки на 19px (400 против 381) и вылезает по 9.5px с каждой
     стороны — центрирование по кросс-оси даёт ровно это смещение. */
  .certs__card {
    width: calc(100% + 19px);
  }

  /* Поворотов на мобильном нет, поэтому габаритные обёртки схлопываются
     до размера самой рамки. */
  .certs__frame-box--1,
  .certs__frame-box--3 {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
  }

  .certs__frame--1,
  .certs__frame--3 {
    transform: none;
  }

  /* --- badges --- */

  .certs__badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
  }

  .certs__badge {
    width: auto;
    padding: 12px 16px;
  }

  /* Бейдж тянется на половину колонки, а подпись остаётся по содержимому —
     ширины строк закреплены фигмовскими значениями (метрики Geist в браузере
     на 1% уже, чем в Figma). */
  .certs__badge-text {
    flex: 0 0 auto;
    width: var(--certs-badge-text-w);
  }

  .certs__badge--gmp {
    --certs-badge-text-w: 89px;
  }

  .certs__badge--iso {
    --certs-badge-text-w: 58px;
  }

  .certs__badge--non-gmo {
    --certs-badge-text-w: 115px;
  }

  .certs__badge--eco {
    --certs-badge-text-w: 107px;
  }
}

/* Ниже ~446px две колонки бейджей уже не помещаются (самый широкий бейдж —
   171px плюс 24px зазора), поэтому ряд складывается в одну колонку. */
@media (max-width: 445px) {
  .certs__badges {
    grid-template-columns: 1fr;
  }
}