/* Слой июльских страниц записей (conf.recplace.ru/july/*).
   Грузится ПОСЛЕ f-sd-talk.css и только на этих страницах: сам f-sd-talk.css
   общий с 20 страницами recplace.ru, где действует пиксельный мандат, поэтому
   правки живут здесь, а не в нём.

   Разделы: 0 токены · 1 hero · 2 видео и главы · 3 статья · 4 сайдбар
            5 FAQ · 6 CTA · 7 появление блоков · 8 футер · 9 адаптив */

/* ---- 0. токены ---------------------------------------------------------- */
.talk {
  --rp-orange-dk:#E4551A;
  --rp-ink-2:#6C6B73;
  --rp-line-2:#EDEDED;
  --rp-radius:16px;
  --rp-radius-lg:24px;
  --rp-ease:cubic-bezier(.4,0,.2,1);
  --rp-shadow-sm:0 1px 2px rgba(29,29,31,.04), 0 4px 16px rgba(29,29,31,.05);
  --rp-shadow-md:0 2px 6px rgba(29,29,31,.06), 0 12px 36px rgba(29,29,31,.09);
}

/* ---- 1. hero ------------------------------------------------------------ */
/* Две колонки: слева текст, справа портрет. Портрет — тот же файл, что в био,
   поэтому второй загрузки не будет. */
.talk .rp-article-hero { padding:132px 0 72px }
.talk .rp-article-hero::before {
  background:
    radial-gradient(60% 70% at 78% 28%, rgba(250,100,30,.30) 0%, transparent 70%),
    radial-gradient(45% 55% at 8% 92%, rgba(250,100,30,.12) 0%, transparent 70%);
}
/* Тонкая сетка поверх подложки — фактура вместо пустого чёрного. */
.talk .rp-article-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
}
.talk .rp-hero-grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:center;
}
.talk .rp-article-hero h1 { font-size:46px !important; letter-spacing:-.8px; max-width:none }
.talk .rp-article-hero-sub { max-width:640px; margin-bottom:28px }

/* Мета-строка: дата, длительность, число глав. */
.talk .rp-hero-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px;
  margin-bottom:24px; font-size:13px; font-weight:600; color:rgba(255,255,255,.55);
}
.talk .rp-hero-meta-item { display:inline-flex; align-items:center; gap:6px }
.talk .rp-hero-meta svg { opacity:.75 }
.talk .rp-hero-meta time { color:inherit }

.talk .rp-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px }
.talk .rp-btn-hero {
  display:inline-flex !important; align-items:center; gap:9px;
  padding:14px 28px !important; border-radius:999px !important;
  background:var(--rp-orange) !important; color:#fff !important;
  font-size:16px !important; font-weight:700 !important; text-decoration:none;
  box-shadow:0 8px 28px rgba(250,100,30,.32) !important;
  transition:transform .2s var(--rp-ease), box-shadow .2s var(--rp-ease), background .2s;
}
.talk .rp-btn-hero:hover { background:var(--rp-orange-dk) !important; transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(250,100,30,.42) !important }
.talk .rp-btn-hero-ghost {
  display:inline-flex !important; align-items:center; gap:9px;
  padding:14px 26px !important; border-radius:999px !important;
  background:rgba(255,255,255,.07) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  font-size:16px !important; font-weight:600 !important; text-decoration:none;
  transition:background .2s, border-color .2s, transform .2s var(--rp-ease);
}
.talk .rp-btn-hero-ghost:hover { background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.38) !important; transform:translateY(-2px) }

/* Портрет справа: круг с оранжевым кольцом и мягким свечением. */
.talk .rp-hero-portrait { position:relative; justify-self:center; width:264px; height:264px }
.talk .rp-hero-portrait::before {
  content:''; position:absolute; inset:-18px; border-radius:50%;
  background:conic-gradient(from 210deg, rgba(250,100,30,.85), rgba(250,100,30,.05) 42%, rgba(250,100,30,.85));
  filter:blur(16px); opacity:.5;
}
.talk .rp-hero-portrait img {
  position:relative; width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,.14); background:#2a2a2c; display:block;
}
.talk .rp-hero-portrait-badge {
  position:absolute; right:-6px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px;
  background:var(--rp-white); color:var(--rp-dark);
  font-size:13px; font-weight:700; white-space:nowrap;
  box-shadow:var(--rp-shadow-md);
}
.talk .rp-hero-portrait-badge svg { color:var(--rp-orange) }

