/* =============================================================================
   STROM — страница новости (редизайн 2026). Неймспейс sn-*.

   Каркас общий с главной: цвета, шрифты и примитивы приходят из home.css
   (токены живут на .sh-home). Здесь только то, чего в системе ещё не было.

   Композиция страницы — «поздравление написано на чертеже»: воздух с заголовком,
   под ним кадр целиком (без кропа), а благодарность набрана в его светлом поле.
   Дальше семь секций, каждая ДРУГОГО строения: ведомость → клетки-поверхности →
   пауза в одну фразу → портрет с текстом → низкая полоса ссылок → тёмная плита.

   Правила, которых держимся:
   — закрашенная тёмная полоса ровно одна (плита-подпись); вторая тёмная масса —
     сама фотография;
   — капс существует только в моно и только до 13px; в Plex Sans капса нет нигде;
   — золото (--gold) не используется: на поздравлении оно читается как мишура;
   — кнопок нет ни одной, переходы — текстовые ссылки;
   — выравнивания только flex-start / flex-end (start в Firefox не отрабатывает).
   ========================================================================== */

.sh-home.sn-page{
  /* Шкала кеглей страницы. Промежуточных значений не заводим: перепад
     10px → 84px (×8,4) и делает страницу плакатом, а не статьёй. */
  --sn-h1:clamp(2.38rem,6.2vw,5.25rem);
  --sn-huge:clamp(2.5rem,5.4vw,4.5rem);
  --sn-big:clamp(1.62rem,3.2vw,2.75rem);
  --sn-mid:clamp(1.5rem,3vw,2.5rem);
  --sn-lead:clamp(1.18rem,1.6vw,1.32rem);
  --sn-line:#e3ece6;      /* разлиновка на белом */
  --sn-hair:#cfe0d6;      /* размерные линии */
  --sn-mut:#9aa39c;       /* служебный моно на светлом */
  --sn-dark:#12201a;      /* плита-подпись */
}

/* Сбросы темы, которые иначе рвут разлиновку: у Woodmart li{margin-bottom:10px}
   и списки со своими отступами. Гасим по классам страницы, а не глобально. */
.sh-home.sn-page ol,
.sh-home.sn-page ul{margin:0;padding:0;list-style:none;}
.sh-home.sn-page li{margin:0;}
.sh-home.sn-page figure{margin:0;}

/* Служебный моно-лейбл. Свой, а не .sh-eyebrow: у того есть засечка ::before
   в 24px, и в разлинованных шапках она спорит с hairline'ами секции. */
.sh-home.sn-page .sn-eyebrow{
  display:block;font-family:var(--mono);font-size:.69rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0;}

/* Подпись кадра. */
.sh-home.sn-page .sn-caption{
  margin-top:12px;font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sn-mut);}

/* Размерная линия с подписью В РАЗРЫВЕ: линия рисуется фоном самого блока,
   а span накрывает её собственным фоном страницы. Засечки по концам — ::before/::after.
   Тот же примитив, что на страницах услуг. */
.sh-home.sn-page .sn-rule{
  position:relative;margin-top:30px;height:1px;background:var(--sn-hair);}
.sh-home.sn-page .sn-rule::before,
.sh-home.sn-page .sn-rule::after{
  content:"";position:absolute;top:-6px;width:1px;height:13px;background:var(--sn-hair);}
.sh-home.sn-page .sn-rule::before{left:0;}
.sh-home.sn-page .sn-rule::after{right:0;}
.sh-home.sn-page .sn-rule span{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  background:var(--ground);padding-right:14px;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sn-mut);}

/* =============================================================================
   01. ЛИСТ — первый экран
   ========================================================================== */
.sh-home.sn-page .sn-sheet{position:relative;background:var(--ground);
  padding-block:clamp(34px,4.5vw,64px) clamp(56px,7vw,96px);}

/* Точки разбивочной сетки в правой половине верхней зоны: два слоя с шагом
   13 и 52px (отношение 1:4, как на страницах услуг). Маска гасит их к левому
   краю, чтобы под заголовок они не лезли. */
.sh-home.sn-page .sn-sheet::before{
  content:"";position:absolute;inset:0 0 auto;height:min(58%,340px);pointer-events:none;
  background-image:
    radial-gradient(rgba(14,126,80,.16) 1px,transparent 1.2px),
    radial-gradient(rgba(14,126,80,.10) 1px,transparent 1.2px);
  background-size:52px 52px,13px 13px;
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%);
  mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%);}

/* Две колонки: слева слово, справа вертикальный кадр. Flex, а не grid: колонкам
   нужен разный характер роста — текст держит свою меру и не растягивается,
   кадр забирает остаток. */
