/* Картинки публикаций.

   figure.ids__media — одиночная картинка с ограничением ширины
   (бывш. publication-vertical-pic + *-pic).

   .ids__media-group — колонка с картинками по центру и одинаковым воздухом
   сверху и снизу, размер задаёт ширину фигур внутри (бывш. shadow-img /
   center-img). Модификатор .shadow вешает тень на все картинки внутри.

   figure.border — рамка и тень по контуру (скриншоты интерфейсов);
   figure.border.labeled с data-label="…" — та же рамка с серой подписью
   в полосе над картинкой (название сайта или программы). */

.ids .ids__media {
  max-width: 30em;

  @media (width < 768px) {
    max-width: 20em;
  }

  &.XXS {
    max-width: 5em;
  }
  &.XS {
    max-width: 8em;
  }
  &.S {
    max-width: 17em;
  }
  &.M {
    max-width: 20em;
  }
  &.L {
    max-width: 35em;
  }

  &.shadow img,
  &.shadow video {
    filter: drop-shadow(0px 7px 12px var(--shift__shadow-color));
    border-radius: 0.45em;
  }
}

.ids .ids__media-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Отступ снизу — у группы, а не у последней фигуры: так он равен верхнему
     и схлопывается с полем следующего заголовка */
  margin-bottom: calc(var(--ids__density) * 0.5em);

  & figure {
    width: 100%;
  }

  & figure:last-child {
    margin-bottom: 0;
  }

  &.S {
    margin-top: 4em;
    margin-bottom: 4em;

    & figure {
      max-width: 15em;
    }
  }

  &.M {
    margin-top: 3em;
    margin-bottom: 3em;

    & figure {
      max-width: 20em;
    }
  }

  &.L {
    margin-top: 2em;
    margin-bottom: 2em;

    & figure {
      max-width: 30em;
    }
  }

  &.XL {
    margin-top: var(--shift__illustration-gap);
    margin-bottom: var(--shift__illustration-gap);

    & figure {
      max-width: none;
    }
  }

  &.shadow img,
  &.shadow video {
    filter: drop-shadow(0px 7px 12px var(--shift__shadow-color));
    border-radius: 0.45em;
  }

  &.shadow.cut-the-edges img {
    border-radius: 1.3em;
  }
}

/* Рамка и тень по контуру картинки (скриншоты интерфейсов) */
.ids figure.border,
.ids .ids__media-group.border figure {
  overflow: hidden;
  box-shadow: 0 0 0.5em color-mix(in srgb, var(--ids__text) 10%, transparent);
  border-radius: 0.45em;
  border: var(--ids__border-width-s) solid color-mix(in srgb, var(--ids__text) 15%, transparent);
}

/* Рамка с подписью в полосе над картинкой (figure.border.labeled, data-label) */
.ids figure.border.labeled {
  position: relative;
  padding-top: 2em;

  &::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    width: 100%;
    height: 3em;
    padding-top: 0.85em;
    font-size: 0.7em;
    letter-spacing: 0.01em;
    text-align: center;
    background-color: var(--ids__background);
    color: color-mix(in srgb, var(--ids__text) 30%, transparent);
    border-bottom: var(--ids__border-width-s) solid color-mix(in srgb, var(--ids__text) 15%, transparent);
  }
}

/* Оранжевая обводка (макеты на белом) */
.ids figure.border-orange {
  outline: 0.001em solid var(--shift__brand);
  border-radius: 0.1em;
}

.ids .ids__media img,
.ids .ids__media img ~ video,
.ids .ids__media video,
.ids .ids__media-group img,
.ids .ids__media-group video {
  max-width: 100%;
  height: auto;
}

/* Анимации-инструкции: бывшие GIF, переведённые в mp4 */
.ids .ids__media video,
.ids .ids__media-group video {
  display: block;
  width: 100%;
}

/* Подпись, относящаяся к группе картинок выше: прижата к группе */
.ids figure.ids__media-caption {
  margin-top: 0;

  & figcaption {
    margin-top: -1em;
  }
}

/* --- Вертикальный воздух иллюстраций ---
   Сверху у картинки — var(--shift__illustration-gap). Снизу перед абзацем
   или заголовком в подбор зазор всегда ровно спейс S (поле блока к явному
   спейсу S не прибавляется). Спейс M перед новым разделом h2,
   var(--shift__illustration-heading-gap) перед h3/h4. После палитры снизу
   всегда спейс S. Короткий зазор — только между частями одной группы картинок. */

/* Фигура внутри группы, ячейки сетки, галереи, шапки отчёта, карточки
   скачивания и образцов витрины воздух не несёт — его даёт контейнер */
.ids :is(.ids__media-group, .ids__sequence-item, .ids__gallery, .ids__report-header, .ids__download-item, .guide-component__sample, .guide-tokens__sample) figure {
  margin-top: 0;
  margin-bottom: calc(var(--ids__density) * 0.5em);
}

/* Группа внутри ячейки сетки: воздух даёт сетка, иначе он удвоился бы */
.ids .ids__sequence-item > .ids__media-group {
  margin-top: 0;
  margin-bottom: 0;
}

/* Перед подразделом h3/h4 воздуха больше, чем перед текстом; малый спейсер
   между картинкой и заголовком схлопывается в ноль (ids.css), поэтому учтён.
   Явный спейс S сразу после блока с картинками остаётся спейсом:
   нижнее поле блока ему не дублирует. */
.ids :is(figure, .ids__compare, .ids__sequence, .ids__media-group.XL):has(+ :is(h3, h4)) {
  margin-bottom: var(--shift__illustration-heading-gap);
}

