/* «Мысли о маркетинге» — акриловые пластины (макет 28.09, ветка design-thoughts).
   Вариант T1 (выбран): три пластины в ряд, ровно; наклон ±3° только за курсором; на узких — лента.
   Цвет пластин держит контраст белого текста ≥4.5:1 в зоне текста (низ пластины темнее). */

.th-band{
  --th-bg:var(--nb-graphite);--th-bg-2:#1d1f23;--th-fg:#fff;
  --th-ease:cubic-bezier(.2,.7,.2,1);
  --th-r:28px;
  background:var(--th-bg);color:var(--th-fg);position:relative;overflow:hidden;isolation:isolate
}
/* общий графит с «Частыми вопросами» (было #26282d/#1c1d21 по теме vs. #26282d флэт у faq — резал шов);
   сияние/тёмный градиент гасим в прозрачное у нижней кромки (~120px), чтобы стык с faq не резало по линии */
.th-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 44% at 18% 58%,rgba(254,108,31,.34),transparent 62%),
    radial-gradient(34% 38% at 84% 22%,rgba(168,51,12,.26),transparent 62%), /* было синее сияние — снято вместе с синей пластиной (В3) */
    linear-gradient(180deg,var(--th-bg) 0%,var(--th-bg-2) 55%,var(--nb-graphite) 100%)
}
.th{padding:clamp(56px,7vw,112px) var(--gutter,24px) clamp(64px,8vw,128px);box-sizing:border-box}

/* заголовок секции — белым на графите, узкий постерный */
.th-head{display:flex;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(36px,4.5vw,64px)}
.th-head h2{margin:0;font:900 clamp(36px,4.4vw,64px)/.92 Poster,'Golos Text',sans-serif;font-stretch:78%;letter-spacing:-.015em;color:#fff}
.th-head .th-kicker{margin:0 0 .4em;font:700 11px/1.5 'Golos Text',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}

.th-list{list-style:none;margin:0;padding:0}

/* ---------- пластина ---------- */
.th-plate{
  --c1:#e96a24;--c2:#bf4306;--c3:#9f3606;--edge:#7a2804;--glow:rgba(254,108,31,.5);
  --gx:30%;--gy:18%;--ga:.0;
  position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;
  border-radius:var(--th-r);padding:clamp(22px,2.2vw,32px);
  color:#fff;overflow:visible;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c1) 92%,transparent) 0%,color-mix(in srgb,var(--c2) 92%,transparent) 38%,color-mix(in srgb,var(--c3) 94%,transparent) 100%);
  border:1px solid rgba(255,255,255,.42);
  /* толщина акрила: ступенчатая «экструзия» тёмным тоном + цветная тень-отражение снизу */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.22),
    inset 1px 0 0 rgba(255,255,255,.18),
    0 1px 0 var(--edge),0 2px 0 var(--edge),0 3px 0 var(--edge),0 4px 0 var(--edge),
    0 5px 0 var(--edge),0 6px 0 var(--edge),0 7px 0 var(--edge),0 8px 0 var(--edge),
    0 9px 1px rgba(0,0,0,.35),
    0 34px 60px -22px var(--glow);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  transform-origin:50% 60%;
  transition:transform .55s var(--th-ease),box-shadow .55s var(--th-ease)
}
/* внутренний фаской край — светлая линия, отступ как у литого акрила */
.th-plate::before{
  content:"";position:absolute;inset:9px;border-radius:calc(var(--th-r) - 9px);pointer-events:none;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 28%)
}
/* блик: широкое пятно + полоса по краю; едет за курсором (--gx/--gy) */
.th-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(60% 45% at var(--gx) var(--gy),rgba(255,255,255,calc(.16 + var(--ga))),transparent 62%),
    linear-gradient(115deg,transparent 6%,rgba(255,255,255,.13) 12%,transparent 20%);
  mix-blend-mode:screen;transition:opacity .4s
}
/* синяя пластина снята (решение В3 «синий убрать», 01.10.2026) — графит в стиле страницы, сияние рыжее */
.th-plate--graphite{--c1:#575a62;--c2:#3e4148;--c3:#2f3136;--edge:#18191c;--glow:rgba(254,108,31,.38)}
.th-plate--red{--c1:#ff5e4b;--c2:#c92217;--c3:#9c150e;--edge:#6d0e08;--glow:rgba(216,43,31,.5)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .th-plate{background:linear-gradient(165deg,var(--c1),var(--c2) 42%,var(--c3))}
}

/* визуальная зона сверху (одинаковой высоты у всех трёх) */
.th-vis{position:relative;height:clamp(150px,15vw,210px);margin-bottom:clamp(16px,1.6vw,24px);flex:none}
.th-photo{position:absolute;inset:0;margin:0;border-radius:calc(var(--th-r) - 12px);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 10px 24px -12px rgba(0,0,0,.55)}
.th-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.th-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 35%);pointer-events:none}
.th-hand{position:absolute;right:4px;top:-4px;width:clamp(96px,9vw,128px);aspect-ratio:1050.7/1322.97;
  background:#fff;-webkit-mask:url(/assets/img/hand-smysl.svg) center/contain no-repeat;mask:url(/assets/img/hand-smysl.svg) center/contain no-repeat;
  transform:rotate(-4deg);filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}

