/*
  «Габаритная схема» для автоматизированных линий (Figma 315:5047 —
  десктоп 318:5048, мобильная 319:5376). Самостоятельный блок, а НЕ
  модификатор .product-dimensions: у линий вместо таблицы размеров идёт
  один широкий чертёж с плашкой-примечанием под ним, и правка одного
  блока не должна молча задевать второй. Общий у них только ритм секции.

  Оба блока взаимоисключающие — на странице всегда ровно один из них,
  выбор в single-equipment.php.

  Три свойства ниже повторяют .product-dimensions (product-dimensions.css:15-19)
  намеренно: этот блок встаёт на её место, и стык с «Описанием» сверху и
  «Образцами» снизу обязан остаться прежним. В самом макете фон фрейма
  #F5F5F8, но фрейм нарисован отдельно от страницы — на странице здесь
  всегда стоял --color-cta-bg (#F6F5F8).

  Обводка и скругление чертежа — CSS, не часть картинки: редактор
  загружает прямоугольный файл, оформление остаётся на месте.
*/
.product-line-dimensions {
  padding: 89px var(--page-gutter) 108px;
  background: var(--color-cta-bg);
  border-bottom: 1px solid var(--color-divider);
}

.product-line-dimensions__heading {
  --heading-gradient-angle: 130.86deg;
  margin: 0 auto 41px;
  max-width: var(--content-width);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-align: center;
}

.product-line-dimensions__drawing {
  height: 439px;
  max-width: var(--content-width);
  margin: 0 auto;
  border: 1px solid var(--color-drawing-border);
  border-radius: var(--radius-drawing);
  overflow: hidden;
  background: var(--color-cta-bg);
}

/* <picture> нужна явная высота: без неё height:100% у <img> не к чему
   привязать — процент от inline-обёртки без определённой высоты не
   считается, и картинка схлопывается до натуральных пропорций. */
.product-line-dimensions__drawing picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/*
  Высота плашки не задана: текст приходит из админки, и плашку тянет вниз
  он сам (25px строки + 2×25px паддинга дают ровно макетные 75px на одну
  строку).

  Боковой паддинг 20px, а не 33px «как в макете». В макете текстовый слой
  ровно 694px в плашке 760 — то есть занимает бок в бок весь бокс, и 33px
  это не заданный отступ, а остаток. В браузере та же строка меряется
  696.3px (расхождение шрифтовых движков ~0.3%), и типограф склеивает
  «под проект» неразрывным пробелом в один непереносимый кусок — строка
  целиком уезжала вниз, плашка становилась двухстрочной. 20px дают боксу
  720px и ~3.3% запаса. Видимо это не становится: текст центрирован, и
  при макетной длине воздух по бокам остаётся те же ~32px; шире паддинга
  влияет только на то, где строка сломается. Вертикальную линию уголка
  (10px от края) текст при этом не задевает.
*/
.product-line-dimensions__note {
  position: relative;
  z-index: 1;
  width: 760px;
  max-width: 100%;
  margin: 0 auto;
  padding: 25px 20px;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-size: 15px;
  line-height: 25px;
  font-weight: var(--fw-medium);
  color: var(--color-cta-ink);
  text-align: center;
  overflow-wrap: break-word;
}

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

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

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

/* Наезд плашки на нижний край чертежа — 31px по макету. Правило на паре
   селекторов, а не margin-top у самой плашки: чертёж опционален в
   разметке, и без него отрицательный отступ утащил бы плашку под
   заголовок. */
.product-line-dimensions__drawing + .product-line-dimensions__note {
  margin-top: -31px;
}

.product-line-dimensions__accent {
  color: var(--color-accent);
}

/*
  Мобильная (база 390px). Отличий от десктопа три, все из макета:
  плашка НЕ наезжает на чертёж, а стоит под ним с зазором 30px; радиус
  чертежа 25px вместо --radius-drawing (=50px) — то же исключение, что и
  у .product-dimensions__drawing; текст плашки полужирный, а не medium.

  Чертёж на мобильной — отдельный файл (<picture> в разметке): широкая
  схема линии в боксе 330×220 нечитаема.
*/
@media (max-width: 599.98px) {
  .product-line-dimensions {
    padding: min(89px, calc(89 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw));
  }

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

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

  /* На мобильной плашка не наезжает на чертёж, а стоит под ним с
     зазором — поэтому положительное значение вместо десктопных −31px. */
  .product-line-dimensions__drawing + .product-line-dimensions__note {
    margin-top: min(30px, calc(30 / 390 * 100vw));
  }

  .product-line-dimensions__note {
    width: 100%;
    padding: min(30px, calc(30 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw));
    font-size: min(15px, calc(15 / 390 * 100vw));
    line-height: min(25px, calc(25 / 390 * 100vw));
    font-weight: var(--fw-semibold);
  }

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