/* Строка со спикером под текстом: аватар убран — портрет уже справа. */
.talk .rp-article-speaker-row { gap:14px; align-items:center }
.talk .rp-article-speaker-row .rp-avatar { display:none }
.talk .rp-article-speaker-row::before {
  content:''; width:3px; align-self:stretch; min-height:38px;
  border-radius:2px; background:var(--rp-orange); flex:none;
}
.talk .rp-article-speaker-name { font-size:16px }
.talk .rp-article-speaker-role { font-size:13.5px; max-width:520px }
.talk .rp-article-dur { display:none }   /* длительность переехала в мета-строку */

/* ---- 2. видео и главы --------------------------------------------------- */
.talk .rp-video-section { padding:56px 0 0; scroll-margin-top:96px }
.talk .rp-video-wrap { box-shadow:var(--rp-shadow-md) }
.talk .rp-ch-panel { box-shadow:var(--rp-shadow-sm); max-height:min(480px, calc(100vh - 220px)) }
.talk .rp-ch-btn { transition:background .18s var(--rp-ease), border-color .18s var(--rp-ease) }
.talk .rp-ch-btn:focus-visible { outline:2px solid var(--rp-orange); outline-offset:2px }
/* Описание главы раскрывается плавно, а не рывком display:none → block. */
.talk .rp-ch-desc {
  display:block; overflow:hidden;
  max-height:0; opacity:0; margin-top:0;
  transition:max-height .28s var(--rp-ease), opacity .2s var(--rp-ease), margin-top .28s var(--rp-ease);
}
.talk .rp-ch-btn.active .rp-ch-desc { display:block; max-height:60px; opacity:1; margin-top:3px }

/* ---- 3. статья ---------------------------------------------------------- */
.talk .rp-article-section { scroll-margin-top:96px }
.talk .rp-article-body h2 { letter-spacing:-.3px; scroll-margin-top:96px }
.talk .rp-article-body > p:first-of-type { font-size:18.5px !important; color:var(--rp-dark) !important }
.talk .rp-article-body blockquote {
  border-radius:0 var(--rp-radius) var(--rp-radius) 0;
  background:linear-gradient(90deg, rgba(250,100,30,.07), rgba(250,100,30,.02));
  padding:20px 26px;
}
.talk .rp-channel-card {
  border:1px solid transparent;
  transition:transform .22s var(--rp-ease), box-shadow .22s var(--rp-ease), border-color .22s;
}
.talk .rp-channel-card:hover {
  transform:translateY(-2px); background:var(--rp-white);
  border-color:var(--rp-line-2); box-shadow:var(--rp-shadow-sm);
}
.talk .rp-highlight { border:1px solid var(--rp-line-2) }
.talk .rp-mid-cta {
  background:linear-gradient(120deg, #1D1D1F 0%, #2A1C15 65%, #35200F 100%);
  position:relative; overflow:hidden;
}
.talk .rp-mid-cta::after {
  content:''; position:absolute; right:-60px; top:-80px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle, rgba(250,100,30,.30), transparent 65%);
  pointer-events:none;
}
.talk .rp-mid-cta-inner { position:relative; z-index:1 }

/* ---- 4. сайдбар: центрирование при скролле ------------------------------ */
/* --side-h ставит f-july.js. Пока его нет, работает прежнее поведение (top:100px). */
/* Оба блока прилипают сверху, под плашкой навигации.
   align-self:start обязателен: в гриде колонка по умолчанию растягивается на всю
   высоту строки (4079px на длинной статье), и sticky тогда не срабатывает вообще —
   прилипать нечему. */