/* текст */
.th-copy{display:flex;flex-direction:column;flex:1}
.th-label{margin:0;font:700 11px/1.5 'Golos Text',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.th-plate h3{margin:10px 0 0;font:900 clamp(30px,2.95vw,44px)/.94 Poster,'Golos Text',sans-serif;font-stretch:78%;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.th-note{margin:12px 0 0;font:400 16px/1.4 'Golos Text',sans-serif;color:#fff;max-width:26ch}
.th-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:auto;padding-top:22px}
.th-btn{
  --plate:#111;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;box-sizing:border-box;
  background:#fff;color:#111;border:1px solid #fff;border-radius:0;
  font:600 15px/1.2 'Golos Text',sans-serif;text-decoration:none;white-space:nowrap
}
.th-link{display:inline-flex;align-items:center;min-height:48px;color:#fff;font:600 15px/1.2 'Golos Text',sans-serif;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.th-link:hover{text-decoration-thickness:3px}
.th :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:3px}
.th-btn:focus-visible{outline-color:#fff;box-shadow:0 0 0 5px #111}

/* управление ленты (точки) — только на узких */
.th-ctrl{display:none}

/* ================= T1 — три пластины в ряд, 3D-наклон ================= */
@media (min-width:900px){
  /* левый край контейнера был на фиксированных 24px (var(--gutter) не задан на главной) — уже теснее,
     чем у соседних секций (Календарь и др. используют clamp(16px,4vw,48px)); выравниваем по общему контейнеру */
  .th{padding-inline:clamp(16px,4vw,48px)}
  .th[data-th="t1"] .th-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,36px);align-items:stretch;padding-top:14px;padding-bottom:10px}
  .th[data-th="t1"] .th-hand{transform:none}
  /* в покое пластины стоят ровно (правка владельца 28.09: «всё покосило»); глубина — толщиной, бликом, отражением.
     Строки пластин выровнены общей сеткой (subgrid): картинка | надпись | заголовок | подпись | кнопки */
  .th[data-th="t1"] .th-list{grid-template-rows:repeat(5,auto);row-gap:0}
  .th[data-th="t1"] .th-item{--ty:0px;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .th[data-th="t1"] .th-item:nth-child(2){--ty:-12px}
  .th[data-th="t1"] .th-plate{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0;align-content:start;transform:translateY(var(--ty))}
  .th[data-th="t1"] .th-vis{grid-row:1}
  .th[data-th="t1"] .th-copy{display:grid;grid-row:2/-1;grid-template-rows:subgrid;row-gap:0}
  .th[data-th="t1"] .th-label{grid-row:1}
  .th[data-th="t1"] .th-plate h3{grid-row:2}
  .th[data-th="t1"] .th-note{grid-row:3}
  .th[data-th="t1"] .th-act{grid-row:4;margin-top:0;align-self:start}
  /* наведение: пластина выпрямляется и поднимается; мелкий наклон к курсору ставит JS (--hx/--hy) */
  .th[data-th="t1"] .th-item.is-hot .th-plate,
  .th[data-th="t1"] .th-item:focus-within .th-plate{
    transform:perspective(1500px) rotateX(var(--hy,0deg)) rotateY(var(--hx,0deg)) translateY(calc(var(--ty) - 14px));
    --ga:.14;
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.22),inset 1px 0 0 rgba(255,255,255,.2),
      0 1px 0 var(--edge),0 2px 0 var(--edge),0 3px 0 var(--edge),0 4px 0 var(--edge),
      0 5px 0 var(--edge),0 6px 0 var(--edge),0 7px 0 var(--edge),0 8px 0 var(--edge),
      0 9px 1px rgba(0,0,0,.35),0 52px 80px -26px var(--glow)
  }
  .th[data-th="t1"] .th-item.is-hot .th-plate{transition:transform .18s linear,box-shadow .55s var(--th-ease)}
}
/* T1 на узких: лента со свайпом, соседняя пластина лежит под текущей со сдвигом (стопка) */
@media (max-width:899.98px){
  .th[data-th="t1"] .th-list{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--gutter,24px));padding:6px var(--gutter,24px) 26px;scroll-padding-inline:var(--gutter,24px);
    scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .th[data-th="t1"] .th-list::-webkit-scrollbar{display:none}
  .th[data-th="t1"] .th-item{flex:0 0 min(86%,440px);scroll-snap-align:start;position:relative;z-index:calc(10 - var(--d,0));--p:0}
  .th[data-th="t1"] .th-item+.th-item{margin-left:-7%}
  .th[data-th="t1"] .th-plate{transform:perspective(1100px) rotateY(calc(var(--p) * -16deg)) rotate(calc(var(--p) * 2.5deg)) scale(calc(1 - var(--pa,0) * .07))}
  .th[data-th="t1"] .th-plate{transition:none}
  .th[data-th="t1"] .th-ctrl{display:flex;justify-content:center;gap:4px;margin-top:4px}
}

