/* ===================== ПАМЯТНИК С ЭКРАНОМ (2026-11-12) =====================
   /pamjatniki/pamjatnik-s-ekranom. Подключается через ViewData["CssPage"] = "pamjatnik-s-ekranom";
   общие блоки mt-* берутся из css/pages/metall.css (PageStyles.RequireCss на странице). Свои классы — префикс scr-.
   Только компьютер. Планшет и телефон — css/adaptive/svc-pamjatniki.css, раздел «Памятник с экраном». */

/* — Ритм секций: 56px между блоками — */
.service-page > section.scr-gallery,
.service-page > section.scr-what,
.service-page > section.scr-alive,
.service-page > section.scr-triggers,
.service-page > section.scr-family,
.service-page > section.scr-shows,
.service-page > section.scr-update,
.service-page > section.scr-prepare,
.service-page > section.scr-power,
.service-page > section.scr-made,
.service-page > section.scr-who,
.service-page > section.scr-compare,
.service-page > section.scr-before,
.service-page > section.scr-install,
.service-page > section.scr-related {
  padding-top: 0 !important;
  padding-bottom: 56px !important;
}
.service-page > section[id^="scr-"] { scroll-margin-top: calc(var(--header-height, 70px) + 16px); }

/* Отступы между частями блока — вплотную ничего не ставим */
.scr-page .scr-gap { margin-top: 28px; }
.scr-page .scr-gap-sm { margin-top: 20px; }
.scr-p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* — Текст + кадр — */
.scr-split { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: center; }
.scr-split--rev { grid-template-columns: 440px minmax(0, 1fr); }
.scr-split--rev > .scr-split__pic { grid-column: 1; grid-row: 1; }
.scr-split--rev > .scr-split__text { grid-column: 2; grid-row: 1; }
.scr-split__text { min-width: 0; }
.scr-split__text > .mt-link, .scr-split__text > .mt-btn { display: inline-flex; }
.scr-pic--45 { aspect-ratio: 4 / 5; }

/* Шапка блока + кадр справа */
.scr-top { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: center; }
.scr-top > .mt-head { margin-bottom: 0; }
.scr-top__pic { aspect-ratio: 4 / 3; }

/* — Видео — */
.scr-video { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #14181a; }
.scr-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #14181a; }

/* — Галерея: видео слева, фото справа — */
.scr-gallery__layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.scr-video-card { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.scr-video-card__cap { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.scr-video-card__cap b { font-size: 15.5px; color: var(--ink); }
.scr-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.scr-gallery__item { aspect-ratio: 3 / 4; }
.scr-gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; text-align: left;
  background: linear-gradient(to top, rgba(20, 24, 26, .72), rgba(20, 24, 26, 0));
  color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3;
}

/* — Три способа включения — */
.scr-triggers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scr-trigger {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card);
}
.scr-trigger__media { aspect-ratio: 3 / 4; border-radius: 0; }
.scr-trigger__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1 1 auto; }
.scr-trigger__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scr-trigger__num { font-size: 30px; font-weight: 800; line-height: 1; color: var(--green-600); }
.scr-trigger__title { margin: 4px 0 0; font-size: 20px; line-height: 1.3; color: var(--ink); }
.scr-trigger__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.scr-trigger__note {
  display: flex; gap: 8px; align-items: flex-start; margin: auto 0 0; padding: 10px 12px; border-radius: 12px;
  background: #e3efe6; font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.scr-trigger__note [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--green-600); }

/* — Мини-карточки — */
.scr-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.scr-cards-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.scr-mini {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); min-width: 0;
}
.scr-mini b { display: block; font-size: 16px; line-height: 1.3; color: var(--ink); }
.scr-mini span:not(.mt-ico) { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* — Подготовка ролика: 4 шага — */
.scr-page .scr-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* — Питание: схемы — */
.scr-power__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.scr-power-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.scr-power-card__scheme { background: #eef3ef; border-bottom: 1px solid var(--line); }
.scr-power-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.scr-power-card__title { margin: 4px 0 0; font-size: 20px; color: var(--ink); }
.scr-power-card__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.scr-svg { display: block; width: 100%; height: auto; }
.scr-svg__sky { fill: #eef3ef; }
.scr-svg__earth { fill: #d9cbb4; }
.scr-svg__ground { stroke: #8c7a5e; stroke-width: 3; }
.scr-svg__stone { fill: #7d8488; stroke: #5d6468; stroke-width: 2; }
.scr-svg__screen { fill: #1f2a2e; stroke: #0f1416; stroke-width: 2; }
.scr-svg__base { fill: #5d6468; }
.scr-svg__pole { stroke: #6b5a43; stroke-width: 6; stroke-linecap: round; }
.scr-svg__wire { fill: none; stroke: #4a4f52; stroke-width: 2; }
.scr-svg__cable { fill: none; stroke: #2f8a4c; stroke-width: 4; stroke-dasharray: 10 6; stroke-linejoin: round; }
.scr-svg__battery { fill: #2f8a4c; stroke: #1f6a3a; stroke-width: 2; }
.scr-svg__dim { fill: none; stroke: #1f2a2e; stroke-width: 2; }
.scr-svg__label { font: 600 17px/1 var(--font-body, Arial, sans-serif); fill: #1f2a2e; }
.scr-svg__label--sm { font-size: 15px; font-weight: 500; }

/* — Из чего сделан: широкий кадр надписи — */
.scr-made__wide { aspect-ratio: 21 / 9; }

/* — Кому подходит — */
.scr-who__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.scr-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); overflow: hidden; }
.scr-card__pic { aspect-ratio: 4 / 3; border-radius: 0; }
.scr-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.scr-card__title { margin: 4px 0 0; font-size: 18px; line-height: 1.3; color: var(--ink); }
.scr-card__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }

/* — Сравнение — */
.scr-table .mt-table__row { grid-template-columns: 180px repeat(4, minmax(0, 1fr)); }
.scr-table .mt-table__row--head > div:nth-child(2) { background: var(--line-2); }
.scr-table .mt-table__row--head > div:nth-child(5) { background: var(--green-50); }
.scr-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.scr-link-card {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; min-width: 0;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: inherit; text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.scr-link-card:hover { box-shadow: 0 10px 28px rgba(20, 24, 26, .08); transform: translateY(-2px); }
.scr-link-card__pic { flex: 0 0 72px; width: 72px; aspect-ratio: 1 / 1; border-radius: 12px; }
.scr-link-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.scr-link-card__body b { font-size: 16px; color: var(--ink); }
.scr-link-card__body span { font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.scr-link-card > [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; color: var(--green-600); }

/* — Перелинковка по кругу — */
.scr-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.scr-rel {
  display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s;
}
.scr-rel:hover { box-shadow: 0 10px 28px rgba(20, 24, 26, .08); transform: translateY(-2px); }
.scr-rel__pic { aspect-ratio: 4 / 3; border-radius: 0; }
.scr-rel__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.scr-rel__title { font-size: 17px; line-height: 1.3; color: var(--ink); }
.scr-rel__text { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.scr-rel__price { font-size: 14px; font-weight: 700; color: var(--green-600); }

/* — Квиз — */
.scr-quiz-textarea { resize: vertical; min-height: calc(3 * 1.5em + 26px); max-height: calc(10 * 1.5em + 26px); line-height: 1.5; }
.scr-quiz-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.scr-quiz-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.scr-quiz-list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--green-600);
}