/* ==========================================================================
   Hero страницы «Интерьерный проект»
   Опорный кадр 1920 × 1080. Координаты переведены в проценты от кадра:

     фон              #e9e9e9
     фото       x 97.02  y 118.42   1722.19 × 897.48
     заголовок  x 153    y 894.87   291 шир., Muller Medium 48px / 1.12,
                                    выключка вправо (правый край 444)
     кнопка     x 1367   y 918      429 × 74

   Форма фото — тот же приём, что в About, только «ступенька» вырезана в
   левом нижнем углу: в вырезе лежит заголовок. Радиусы 30.
   Маска вшита data:URI (внешний файл падает по CORS при открытии file://).
   Исходник формы: assets/images/interior-hero-mask.svg
   ========================================================================== */

.interior-hero {
  position: relative;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background-color: var(--bg-muted);
}

/* --- Фото с фигурной маской ----------------------------------------------- */

.interior-hero__media {
  position: absolute;
  left: 5.0534%;
  top: 10.9645%;
  width: 89.6974%;
  height: 83.0998%;

  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1722.19 897.478' preserveAspectRatio='none'><path fill='%23fff' d='M0 30V624.916C0 641.485 13.4315 654.916 30 654.916H370.227C386.795 654.916 400.227 668.348 400.227 684.916V867.478C400.227 884.046 413.658 897.478 430.227 897.478H1692.19C1708.76 897.478 1722.19 884.046 1722.19 867.478V30C1722.19 13.4315 1708.76 0 1692.19 0H30C13.4315 0 0 13.4315 0 30Z'/></svg>");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1722.19 897.478' preserveAspectRatio='none'><path fill='%23fff' d='M0 30V624.916C0 641.485 13.4315 654.916 30 654.916H370.227C386.795 654.916 400.227 668.348 400.227 684.916V867.478C400.227 884.046 413.658 897.478 430.227 897.478H1692.19C1708.76 897.478 1722.19 884.046 1722.19 867.478V30C1722.19 13.4315 1708.76 0 1692.19 0H30C13.4315 0 0 13.4315 0 30Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/*
   В макете кадр обрезан только сверху: нижний край фотографии совпадает с
   нижним краем маски. Отсюда object-position по нижней кромке.
*/
.interior-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* --- Заголовок в вырезе --------------------------------------------------- */

/*
   Заголовок стоит в разметке до фотографии — так на узком экране он
   оказывается над ней. На десктопе он лежит в вырезе маски, а z-index
   страхует от перекрытия фотографией.
*/
.interior-hero__title {
  position: absolute;
  z-index: 1;
  left: 7.9688%;
  top: 82.8583%;
  width: 15.1563%;
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.12;
  text-align: right;
  color: var(--text-primary);
}

/* --- Кнопка --------------------------------------------------------------- */

.interior-hero__cta {
  position: absolute;
  z-index: 1;
  left: 71.198%;
  top: 85%;
}

/* --- Мобильные -------------------------------------------------------------
   Вырез под заголовок теряет смысл на узком экране: заголовок уходит над
   фотографией, маска снимается, остаётся обычное скругление.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .interior-hero {
    /* Нижний отступ вынесен в переменную: от него отсчитывается кнопка */
    --interior-hero-pad-bottom: 3.5rem;

    aspect-ratio: auto;
    padding-block: calc(clamp(3.5rem, 5.0521vw, 6.0625rem) + 2.5rem)
                   var(--interior-hero-pad-bottom);
  }

  .interior-hero__title {
    position: static;
    width: auto;
    margin-bottom: 1.75rem;
    padding-inline: var(--container-pad);
    font-size: clamp(1.5rem, 6.4vw, 2.25rem);
    text-align: left;
  }

  .interior-hero__media {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-inline: var(--container-pad);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 20px;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /*
     Кнопка остаётся соседом фотографии (внутрь маски её класть нельзя), но
     визуально ложится на неё: отсчитываем от полей секции и самого фото.
  */
  .interior-hero__cta {
    left: calc(var(--container-pad) + 1.25rem);
    top: auto;
    bottom: calc(var(--interior-hero-pad-bottom) + 1.25rem);
  }
}

@media (max-width: 480px) {
  .interior-hero__media {
    aspect-ratio: 4 / 5;
  }
}