/* ── quote-v1: цитата в карточке с крупной кавычкой ─────────────────────────
   Размеры сняты из фреймов `QuoteCardD` (884×203) и `QuoteCardM` (300×284).

   Desktop (координаты от верха фрейма):
     Карточка   884×138 на y 29, #F8F9FA, рамка 1px #E5E9F0, r=20
     Текст      16px Regular lh 22, (30, 54), ширина фрейма 727
     Кавычка    150px Bold, 77×203, на (784, 0) — выступает над карточкой
                на 29px, правый край 861 при карточке 884

   Mobile (фрейм 300×284):
     Карточка   300×239 на y 45
     Текст      14px Regular lh 19, (15, 60), ширина 253
     Кавычка    та же 150px, правым краем вровень с карточкой

   Кавычка не уменьшается на мобильном — в макете она те же 150px.
   ─────────────────────────────────────────────────────────────────────────── */

/* Ширина блоку не задаётся: он берёт колонку, в которую вставлен — 884 на
   странице статьи (справа оглавление) и 1200 в продающем шаблоне. Раньше
   здесь стоял потолок 884 из фрейма и атрибут width="wide", которым его
   снимали; убраны 2026-08-24 вместе с таким же у minprice-v1.

   Внутренние ширины — точки переноса текста. Они считаются от края контента
   карточки, а не от её габарита: под кавычку в макете оставлено поле, и оно
   должно сохраняться в любой колонке. При карточке 884 контент-бокс равен
   824 (минус рамка и паддинги), текст в макете 727 — отсюда 97. У варианта с
   портретом колонка справа от фото 718, текст 607 — отсюда 111. */
.quote-v1 {
    --quote-text: calc(100% - 97px);
    --quote-text-photo: calc(100% - 111px);

    position: relative;
    margin: 20px 0;
    /* Отступ сверху вмещает вынос кавычки над карточкой */
    padding-top: 29px;
}

/* Карточка — <blockquote>, а статья вешает на него полоску слева, курсив,
   свой фон и отступы: `.articles-typical__content blockquote { margin: 15px 0;
   padding: 15px 20px; border-left: 3px solid зелёный; background: серый;
   font-style: italic }`. Специфичность (0,1,1) выше одиночного класса, поэтому
   и пара в селекторе, и явное гашение курсива с полоской: наш `border` они
   перебивали только слева, отчего рамка была разной с четырёх сторон. */
.quote-v1 .quote-v1__card {
    position: relative;
    margin: 0;
    box-sizing: border-box;
    font-style: normal;
    /* Рамка INSIDE: 884×138 её включают, поэтому отступы на 1px меньше
       «фигмовских» 25 и 30. Вертикаль: 1 + 24 + 88 + 24 + 1 = 138. */
    padding: 24px 29px;
    background: #F8F9FA;
    border: 1px solid #E5E9F0;   /* не var(--color-border): та серая, #CCC */
    border-radius: 20px;
}

.quote-v1 .quote-v1__text {
    max-width: var(--quote-text);   /* текстовый фрейм макета — задаёт перенос */
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;   /* 16 × 1.35 = 21.6 → 22 */
    letter-spacing: -0.005em;
    color: rgba(28, 28, 28, 0.85);
    font-style: normal;
}

/* ── Вариант с автором (фрейм QuoteCardWide) ──
   Карточка 884×182: 25 + имя 34 + 5 + текст 88 + 30. Нижний отступ на 5px
   больше верхнего — так в макете. */

.quote-v1--author .quote-v1__card {
    padding-bottom: 29px;
}

/* <cite> статья ужимает до 13px и вешает свой margin-top:
   `.articles-typical__content blockquote cite { font-size: 13px }`. */
.quote-v1 .quote-v1__author {
    display: block;
    padding: 0;
    /* max-width не задаётся: 310px в макете — измеренная ширина строки, а не
       ограничение. LorenzoSans шире шрифта, которым мерили макет, и по 310
       имя «Немцева Елена Сергеевна» уезжало на вторую строку — карточка
       вырастала со 182 до 216. Переносить имя незачем в принципе. */
    margin: 0 0 5px;
    font-family: "LorenzoSans", Arial, sans-serif;
    font-style: normal;   /* cite по умолчанию курсивный */
    font-weight: 700;
    font-size: 25px;
    line-height: 34px;   /* 25 × 1.35 = 33.75 → 34 */
    letter-spacing: -0.005em;
    color: var(--text-main-color);
}

/* ── Вариант с портретом (фрейм QuoteCardPhoto) ──
   Сетка, а не флекс: на десктопе текст стоит в колонке справа от фото, а на
   мобильном уходит под фото на всю ширину — это одна и та же сетка с разным
   размещением, флексом пришлось бы перестраивать разметку. */

.quote-v1--photo .quote-v1__card {
    display: grid;
    grid-template-columns: 101px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 5px;
    align-items: start;
    /* Фото прижато к левому верхнему углу карточки на 15px, поэтому padding
       слева и сверху меньше базового; справа и снизу базовые. */
    padding: 14px 29px 24px 14px;
}