.talk .rp-sidebar {
  align-self:start;
  position:sticky;
  top:96px;
}
.talk .rp-sidebar-card { border:1px solid var(--rp-line-2) }
.talk .rp-sidebar-toc { counter-reset:toc }
.talk .rp-sidebar-toc li { margin-bottom:2px }
.talk .rp-sidebar-toc a {
  position:relative; padding:7px 10px 7px 14px; border-radius:8px;
  color:var(--rp-ink-2) !important; font-weight:500;
  transition:color .2s, background .2s;
}
.talk .rp-sidebar-toc a::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:2px; background:var(--rp-orange);
  transition:height .25s var(--rp-ease);
}
.talk .rp-sidebar-toc a:hover { color:var(--rp-dark) !important; background:rgba(29,29,31,.04) }
.talk .rp-sidebar-toc a.is-current { color:var(--rp-orange) !important; font-weight:700 }
.talk .rp-sidebar-toc a.is-current::before { height:calc(100% - 12px) }

/* Прогресс чтения статьи. */
.talk .rp-read-progress {
  position:fixed; top:0; left:0; height:3px; z-index:99;
  width:100%; transform:scaleX(var(--read, 0)); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--rp-orange), #ff9a5c);
  transition:transform .1s linear; pointer-events:none;
}

/* ---- 5. FAQ ------------------------------------------------------------- */
/* Было max-height с магическим --faq-h: короткие ответы открывались рывком,
   а закрывались с паузой. Сетка 0fr→1fr анимирует ровно высоту контента. */
.talk .rp-faq-item { border:1px solid var(--rp-line-2); transition:border-color .2s, box-shadow .2s }
.talk .rp-faq-item.open { border-color:rgba(250,100,30,.35); box-shadow:var(--rp-shadow-sm) }
.talk .rp-faq-q:focus-visible { outline:2px solid var(--rp-orange); outline-offset:-2px; border-radius:var(--rp-radius) }
.talk .rp-faq-q:hover { color:var(--rp-orange) }
.talk .rp-faq-a {
  max-height:none !important;
  display:grid; grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows .34s var(--rp-ease), padding-bottom .34s var(--rp-ease);
}
.talk .rp-faq-a > * { min-height:0; overflow:hidden }
.talk .rp-faq-item.open .rp-faq-a { max-height:none !important; grid-template-rows:1fr; padding-bottom:22px }
.talk .rp-faq-ic { transition:transform .34s var(--rp-ease) }

/* ---- 6. CTA-карточки ---------------------------------------------------- */
.talk .rp-cta-card { position:relative; overflow:hidden }
.talk .rp-cta-card:hover { transform:translateY(-4px); box-shadow:var(--rp-shadow-md) }
.talk .rp-cta-card-dark::after {
  content:''; position:absolute; right:-70px; bottom:-90px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle, rgba(250,100,30,.26), transparent 65%);
  pointer-events:none;
}
.talk .rp-cta-card > * { position:relative; z-index:1 }

/* ---- 7. появление блоков ------------------------------------------------ */
/* Начальное состояние вешается только при живом JS (html.rp-js), поэтому без
   JS и для краулеров без рендеринга контент виден сразу — прятать его в CSS
   без гарантии, что кто-то вернёт видимость, нельзя. */
.rp-js .talk .rp-reveal {
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--rp-ease), transform .6s var(--rp-ease);
  will-change:opacity, transform;
}
.rp-js .talk .rp-reveal.is-in { opacity:1; transform:none }
@media (prefers-reduced-motion:reduce) {
  .rp-js .talk .rp-reveal { opacity:1 !important; transform:none !important; transition:none }
  .talk *, .talk *::before, .talk *::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}
@media print { .talk .rp-reveal { opacity:1 !important; transform:none !important } }

/* ---- 8. футер ----------------------------------------------------------- */
/* 8.1 ≥1200: футер шире контентной колонки (1720 против 1140) — нижняя строка
   с копирайтом уезжала за края контента. Прибиваем футер к тому же контейнеру. */
