/* ==========================================================================
   Hero страницы «Графический дизайн»
   Опорный кадр 1920 × 1082.5. Координаты переведены в проценты от кадра:

     линия под шапкой      y 126, во всю ширину
     вертикали             x 802.5 / 1107 / 1542, от линии шапки до низа
     горизонталь           y 504, от x 801 до правого края
     снимок «WOMAN»        x 801    y 126   306 × 378
     снимок «корова»       x 1543   y 126   378 × 378
     снимок «петух»        x 1105.5 y 504   436.5 × 576
     заголовок             x 108    y 157   Muller Medium 48 / 1.12
     кнопка                x 108    y 934   429 × 74

   Правая половина кадра — сетка из линий 3px, в ячейки которой вложены три
   снимка. Каждый снимок обрезан своим кадром: в макете картинка крупнее
   ячейки и сдвинута, поэтому object-fit тут не подходит — вместо него
   ячейка с overflow: hidden, а внутри абсолютно позиционированный <img>
   шириной больше 100%. Все смещения в процентах от ячейки, так что кадр
   держится на любой ширине экрана.
   ========================================================================== */

:root {
  /* Толщина линий сетки: 3.06px при ширине 1920 */
  --graphic-hero-line: max(1px, 0.15625vw);
}

.graphic-hero {
  position: relative;
  aspect-ratio: 3840 / 2165;
  overflow: hidden;
  background-color: var(--bg-base);
}

/* --- Сетка линий -----------------------------------------------------------
   Линии лежат поверх снимков (z-index: 1): в макете они обводят ячейки, а
   изображения заходят под них. Каждая линия сдвинута на половину своей
   толщины — в макете это осевая линия со штрихом по обе стороны от оси, и
   без сдвига она съезжала бы внутрь белой ячейки, оставляя край снимка
   голым.
   -------------------------------------------------------------------------- */

.graphic-hero__grid {
  display: contents;
}

.graphic-hero__rule,
.graphic-hero__line {
  position: absolute;
  z-index: 1;
  background-color: var(--color-black);
}

/* Линия под шапкой: во всю ширину кадра, ось y 126 */
.graphic-hero__rule {
  inset-inline: 0;
  top: calc(11.6397% - var(--graphic-hero-line) / 2);
  height: var(--graphic-hero-line);
}

/* Горизонталь между верхним и нижним рядами снимков, ось y 504 */
.graphic-hero__rule--mid {
  left: 41.7188%;
  right: 0;
  top: calc(46.5589% - var(--graphic-hero-line) / 2);
}

.graphic-hero__line {
  bottom: 0;
  width: var(--graphic-hero-line);
}

/* Оси вертикалей: x 802.5 / 1107 / 1542 */

/*
   В макете первая вертикаль начинается на 3px выше остальных (y 123) и
   торчит хвостиком над линией шапки. Здесь она начинается там же, где две
   другие: верхний край уходит под горизонталь, и стык получается чистым.
*/
.graphic-hero__line--1 {
  left: calc(41.8005% - var(--graphic-hero-line) / 2);
  top: 11.6397%;
}

.graphic-hero__line--2 {
  left: calc(57.6573% - var(--graphic-hero-line) / 2);
  top: 11.6397%;
}

.graphic-hero__line--3 {
  left: calc(80.3125% - var(--graphic-hero-line) / 2);
  top: 11.6397%;
}

/* --- Снимки ----------------------------------------------------------------
   Обёртка .graphic-hero__media на десктопе прозрачна для раскладки
   (display: contents): ячейки позиционируются от самой секции. На узком
   экране она превращается в грид и собирает снимки в коллаж.
   -------------------------------------------------------------------------- */

.graphic-hero__media {
  display: contents;
}

.graphic-hero__shot {
  position: absolute;
  overflow: hidden;
}

.graphic-hero__shot img {
  position: absolute;
  max-width: none;
  height: auto;
}

/* Обложка журнала: кадр 306 × 378, картинка 381 × 677 со сдвигом −38 / −47 */
.graphic-hero__shot--mag {
  left: 41.7188%;
  top: 11.6397%;
  width: 15.9375%;
  height: 34.9192%;
}

.graphic-hero__shot--mag img {
  left: -12.4183%;
  top: -12.4339%;
  width: 124.5098%;
}

/* Корова: кадр 378 × 378, картинка 377 × 533 со сдвигом 0 / −62 */
.graphic-hero__shot--cow {
  left: 80.3646%;
  top: 11.6397%;
  width: 19.6875%;
  height: 34.9192%;
}

.graphic-hero__shot--cow img {
  left: 0;
  top: -16.4021%;
  width: 99.7354%;
}

/* Петух: кадр 436.5 × 576, картинка 458 × 581 со сдвигом −8.5 / −3 */
.graphic-hero__shot--bird {
  left: 57.5776%;
  top: 46.5589%;
  width: 22.7343%;
  height: 53.2076%;
}

.graphic-hero__shot--bird img {
  left: -1.9451%;
  top: -0.5208%;
  width: 104.9256%;
}

/* --- Заголовок и кнопка --------------------------------------------------- */

.graphic-hero__title {
  position: absolute;
  left: 5.625%;
  top: 14.5035%;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.12;
}

.graphic-hero__cta {
  position: absolute;
  left: 5.625%;
  top: 86.2818%;
}

/* --- Мобильные -------------------------------------------------------------
   Кадр 16:9 на узком экране не работает: левая половина остаётся пустой, а
   снимки становятся с ноготок. Секция превращается в колонку — заголовок,
   коллаж из трёх снимков, кнопка, — линии сетки при этом не нужны.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .graphic-hero {
    aspect-ratio: auto;

    /* Верхнее поле — высота шапки плюс её отступ сверху */
    padding: calc(clamp(3.5rem, 5.0521vw, 6.0625rem) + 2.5rem)
             var(--container-pad) 3rem;
  }

  .graphic-hero__grid {
    display: none;
  }

  .graphic-hero__title {
    position: static;
    font-size: clamp(1.5rem, 6.4vw, 2.25rem);
  }

  .graphic-hero__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  /*
     Ячейки встают в грид, но остаются относительно позиционированными:
     смещения картинок внутри заданы в процентах от ячейки и продолжают
     держать тот же кадр, что и на десктопе.

     Сетка линий на мобильных не рисуется, поэтому обводку каждая ячейка
     несёт сама: рамка — это то, что осталось от линий макета.
  */
  .graphic-hero__shot {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    aspect-ratio: 306 / 378;
    border: 2px solid var(--color-black);
  }

  .graphic-hero__shot--bird {
    grid-column: 1 / -1;
    aspect-ratio: 437 / 300;
  }

  .graphic-hero__cta {
    position: static;
    margin-top: 2rem;
  }
}