.quote-v1 .quote-v1__photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 101px;
    height: 101px;
    display: block;
    object-fit: cover;
    /* Портрет 0.83 в квадрате 101×101 обрезается сверху и снизу поровну, и
       макушка уходит. Кадрируем от верха — лицо целиком, срезается только низ
       плеч, как в макете. */
    object-position: top;
    border-radius: 15px;
}

/* margin-top 10 добирает имя до 25px от верха карточки — фото начинается
   выше, на 15. */
.quote-v1--photo .quote-v1__author {
    grid-column: 2;
    grid-row: 1;
    margin: 10px 0 0;
}

.quote-v1--photo .quote-v1__text {
    grid-column: 2;
    grid-row: 2;
    /* Своя ширина: колонка рядом с фото уже, и поле справа под кавычку в
       макете больше — 141 против 127 у варианта без портрета. */
    max-width: var(--quote-text-photo);
}

.quote-v1 .quote-v1__text p {
    margin: 0 0 12px;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.quote-v1 .quote-v1__text > *:last-child {
    margin-bottom: 0;
}

/* Кавычка. В макете прозрачность двойная — 0.1 на слое поверх заливки
   rgba(28,28,28,.85), то есть итоговые ~8.5% серого. Тот же приём, что в
   .leoinfo-v1__quote-mark, и те же 150px.

   `top: 0` — это буквально координата узла в макете: обёртка .quote-v1
   совпадает с фреймом (её padding-top и есть вынос кавычки над карточкой),
   поэтому переводить координату не нужно ни на одном брейкпоинте.

   Работает это потому, что Figma и браузер размещают строку одинаково:
   половинный интерлиньяж (lineHeight − ascent − descent) / 2, дальше базовая
   линия. При lineHeight 203 и метриках LorenzoSans Bold (ascent 162,
   descent 41) интерлиньяж нулевой, и чернила глиф-а ложатся на 31…75 от верха
   карточки в обеих системах. Проверено canvas TextMetrics: по коробке
   элемента это не видно — кавычка занимает лишь верхнюю треть своей строки.

   right 25, а не 23 из макета: коробка глифа в браузере на 2px уже
   (advance 75 против 77), и при выравнивании по правому краю чернила уехали
   бы правее макетных. */
/* z-index обязателен. Кавычка стоит в разметке ДО карточки, обе
   спозиционированы, и без z-index порядок отрисовки — по документу: непрозрачный
   фон карточки #F8F9FA накрывает кавычку целиком. В макете она нарисована
   последней, то есть поверх. Пока кавычка торчала над карточкой, это было не
   видно — верхняя половина оставалась снаружи. */
.quote-v1 .quote-v1__mark {
    position: absolute;
    z-index: 1;
    right: 25px;
    top: 0;
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 150px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: rgba(28, 28, 28, 0.85);
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}

/* ══ Mobile (фрейм QuoteCardM 300×284) ═══════════════════════════════════════ */

@media (max-width: 768px) {
    .quote-v1 {
        padding-top: 11.25vw;   /* 45 */
    }

    .quote-v1 .quote-v1__card {
        padding: 3.5vw;      /* 15 − 1 на рамку */
        border-radius: 5vw;  /* 20 */
    }

    .quote-v1 .quote-v1__text {
        max-width: 63.25vw;  /* 253 */
        font-size: 14px;
        line-height: 19px;   /* 14 × 1.35 = 18.9 → 19 */
    }

    /* В макете кавычка занимает 223…300 при карточке 300, то есть правым краем
       вровень; те же 2px поправки на более узкую коробку глифа. `top` не
       переопределяется — обёртка и здесь совпадает с фреймом. */
    .quote-v1 .quote-v1__mark {
        right: 2px;
    }

    /* Вариант с автором: 15 + имя 42 + 10 + текст 209 + 15 = 291 */
    .quote-v1--author .quote-v1__card {
        padding-bottom: 3.5vw;
    }

    .quote-v1 .quote-v1__author {
        max-width: 45vw;     /* 180 — текстовый фрейм имени в макете */
        margin-bottom: 2.5vw;   /* 10 */
        font-size: 20px;
        line-height: 21px;   /* 20 × 1.05 = 21 */
    }

    /* Портрет: фото и имя в одной строке, текст под ними во всю ширину.
       15 + фото 101 + 15 + текст 209 + 15 = 355 */
    .quote-v1--photo .quote-v1__card {
        grid-template-columns: 25.25vw minmax(0, 1fr);   /* 101 */
        column-gap: 3.75vw;   /* 15 */
        row-gap: 3.75vw;
        padding: 3.5vw;
    }

    .quote-v1 .quote-v1__photo {
        grid-row: 1;
        width: 25.25vw;
        height: 25.25vw;
        border-radius: 3.75vw;
    }

    .quote-v1--photo .quote-v1__author {
        max-width: 33.25vw;   /* 133 — колонка рядом с фото уже */
        margin: 2.5vw 0 0;
    }

    /* max-width повторяется: десктопное правило `.quote-v1--photo
       .quote-v1 .quote-v1__text` специфичнее одиночного `.quote-v1__text` выше и
       перебивало бы его — текст растягивался на 270 вместо 253, и карточка
       выходила 336 вместо 355. */
    .quote-v1--photo .quote-v1__text {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 63.25vw;   /* 253 — под фото текст во всю ширину карточки */
    }
}