/* ============================================================================
   СТРАНИЦА РЕЗУЛЬТАТА — оформление (этап 7, 28.09.2026)

   Цвета, шрифты и скругления берутся из qr-ui.css — той же таблицы, что у
   редактора и у главной страницы сайта.

   Старый style_template.css не трогаем: он общий и на нём держится ещё и
   экран-приветствие. Здесь только то, что нужно переопределить, и каждое
   переопределение подписано.
   ============================================================================ */

.page__wrapper {
    font-family: var(--qr-font);
    color: var(--qr-ink);
    background: var(--qr-bg);
}

/* --- общая колонка --------------------------------------------------------- */
.page__wrapper .container {
    max-width: 880px;
    padding: 0 16px;
}

/* --- заголовок и главное фото ---------------------------------------------- */
.qr-p__main { margin: 0 0 28px; }

/* В style_template.css заголовок задан размером 35px с выравниванием по
   центру и без ограничения сверху — на телефоне он занимал пол-экрана. */
.qr-p__main .qr-p__title {
    margin: 22px 0 18px;
    font-family: var(--qr-font);
    font-size: clamp(24px, 4.2vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--qr-ink);
    text-align: center;
    padding: 0;
    word-wrap: break-word;
}

/* ГЛАВНОЕ ФОТО.

   Было: height: 70vh — почти весь экран под одну фотографию, и вертикальные
   снимки растягивали страницу сильнее горизонтальных. Стало: одна и та же
   высота для любых пропорций, снимок вписывается целиком, поля закрашены
   мягким фоном — вертикальное фото больше не выглядит обрезанным. */
.qr-p__main .block__img { width: 100%; }
/* Главное фото не обрезалось и раньше, но подложка была ровной заливкой.
   Теперь та же, что и в галерее, — размытый снимок под самим снимком. */
.qr-p__main .slider__item > .container > a {
    position: relative;
    display: block;
    border-radius: var(--qr-r-l);
    overflow: hidden;
    background: var(--qr-bg-soft);
}
.qr-p__main .slider__item > .container > a::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: var(--qr-shot) center / cover no-repeat;
    filter: blur(22px) saturate(1.25);
    opacity: .5;
}
.qr-p__main .block__img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: clamp(220px, 42vh, 420px);
    object-fit: contain;
    background: transparent;
    border-radius: var(--qr-r-l);
    display: block;
}
.qr-p__main .slider__item { display: block !important; }
.qr-p__main .slider__item > .container { padding: 0 16px; max-width: 880px; }
.qr-p__main .slider__item > .container > a { display: block; }

/* Точки слайдера — тонкие полоски в цвете сайта вместо белых. */
.qr-p__main .slick-dots { bottom: -26px; }
.qr-p__main .slick-dots li,
.qr-p__main .slick-dots li button { width: 26px; height: 4px; padding: 0; }
.qr-p__main .slick-dots li button:before {
    content: '';
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: var(--qr-line);
    opacity: 1;
}
.qr-p__main .slick-dots li.slick-active button:before { background: var(--qr-accent); }
.qr-p__main .slider.is-single + .slick-dots,
.qr-p__main .slider.is-single .slick-dots { display: none !important; }

/* --- блоки содержимого ------------------------------------------------------ */
.qr-p__blocks { display: block; }
.qr-p__block { margin: 0 0 22px; }

.qr-p__block .title__text__h1 {
    margin: 0 0 10px;
    font-family: var(--qr-font);
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 700;
    line-height: 1.3;
    /* было text-align: justify — на узком экране получались дыры между слов */
    text-align: left;
    color: var(--qr-ink);
    word-wrap: break-word;
}
.qr-p__block .title__text__desc {
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
    color: var(--qr-ink-2);
    word-wrap: break-word;
}

/* --- галерея блока фотографий ----------------------------------------------- */
/* В <style> внутри p.php у .slider__item стоит display: flex с центровкой,
   а сама фотография обёрнута ссылкой. Ссылка — строчный элемент, в гибкой
   раскладке она получает ширину по содержимому, и снимок ужимался до
   ста с небольшим пикселей вместо трети ряда. */