.sh-home.sn-page .sn-sheet__grid{
  position:relative;display:flex;align-items:center;
  gap:clamp(28px,4.5vw,72px);}

/* Меры набора держат сами строки (H1 14ch, лид 32ch), поэтому у колонки текста
   max-width нет: с ним flex-grow уходил кадру, и на 1440 вертикаль вырастала
   до 900×1150 — первый экран переставал помещаться в окно.
   У кадра рост запрещён и стоит потолок: на широких мониторах он должен
   оставаться кадром, а не полотном. */
.sh-home.sn-page .sn-sheet__copy{flex:1 1 56%;min-width:0;}
.sh-home.sn-page .sn-sheet__figure{flex:0 1 44%;min-width:0;max-width:600px;}
.sh-home.sn-page .sn-eyebrow{margin-bottom:22px;}

/* H1 строчными: капс в Plex Sans на этой странице запрещён. */
.sh-home.sn-page .sn-sheet__h1{
  font-size:var(--sn-h1);font-weight:600;line-height:1.02;letter-spacing:-.028em;
  color:var(--ink);text-transform:none;max-width:14ch;}

.sh-home.sn-page .sn-sheet__lead{
  margin-top:20px;font-size:var(--sn-lead);line-height:1.5;color:var(--text);max-width:32ch;}

/* Благодарность: отдельный объект под лидом — зелёная вертикаль слева и
   моно-штамп сверху. Та же вертикаль, что у секции-паузы, чтобы приём
   на странице был один, а не два похожих. */
.sh-home.sn-page .sn-sheet__thanks{
  position:relative;margin-top:clamp(28px,3vw,40px);padding-left:clamp(16px,1.6vw,22px);}
.sh-home.sn-page .sn-sheet__thanks::before{
  content:"";position:absolute;left:0;top:3px;width:2px;height:calc(100% - 6px);background:var(--green);}
.sh-home.sn-page .sn-sheet__stamp{
  display:block;margin-bottom:9px;font-family:var(--mono);font-size:.69rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green);}
.sh-home.sn-page .sn-sheet__thanks p{
  font-size:clamp(1.06rem,1.6vw,1.44rem);line-height:1.3;font-weight:500;color:var(--ink);
  max-width:26ch;}

/* Марка: служебная строка внизу колонки, разделённая точкой-засечкой. */
.sh-home.sn-page .sn-mark{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:clamp(30px,3.4vw,46px);padding-top:16px;border-top:1px solid var(--sn-line);
  font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sn-mut);}
.sh-home.sn-page .sn-mark span:first-child{color:var(--ink);}
.sh-home.sn-page .sn-mark span+span::before{content:"·";margin-right:14px;color:var(--sn-hair);}

/* Кадр первого экрана: вертикаль 4:5. Пока файла нет — плейсхолдер с промптом
   в той же пропорции, поэтому раскладка не меняется, когда фото приедет. */
.sh-home.sn-page .sn-sheet__figure{position:relative;}
.sh-home.sn-page .sn-sheet__figure .sh-ph{border-radius:var(--r);}
.sh-home.sn-page .sn-sheet__figure .sh-ph--img{border:0;background:none;padding:0;}
.sh-home.sn-page .sn-sheet__figure img{width:100%;height:auto;border-radius:var(--r);}

/* =============================================================================
   02. ВЕДОМОСТЬ ПРЕВРАЩЕНИЙ
   ========================================================================== */
.sh-home.sn-page .sn-tr{background:var(--ground);padding-block:clamp(56px,7vw,92px);}
.sh-home.sn-page .sn-tr__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding-bottom:16px;border-bottom:1px solid var(--sn-line);}

/* Три колонки: исходник — связь — результат. Колонки нумерации здесь нет:
   цифры сняты 09.08.2026 (см. комментарий в strom_news_data). */
.sh-home.sn-page .sn-tr__row{
  display:grid;grid-template-columns:minmax(160px,2.6fr) minmax(90px,1fr) minmax(240px,5fr);
  align-items:center;gap:clamp(12px,1.6vw,24px);
  min-height:clamp(88px,7.6vw,112px);border-bottom:1px solid var(--sn-line);}

.sh-home.sn-page .sn-tr__from{
  font-size:clamp(1.25rem,2.4vw,2.12rem);font-weight:400;color:var(--text);line-height:1.1;}
.sh-home.sn-page .sn-tr__to{
  font-size:var(--sn-big);font-weight:500;color:var(--ink);line-height:1.06;letter-spacing:-.02em;}

/* Связь: линия с узловым квадратом слева. Наконечника нет — решение владельца
   проекта 09.08.2026. До этого пробовали косую ГОСТ-засечку (читалась как
   недорисованная стрелка) и полный шеврон (стрелка мультяшит фразу). Осталась
   чистая размерная линия: узел — начало, конец линии — сам результат. */
