/* webasyst-shops, 2026-09-22 — ТЗ ads-analytics 87: страница «О нас» nazarklinok.ru (docs/nazarklinok.ru.md, «ТЗ 87»).
   Подключается в index.html только на /o-nas/. Разметка страницы — в тексте страницы (shop_page id 7, скрипт
   scripts/oneoff/2026-09-22-nazarklinok-tz87/). Стиль — как на главной (tz59-home.css, ТЗ 59 п. 2.0 и 2.16):
   фон #141c23, подложки #1a2a36 + рамка #306283, акцент #fbe99c, главная кнопка #cd200a, заголовки Roboto Slab слева,
   текст Montserrat 16 px #e6ecef; отступы между блоками ПК 70, телефон 32. Боковой колонки на странице нет (п. 2.1). */

/* ---------- п. 2.1 раскладка: без боковой колонки ---------- */
.tz87-page .sidebar, .tz87-page .sidebar.sidebar_size-big { display: none !important; }
.tz87-page .container_columns { display: block !important; }
.tz87-page .s-post-page { max-width: 1180px; margin: 0 auto; }
.tz87-page .s-post-page > .s-text-wrapper { max-width: none; }

.tz87 { color: #e6ecef; font: 500 16px/1.6 Montserrat, "Montserrat Fallback", sans-serif; }
.tz87 p { font: 500 16px/1.6 Montserrat, "Montserrat Fallback", sans-serif; margin: 0 0 14px; max-width: 760px; }
.tz87 li { font: 500 16px/1.6 Montserrat, "Montserrat Fallback", sans-serif; }
.tz87 a { color: #fbe99c; }
.tz87 h1 { margin: 0 0 16px; color: #fff; font-size: 36px; line-height: 1.2; }
.tz87 h2 { margin: 0 0 18px; color: #fff; font-size: 28px; line-height: 1.25; text-align: left; }
.tz87-block { margin-top: 70px; }

/* кнопки: главная #cd200a, второстепенная — контур #fbe99c (п. 2.1) */
.tz87 .tz87-btn.btn { width: auto; height: auto; min-height: 48px; padding: 12px 26px; display: inline-flex; align-items: center; justify-content: center;
    line-height: 1.2; font: 700 16px/1.2 Montserrat, "Montserrat Fallback", sans-serif; text-transform: none; letter-spacing: 0; border-radius: 50px; }
.tz87 .tz87-btn--main.btn, .tz87 .tz87-btn--main.btn:hover { background: #cd200a; border: 2px solid #cd200a; color: #fff; }
.tz87 .tz87-btn--main.btn:hover { background: #b01b08; border-color: #b01b08; }
.tz87 .tz87-btn--out.btn { background: transparent; border: 2px solid #fbe99c; color: #fbe99c; }
.tz87 .tz87-btn--out.btn:hover { background: rgba(251,233,156,.1); color: #fbe99c; }
.tz87 .tz87-btn.btn::before, .tz87 .tz87-btn.btn::after { display: none; }
.tz87-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- п. 2.2 первый экран ---------- */
.tz87-hero { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.tz87-hero__photo { position: relative; }
.tz87-hero__photo img { width: 100%; height: 420px; object-fit: cover; object-position: center 40%; border-radius: 8px; border: 1px solid #306283; display: block; }
.tz87-cap { display: block; margin-top: 8px; font-size: 14px; color: #9fb2bf; }
.tz87-facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.tz87-facts li { background: #1a2a36; border: 1px solid #306283; border-radius: 20px; padding: 8px 16px; font-size: 15px; color: #fff; }

/* ---------- п. 2.3 семья, лента лет ---------- */
.tz87-family { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 26px; }
.tz87-family figure { margin: 0; }
/* исходники семейных фото — 250 px по ширине (250×199 и 250×377): крупнее не растягиваем, как и дипломы (п. 2.6);
   вес двух классов — тема тянет картинки текста страницы на всю ширину */
.tz87 .tz87-family img { width: 100%; max-width: 250px; height: auto; border-radius: 8px; border: 1px solid #306283; display: block; }
.tz87-family figcaption, .tz87-steps figcaption { margin-top: 8px; font-size: 14px; color: #9fb2bf; }
.tz87-family p { margin: 0; }
.tz87-years { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tz87-years li { background: #1a2a36; border: 1px solid #306283; border-left: 3px solid #fbe99c; border-radius: 8px; padding: 14px 18px; }
.tz87-years b { color: #fbe99c; }

/* ---------- п. 2.4 как делаем нож ---------- */
.tz87-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.tz87-steps figure { margin: 0; }
.tz87-steps img { width: 100%; height: 170px; object-fit: cover; border-radius: 8px; border: 1px solid #306283; display: block; }
.tz87-quote { background: #1a2a36; border: 1px solid #306283; border-radius: 8px; padding: 22px 24px; margin: 24px 0 0; max-width: 860px; }
.tz87-quote p { margin: 0 0 10px; font-style: italic; }
.tz87-quote footer { color: #fbe99c; font-size: 15px; }

/* ---------- п. 2.5 нож на заказ, п. 2.7 панель с пометкой ---------- */
.tz87-panel { background: #1a2a36; border: 1px solid #306283; border-radius: 8px; padding: 24px; max-width: 860px; }
.tz87-panel p { margin: 0 0 16px; }
.tz87-note-box { background: #1a2a36; border: 1px solid #306283; border-left: 3px solid #fbe99c; border-radius: 8px; padding: 14px 18px; }
.tz87-note summary { cursor: pointer; color: #fbe99c; font-size: 15px; }
.tz87-note p { margin: 8px 0 0; font-size: 15px; }
.tz87-links { margin-top: 14px; }

/* ---------- п. 2.6 дипломы: ПК 5 в ряд, превью не крупнее исходных 190×260 ---------- */
.tz87-dips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 20px 0 22px; }
.tz87-dips a { display: block; text-decoration: none; color: #9fb2bf; }
.tz87-dips img { width: 100%; max-width: 190px; height: 260px; object-fit: contain; background: #0f1820; border: 1px solid #306283; border-radius: 6px; display: block; margin: 0 auto; }
.tz87-dips span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; text-align: center; }

/* ---------- п. 2.8 видео ---------- */
.tz87-video { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* тема подключает свой стиль .custom-fslightbox{min-width:226px} строкой <style> в самой странице (позже наших файлов),
   поэтому селектор с весом двух классов — иначе на телефоне плитки ролика вылезали за экран */
.tz87-video a, .tz87-video a.custom-fslightbox { position: relative; display: block; width: 100%; min-width: 0; max-width: 100%; text-decoration: none; color: #e6ecef; }
.tz87-video img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid #306283; display: block; }
.tz87-video span { display: block; margin-top: 8px; font-size: 15px; }
/* значок «плеер» — как на главной (tz59-play), без красного */
.tz87-video a::before { content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); margin-top: calc(28.125% - 32px); width: 64px; height: 64px;
    border-radius: 50%; background: rgba(20,28,35,.72); border: 2px solid #fbe99c; z-index: 1; }
.tz87-video a::after { content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); margin-top: calc(28.125% - 12px); border-style: solid;
    border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fbe99c; margin-left: 4px; z-index: 2; }

.tz87-ocherk { margin: 0; font-size: 15px; color: #9fb2bf; }
.tz87-ocherk a { color: #fbe99c; }

/* ---------- галереи темы (блоки «Сайт → Блоки», ТЗ 59 п. 2.8) и баннер ВКонтакте (п. 2.9) — в стиле страницы ---------- */
.tz87-page .tz59-about-media { margin-top: 70px; }
.tz87-page .tz59-about-media .home-block { margin-top: 40px; }
.tz87-page .tz59-about-media .block-caption { font-size: 28px; text-align: left; color: #fff; }
.tz87-page .tz59-about-media .block-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
/* «Мы на Rutube» — второстепенная кнопка (в блоке стоит синий фон строкой style) */
.tz87-page .tz59-about-media .block-top__btn-more { background-color: transparent !important; border: 2px solid #fbe99c; color: #fbe99c; text-transform: none;
    letter-spacing: 0; font: 700 16px/1.2 Montserrat, "Montserrat Fallback", sans-serif; min-height: 48px; height: auto; padding: 12px 22px; border-radius: 50px; width: auto; }
.tz87-page .tz59-about-media .block-top__btn-more::before, .tz87-page .tz59-about-media .block-top__btn-more::after { display: none; }
/* баннер ВКонтакте (site:seller/subscription.vk.html) — обе кнопки второстепенные, без заглавных
   (23.09, замечание приёмки ТЗ 87 п. 2: «Условия розыгрыша» — .btn__terms — была с жёлтой заливкой и заглавными) */
.tz87-page .subscription_vk .subscription__caption.btn, .tz87-page .subscription_vk .btn__terms { background-color: transparent !important; border: 2px solid #fbe99c; color: #fbe99c; text-transform: none;
    letter-spacing: 0; font: 700 16px/1.2 Montserrat, "Montserrat Fallback", sans-serif; min-height: 48px; height: auto; padding: 12px 22px; border-radius: 50px; }
.tz87-page .subscription_vk .subscription__caption.btn::before, .tz87-page .subscription_vk .subscription__caption.btn::after,
.tz87-page .subscription_vk .btn__terms::before, .tz87-page .subscription_vk .btn__terms::after { display: none; }

/* ---------- планшет ---------- */
@media (max-width: 1199.98px) {
    .tz87-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tz87-dips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- телефон ---------- */
@media (max-width: 767.98px) {
    .tz87 h1 { font-size: 25px; }
    .tz87 h2 { font-size: 26px; }
    .tz87-block { margin-top: 32px; }
    .tz87-hero { grid-template-columns: 1fr; gap: 16px; }
    .tz87-hero__photo img { height: 220px; object-position: center 45%; }
    .tz87-facts { gap: 8px; }
    .tz87-facts li { font-size: 14px; padding: 6px 12px; }
    .tz87-family { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
    .tz87 .tz87-family img { max-height: 210px; object-fit: cover; object-position: center 25%; }
    .tz87-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .tz87-steps img { height: 120px; }
    /* дипломы — 3 в ряд и не больше экрана (приёмка: ≤ 839 px) */
    .tz87-dips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .tz87-dips img { height: 128px; }
    .tz87-dips span { font-size: 11px; margin-top: 5px; }
    /* ролики — 2 в ряд (ТЗ п. 2.8 допускает 1–2): так страница на Pixel 7 укладывается в 8 000 px */
    .tz87-video { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tz87-video span { font-size: 13px; line-height: 1.3; }
    .tz87-video a::before { width: 44px; height: 44px; margin-top: calc(28.125% - 22px); }
    .tz87-video a::after { border-width: 8px 0 8px 13px; margin-top: calc(28.125% - 8px); margin-left: 3px; }
    .tz87-panel, .tz87-quote { padding: 16px 18px; }
    .tz87-cta .tz87-btn.btn { flex: 1 1 100%; }
    .tz87-page .tz59-about-media { margin-top: 32px; }
    .tz87-page .tz59-about-media .block-caption { font-size: 26px; }
    /* «Мы на Rutube» — под заголовком, а не рядом с ним (на телефоне кнопка съедала половину строки) */
    .tz87-page .tz59-about-media .block-top { flex-direction: column; align-items: flex-start; gap: 12px; }
    .tz87-page .tz59-about-media .block-top__btn-more { align-self: stretch; }
}