.qr-p__gallery .slider__item {
    display: block !important;
    padding: 0 5px;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
}
/* ФОТОГРАФИИ НЕ ОБРЕЗАЮТСЯ НИКОГДА.

   Было object-fit: cover — снимок растягивался на всю ячейку, а лишнее
   отрезалось. Для вертикального фото это означало, что в ленте видно только
   его середину: голова и ноги за кадром. Посетитель об этом не знает и не
   обязан догадываться нажать на снимок, чтобы увидеть его целиком.

   Стало object-fit: contain — снимок вписывается целиком при любых
   пропорциях. Пустое место по бокам заполняет он же сам, размытый и
   притушённый: получается мягкая подложка в цветах самого снимка, а не
   серый прямоугольник. Адрес снимка приходит в переменной --qr-shot из
   разметки (include/page_block_slider_img.php).

   Высота ячейки поднята со 190 до 240 пикселей: при вписывании вертикальный
   снимок занимает по ширине только треть ячейки, и на 190 он выглядел
   марочкой.

   Если --qr-shot почему-то не пришла (старая разметка в кеше), подложка
   просто не рисуется и остаётся спокойный фон — ничего не ломается. */
.qr-p__gallery .slider__item > a {
    position: relative;
    display: block;
    width: 100%;
    height: 240px;
    border-radius: var(--qr-r-m);
    overflow: hidden;
    background: var(--qr-bg-soft);
}
.qr-p__gallery .slider__item > a::before {
    content: '';
    position: absolute;
    /* вылезаем за края: у размытия по краям иначе остаётся светлая кайма */
    inset: -24px;
    background: var(--qr-shot) center / cover no-repeat;
    filter: blur(18px) saturate(1.25);
    opacity: .5;
}
.qr-p__gallery .slider__item img {
    position: relative;   /* поверх подложки */
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* ОДНА ФОТОГРАФИЯ — ПРОСТО ФОТОГРАФИЯ, А НЕ ЛЕНТА ИЗ ТРЁХ МЕСТ.

   Здесь был мой недосмотр. Когда я убирал обрезку, карточке .slider__item > a
   задана жёсткая высота 240 пикселей и overflow: hidden. Для ленты это верно —
   ячейки в ряду должны быть одной высоты. Но у одиночного снимка правило
   переопределяло только картинку (height: auto), а карточку — нет. Картинка
   получалась выше карточки, и лишнее срезалось её overflow. То есть обрезка
   вернулась ровно там, где её быть не должно.

   Теперь карточка подстраивается под снимок, а не наоборот. Ряда нет,
   равнять не с чем — пусть фотография занимает столько, сколько ей нужно,
   до 420 пикселей высоты. Горизонтальный снимок при этом занимает карточку
   целиком, без полей; у вертикального остаются поля по бокам, и их, как и
   в ленте, заполняет он же сам, размытый. */
.qr-p__gallery.is-single { display: block; }
.qr-p__gallery.is-single .slider__item { padding: 0; }
.qr-p__gallery.is-single .slider__item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    max-height: 420px;
}
.qr-p__gallery.is-single .slider__item img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

/* СТРЕЛКИ ГАЛЕРЕИ — почему такие длинные селекторы.

   В css/slick.css лежит:
       .blockSlider_img .slick-arrow            { width:100px; height:100px; margin:-43px 0 0 }
       .blockSlider_img .slick-arrow.slick-prev { background: url("../images/icons/prev.png") }

   Вес у «.blockSlider_img .slick-arrow.slick-prev» — три класса, и сам
   slick.css подключается в p.php строкой выше, то есть ПОСЛЕ этого файла.
   Пока селекторы здесь были в два класса, они проигрывали: кнопка
   оставалась размером 100x100 со старой картинкой-стрелкой, а поверх неё
   рисовался новый кружок с уголком. Отсюда и «стрелки задвоились».

   Поэтому здесь четыре класса — этого хватает, чтобы перебить старое
   правило при любом порядке подключения, и не нужен !important. */
