/* attestat.css — секция «Выдаём аттестат гос. образца» */
.attestat {
  /* Внутреннее поле карточки: 48 на 1920 (замер по 1920.png) → 20 на 1600 и ниже
     (фреймы адаптива 1:22943 и 1:25136 — padding 20). Заведено переменной,
     потому что от него зависит вылет коллажа за край карточки: раньше это были
     парные константы (padding 48 ↔ right/bottom −48), которые приходилось
     дублировать в каждой ступени. */
  --pad: clamp(20px, 8.75vw - 120px, 48px);
  /* 20px по бокам — зазор между белой карточкой и краями экрана;
     снизу 20px — зазор до следующей секции «Выберите класс» */
  padding: 40px var(--page-gap) 20px;
  /* container-type на секции (не на карточке!) — её content-box = ширине
     карточки (1880 на 1920), поэтому 1cqw = 1/100 ширины карточки. Нужно для
     колбаски за фото: её геометрия задана в cqw. Ловушка CLAUDE.md #1: у карточки
     padding 48, там 1cqw считался бы от 1784 и декор уехал бы. */
  container-type: inline-size;
}

.attestat__inner {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--pad);
  box-shadow: var(--shadow-card);
  /* Волна-декор выходит из угла и клипается по скруглению карточки */
  overflow: hidden;
}

/* Волна за коллажем: выходит из правого-верхнего угла карточки, лежит под всем контентом.
   Держим её угловым акцентом — иначе петля вылезает слева от коллажа.
   Потолок в cqw (520/1880), а не в px: иначе на 1600 волна остаётся десктопного
   размера и перестаёт попадать в угол коллажа. */
.attestat__figura {
  position: absolute;
  top: 0;
  right: -20px;
  width: 40%;
  max-width: 27.66cqw;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Лента пиллов */
.attestat__tabs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gap-cards);
  margin-bottom: clamp(30px, 2.553cqw, 48px);
}

.pill {
  padding: clamp(10px, 0.745cqw, 14px) clamp(16px, 1.383cqw, 26px);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--color-light-blue);
  color: var(--color-blue-2);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pill:hover {
  color: var(--color-blue);
  border-color: var(--color-blue-2);
}

.pill--active,
.pill--active:hover {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: transparent;
}

.attestat__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.128cqw, 40px);
  align-items: stretch;
}

/* Ширина текста — доля колонки (620 при колонке 872 на 1920), а не фикс. px:
   так переносы строк одинаковы на любой промежуточной ширине */
.attestat__content {
  /* Прижата к низу строки, чтобы низ CTA «начать учиться» встал на одну линию
     с низом фото у табов 2–5 (решение клиента 21.07.2026). Низ колонки = низ
     кнопки точно: она последний элемент и без нижнего отступа. */
  align-self: end;
  max-width: 71%;
}

.attestat__title {
  font-size: var(--fs-h3);
  line-height: 1.05;
  margin-bottom: clamp(16px, 1.277cqw, 24px);
}

/* Подзаголовок есть у табов 2–5 («блок 2 табы 2-5.png»), у первого его нет */
.attestat__subtitle {
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: 20px;
}

.attestat__subtitle[hidden] { display: none; }

