/*
 * Кейсы «ведение соцсетей», компактные, редизайн, продвижение и разработка сайта (шаблоны case-social, case-compact,
 * case-redesign, case-promotion, case-site; наполнение — dev-local/build-social-case.py / build-compact-case.py /
 * build-redesign-case.py / build-promotion-case.py / build-site-case.py, экраны — dev-local/case_sections.py).
 * Основа — case-mixed.css (подключается раньше): результат, клиент, этапы, технологии, окно с прокруткой
 * .id-mixed-viewer__stage и подарок. Здесь только лента/галерея снимков и чередование фона в хвосте страницы.
 */

/* ── Лента соцсети: подпись-кикер над каждым снимком, снимки в ряд; высокие — окном с прокруткой ── */
.id-social-feed { display: grid; grid-template-columns: repeat(var(--sf-cols, 2), minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.id-social-feed.is-1 { --sf-cols: 1; max-width: 900px; margin-inline: auto; }
.id-social-feed.is-3 { --sf-cols: 3; }
.id-social-feed__item > .id-kicker { margin: 0 0 18px; }
.id-social-feed .id-mixed-viewer { padding: 14px; }
.id-social-feed .id-mixed-viewer__stage { height: auto; min-height: 0; max-height: calc(100svh - var(--id-header-height, 90px) - 200px); }
.id-social-shot { margin: 0; overflow: hidden; border: 1px solid #e3edf8; border-radius: 10px; }
/* Снимок не растягивается шире своей натуральной ширины (атрибут width): иначе мелкий скриншот мутнеет */
.id-social-shot img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
/* Галерея под одним заголовком (экраны бота): все снимки целиком в ряд */
.id-social-feed.is-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin-top: 28px; }
.id-social-feed.is-gallery .id-mixed-viewer { padding: 10px; }

/* Иллюстрация первого экрана: высота по картинке (на телефоне без пустого поля под ней) */
:is(.id-case-social, .id-case-compact, .id-case-redesign, .id-case-promotion, .id-case-site) .id-case-head.has-art .id-case-head__img img { height: auto; }

/* Технологии без иллюстрации: полоса работ — по центру высоты панели, а не прижата к верху */
:is(.id-case-social, .id-case-compact, .id-case-redesign, .id-case-promotion, .id-case-site) .id-mixed-tech__main { justify-content: center; }

/* Доли работ по 5%: у сегмента минимальная ширина под подпись — она переносится по словам и не вылезает за экран */

/* «Проблема» в «Клиент и задача» — отдельная плашка под описанием клиента: светло-коралловый фон, левая полоса,
   «!» в кружке перед заголовком */
.id-case-problem-box { margin-top: 32px; padding: 22px 26px; border-left: 4px solid #ff6b5b; border-radius: 4px 18px 18px 4px; background: #fff3f1; }
.id-case-problem-box > p { margin: 10px 0 0; }
h3.id-case-problem { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(20px, 1.6vw, 24px); }
h3.id-case-problem::before {
  content: "!";
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ff6b5b;
  box-shadow: 0 6px 16px rgb(255 107 91 / 30%);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

/* Отзыв клиента без скана — карточка на месте скана в «Результате» (рамка, тень и наклон — от .id-mixed-scan) */
.id-case-quote { padding: 26px 26px 24px; }
.id-case-quote__mark { margin: 0; color: var(--id-result-blue) !important; font-size: 64px; font-weight: 800; line-height: .6; }
.id-case-quote__text { margin: 12px 0 0; font-size: 17px; line-height: 1.5; }
.id-case-quote.is-long .id-case-quote__text { font-size: 15px; line-height: 1.45; }
.id-case-quote__author { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #e3eefa; color: var(--id-result-muted) !important; font-size: 15px; font-weight: 700; }

/* Технологий 5 и больше — две колонки слева, панель не вытягивается вниз */
.id-mixed-tech__panel.is-many { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.6fr); }
.id-mixed-tech__panel.is-many .id-svc-dir__adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.id-mixed-tech__panel.is-many .id-svc-dir__adv-item.has-icon { gap: 14px; }
.id-mixed-tech__panel.is-many .id-svc-dir__adv-icon { width: 64px; height: 64px; padding: 8px; border-radius: 16px; }
.id-mixed-tech__panel.is-many .id-svc-dir__adv-item h3 { font-size: 18px; }
@media (max-width: 1100px) { .id-mixed-tech__panel.is-many { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .id-mixed-tech__panel.is-many .id-svc-dir__adv-grid { grid-template-columns: minmax(0, 1fr); } }

/* Отзывы (паттерн главной): отступ сверху равен отступу снизу, как у остальных экранов кейса */
:is(.id-case-social, .id-case-compact, .id-case-redesign, .id-case-promotion, .id-case-site) .id-result-reviews { padding-block: clamp(48px, 7svh, 88px) !important; }

/* ── Хвост: если перед похожими кейсами экран на фоне страницы (чётное число экранов), похожие кейсы — tint,
   форма — фон страницы (подарок на tint ставит скрипт); иначе — как у смешанных: форма tint.
   Только соседние селекторы (без :has), чтобы правило работало в любом браузере. ── */
:is(.id-case-social, .id-case-compact, .id-case-redesign, .id-case-promotion, .id-case-site) .id-section:not(.is-tint) + .id-result-portfolio {
  background: radial-gradient(circle, rgb(8 106 216 / 8%) 1.3px, transparent 1.7px) 0 0 / 24px 24px, linear-gradient(180deg, #e8f2fd, #f1f7fe);
  box-shadow: inset 0 1px 0 #d6e6f8, inset 0 -1px 0 #d6e6f8;
}
:is(.id-case-social, .id-case-compact, .id-case-redesign, .id-case-promotion, .id-case-site) .id-section:not(.is-tint) + .id-result-portfolio + .id-anchor + .id-result-contact { background: none; box-shadow: none; }

/* Результат без карточки и скана (в исходнике только фраза): одна колонка, заголовок на ширину блока */
.id-mixed-result .id-svc-dir__grid.is-single { grid-template-columns: minmax(0, 1fr); }
.id-mixed-result .id-svc-dir__grid.is-single .id-svc-dir__copy { max-width: none; }
/* Заголовок и скан отзыва клиента без карточки текста: две колонки, без пустой третьей */
.id-mixed-result .id-svc-dir__grid.is-scan-only { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
@media (max-width: 781px) { .id-mixed-result .id-svc-dir__grid.is-scan-only { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1100px) {
  .id-social-feed.is-3 { --sf-cols: 2; }
}
@media (max-width: 781px) {
  .id-social-feed,
  .id-social-feed.is-3 { --sf-cols: 1; }
}

/* ── Видео о процессе работы (iframe в карточке видео услуг) и группы снимков под заголовками h3 ── */
.id-case-video-section .id-svc-video { max-width: 960px; margin-inline: auto; }
.id-case-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
/* Снимки PageSpeed: блок по центру, две колонки одной ширины (672px — на 20% крупнее прежних 560, текст читается;
   снимок ~640px растягивается не больше чем на 5%), все рамки одного размера: снимок вписан по ширине, по высоте — по центру рамки ряда */
.id-case-shot-group { --shot-w: 672px; max-width: calc(var(--shot-w) * 2 + clamp(24px, 3vw, 48px)); margin-inline: auto; }
.id-case-shot-group + .id-case-shot-group { margin-top: clamp(32px, 4vw, 56px); }
.id-case-shot-group > h3 { margin: 0 0 24px; }
.id-case-shot-group .id-social-feed { grid-template-columns: repeat(2, minmax(0, var(--shot-w))); justify-content: center; align-items: stretch; }
.id-case-shot-group .id-social-feed__item { display: flex; flex-direction: column; }
.id-case-shot-group .id-mixed-viewer { display: flex; flex: 1; align-items: center; width: 100%; max-width: none; }
.id-case-shot-group .id-social-shot { width: 100%; }
.id-case-shot-group .id-social-shot img { width: 100%; }
@media (max-width: 781px) { .id-case-shot-group .id-social-feed { grid-template-columns: minmax(0, 1fr); } }

/* Длинное слово в заголовке первого экрана («стоматологической») на телефоне переносится, а не распирает колонку */
:is(.id-case-social, .id-case-compact, .id-case-redesign, .id-case-promotion, .id-case-site) .id-case-head__copy { min-width: 0; }
/* Заголовок первого экрана переносится только по словам, без дефисов; на телефоне шрифт меньше, чтобы длинное слово влезало */
.id-case-head h1 { hyphens: none; overflow-wrap: normal; word-break: normal; }
@media (max-width: 480px) { .id-case-main .id-case-head h1 { font-size: clamp(24px, 7vw, 38px); } }
/* Длинная крупная цифра результата («59,63%», «+67%») — меньше, чтобы помещалась в колонку и в телефон */
.id-mixed-bignum.is-long strong { font-size: clamp(64px, 10vw, 180px); }