.page__wrapper .qr-p__gallery .slick-arrow.slick-prev,
.page__wrapper .qr-p__gallery .slick-arrow.slick-next {
    width: 36px;
    height: 36px;
    /* top: 50% задан в slick.css, поэтому поднимаем на половину высоты */
    margin: -18px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* background-image: none гасит prev.png / next.png из slick.css */
    background: var(--qr-surface) none;
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, .35);
    z-index: 21;
}
.page__wrapper .qr-p__gallery .slick-arrow.slick-prev { left: -6px; right: auto; }
.page__wrapper .qr-p__gallery .slick-arrow.slick-next { right: -6px; left: auto; }

.page__wrapper .qr-p__gallery .slick-arrow.slick-prev:before,
.page__wrapper .qr-p__gallery .slick-arrow.slick-next:before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border: 2px solid var(--qr-ink-2);
    border-width: 2px 2px 0 0;
    opacity: 1;
}
.page__wrapper .qr-p__gallery .slick-arrow.slick-prev:before {
    transform: rotate(-135deg);
    margin: 0 0 0 15px;
}
.page__wrapper .qr-p__gallery .slick-arrow.slick-next:before {
    transform: rotate(45deg);
    margin: 0 0 0 11px;
}

/* --- ссылки и файлы ---------------------------------------------------------
   Были строчками со значком. Стали плитками во всю ширину: по такой понятно,
   что на неё нажимают, и попасть по ней пальцем легче. */
.qr-p__link a,
.qr-p__file a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 14px 16px;
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-m);
    background: var(--qr-surface);
    font-family: var(--qr-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--qr-ink);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.qr-p__link a:hover,
.qr-p__file a:hover { border-color: var(--qr-accent); background: var(--qr-accent-soft); }

/* ССЫЛКА — той же плиткой, что и файл.

   Раньше слева стоял значок link-icon.svg. Теперь на его месте такая же
   рамка-квадрат, как у файла, только внутри неё нарисована стрелка «наружу»:
   два блока отличаются смыслом, а не случайной картинкой. Сама link-icon.svg
   больше нигде не используется. */
.qr-p__link-icon {
    position: relative;
    flex: none;
    width: 40px;
    height: 46px;
    border-radius: 6px;
    background: var(--qr-bg-warm);
    border: 1px solid var(--qr-line);
}
/* уголок стрелки */
.qr-p__link-icon:before {
    content: '';
    position: absolute;
    top: 16px;
    left: 18px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--qr-accent-dark);
    border-width: 2px 2px 0 0;
}
/* её хвост */
.qr-p__link-icon:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 13px;
    width: 14px;
    height: 2px;
    background: var(--qr-accent-dark);
    transform: rotate(-45deg);
}

.qr-p__link-body { flex: 1 1 auto; min-width: 0; }
.qr-p__link-name { display: block; word-break: break-word; }
.qr-p__link-meta {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--qr-muted);
    word-break: break-word;
}
/* остаётся для страниц, где ссылка выведена без адреса */
.qr-p__link-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.qr-p__link-go {
    flex: none;
    width: 9px;
    height: 9px;
    border: 2px solid var(--qr-faint);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}

.qr-p__file-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px;
    border-radius: 6px;
    background: var(--qr-bg-warm);
    border: 1px solid var(--qr-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--qr-accent-dark);
    text-transform: uppercase;
}
.qr-p__file-text { flex: 1 1 auto; min-width: 0; }
.qr-p__file-name { display: block; word-break: break-word; }
.qr-p__file-meta {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--qr-muted);
}

/* --- два блока в линию ------------------------------------------------------
   Включается настройкой страницы (колонка two_col). На узком экране всегда
   одна колонка: две там не помещаются. */
/* Обёртка блоков с фотографиями не должна быть отдельной ячейкой сетки. */
.qr-p__blocks > .qr-p__wrap { display: contents; }