.attestat__lead {
  font-size: var(--fs-text);
  color: var(--color-black);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* У табов 2–5 основной текст серый, а выделенная часть — тёмная */
.attestat__lead--muted {
  color: var(--color-gray-2);
}

.attestat__lead--muted .accent {
  color: var(--color-black);
}

.attestat__note[hidden] { display: none; }

/* Подсветка-маркер части абзаца — форма и цвет как у H1 (hero__hl):
   заливка --color-light-blue 40%, радиус 4px, без верт. паддинга (высота = высоте текста) */
.attestat__hl {
  background: color-mix(in srgb, var(--color-light-blue) 40%, transparent);
  color: var(--color-black);
  border-radius: 4px;
  padding: 0 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.attestat__note {
  color: var(--color-gray-2);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-bottom: clamp(20px, 1.702cqw, 32px);
}

/* Медиа-колонка: коллаж аттестата + плавающие бабблы.
   Высота резиновая (460 на 1920 = 24.468cqw) с полом 320 — раньше это были
   три ступени 460/380/320. */
.attestat__media {
  position: relative;
  min-height: clamp(320px, 24.468cqw, 460px);
}

/* Обёртка <picture> нужна только ради мобильного <source> — в раскладке
   колонки её быть не должно, картинка остаётся прямым ребёнком .attestat__media */
.attestat__picture { display: contents; }

/* Фото табов 2–5 — обычная картинка со скруглением внутри колонки */
.attestat__img {
  position: relative;
  width: 100%;
  max-width: 30.691cqw;  /* 577 на 1920 */
  height: auto;
  margin-left: auto;
  border-radius: var(--radius-btn);
  z-index: 1;
}

/* Коллаж аттестата (таб 1) шире колонки и выходит за край карточки.
   Вылет привязан к --pad: сколько у карточки внутреннего поля, ровно настолько
   коллаж и вылезает, чтобы упереться в её край. Раньше пара 48/−48 дублировалась
   в каждой ступени и на промежуточных ширинах расходилась. */
.attestat__img--wide {
  position: absolute;
  right: calc(-1 * var(--pad));
  bottom: calc(-1 * var(--pad));
  width: 122%;
  max-width: 44.681cqw;  /* 840 на 1920 */
  margin-left: 0;
  border-radius: 0;
}

/* У фото-табов колонка ниже коллажа — высоту не держим.
   Фото стоит в правом-нижнем углу белой карточки с полем 60px от её края
   (решение клиента 21.07.2026). Раньше .attestat__frame не имел ни одного
   правила: как flex-элемент он обнимал картинку по ширине, поэтому
   margin-left: auto у самой картинки не работал и фото прижималось влево.
   Прижимаем саму обёртку: flex-end по обеим осям + добор margin'ом до 60,
   потому что --pad карточки меньше (48 на 1920, 20 ниже). */
.attestat__media--photo {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  /* min-height НЕ сбрасываем: наследуем резиновую высоту .attestat__media
     (clamp 320…24.468cqw…460). Именно она задаёт высоту первого таба, поэтому
     карточка получается одинаковой на всех вкладках (627 на 1920) — раньше
     здесь стоял min-height: 0 и фото-табы проседали до 556. */
}

.attestat__media--photo .attestat__frame {
  /* Позиционированный бокс размером с фото — к нему цепляются бабблы,
     иначе они остались бы висеть слева, привязанные к .attestat__media */
  position: relative;
  /* Ширина задана явно (548 на 1920). Без неё обёртка как flex-элемент
     ужимается по содержимому, а вклад картинки в max-content считается
     через пропорцию от заданной высоты: у квадратного кадра таба 3 это
     давало 366 вместо 548, и фото выпадало из общего ряда. */
  width: 30.691cqw;
  max-width: 100%;
  margin-right: calc(60px - var(--pad));
  /* Снизу отступа нет: низ фото садится на низ строки, то есть на одну линию
     с низом кнопки в текстовой колонке. От нижнего края карточки получается
     --pad (48 на 1920) — столько же, сколько у самой кнопки. */
  margin-bottom: 0;
}

/* Единый бокс фото у всех табов 2–5: ширина во всю колонку (548 на 1920,
   потолок --max-width из базового правила), высота 366 (20.52cqw) — по кадрам
   табов 4–5, у которых пропорция ~3:2.
   ⚠️ object-fit: cover обязателен: исходник таба 3 квадратный (dz.webp 736×736)
   и в бокс 3:2 не вписывается — без cover он сплющился бы. Cover подрезает его
   сверху/снизу, ширина при этом совпадает с остальными табами.
   Фиксированная высота заодно держит секцию: без неё квадрат перерастал
   текстовую колонку, тянул строку за собой и прижатый к низу текст повисал
   с 244px пустоты сверху. */
.attestat__media--photo .attestat__img {
  height: 20.52cqw;
  object-fit: cover;
  /* Кадр берётся от верха: у квадратного dz.webp центрирование опускало окно
     кадра и лицо уезжало в верхнюю треть — ровно под бабблы. У табов 2/4/5
     кадры и так ~3:2 (1.50 против бокса 1.497), обрезки нет, и это правило
     на них не влияет. */
  object-position: center top;
}

/* Бабблы у фото-табов считаются от самого фото, а не от колонки.
   Положение — по макету табов 2–5 (Figma 1:15116, фреймы 1921–1924): группа
   лежит углом на левом верхнем углу фото, выступая за него влево на 80 и вверх
   на 37 при фото 565×372. Отсюда доли −14.16% / −9.95% — на нашем фото 548×366
   это −77.6 / −36.4. Доли, а не px: так вылет масштабируется вместе с фото.
   ⚠️ В макете сдвиг гуляет от таба к табу (−80/−110/−80/−140 по x, −34…−40 по y) —
   дизайнер ставил на глаз; клиент просил единое строгое положение (21.07.2026),
   поэтому взят минимальный вылет −80, общий для всех табов. */
.attestat__media--photo .attestat__bubbles {
  top: -9.95%;
  left: -14.16%;
}

/* Бабблы: колонка, нижний слегка наложен на верхний */
.attestat__bubbles {
  position: absolute;
  top: 18%;
  left: 27%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.attestat__bubble {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: var(--shadow-bubble);
}

.attestat__bubble--light {
  position: relative;
  z-index: 2;          /* светлый баббл — поверх синего в месте наложения */
  margin-left: 16px;   /* верхний баббл чуть смещён вправо */
  background: var(--color-light-blue);  
  color: var(--color-blue);
  transform: translateY(-15px) rotate(8deg);


}

.attestat__bubble--solid {
  position: relative;
  z-index: 1;
  margin-top: -10px;   /* лёгкое наложение на верхний баббл */
  background: var(--color-blue);
  color: var(--color-white);
  transform: rotate(-6deg);   /* ← вот эта строка */

}

/* ⚠️ Ступени 1600 и 1280 удалены целиком: padding, зазор, высота медиа-колонки,
   вылет коллажа, ширина волны — всё теперь резиновое и на этих ширинах даёт
   те же значения, что стояли в ступенях. Нудж бабблов (top/left в %) тоже
   больше не нужен: он лечил то, что коллаж упирался в потолок max-width в px
   и переставал масштабироваться вместе с колонкой, — теперь потолок в cqw,
   доля коллажа в колонке постоянна, и % от колонки попадают в цель сами. */

@media (max-width: 1024px) {
  .attestat { padding: 20px var(--page-gap); }
  .attestat__inner { overflow: hidden; }
  .attestat__row { grid-template-columns: 1fr; gap: 24px; }
  .attestat__content { max-width: none; }
  .attestat__media { min-height: 320px; }
  .attestat__img { max-width: 100%; margin-inline: auto; }
  /* Одноколоночная раскладка: фото по центру, угловое поле 60 не нужно */
  .attestat__media--photo { align-items: center; justify-content: center; }
  /* ⚠️ Фото табов 2–5 на всю ширину колонки не растягиваем. Исходники 468–736px
     (у таба 2 — всего 468), на ширине 1000 они раздувались до 930px: мыло на
     любом экране плюс секция вырастала вдвое (942 против 645 у первого таба),
     то есть при переключении табов страница прыгала. Держим макетный бокс
     548×366 (3:2) по центру — cover обрезает квадратный кадр таба 3 так же,
     как на десктопе (object-position: center top наследуется). */
  .attestat__media--photo .attestat__img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .attestat__media--photo .attestat__frame {
    /* relative, а не static: бабблы ниже цепляются за фото, а оно уже уже колонки */
    position: relative;
    width: min(100%, 548px);
    margin: 0 auto;
  }
  .attestat__media--photo .attestat__bubbles { top: 6%; left: 2%; }
  .attestat__img--wide { position: relative; right: 0; bottom: 0; width: 100%; max-width: 480px; margin: 0 auto; }
  .attestat__figura { width: 42%; max-width: 220px; }
  .attestat__bubbles { top: 6%; left: 2%; }
}

/* Планшет 768–1024 — композиция десктопа, но текст сверху во всю ширину
   (решение клиента 21.07.2026 по скриншоту с разметкой). Раньше здесь была
   «одна колонка»: текст в 71% ширины, под ним фото по центру, кнопка высоко
   слева — в левом-нижнем углу карточки зияла пустота, а волна-декор висела
   справа от текста.
   Теперь: табы и текст тянутся на всю ширину, снизу идёт полоса
   «кнопка слева — фото справа», волна уходит вниз, за фото.
   Диапазон, а не просто ≤1024: ниже 768 работает мобильная компоновка
   (коллаж во всю ширину, кнопка над ним в потоке) — её эти правила ломают. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Пиллы делят строку поровну — иначе во второй строке оставался рваный хвост */
  .attestat__tabs .pill { flex: 1 1 auto; }

  /* Ряд перестаёт быть гридом: текст идёт блоком во всю ширину, под ним медиа */
  .attestat__row { display: block; position: relative; }

  /* Кнопка вне потока — садится в левый-нижний угол ряда, то есть на одну линию
     с низом фото. Это тот же приём, что на десктопе (там низ CTA совпадает с низом
     фото за счёт align-self: end), только колонок больше нет. Медиа в потоке
     задаёт высоту ряда, поэтому bottom: 0 у кнопки = низ фото. */
  .attestat__content .btn {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  /* Отступ от текста до фото. Плюс запас снизу у текста, чтобы абзац не сходился
     вплотную с кнопкой, когда та стоит низко. */
  .attestat__media {
    min-height: 0;
    margin-top: 24px;
  }

  /* Коллаж таба 1 — вправо, низом на линию кнопки. Ширина 62% ряда: при меньшей
     он мельчает до иконки, при большей налезает на кнопку. */
  .attestat__img--wide {
    width: 62%;
    max-width: none;
    margin: 0 0 0 auto;
  }

  /* Бабблы коллажа цепляются за .attestat__media (у таба 1 .attestat__frame —
     display: contents), поэтому доли считаются от всей ширины ряда, а не от
     коллажа. Пересчёт с десктопа: там бабблы стоят на +14.1% ширины коллажа
     и +14.7% его высоты (замер на 1920). Коллаж начинается на 38% ряда и занимает
     62%, значит 38 + 0.141×62 = 46.7% по горизонтали; по вертикали высота ряда
     равна высоте коллажа, доля переносится как есть. */
  .attestat__bubbles { top: 14.7%; left: 46.7%; }

  /* Фото табов 2–5 — вправо, тот же макетный бокс 548×366.
     Отступ сверху больше общего (24): бабблы вылетают за верхний угол фото
     примерно на 36px (9.95% его высоты) и на 24 наезжали бы на абзац. */
  .attestat__media--photo {
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 72px;
  }
  /* Ширина — та же доля 62%, что у коллажа, с потолком макетных 548:
     на 768 фиксированные 548 отъедали всю строку и кнопка залезала на фото
     (свободными оставались 160px при её 225). */
  .attestat__media--photo .attestat__frame {
    width: min(62%, 548px);
    margin: 0 0 0 auto;
  }
  /* Слева от фото есть место, поэтому бабблы вешаются углом на его левый-верхний
     угол, как на десктопе, а не заезжают внутрь кадра */
  .attestat__media--photo .attestat__bubbles { top: -9.95%; left: -14.16%; }

  /* Волна уходит из-под текста вниз, за фото — как на десктопе. Значения сняты
     с 1920 в долях коллажа: волна начинается на +40.7% его ширины, поднимается
     на 31.8% его высоты выше верхнего края и низом совпадает с низом коллажа,
     ширина — 61.9% коллажа. В пересчёте на карточку это 37% её ширины,
     правый край почти вровень (7px) и низ на 24px выше низа карточки
     (у коллажа снизу поле карточки 20). */
  .attestat__figura {
    top: auto;
    bottom: 24px;
    right: 7px;
    width: 37%;
    max-width: 380px;
  }
}

/* Телефоны 360–767 — секция 1:8391 (360×978): белая полоса во всю ширину
   без скруглений, внутренний отступ 50/20, gap 30. Соседние секции типа A
   стыкуются вплотную (аттестат 1497→2475, «классы» с 2475), поэтому внешних
   отступов у секции нет. Пиллы — столбиком во всю ширину. */
@media (max-width: 767px) {
  /* Контейнер для cqw-геометрии коллажа. Вешаем на саму секцию: на телефоне
     у неё padding: 0, значит content-box = ширине экрана (у .attestat__inner
     padding 20 — на нём 1cqw был бы на 11% мельче). */
  .attestat {
    padding: 0;
    container-type: inline-size;
  }

  .attestat__inner {
    padding: var(--section-pad-y) var(--section-pad-x);
    border-radius: 0;
  }

  .attestat__tabs {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
    overflow: visible;
  }

  .attestat__tabs .pill {
    width: 100%;
    padding: 14px 12px;
    /* Текст пиллы в макете по центру, а не слева */
    text-align: center;
    white-space: normal;
  }

  .attestat__row { gap: 30px; }

  /* Единый кегль заголовков блоков на телефоне — 32 (решение клиента 20.07.2026).
     На десктопе у аттестата свой уровень (--fs-h3 = 48 против 62 у остальных),
     на телефоне разнобой макета (28 против 32) убираем. */
  .attestat__title {
    font-size: var(--fs-h2);
    margin-bottom: 20px;
  }

  .attestat__subtitle { margin-bottom: 16px; }

  .attestat__note { margin-bottom: 24px; }

  /* Высоту медиа-колонки задаёт сам коллаж */
  .attestat__media,
  .attestat__media--photo { min-height: 0; }

  /* Коллаж в макете лежит абсолютом и упирается в правый и нижний край секции:
     группа 1:9023 стоит в (20, 748) размером 530×381 при секции 360×978,
     то есть видно только её левый верхний угол 340×230, остальное срезано
     (проверено по растру «Мобайл целый.png»: краска доходит до x=359 и до
     последней строки секции y=2474). Обрезку даёт overflow: hidden карточки.
     Колонка держит в потоке ровно видимую часть: от низа CTA до низа секции. */
  .attestat__media:not(.attestat__media--photo) { height: 45.556cqw; }  /* 164 при 360 */

  .attestat__img--wide {
    position: absolute;
    left: 0;
    /* Коллаж начинается на 16px выше медиа-колонки (748 против 764) */
    top: -4.444cqw;
    right: auto;
    bottom: auto;
    /* Экспорт пришёл 525×376 вместо 530×381 — Figma срезала ~5px по правому
       и нижнему краю. Они всё равно за пределами видимой зоны, поэтому ширина
       задана по факту экспорта, а привязка идёт по левому верхнему углу. */
    width: 145.833cqw;
    max-width: none;
    margin: 0;
  }

  /* Бабблы 1:9018 — (57, 754) от верха секции, то есть чуть выше медиа-колонки */
  .attestat__bubbles {
    top: -2.778cqw;
    left: 10.278cqw;
    bottom: auto;
  }

  /* Волна 1:8392 — вся геометрия из мобильного фрейма (секция 360×978):
     угол (36, 412), габарит 542.66×749.78. То есть волна не только уходит
     вправо за габарит секции, но и НИЖЕ её низа на 184 (412+750−978) —
     за экраном остаётся почти треть ленты, а внутри секции видно её светлый
     верх (поверх текста) и плотную середину (за коллажем/фото).
     Поэтому привязка идёт по низу с отрицательным выносом, а высота задана
     явно: у ленты пропорция 1000×1260, при ширине 542.66 автовысота дала бы
     684 вместо 750 — экспорт растягивается по вертикали (как у «нет ДЗ»).
     ⚠️ `bottom: 0` (было раньше) сажало ленту низом на низ секции — она
     уезжала на 184 вверх, и плотная синяя середина ложилась поперёк текста
     и фото табов 2–5. Лишнее срезает overflow: hidden карточки. */
  /* ⚠️ Потолков в px у ленты быть не должно (пробовали min(…,648px) —
     откатили): у экспорта рубленые верхняя и правая кромки, они не видны
     только пока лента вылезает за габарит секции. Ограничишь размер —
     на широком телефоне она поместится внутрь карточки, и посреди неё
     появятся прямые обрезы. Поэтому только доли ширины. */
  .attestat__figura {
    top: auto;
    right: auto;
    left: 10cqw;              /* 36 при 360 */
    bottom: -51.049cqw;       /* 183.78 при 360 */
    width: 150.739cqw;        /* 542.66 */
    height: 208.272cqw;       /* 749.78 */
    max-width: none;
  }

}