/* Визуал и то, что идёт следом.
   Обычный абзац, список или заголовок в подбор (тоже <p>) — спейс S.
   Новый раздел h2 — спейс M. Поле самого заголовка при этом не добавляется.
   Группы S/M/L перечислены отдельно: у них своё поле с более высокой специфичностью. */
.ids :is(figure, .ids__sequence, .ids__media-group, .ids__slide, .ids__slide-pair, .ids__compare, .ids__color-palette, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, .ids__checklist, table):has(+ :is(p, ul, ol, blockquote, .ids__with-note)),
.ids a.ids__download-group:has(+ :is(p, ul, ol, blockquote, .ids__with-note)) {
  margin-bottom: var(--ids__spacer-s);
}

.ids .ids__media-group:is(.S, .M, .L, .XL):has(+ :is(p, ul, ol, blockquote, .ids__with-note)) {
  margin-bottom: var(--ids__spacer-s);
}

.ids :is(figure, .ids__sequence, .ids__media-group, .ids__slide-pair, .ids__compare, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, table):has(+ h2),
.ids a.ids__download-group:has(+ h2) {
  margin-bottom: var(--ids__spacer-m);
}

.ids .ids__media-group:is(.S, .M, .L, .XL):has(+ h2) {
  margin-bottom: var(--ids__spacer-m);
}

.ids :is(figure, .ids__sequence, .ids__media-group, .ids__slide-pair, .ids__compare, .ids__color-palette, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, table) + h2,
.ids :is(figure, .ids__sequence, .ids__media-group, .ids__slide-pair, .ids__compare, .ids__color-palette, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, table) + h2.h3,
.ids a.ids__download-group + h2,
.ids a.ids__download-group + h2.h3 {
  margin-top: 0;
}

/* Последний визуал раздела: до h2 следующего раздела — спейс M */
.ids ids-nav-item > :is(figure, .ids__sequence, .ids__media-group, .ids__slide-pair, .ids__compare, .ids__color-palette, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, table):last-child,
.ids ids-nav-item > .ids__media-group:is(.S, .M, .L, .XL):last-child,
.ids ids-nav-item > a.ids__download-group:last-child {
  margin-bottom: 0;
}

.ids ids-nav-item:has(> :is(figure, .ids__sequence, .ids__media-group, .ids__slide-pair, .ids__compare, .ids__color-palette, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, table):last-child) + ids-nav-item > h2,
.ids ids-nav-item:has(> :is(figure, .ids__sequence, .ids__media-group, .ids__slide-pair, .ids__compare, .ids__color-palette, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, table):last-child) + ids-nav-item > h2.h3,
.ids ids-nav-item:has(> a.ids__download-group:last-child) + ids-nav-item > h2,
.ids ids-nav-item:has(> a.ids__download-group:last-child) + ids-nav-item > h2.h3 {
  margin-top: var(--ids__spacer-m);
}

/* Картинка и сразу следующая слайд-пара — одна группа, короткий зазор
   (старый .background-examples), не иллюстрационный воздух */
.ids figure:has(+ .ids__slide-pair) {
  margin-bottom: calc(var(--ids__density) * 1em / 3);
}

/* Явный спейс S после картинки, видео, слайда или сетки сам задаёт зазор.
   Поле блока обнуляется, иначе к спейсу прибавляется свой отступ компонента. */
.ids :is(figure, .ids__sequence, .ids__media-group, .ids__slide, .ids__slide-pair, .ids__compare, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, .ids__checklist, table, .ids__with-note, a.ids__download-group):has(+ .ids__space.S) {
  margin-bottom: 0;
}

.ids .ids__media-group:is(.S, .M, .L, .XL):has(+ .ids__space.S) {
  margin-bottom: 0;
}

.ids :is(figure, .ids__sequence, .ids__media-group, .ids__slide, .ids__slide-pair, .ids__compare, .ids__example-plate, .ids__video, .ids__download, .ids__gallery, .ids__checklist, table, .ids__with-note) + .ids__space.S,
.ids a.ids__download-group + .ids__space.S {
  height: var(--ids__spacer-s);
}

/* После заголовка — поле заголовка, он прижат к своему содержимому */
.ids :is(h2, h3, h4) + :is(figure, .ids__compare, .ids__sequence, .ids__media-group.XL) {
  margin-top: 0;
}

/* После палитры зазор всегда спейс S — это нижнее поле палитры.
   Явный спейс S следом не добавляется: перед заголовком он и так схлопывается,
   перед текстом его высота обнуляется, чтобы не получилось два спейса.
   Поле заголовка и верхний воздух картинки к зазору не прибавляются. */
.ids .ids__color-palette + .ids__space:not(.M, .L, .XL) {
  height: 0;
}

.ids .ids__color-palette + :is(h2, h3, h4, figure, .ids__sequence, .ids__slide-pair, .ids__media-group, .ids__video),
.ids .ids__color-palette + .ids__space:not(.M, .L, .XL) + :is(h2, h3, h4) {
  margin-top: 0;
}

/* После серой плашки с примерами зазор тоже всегда спейс S.
   Спейс S в разметке уже даёт эту высоту, поэтому поле заголовка,
   шапки формата и подзаголовка следом обнуляется. */
.ids .ids__example-plate + :is(h2, h3, h4, .ids__format-head),
.ids .ids__example-plate + .ids__space:not(.M, .L, .XL) + :is(h2, h3, h4, .ids__format-head) {
  margin-top: 0;
}