@media (min-width: 900px) {
    .qr-p__blocks--two {
        display: grid;
        /* minmax(0, 1fr), а не 1fr: иначе широкое содержимое блока растягивает
           свою колонку, и вместо половины получается 880 на 376. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
        align-items: start;
    }
    .qr-p__blocks--two > * { min-width: 0; }
    /* Сама сетка не лежит в .container — задаём ширину и поля здесь, иначе
       колонки прижимались к краям экрана, а шапка и подвал оставались по
       центру. */
    .qr-p__blocks--two {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 16px;
    }
    /* Заголовок с главным фото — всегда во всю ширину. */
    .qr-p__blocks--two > .qr-p__main { grid-column: 1 / -1; }
    /* Внутри колонки своя ширина уже ни к чему. */
    .qr-p__blocks--two .container { max-width: none; padding: 0; }
}

/* --- подвал ------------------------------------------------------------------
   Было: .footer__left 40% и .footer__right 70% — в сумме 110%, правый край
   уезжал за экран. И правая колонка выводилась всегда, даже когда карты нет:
   контакты жались в половину ширины впустую. */
.page__wrapper .footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: start;
    margin: 34px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--qr-line);
}
.page__wrapper .footer__main.qr-p__footer--nomap { grid-template-columns: minmax(0, 1fr); }
.page__wrapper .footer__left,
.page__wrapper .footer__right { width: auto; min-width: 0; }

.page__wrapper .footer__title {
    margin: 0 0 14px;
    font-family: var(--qr-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--qr-ink);
}
.page__wrapper .footer__info__block {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--qr-line-soft);
}
.page__wrapper .footer__info__block:last-child { border-bottom: 0; }
.page__wrapper .footer__label {
    flex: 0 0 110px;
    font-size: 14px;
    color: var(--qr-muted);
}
.page__wrapper .footer__value {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 17px;
    color: var(--qr-ink);
    word-break: break-word;
}
.page__wrapper .footer__left a { text-decoration: none; color: inherit; }
.page__wrapper .footer__left a:hover .footer__value { color: var(--qr-accent-dark); }

/* КАРТА НА УЗКОМ ЭКРАНЕ — ПОД КОНТАКТАМИ, ВО ВСЮ ШИРИНУ.

   Было: две колонки при любой ширине экрана. На телефоне карте доставалось
   чуть больше половины из трёхсот шестидесяти пикселей — около двухсот, — и
   на ней нельзя было разобрать ни улиц, ни подписей. Так же поступают и
   другие сайты: на телефоне карта идёт отдельным блоком во всю ширину.

   Порядок получается сам собой: в разметке контакты идут первыми, карта
   второй, поэтому в одну колонку они выстраиваются «контакты, значки
   соцсетей, карта». Отдельная строка сверху отделяет карту от значков. */
@media (max-width: 760px) {
    .page__wrapper .footer__main { grid-template-columns: minmax(0, 1fr); }
    .page__wrapper .footer__right {
        margin: 4px 0 0;
        padding: 18px 0 0;
        border-top: 1px solid var(--qr-line-soft);
    }
}

/* Карта: рамка и скругление, чтобы она не выглядела вырезанной из другого
   сайта. Высота задаётся здесь, иначе её диктует чужой код вставки. */
.page__wrapper .footer__right iframe {
    width: 100% !important;
    height: 300px !important;
    border: 0;
    border-radius: var(--qr-r-m);
    display: block;
}

/* Значки соцсетей. */
.page__wrapper .block__social.ic {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--qr-line-soft);
}
.page__wrapper .block__social.ic a { display: inline-flex; }
.page__wrapper .block__social.ic img {
    width: 40px;
    height: 40px;
    margin: 0;
    transition: transform .12s;
}
.page__wrapper .block__social.ic a:hover img { transform: scale(1.08); }

/* --- форма обратной связи ---------------------------------------------------- */
.page__wrapper .form__block,
.page__wrapper .form__page { margin: 28px 0 0; }