/* точки ленты (T1, узкие) */
.th-dot{width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;color:#fff}
.th-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s,transform .2s var(--th-ease)}
.th-dot[aria-current="true"]::before{background:#fff;transform:scale(1.35)}


/* ---------- узкие ---------- */
@media (max-width:599.98px){
  .th-head{flex-direction:column;align-items:flex-start;gap:10px}
  .th-plate h3{font-size:clamp(28px,8.6vw,36px)}
  .th-vis{height:clamp(130px,40vw,170px)}
  .th-act{gap:6px 18px}
}
@media (max-width:359.98px){
  .th-btn{padding:12px 14px;font-size:14px}
  .th-plate{padding:20px}
}

/* ---------- доступность ---------- */
@media (prefers-reduced-motion:reduce){
  .th .th-plate{transition:none!important;animation:none!important}
  .th[data-th="t1"] .th-plate,.th[data-th="t1"] .th-item.is-hot .th-plate{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .th-plate{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(165deg,var(--c1),var(--c2) 42%,var(--c3))}
}

/* раскладка ленты */
@media (max-width:899.98px){
  .th[data-th="t1"] .th-list{position:relative}
}
/* лента: вертикальная обрезка скролл-контейнера резала цветное отражение прямой линией — даём ему поле и укорачиваем */
@media (max-width:899.98px){
  .th[data-th="t1"] .th-list{padding-bottom:52px;margin-bottom:-26px}
  .th[data-th="t1"] .th-plate{--glow:transparent}
}

/* фото на пластинах (28.09, решение владельца: только в цвете). Лицо целиком на 1440/1024/768/390/320 */
.th-photo--content img{object-position:50% 30%}
.th-photo--position img{object-position:40% 30%}
/* рукопись на красной — под фото, на цвете пластины справа от кнопки (на фото белый штрих читался 1.7–1.9:1) */
.th-plate--red .th-hand{position:absolute;left:auto;top:auto;right:clamp(24px,2.4vw,36px);bottom:clamp(26px,2.4vw,36px);z-index:2;width:clamp(64px,5.6vw,86px);transform:none}
@media (max-width:599.98px){.th-plate--red .th-hand{width:clamp(50px,14vw,60px);right:18px;bottom:22px}}
/* планшет 600–899 (лента T1): фотозона была 150px при ширине ~400 (2.6:1) — лицо не помещалось; даём высоту под 1.8:1 */
@media (min-width:600px) and (max-width:899.98px){.th[data-th="t1"] .th-vis{height:clamp(150px,29vw,240px)}}

/* 21.10.2026: заголовок пластины не шире своей колонки. Длинное слово («усовершенствовать», «позиционирование»)
   распирало пластину шире ячейки сетки и съедало зазор до соседней (в т. ч. старый вылет 14–27 px у третьей).
   Колонка текста — контейнер по ширине, кегль — не больше 11.6 % её ширины: самое длинное слово
   (Poster 900, wdth 78) занимает ≈8.4 кегля, т. е. влезает с запасом; слова не переносятся. */
.th-copy{container-type:inline-size;min-width:0}
.th-plate{min-width:0}
.th-plate .th-copy h3{font-size:min(clamp(30px,2.95vw,44px),11.6cqi)}
@media (max-width:599.98px){.th-plate .th-copy h3{font-size:min(clamp(28px,8.6vw,36px),11.6cqi)}}

/* 22.10.2026: новые кадры N04 («Маркетинг доверия», эфир) и N05 («Позиционирование»), оба 16:9.
   Фотозона на всех ширинах 1.45–2.33:1. Уже 1.79 — режется только по бокам, центр держит лицо, руки и петличку.
   Шире (лента 450–760 px) — режется по высоте: N04 держим верх (волосы с 5 %, петличка 54 %),
   N05 — низ (волосы с 20 %, ладонь на столе до 93 %). */
.th-photo--n04 img{object-position:50% 30%}
.th-photo--n05 img{object-position:50% 75%}