/* ============================================================================
   article-media.css — иллюстрации в теле статьи + стили лайтбокса
   ----------------------------------------------------------------------------
   Подключается в layouts/app.blade.php вручную (?v=), МИМО Mix-манифеста.
   Загружается ПОСЛЕ app.css — поэтому перебивает дефолты Bulma той же
   специфичностью.

   Область действия:  .content figure > img + figcaption
                      .content p > img          (голая картинка из TinyMCE)
   ИСКЛЮЧЕНО:         .content .columns         (портреты ведущих)
                      — см. блок «ИСКЛЮЧЕНИЕ» в конце файла.
   ============================================================================ */

/* --- Изображение: по ширине колонки, по центру, без апскейла ---------------- */
/* Центрируем через display:block + auto-поля, а НЕ через text-align:
   у figure из TinyMCE стоит инлайновый style="text-align: left", который
   перебил бы любое правило из таблицы стилей.
   width не задаём вовсе: картинка рисуется в натуральную ширину (атрибут
   width, обычно 900px) и сжимается только при нехватке места — апскейла нет. */
.content figure > img,
.content p > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    cursor: pointer; /* кликабельна — открывает лайтбокс */
}

/* --- Единые вертикальные отступы ------------------------------------------- */
/* Bulma: .content figure{margin-left:2em;margin-right:2em} — снимаем боковые.
   Ширина figure = ширине картинки (fit-content), а сам блок центрируется в
   колонке: картинка стоит по центру, как и раньше, но подпись под ней ограничена
   шириной картинки и её левый край совпадает с левым краем фото. Без fit-content
   figure занимал бы всю колонку и подпись уезжала бы левее узкой картинки. */
.content figure {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Bulma задаёт 2em через :not(:first-child)/:not(:last-child) — перебиваем
   теми же селекторами, иначе отступы сверху и снизу разъедутся. */
.content figure:not(:first-child) {
    margin-top: 1.5em;
}

.content figure:not(:last-child) {
    margin-bottom: 1.5em;
}

/* Голая картинка лежит в <p>. Поля ставим самой картинке: они схлопываются
   (margin collapsing) с полями абзаца-обёртки, поэтому итоговый зазор равен
   тем же 1.5em, что и у figure. */
.content p > img {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* --- Подпись --------------------------------------------------------------- */
/* Подпись прижата к левому краю картинки, мелкая, приглушённая и курсивная —
   ровно так же, как в лайтбоксе (см. .amlb__cap и layoutOverlay() в js).
   Курсив ОДИНОЧНЫЙ: Bulma даёт italic самому figcaption, а TinyMCE кладёт внутрь
   ещё и <em>. Вложенный уровень поэтому наследует (font-style:inherit), а не
   объявляет курсив заново и не сбрасывается в normal — иначе кусок текста внутри
   <em> вышел бы прямым посреди курсивной строки.
   text-align:left здесь — объявленное значение, оно бьёт инлайновый text-align
   с самого <figure>, который иногда приезжает из редактора. */
.content figure figcaption {
    /* width:0 + min-width:100% — подпись не участвует в расчёте ширины figure
       (иначе длинный текст растянул бы её на всю колонку и fit-content выше
       потерял бы смысл), но занимает всю ширину, которую задала картинка. */
    width: 0;
    min-width: 100%;
    font-size: 0.9em;
    line-height: 1.5;
    color: #6b7280;
    text-align: left;
    font-style: italic;
    margin-top: 0.6em;
}

.content figure figcaption em,
.content figure figcaption i {
    font-style: inherit;
}

/* ============================================================================
   ЛАЙТБОКС (разметку создаёт js/article-lightbox.js в document.body, вне #app)
   ============================================================================ */

.amlb {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999; /* выше navbar-fixed-top и flash-notification (z-index:31) */
    background: rgba(10, 10, 10, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.amlb.is-open {
    opacity: 1;
}

/* touch-action:pinch-zoom — пинч-зум отдаём браузеру (нативный),
   одностопальцевые жесты остаются нам под свайп-вниз-закрытие. */
.amlb__stage {
    max-width: 100%;
    max-height: 100%;
    padding: 3.25rem 1rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    touch-action: pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

/* Десктоп: картинка открывается вписанной в экран (fit-to-screen) */
.amlb__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* Тот же вид, что и у подписи в статье: слева, мелко, приглушённо, курсивом.
   Точные размеры и положение задаёт js (layoutOverlay/fitCaption) — здесь база. */
.amlb__cap {
    flex: 0 0 auto;
    max-width: 46rem;
    margin: 0.9rem auto 0;
    color: #d8d8d8;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    font-style: italic;
}

.amlb__cap em,
.amlb__cap i {
    font-style: inherit; /* одиночный курсив, как в статье */
}

.amlb__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.amlb__close:hover,
.amlb__close:focus {
    background: rgba(255, 255, 255, 0.24);
    outline: none;
}

/* Блокировка прокрутки страницы, пока открыт лайтбокс.
   Скролл-позиция сохраняется в JS и возвращается при закрытии. */
body.amlb-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .amlb__stage {
        padding: 3rem 0.5rem 0.75rem;
    }

    .amlb__img {
        max-height: calc(100vh - 7rem);
    }

    .amlb__cap {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amlb {
        transition: none;
    }
}

/* ============================================================================
   ИСКЛЮЧЕНИЕ: .content .columns — портреты ведущих. Не трогаем совсем:
   возвращаем ровно то, что было до этого файла (Bulma + браузерный дефолт).
   Специфичность здесь выше (2 класса против 1), поэтому правила выше
   на эти картинки не действуют.
   ============================================================================ */
.content .columns img,
.content .columns p > img {
    display: inline;
    margin: 0;
    cursor: auto;
}

.content .columns figure > img {
    display: inline-block; /* дефолт Bulma для .content figure img */
    margin: 0;
    cursor: auto;
}

.content .columns figure {
    margin-left: 2em;
    margin-right: 2em;
}