/* ФОРМА ОБРАТНОЙ СВЯЗИ (include/page_block_form.php).

   Была забыта при переделке: заголовок капслоком вплотную к полю, поле со
   старой рамкой в 5 пикселей и текстом подсказки, сдвинутым на 50 пикселей
   (textarea::placeholder из style.css), бледно-оранжевая кнопка 160x40 из
   .btn-danger. Теперь — карточка на тёплой подложке, поле и кнопка как в
   редакторе (qr-ui.css).

   Классы block__text_, desc_form, button_form и message__block оставлены:
   на них держится скрипт отправки в p.php. */
.page__wrapper .qr-p__form {
    margin: 34px 0 0;
    padding: 22px;
    background: var(--qr-bg-soft);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-l);
    box-sizing: border-box;
    float: none;
    width: 100%;
}
.page__wrapper .qr-p__form .title__text {
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
}
/* заголовок: из style_template.css он шёл капслоком, 18px и с отступом 20px
   сверху — как вывеска. Здесь обычный подзаголовок блока. */
.page__wrapper .qr-p__form .label_block_form {
    margin: 0 0 14px;
    padding: 0;
    font-family: var(--qr-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    color: var(--qr-ink);
    word-wrap: break-word;
}
.page__wrapper .qr-p__form textarea.desc_form {
    display: block;
    width: 100%;
    min-height: 110px;
    margin: 0 0 14px !important;      /* в разметке стоит style="margin:0" */
    padding: 12px 14px;
    box-sizing: border-box;
    font-family: var(--qr-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--qr-ink);
    background: var(--qr-surface);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-m);
    box-shadow: none;
    cursor: text;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
}
.page__wrapper .qr-p__form textarea.desc_form:hover { border-color: #D8D2CA; }
.page__wrapper .qr-p__form textarea.desc_form:focus {
    outline: none;
    border-color: var(--qr-accent);
    box-shadow: 0 0 0 3px var(--qr-accent-soft);
}
/* подсказка: общее правило textarea::placeholder сдвигало её на 50px
   и центрировало */
.page__wrapper .qr-p__form textarea.desc_form::placeholder {
    padding: 0;
    text-align: left;
    color: var(--qr-faint);
}
.page__wrapper .qr-p__form .click__block { width: 100%; padding: 0; }
.page__wrapper .qr-p__form .button_form {
    box-sizing: border-box;
    width: auto;
    min-width: 170px;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 11px 26px;
    font-family: var(--qr-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--qr-grad);
    border: 0;
    border-radius: var(--qr-r-m);
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s, transform .05s;
}
.page__wrapper .qr-p__form .button_form:hover { filter: brightness(.96); background: var(--qr-grad); color: #fff; }
.page__wrapper .qr-p__form .button_form:active { transform: translateY(1px); }
.page__wrapper .qr-p__form .button_form:focus-visible { outline: 3px solid var(--qr-accent-soft); outline-offset: 2px; }

/* Сообщение о результате — над карточкой, плашкой. Пока текста нет, места
   не занимает. Цвет текста выставляет скрипт в p.php. */
.page__wrapper .qr-p__form-msg {
    margin: 26px 0 -22px;
    padding: 11px 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    background: var(--qr-bg-soft);
    border: 1px solid var(--qr-line);
    border-radius: var(--qr-r-m);
}
.page__wrapper .qr-p__form-msg:empty { display: none; }

@media (max-width: 640px) {
    .page__wrapper .qr-p__form { padding: 16px; margin-top: 26px; }
    .page__wrapper .qr-p__form .label_block_form { font-size: 16px; }
    .page__wrapper .qr-p__form .button_form { width: 100%; }
}

/* БЛОК «ВИДЕО» (include/page_block_video.php).

   Сначала карточка-заставка 16:9, плеер хостинга подставляется по нажатию
   (скрипт в самом блоке). У YouTube заставка — кадр ролика (--qr-poster из
   разметки); у остальных хостингов — тёмная карточка с названием. Если
   картинка YouTube не загрузилась, остаётся та же тёмная карточка. */
.qr-p__block--video .qr-p__video { margin: 0; }
.qr-p__video-btn {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: var(--qr-r-l);
    overflow: hidden;
    cursor: pointer;
    font-family: var(--qr-font);
    background:
        var(--qr-poster, none) center / cover no-repeat,
        linear-gradient(135deg, #2B2B33, #4A4A57);
}
.qr-p__video-btn::after {            /* лёгкое затемнение, чтобы значок читался на любом кадре */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
    transition: background .15s;
}
.qr-p__video-btn:hover::after { background: rgba(0, 0, 0, .06); }
.qr-p__video-btn:focus-visible { outline: 3px solid var(--qr-accent); outline-offset: 3px; }
.qr-p__video-host {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 2;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    border-radius: 999px;
}
.qr-p__video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    background: var(--qr-grad);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    transition: transform .12s;
}
.qr-p__video-play::before {          /* треугольник «воспроизвести» */
    content: '';
    position: absolute;
    left: 27px;
    top: 21px;
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #fff;
}
.qr-p__video-btn:hover .qr-p__video-play { transform: scale(1.08); }
.qr-p__video-frame {
    display: block;
    width: 100%;
    /* в style.css есть общее правило iframe { height: 100% }, из-за него рамка
       растягивалась на весь экран; пропорцию держим сами */
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--qr-r-l);
    background: #000;
}
.qr-p__video-cap {
    margin: 10px 2px 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--qr-ink-2);
    word-wrap: break-word;
}
/* --- узкий экран ------------------------------------------------------------- */
@media (max-width: 640px) {
    .page__wrapper .container { padding: 0 16px; }
    .qr-p__main .block__img img { height: clamp(200px, 40vh, 320px); }
    /* На узком экране в ленте видна одна карточка, поэтому она выше: при
       вписывании целиком вертикальному снимку на 210 пикселях оставалось
       140 по ширине — почти марка. На 300 он занимает 200. */
    .qr-p__gallery .slider__item > a { height: 300px; }
    .qr-p__block .title__text__desc { font-size: 16px; }
    .page__wrapper .footer__main { gap: 22px; }
    .page__wrapper .footer__label { flex: 1 1 100%; }
    /* во всю ширину карту видно лучше, поэтому она стала не ниже, а выше */
    .page__wrapper .footer__right iframe { height: 280px !important; }
    .page__wrapper .block__social.ic img { width: 44px; height: 44px; }
}