.sh-home.sn-page .sn-tr__link{
  position:relative;display:block;height:1px;background:var(--sn-hair);}
.sh-home.sn-page .sn-tr__link::before{
  content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  margin:-3px 0 0 -1px;background:var(--green);transform:rotate(45deg);}

/* =============================================================================
   03. ТРИ ПОВЕРХНОСТИ — «Желаем, чтобы»
   ========================================================================== */
.sh-home.sn-page .sn-wish{background:var(--ground-2);padding-block:clamp(56px,7vw,88px);}
.sh-home.sn-page .sn-wish__lead{
  font-size:clamp(1.28rem,2.1vw,1.75rem);font-weight:500;color:var(--ink);margin-bottom:30px;}
/* Три графы: вертикальная разбивка hairline'ами. Разделитель — border-left у
   соседей, а не gap-подложка: подложка на тинте даёт полосу другого цвета,
   а нужна ровно линия. */
.sh-home.sn-page .sn-wish__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--sn-hair);}
.sh-home.sn-page .sn-cell{
  position:relative;display:flex;flex-direction:column;
  gap:clamp(22px,3vw,44px);
  padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,28px) clamp(24px,2.6vw,36px);}
.sh-home.sn-page .sn-cell+.sn-cell{border-left:1px solid var(--sn-hair);}

/* Шапка графы: лейбл и уходящая от него линия до края колонки. */
.sh-home.sn-page .sn-cell__head{display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;}
.sh-home.sn-page .sn-cell__mat{color:var(--green);}
.sh-home.sn-page .sn-cell__head::after{
  content:"";flex:1 1 auto;height:1px;background:var(--sn-hair);}

.sh-home.sn-page .sn-cell__text{
  font-size:clamp(1.18rem,1.8vw,1.62rem);line-height:1.3;
  font-weight:500;color:var(--ink);max-width:20ch;}

/* =============================================================================
   04. ПАУЗА — одна фраза
   ========================================================================== */
.sh-home.sn-page .sn-pause{background:var(--ground);
  padding-block:clamp(72px,10vw,120px) clamp(70px,9.5vw,116px);}
.sh-home.sn-page .sn-pause__text{
  position:relative;margin-left:clamp(0px,8vw,118px);padding-left:clamp(18px,2vw,28px);
  max-width:26ch;font-size:var(--sn-mid);line-height:1.28;font-weight:500;color:var(--ink);}
.sh-home.sn-page .sn-pause__text::before{
  content:"";position:absolute;left:0;top:.24em;width:2px;height:calc(100% - .4em);
  background:var(--green);}

/* =============================================================================
   05. ПОРТРЕТ И ПОЖЕЛАНИЕ
   ========================================================================== */
.sh-home.sn-page .sn-health{background:var(--ground);padding-block:clamp(46px,6vw,80px);}
.sh-home.sn-page .sn-health__grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,72px);align-items:center;}
.sh-home.sn-page .sn-health__figure .sh-ph{border-radius:var(--r);}
.sh-home.sn-page .sn-health__figure img{width:100%;height:auto;border-radius:var(--r);}
.sh-home.sn-page .sn-health__text{
  font-size:clamp(1.25rem,2.2vw,1.88rem);line-height:1.34;color:var(--ink);max-width:30ch;}

/* =============================================================================
   06. ЕЩЁ В ЖУРНАЛЕ — низкая полоса, самый мелкий набор
   ========================================================================== */
.sh-home.sn-page .sn-more{background:var(--ground);padding-block:clamp(44px,5.5vw,72px);
  border-top:1px solid var(--sn-line);}
.sh-home.sn-page .sn-more__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:6px;}
.sh-home.sn-page .sn-more__all{
  font-family:var(--mono);font-size:.69rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);transition:color .25s var(--ease);}
.sh-home.sn-page .sn-more__all:hover{color:var(--green);}

.sh-home.sn-page .sn-more__row{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:baseline;
  gap:clamp(12px,1.6vw,22px);padding:17px 0;border-bottom:1px solid var(--sn-line);
  transition:color .25s var(--ease);}
.sh-home.sn-page .sn-more__list>li:first-child .sn-more__row{border-top:1px solid var(--sn-line);}
.sh-home.sn-page .sn-more__date{
  font-family:var(--mono);font-size:.69rem;letter-spacing:.06em;color:var(--sn-mut);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.sh-home.sn-page .sn-more__title{font-size:1rem;font-weight:500;color:var(--ink);
  transition:color .25s var(--ease);}
.sh-home.sn-page .sn-more__cat{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sn-mut);white-space:nowrap;}
.sh-home.sn-page .sn-more__row:hover .sn-more__title{color:var(--green-dark);}