@media (min-width:1200px) {
  .ftr { --ox:calc(50% - 610px); height:calc(530 * var(--u)) }
  .ftr__main   { top:calc(50 * var(--u));  left:calc(var(--ox) + 40 * var(--u)); width:calc(1138 * var(--u)) }
  .ftr__bottom { top:calc(442 * var(--u)); left:calc(var(--ox) + 40 * var(--u)); width:calc(1138 * var(--u)) }
  .ftr__rule   { width:calc(1113 * var(--u)) }
  .ftr__legal  { gap:0 calc(48 * var(--u)); flex-wrap:wrap }
  .ftr__cols   { gap:0 calc(41 * var(--u)) }
  .ftr__licenses { width:calc(689 * var(--u)); gap:0 calc(47 * var(--u)) }
  .ftr__lic--edu { width:calc(284 * var(--u)) }
  .ftr__lic--mincifry { width:calc(165 * var(--u)) }
  .ftr__lic--skolkovo { width:calc(141 * var(--u)) }
  .ftr__badges { gap:0 calc(95 * var(--u)) }
  .ftr__fasie-logo { width:calc(105 * var(--u)) }
  .ftr__fasie-note { width:calc(221 * var(--u)) }
  .ftr__h { font-size:calc(16 * var(--u)); line-height:calc(21.28 * var(--u)) }
  .ftr__about-lead, .ftr__about-addr, .ftr__value, .ftr__row { font-size:calc(14 * var(--u)); line-height:calc(18.2 * var(--u)) }
  .ftr__about-lead { height:auto }
  .ftr__about-line { font-size:calc(14 * var(--u)); line-height:calc(21 * var(--u)) }
}
/* 8.2 Ниже 1200 нижняя строка футера не помещается в свой контейнер: ссылки
   идут в ряд с nowrap, а колоночная раскладка включалась только с 639px.
   На 644 страница уезжала вбок на 900px (scrollWidth 1539), на 1024 — на 640.
   Складываем строку в колонку на всём диапазоне. */
@media (max-width:1199px) {
  .ftr__bottom { flex-direction:column; align-items:flex-start; gap:calc(18 * var(--u)) 0; height:auto }
  .ftr__legal  { flex-wrap:wrap; gap:calc(10 * var(--u)) calc(26 * var(--u)); width:100% }
  .ftr__legal-group,
  .ftr__legal-group + .ftr__legal-group { flex-wrap:wrap; gap:calc(10 * var(--u)) calc(26 * var(--u)) }
  .ftr__meta   { width:auto; max-width:100%; height:auto; justify-content:flex-start; flex-wrap:wrap;
                 gap:calc(10 * var(--u)) calc(26 * var(--u)) }
  .ftr__field--wide { width:auto; max-width:100% }
  .ftr__value, .ftr__note { overflow-wrap:anywhere }
}
/* Строка в колонке выше на ~120px, а высота футера задана константой. */
@media (min-width:960px) and (max-width:1199px) { .ftr { height:calc(850 * var(--u)) } }
/* 8.3 Ниже 640 --u пересчитывается на 480-сетку, но ширины блоков остались от
   640-й: 577*u и 558*u давали 1.2 ширины экрана. Отдаём их потоку. */
@media (max-width:639px) {
  .ftr__badges, .ftr__licenses { width:auto; max-width:100%; flex-wrap:wrap }
  .ftr__top { width:auto; max-width:100% }
}
/* Подстраховка от бокового скролла на любой ширине. */
.ftr, .ftr__main, .ftr__bottom { max-width:100vw }

/* ---- 8а. новая разметка -------------------------------------------------- */
/* Крошки стали nav>ol (семантика для поиска), поэтому гасим маркеры списка. */
.talk .rp-breadcrumb-nav { margin-bottom:22px }
.talk ol.rp-article-breadcrumb { list-style:none; margin:0; padding:0; flex-wrap:wrap }
.talk ol.rp-article-breadcrumb li { display:flex; align-items:center; gap:8px; margin:0 }