/* ============================================================================
   ПРОСМОТР ФОТОГРАФИИ ВО ВЕСЬ ЭКРАН (Fancybox)

   Жалоба была: «крестика нет или он перекрывается разделом Header страницы».
   Шапка сайта в style_template.css сидит на z-index: 9999, а окно просмотра
   по умолчанию — на 1050. То есть окно открывалось ПОД шапкой, и кнопка
   закрытия в правом верхнем углу оказывалась накрыта кнопкой меню.

   Поднимаем окно выше всего остального на странице и на всякий случай
   задаём размер и отступ крестику: в некоторых темах он получал нулевую
   высоту от общих правил для button.
   ============================================================================ */
/* Почему селектор с body, а не просто .fancybox__container.

   fancybox.css подключается в p.php ВТОРОЙ строкой — то есть его правило
   .fancybox__container { z-index: var(--fancybox-zIndex, 1050) } стоит в
   том же весе, но ниже по порядку, и побеждает. Проверено на живой странице:
   при простом селекторе окно оставалось на 1050, а шапка сайта (.qh) сидит
   на 1200 и накрывала крестик.

   Поэтому здесь и переменная самой библиотеки, и селектор на класс больше —
   чтобы правило работало при любом порядке подключения и без !important. */
body .fancybox__container {
    --fancybox-zIndex: 100000;
    --f-zIndex: 100000;
    z-index: 100000;
}
body .fancybox__container .f-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}
.fancybox__container .f-carousel__nav .f-button,
.fancybox__container .fancybox__nav .f-button { top: 50%; }
/* на телефоне крестик прижимался к самому краю — не попасть пальцем */
@media (max-width: 640px) {
    .fancybox__container .fancybox__toolbar { padding: 6px; }
}