/* ======================= ABOUT / О КОМПАНИИ =======================
   Разметка: <section id="about" class="about py-5 screen"> … </section>
   Скоуп: только секция ABOUT
   ================================================================ */

/* 1) СЕКЦИЯ: фон и верхняя линия */
.about{
  background: var(--paper-100);
  border-top: 1px solid rgba(31,30,22,.08);
}

/* Базовые отступы секции */
.about.screen{
  padding-block: clamp(16px, 4vh, 48px) !important;
}

/* Контейнер по умолчанию (ПК переопределим ниже) */
.about.screen .container{
  min-height: auto !important;      
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 4vh, 32px);
}

/* 2) ЗАГОЛОВОК */
#about .about-title{
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  text-align: center !important;   /* моб/планшет — центр, ПК — слева */
  margin: 0 0 .25rem 0;
}
#about .about-title .brand-name{
  color: var(--terracotta);
  font-weight: 800;
}

/* 3) ТЕКСТ (всегда слева) */
#about .about-text{
  color: var(--ink-60);
  font-size: 1.05rem;
  margin-bottom: .9rem;
  text-align: left;
}

/* 4) ФОТО — без обводки */
#about .about-photo{
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;

  display: grid;
  place-items: center;

  aspect-ratio: 3 / 4;
  max-width: clamp(220px, 60vw, 360px);
  margin: 0 auto;
}
#about .about-photo > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* ======================= АДАПТИВ ======================= */

/* <= 991.98px: УБИРАЕМ высоту 100% — пусть блок занимает контент + небольшие отступы */
@media (max-width: 991.98px){
  #about.screen .container{
    min-height: auto;                               /* выключаем растяжение на экран */
    justify-content: flex-start;                    /* контент к верху */
    gap: clamp(16px, 3.5vh, 28px);                  /* умеренные интервалы */
  }
  #about .about-title{ text-align: center; }
  #about.screen{
    padding-block: clamp(16px, 4vh, 36px) !important; /* небольшие отступы секции */
  }
}

/* Планшеты (768–991.98px) — комфортные габариты фото */
@media (min-width: 768px) and (max-width: 991.98px){
  #about .about-title{ text-align: center; }
  #about .about-photo{ max-width: min(65vw, 380px); }
  /* текст остаётся слева (базовое правило) */
}

/* Мобилы (≤767.98px) — компактное фото */
@media (max-width: 767.98px){
  #about .about-title{ text-align: center; }
  #about .about-photo{
    max-width: min(75vw, 340px);
    aspect-ratio: 3 / 4;
  }
}

/* ======================= ДЕСКТОП (≥992px) ======================= */
@media (min-width: 992px){
  /* чуть меньше «воздуха», заголовок выше */
  #about.screen{
    padding-block: clamp(12px, 2vh, 32px) !important;
  }
  #about.screen .container{
    min-height: calc(100dvh - var(--header-h));
    justify-content: flex-start;
    gap: clamp(12px, 3vh, 28px);
  }

  #about .about-title{ text-align: left; margin-top: 0.25rem; }

  /* Колонки — вертикальный стек, чтобы элементы не становились в ряд */
  #about .row{ align-items: stretch; }
  #about .row > [class*="col-"]{
    display: flex;
    flex-direction: column;
  }

  /* Фото компактнее и в границах */
  #about .col-12.col-lg-5{ align-items: flex-start; }
  #about .about-photo{
    margin-inline: 0;
    max-width: 360px;            /* можно 340px для ещё меньшего фото */
    max-height: 420px;
    aspect-ratio: 3 / 4;
    height: auto;
    overflow: hidden;
  }
  #about .about-photo > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ======================= УТИЛИТЫ секции ABOUT ======================= */
#about .brand-name{ white-space: nowrap; } /* «Pavel-Avto» без переноса */