/* ===== О ПАРФЮМЕРЕ ===== */
/* Мобильный дублирующий лейбл — скрыт на десктопе */
.about-label-mobile { display: none; }
#about {
  background: var(--bg);
  overflow: hidden;
}

.about-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: stretch;
}

/* --- Фото --- */
.about-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  align-self: center;
  /* фон убран — изображение закрывает всё */
}

.about-photo-img {
  position: absolute;
  /* oversize: зазоры закрыты, снизу срезается больше (прячет звёздочку) */
  inset: -2px -2px -60px -2px;
  width: calc(100% + 4px);
  height: calc(100% + 62px);
  object-fit: cover;
  /* сдвиг: звёздочка снизу справа срезается */
  object-position: center 5%;
  display: block;
}

.about-photo-initial {
  font-family: var(--font-display);
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 300;
  color: var(--maroon-line-solid);
  user-select: none;
}

/* --- Текст --- */
.about-text {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  justify-content: center;
  padding: clamp(60px, 8vw, 120px) 0;
}

.about-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text);
}

.about-heading {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.02em;
  white-space: pre-line; /* \n в переводе становится переносом строки */
}

.about-quote {
  border-left: 2px solid var(--maroon);
  padding-left: clamp(16px, 2vw, 24px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--text);
  line-height: 1.7;
}

/* --- Статистика --- */
.about-stats {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-stat-num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 300;
  font-style: italic; /* display numerals italic = классический luxury */
  color: var(--maroon);
  line-height: 1;
}

.about-stat-label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* --- Мобиль --- */
@media (max-width: 767px) {
  /* padding-top убран — высота "полосы" задаётся самим лейблом */
  #about {
    padding: 0 clamp(24px, 6vw, 40px) var(--sp-section-mob);
  }

  /* Зазоры: цитата → ПАРФЮМЕР — 0.4см, ПАРФЮМЕР → фото — 0.6см
     (пропорция 8/13px из общих 3см = 13+8+13) */
  .about-label-mobile {
    display: block;
    padding-top: 8px;
    padding-bottom: 13px;
    order: 1;
    text-align: center;
  }

  /* Десктопный лейбл внутри about-text: скрыть */
  .about-text .about-label:not(.about-label-mobile) {
    display: none;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
  }

  /* Фото первым — лицо = доверие (как у zarinamakenova.com) */
  .about-label-mobile { order: 1; } /* лейбл первый */
  .about-photo        { order: 2; } /* фото вторым */
  .about-text         { order: 3; } /* текст последним */

  .about-photo {
    aspect-ratio: 3 / 4;
    width: 100%;    /* заполняет content-area секции (~88vw) — как на референсе zarinamakenova.com */
    max-width: none;
    max-height: none;
    margin: 0;
    transform: none;
    justify-self: stretch;
  }

  .about-photo-img {
    object-fit: cover;
    object-position: center 8%;
  }

  .about-text {
    padding: clamp(32px, 8vw, 48px) 0 0; /* отступ сверху после фото */
    text-align: center;
    gap: 20px;
  }

  .about-heading {
    font-size: clamp(24px, 6vw, 34px);
    text-align: center;
  }

  /* Цитата — на мобиле border-left выглядит случайным при центрированном блоке */
  .about-quote {
    border-left: none;
    border-top: 1px solid var(--line-light-solid);
    padding-left: 0;
    padding-top: 20px;
    text-align: left;
    margin: 0 auto;
    max-width: 320px;
  }

  .about-stats {
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Oldstyle numerals — Cormorant поддерживает, цифры как гравюра */
  .about-stat-num {
    font-variant-numeric: oldstyle-nums;
  }

  /* Label над заголовком */
  .about-label {
    margin-bottom: 4px;
  }
}

/* --- Планшет --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ===========================================================
   ДЕСКТОП (≥1024px)
   =========================================================== */
@media (min-width: 1024px) {
  /* Исключение из модели "padding только снизу": .about-text выше,
     чем .about-photo (доп. padding до 120px сверху/снизу), поэтому
     #about снизу выше фото на "мёртвую" зону — зазор до #featured
     получается больше, чем #featured → #catalog. Убираем
     собственный padding-bottom секции, оставляя только эту зону. */
  #about {
    padding-bottom: 24px;
  }
}