/* Заголовки промо-блоков — не h3: они ломали контентный аутлайн страницы. */
.talk .rp-cta-h { font-weight:700; line-height:1.3; color:#fff }
.talk .rp-mid-cta .rp-cta-h { font-size:22px; margin-bottom:6px }
.talk .rp-cta-card .rp-cta-h { font-size:24px; margin-bottom:8px }
.talk .rp-faq-h, .talk .rp-others-h {
  font-size:28px !important; font-weight:700; color:var(--rp-dark) !important;
  line-height:1.25; margin:0 0 8px; letter-spacing:-.3px;
}

/* Главы: div → span, чтобы кнопка осталась валидной. */
.talk .rp-ch-info, .talk .rp-ch-title, .talk .rp-ch-desc { display:block }
.talk .rp-ch-btn.active .rp-ch-desc { display:block }

/* Другие выступления выпуска: перелинковка внутри кластера. */
.talk .rp-others-section { padding:8px 0 16px }
.talk .rp-others-h { margin-bottom:20px }
/* minmax(0,1fr) и min-width:0 обязательны: у грид-элемента min-width по умолчанию
   auto, и обрезаемый по ellipsis nowrap-текст внутри распирал колонку за экран. */
.talk .rp-others-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.talk .rp-other-card {
  min-width:0;
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--rp-bg); border:1px solid transparent; border-radius:var(--rp-radius);
  text-decoration:none; color:inherit;
  transition:transform .2s var(--rp-ease), box-shadow .2s var(--rp-ease), border-color .2s, background .2s;
}
.talk .rp-other-card:hover {
  transform:translateY(-2px); background:var(--rp-white);
  border-color:var(--rp-line-2); box-shadow:var(--rp-shadow-sm);
}
.talk .rp-other-card img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; background:#e8e8e8 }
.talk .rp-other-info { flex:1; min-width:0; display:block }
.talk .rp-other-name { display:block; font-size:15px; font-weight:700; color:var(--rp-dark); line-height:1.3 }
.talk .rp-other-topic {
  display:block; font-size:13px; color:var(--rp-ink-2); line-height:1.4; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.talk .rp-other-card svg { flex:none; color:#c4c4c8; transition:color .2s, transform .2s var(--rp-ease) }
.talk .rp-other-card:hover svg { color:var(--rp-orange); transform:translateX(2px) }
@media (max-width:900px) { .talk .rp-others-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px) { .talk .rp-others-grid { grid-template-columns:1fr } }

/* ---- 9. адаптив --------------------------------------------------------- */
@media (max-width:1100px) {
  .talk .rp-hero-grid { grid-template-columns:minmax(0,1fr) 240px; gap:36px }
  .talk .rp-hero-portrait { width:220px; height:220px }
  .talk .rp-article-hero h1 { font-size:38px !important }
}
@media (max-width:860px) {
  .talk .rp-hero-grid { grid-template-columns:1fr; gap:32px }
  .talk .rp-hero-portrait { justify-self:start; width:150px; height:150px; order:-1 }
  .talk .rp-hero-portrait::before { inset:-12px; filter:blur(12px) }
  /* У фигуры фиксированная высота, поэтому бейдж вываливался за неё и налезал
     на крошки. Длительность тут же есть в мета-строке — на узких экранах он лишний. */
  .talk .rp-hero-portrait-badge { display:none }
  .talk .rp-article-hero { padding:112px 0 56px }
  .talk .rp-article-hero h1 { font-size:32px !important }
}
@media (max-width:768px) {
  .talk .rp-article-hero h1 { font-size:29px !important; letter-spacing:-.4px }
  .talk .rp-hero-actions .rp-btn-hero,
  .talk .rp-hero-actions .rp-btn-hero-ghost { flex:1 1 auto; justify-content:center }
  .talk .rp-article-body > p:first-of-type { font-size:17px !important }
}
@media (max-width:520px) {
  .talk .rp-hero-meta { gap:6px 14px; font-size:12.5px }
  .talk .rp-hero-portrait { width:120px; height:120px }
}