/*
  «Габаритная схема» (159:3916..3943). Секция и сам чертёж (159:3919) —
  ОДИН И ТОТ ЖЕ фон в пиксель (проверено сэмплом изображения:
  rgb(246,245,248) = --color-cta-bg, НЕ --color-solutions-bg — на 1 unit
  темнее, что как раз и давало видимый шов вокруг чертежа до этого фикса).
  Обводка чертежа — тонкая линия (--color-drawing-border), не толстая
  белая рамка: по факту в макете это просто border:1px, белая рамка была
  ошибочной аналогией с cta-card.
*/
/* Отступы вокруг разделителей (159:3917/3918) — точные значения из
   координат Figma (не «увеличь/уменьши в N раз» на глаз, как было раньше):
   от контента до линии — 108px, от линии до следующего заголовка/секции —
   89px. См. тот же расчёт в product-description.css (divider1) и
   margin-top в product-samples.css (89 - 31 padding-top у заголовка = 58). */
.product-dimensions {
  padding: 89px var(--page-gutter) 108px;
  background: var(--color-cta-bg);
  border-bottom: 1px solid var(--color-divider);
}

/* margin:0 auto — без него блок с max-width висит у левого края секции,
   пока .product-dimensions__row (ниже) центрируется отдельно — на широких
   мониторах заголовок и контент визуально расходятся в разные стороны. */
.product-dimensions__heading {
  --heading-gradient-angle: 130.86deg;
  margin: 0 auto 45px;
  max-width: var(--content-width);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.product-dimensions__row {
  display: flex;
  align-items: stretch;
  gap: 72px;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* flex:0 0 560px (3×180 + 2×10 gap) — фикс. ширина, не растёт и не
   сжимается: карточки должны оставаться в ОДИН ряд по 3 всегда (кроме
   мобильных брейкпоинтов ниже), а не переносится на 2+1 при сжатии
   стороны с чертежом. */
.product-dimensions__cards {
  display: flex;
  flex: 0 0 560px;
  flex-wrap: wrap;
  gap: 10px;
}

.product-dimensions__card {
  position: relative;
  display: flex;
  flex: 0 0 180px;
  min-height: 313px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 15px;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: 0 10px 30px rgba(15, 15, 20, 0.05);
}

/* Декоративные уголки-«визир» по углам карточки — вместо экспорта из
   Figma (там это просто обрезанный кусок скруглённой рамки через
   overflow-clip) рисуем напрямую в CSS, тот же визуальный результат
   меньшим кодом. */
.product-dimensions__card::before,
.product-dimensions__card::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border: 1px solid var(--color-card-corner);
}

.product-dimensions__card::before {
  top: 10px;
  right: 10px;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 15px 0 0;
}

.product-dimensions__card::after {
  bottom: 10px;
  left: 10px;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 15px;
}

.product-dimensions__label {
  margin: 0;
  font-size: 13px;
  color: var(--color-accent);
  text-align: center;
}

.product-dimensions__value {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  font-weight: var(--fw-semibold);
  color: var(--color-cta-ink);
  text-align: center;
  overflow-wrap: break-word;
}

/* Высота — не aspect-ratio, а align-items:stretch на .product-dimensions__row:
   чертёж всегда ровно той же высоты, что и карточки слева (313px по
   умолчанию), какой бы ни была высота карточек (например если текст
   значения переносится на 2 строки и карточки станут выше). */
.product-dimensions__drawing {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-drawing-border);
  border-radius: var(--radius-drawing);
  overflow: hidden;
  background: var(--color-cta-bg);
}

.product-dimensions__drawing img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Мобильная адаптация (600px,
  база 390px). Карточки — полностью вертикальный список, заголовок — по центру
  (исключение раскладки: единственный H2 на странице с text-align:center
  вместо левого выравнивания). radius чертежа — 25px, исключение от
  --radius-drawing (=50px), уголки-визоры карточек не меняются (25×25,
  совпадают с десктопом 1:1).
*/
@media (max-width: 599.98px) {
  /* padding-bottom 38, а не десктопные 108: между фото «Описания» (низ на
     y=2302 в мобильном фрейме) и фото «Образцов» (старт 3320) есть ровно
     1018px, из которых 833 занимает фиксированное содержимое (заголовок
     92 + 45 + карточки 344 + 20 + чертёж 220, плюс заголовок «Образцы»
     92 + 20). На все четыре отступа-разделителя остаётся 185px:
     20 (до первого разделителя) + 89 (до этого заголовка) + 38 + 38
     (padding-top .product-samples). */
  .product-dimensions {
    padding: min(89px, calc(89 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw));
  }

  .product-dimensions__heading {
    max-width: none;
    margin-bottom: min(45px, calc(45 / 390 * 100vw));
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
    text-align: center;
    overflow-wrap: break-word;
  }

  .product-dimensions__row {
    flex-direction: column;
    gap: min(20px, calc(20 / 390 * 100vw));
    max-width: none;
  }

  /* flex-basis/width переехали сюда из снесённого @media (max-width:900px)
     (правки 2026-08-05, п.18, этап 2). Обе строки обязательны: ряд здесь
     колонка, значит главная ось вертикальная — базовое flex:0 0 560px
     зафиксировало бы список карточек по ВЫСОТЕ в 560px. */
  .product-dimensions__cards {
    flex-basis: auto;
    width: 100%;
    flex-direction: column;
    gap: min(10px, calc(10 / 390 * 100vw));
  }

  .product-dimensions__card {
    flex: none;
    width: 100%;
    min-height: 0;
    height: min(108px, calc(108 / 390 * 100vw));
    padding: min(15px, calc(15 / 390 * 100vw));
  }

  .product-dimensions__card::before,
  .product-dimensions__card::after {
    width: min(25px, calc(25 / 390 * 100vw));
    height: min(25px, calc(25 / 390 * 100vw));
  }

  .product-dimensions__label {
    font-size: min(13px, calc(13 / 390 * 100vw));
  }

  .product-dimensions__value {
    font-size: min(15px, calc(15 / 390 * 100vw));
    line-height: min(25px, calc(25 / 390 * 100vw));
  }

  .product-dimensions__drawing {
    width: 100%;
    height: min(220px, calc(220 / 390 * 100vw));
    min-height: 0;
    border-radius: min(25px, calc(25 / 390 * 100vw));
  }
}