/* ==========================================================================
   About
   Опорный кадр 1920 × 1080. Координаты переведены в проценты от кадра:

     фон                       #e9e9e9
     фото        x 97    y 120   1726 × 900
     заголовок   x 1118  y 157   659 шир., Muller Medium 48px / 1.12
     кнопка      x 152   y 897   429 × 74

   Форма фото — не просто скруглённый прямоугольник: в правом верхнем углу
   вырезана «ступенька» под заголовок (радиусы 30, включая вогнутый угол).
   Повторить её в чистом CSS нельзя, поэтому используется mask-image с
   вектором (about-mask.svg).
   ========================================================================== */

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

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

.about__media {
  position: absolute;
  left: 5.0521%;
  top: 11.1111%;
  width: 89.8958%;
  height: 83.3333%;
}

/*
   Маска вшита как data:URI, а не подключена файлом. Причина: внешний файл
   маски запрашивается по правилам CORS, и при открытии страницы напрямую
   (file://) запрос падает — а элемент с несработавшей mask-image скрывается
   целиком, то есть фото просто исчезает. Инлайн снимает и эту проблему,
   и лишний запрос. Исходник формы: assets/images/about-mask.svg
*/
.about__photo-wrap {
  position: absolute;
  inset: 0;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1725.57 899.24' preserveAspectRatio='none'><path fill='%23fff' d='M954.304 0H30C13.4315 0 0 13.4315 0 30V869.24C0 885.809 13.4314 899.24 30 899.24H1695.57C1712.14 899.24 1725.57 885.809 1725.57 869.241V273.038C1725.57 256.469 1712.14 243.038 1695.57 243.038H1014.3C997.735 243.038 984.304 229.607 984.304 213.038V30C984.304 13.4315 970.872 0 954.304 0Z'/></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 1725.57 899.24' preserveAspectRatio='none'><path fill='%23fff' d='M954.304 0H30C13.4315 0 0 13.4315 0 30V869.24C0 885.809 13.4314 899.24 30 899.24H1695.57C1712.14 899.24 1725.57 885.809 1725.57 869.241V273.038C1725.57 256.469 1712.14 243.038 1695.57 243.038H1014.3C997.735 243.038 984.304 229.607 984.304 213.038V30C984.304 13.4315 970.872 0 954.304 0Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.about__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.about__title {
  position: absolute;
  left: 58.2292%;
  top: 14.537%;
  width: 34.3229%;
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.12;
  color: var(--text-primary);
}

/* --- Кнопка ---------------------------------------------------------------
   Координаты внутри .about__media: 55px слева, 49px снизу от края фото.
   -------------------------------------------------------------------------- */

.about__cta {
  position: absolute;
  left: 3.1866%;
  bottom: 5.4444%;
}

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

@media (max-width: 900px) {
  .about {
    aspect-ratio: auto;
    padding-block: 3.5rem 4rem;
  }

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

  .about__media {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-inline: var(--container-pad);
    aspect-ratio: 3 / 2;
  }

  .about__photo-wrap {
    overflow: hidden;
    border-radius: 20px;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .about__cta {
    left: 1.25rem;
    bottom: 1.25rem;
  }

  .cta__label {
    height: 3.5rem;
    padding-inline: 1.5rem;
    font-size: 1.0625rem;
  }

  .cta__icon {
    width: 3.5rem;
  }
}

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

  .cta__label {
    height: 3.25rem;
    padding-inline: 1.25rem;
    font-size: 1rem;
  }

  .cta__icon {
    width: 3.25rem;
  }
}