/* =============================================================================
   07. ПЛИТА-ПОДПИСЬ — единственная тёмная полоса
   ========================================================================== */
.sh-home.sn-page .sn-sign{
  position:relative;overflow:hidden;background:var(--sn-dark);color:#fff;
  padding-block:clamp(56px,7vw,84px);}
/* Точки разбивочной сетки в правом нижнем углу под радиальной маской.
   Бесконечной подсветки, как на услугах, здесь нет — приём занят той страницей. */
.sh-home.sn-page .sn-sign::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px);
  background-size:52px 52px,13px 13px;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 100%,#000 0%,transparent 62%);
  mask-image:radial-gradient(120% 120% at 100% 100%,#000 0%,transparent 62%);}
.sh-home.sn-page .sn-sign__in{position:relative;z-index:1;}
.sh-home.sn-page .sn-sign__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,60px);align-items:flex-end;}
.sh-home.sn-page .sn-sign__date{
  font-family:var(--mono);font-size:.69rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;}
/* Цвет задаём явно: тема красит крупные заголовки своим --wd-title-color. */
.sh-home.sn-page .sn-sign__title{
  font-size:var(--sn-huge);font-weight:600;line-height:1.04;letter-spacing:-.028em;color:#fff;}
.sh-home.sn-page .sn-sign__lines{
  display:grid;gap:9px;justify-self:flex-end;text-align:right;
  font-family:var(--mono);font-size:.69rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.5);}
.sh-home.sn-page .sn-sign__lines li+li{border-top:1px solid rgba(255,255,255,.14);padding-top:9px;}

.sh-home.sn-page .sn-sign__nav{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;
  margin-top:clamp(30px,4vw,44px);padding-top:20px;border-top:1px solid rgba(255,255,255,.14);}
.sh-home.sn-page .sn-sign__nav a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .25s var(--ease);}
.sh-home.sn-page .sn-sign__nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}

/* =============================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width:900px){
  /* Первый экран в столбец: сначала слово, потом кадр. Кадр ограничиваем по
     ширине — вертикаль 4:5 во всю ширину мобильного экрана съедает два экрана
     прокрутки до первой мысли. */
  .sh-home.sn-page .sn-sheet__grid{flex-direction:column;align-items:flex-start;}
  .sh-home.sn-page .sn-sheet__copy{flex:0 0 auto;max-width:none;}
  .sh-home.sn-page .sn-sheet__figure{flex:0 0 auto;width:100%;max-width:520px;align-self:center;}

  .sh-home.sn-page .sn-health__grid{grid-template-columns:minmax(0,1fr);}
  .sh-home.sn-page .sn-health__text{max-width:none;}

  .sh-home.sn-page .sn-sign__grid{grid-template-columns:minmax(0,1fr);align-items:flex-start;}
  .sh-home.sn-page .sn-sign__lines{justify-self:flex-start;text-align:left;}
}

@media (max-width:768px){
  .sh-home.sn-page .sn-sheet__h1{max-width:none;}

  /* Графы становятся строками: вертикальный разделитель — в горизонтальный. */
  .sh-home.sn-page .sn-wish__grid{grid-template-columns:minmax(0,1fr);}
  .sh-home.sn-page .sn-cell{gap:14px;padding-inline:0;}
  .sh-home.sn-page .sn-cell+.sn-cell{border-left:0;border-top:1px solid var(--sn-hair);}

  .sh-home.sn-page .sn-pause__text{margin-left:0;max-width:none;}
}

@media (max-width:640px){
  /* Ряд в две строки: сверху исходник, снизу результат, между ними короткий
     отрезок связи вместо длинной линии. */
  .sh-home.sn-page .sn-tr__row{
    grid-template-columns:44px minmax(0,1fr);grid-template-areas:"from from" "link to";
    row-gap:12px;padding:20px 0;min-height:0;}
  .sh-home.sn-page .sn-tr__from{grid-area:from;font-size:1.18rem;}
  .sh-home.sn-page .sn-tr__link{grid-area:link;align-self:center;width:32px;}
  .sh-home.sn-page .sn-tr__to{grid-area:to;font-size:1.5rem;}

  /* Точки на 390 шумят под заголовком — гасим. */
  .sh-home.sn-page .sn-sheet::before{display:none;}

  .sh-home.sn-page .sn-more__row{grid-template-columns:minmax(0,1fr);gap:6px;}
  .sh-home.sn-page .sn-more__date{order:-1;}
  .sh-home.sn-page .sn-sign__nav{flex-direction:column;gap:0;}
}