/* ==========================================================================
   vaccine-design.css — редизайн копии vaccine.ru по макету прототипа
   Подключается ПОСЛЕ css/style-2022-09-13.css (переопределяет его).
   Дизайн-токены: redesign-prototype/app/globals.css
   ========================================================================== */

:root {
  --ink: #171817;
  --graphite: #292b2a;
  --paper: #f5f3ef;
  --white: #fff;
  --red: #e94b43;
  --muted: #706f6a;
  --line: #dedbd4;
  --footer-bg: #1d1e1d;
}

/* ---------- База ---------- */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
}

#app.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* Flex-колонки легаси-сетки: без min-width:0 колонка не сжимается
   ниже ширины контента (owl-карусели) и рвёт мобильную вёрстку. */
.radio-page .row > div {
  min-width: 0;
}

.radio-page.container-sm,
.radio-header-container {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
}

/* ---------- Шапка ---------- */

.radio-header {
  background: var(--graphite);
  box-shadow: 0 1px 0 #ffffff16;
  height: auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
}

.radio-topbar {
  min-height: 84px;
  display: grid;
  grid-template-columns: 260px minmax(300px, 560px) 1fr;
  gap: 32px;
  align-items: center;
}

.radio-topbar-brand {
  margin-top: 0 !important;
}

.radio-topbar-brand .radio-site-logo {
  display: block;
  /* в шапке — только знак и слово «Радио»: узко, остаётся место под кнопку поиска.
     Полный локап со слоганом остаётся в подвале. */
  width: 110px;
  height: auto;
}

.radio-topbar-search {
  text-align: left;
}

.radio-topbar-search .radio-search {
  width: 100%;
}

.radio-topbar-search .ya-site-form {
  top: 0 !important;
  height: 40px;
}

.radio-topbar-search .ya-site-form__input-text {
  top: 0 !important;
}

.radio-topbar-search .radio-search {
  position: relative;
  top: auto !important;
}

.radio-topbar-region {
  justify-self: end;
  position: relative;
}

.radio-dropdown-btn {
  top: auto !important;
  display: inline-block;
  border-bottom: 0;
  height: auto;
  margin-left: 0;
}

/* Селектор городов */
.radio-dropdown-btn .nav1 > ul {
  background: transparent;
}

.radio-dropdown-btn .nav1 > ul > li.zq {
  top: auto !important;
  float: none;
}

.radio-dropdown-btn .nav1 > ul > li.zq > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #eee;
  font-size: 14px;
  padding: 10px 4px;
}

.radio-dropdown-btn .nav1 > ul > li.zq > span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #c9c9c9;
  border-bottom: 1.5px solid #c9c9c9;
  transform: rotate(45deg) translateY(-2px);
}

.radio-dropdown-btn .nav1 li:hover {
  background: transparent;
}

/* Выпадающий список городов (#vipad) */
.radio-dropdown-btn .nav1 li ul {
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  width: 220px;
  text-align: left !important;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 15px 50px #0005;
  overflow: hidden;
  padding: 6px 0;
  z-index: 100;
}

.radio-dropdown-btn .nav1 li ul li {
  width: 100%;
}

.radio-dropdown-btn .nav1 li ul a {
  padding: 9px 16px;
  color: var(--ink) !important;
  font-size: 13px;
  border: none;
}

.radio-dropdown-btn .nav1 li ul #vipad li,
#vipad li {
  background: transparent;
}

.radio-dropdown-btn .nav1 li ul a:hover {
  background: var(--paper);
}

/* ---------- Меню ---------- */

.radio-menu {
  display: flex;
  gap: 36px;
  align-items: center;
  min-height: 51px;
  margin-top: 0;
  padding-top: 4px;
  border-top: 1px solid #ffffff12;
}

.radio-menu:not(.footer-menu) {
  background: transparent;
  display: flex;
}

.radio-menu-item {
  padding: 0;
}

.radio-menu-item a {
  position: relative;
  color: #c9c9c9 !important;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
}

.radio-menu-item a:hover {
  color: #fff !important;
}

.radio-menu-item__active {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.radio-menu-item__active a {
  color: #fff !important;
}

.radio-menu-item__active a::after {
  content: "";
  position: absolute;
  height: 3px;
  left: 0;
  right: 0;
  bottom: -17px;
  background: var(--red);
  border-radius: 3px 3px 0 0;
}

/* ---------- Секционные подписи (eyebrow) ---------- */

.radio-caption,
.radio-delimeter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- Блоки-карточки ---------- */

.radio-blocks {
  margin-bottom: 32px;
}

.radio-blocks .radio-caption {
  margin-bottom: 18px;
}

/* Истории на главной — тёмные карточки с градиентом */
.radio-blocks__type-7 .radio-block {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 250px;
}

.radio-blocks__type-7 .radio-block::before {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .84));
  z-index: 0;
}

.radio-blocks__type-7 .radio-block__inner {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 1;
}

.radio-blocks__type-7 .radio-block__inner a {
  display: inline;
  background: transparent !important;
  color: #fff !important;
  font: 700 19px/1.15 Georgia, serif;
}

/* Белые карточки с рамкой (общий язык макета) — НЕ для тёмных историй (type-7) */
.radio-blocks__type-2:not(.radio-blocks__type-7) .radio-block__inner,
.radio-blocks__type-1:not(.radio-blocks__type-7) .radio-block__inner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: none;
}

.radio-blocks__type-2:not(.radio-blocks__type-7) .radio-block-caption,
.radio-blocks__type-1:not(.radio-blocks__type-7) .radio-block-caption {
  height: auto;
}

.radio-blocks__type-2:not(.radio-blocks__type-7) .radio-block-caption a,
.radio-blocks__type-1:not(.radio-blocks__type-7) .radio-block-caption a {
  color: var(--ink);
  font: 700 16px/1.25 Georgia, serif;
}

.radio-blocks__type-2:not(.radio-blocks__type-7) .radio-block-subcaption a,
.radio-blocks__type-1:not(.radio-blocks__type-7) .radio-block-subcaption a {
  color: var(--muted);
}

.radio-blocks__type-2 {
  border-bottom: 0;
}

.radio-blocks__type-7 .radio-block-subcaption,
.radio-blocks__type-2 .radio-block-subcaption {
  -webkit-line-clamp: 2;
}

/* ---------- Субнавигация разделов в контенте (Контакты, О нас, Приходи) ---------- */

.radio-page .radio-menu {
  border-top: 0;
  min-height: 0;
  margin: 14px 0 20px;
  padding-top: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.radio-page .radio-menu-item {
  padding: 0;
}

.radio-page .radio-menu-item a {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  color: #5d5d59 !important;
  font-size: 12px;
}

.radio-page .radio-menu-item__active {
  background: transparent;
}

.radio-page .radio-menu-item__active a {
  color: var(--white) !important;
  background: var(--ink);
  border-color: var(--ink);
}

.radio-page .radio-menu-item__active a::after {
  content: none;
}

/* ---------- Правая колонка ---------- */

.radio-next,
.radio-adv {
  margin-top: 0;
  margin-bottom: 22px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
}

.radio-next .radio-caption {
  margin-bottom: 6px;
}

.radio-next-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.radio-next-item:last-child {
  border-bottom: 0;
}

.radio-next-item__date {
  color: var(--muted);
}

.radio-next-item__caption,
.radio-next-item__caption a {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.radio-next-item__subcaption,
.radio-next-item__subcaption a {
  color: var(--muted);
}

.radio-next-item__text a {
  color: var(--red);
}

/* VK-виджет: без рамки, встраивается в колонку */
.radio-next:has(#vk_groups) {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ---------- Баннеры программ/ведущих/выпусков ---------- */

.radio-broadcast-banner {
  border-bottom: 1px solid var(--line);
}

.radio-banner {
  border-radius: 20px;
}

.radio-banner__caption-text {
  color: var(--ink);
  font: 700 20px/1.2 Georgia, serif;
}

.radio-banner__about {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.radio-banner__about-content__caption,
.radio-banner__about-content__caption a {
  color: var(--ink);
}

.radio-banner__about-content__subcaption {
  color: var(--muted);
}

/* ---------- Заголовки страниц (SEO-этапы) ---------- */

h1.radio-catalog-title,
h1.radio-program-title,
h1.radio-story-title,
h1.radio-home-title,
h2.radio-episode-section,
nav.radio-breadcrumbs,
.radio-timetable-all-day,
.radio-timetable-all-program {
  font-family: Arial, Helvetica, sans-serif;
}

h1.radio-catalog-title,
h1.radio-program-title,
h1.radio-story-title {
  font-family: Georgia, serif;
  font-weight: 700;
  color: var(--ink);
}

nav.radio-breadcrumbs {
  font-size: 11px;
}

nav.radio-breadcrumbs a {
  color: var(--muted);
}

h2.radio-episode-section {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- Карточки программ (каталог /programs/) ---------- */

.radio-program-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
}

/* ---------- Пагинация ---------- */

.radio-pagination {
  margin-top: 28px;
}

.radio-pagination a,
.radio-pagination span {
  display: inline-block;
  min-width: 38px;
  padding: 8px 12px;
  margin-right: 6px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
}

.radio-pagination a:hover {
  border-color: var(--ink);
}

/* Текущая страница и ссылки «Смотреть выпуски» доставались синими от легаси/бутстрапа */
.radio-pagination__page.is-current {
  background: var(--red-link);
  border-color: var(--red-link);
  color: var(--white);
}

.radio-program-card__more {
  color: var(--red-link);
}

/* ---------- Кнопки ---------- */

button,
.radio-ext {
  font-family: Arial, Helvetica, sans-serif;
}

.radio-ext {
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

/* ---------- Тултипы ---------- */

.tooltip-inner {
  background: var(--graphite);
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
  border-top-color: var(--graphite);
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--graphite);
}

/* ---------- Страница «О предприятии» (about.html) — сертификат ---------- */

.radio-certificate {
  margin: 22px 0 32px;
}

.radio-certificate__inner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 45px;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--line);
}

.radio-certificate__title {
  margin: 8px 0 26px;
  font: 700 40px/1 Georgia, serif;
  letter-spacing: -.02em;
  color: var(--ink);
}

.radio-certificate__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}

.radio-certificate__row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.radio-certificate__row b {
  font-weight: 400;
  color: var(--ink);
}

.radio-certificate__row a {
  color: var(--red);
}

.radio-certificate__title--small {
  font-size: 28px;
  margin-bottom: 18px;
}

.radio-map .radio-certificate__photo,
.radio-certificate__photo {
  display: block;
  width: 215px;
  height: 250px;
  object-fit: cover;
  border-radius: 13px;
}

.contact-section.radio-certificate {
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .radio-certificate__inner {
    padding: 26px 20px;
  }

  .radio-certificate__title {
    font-size: 30px;
  }

  .radio-certificate__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------- Стрелки owl-каруселей ---------- */

.owl-next,
.owl-prev {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  color: var(--muted) !important;
}

/* Стрелки owl стояли ниже центра: у них собственный top и margin: 5px.
   Ставим ровно по вертикальному центру карусели. */
.owl-carousel .owl-nav {
  margin: 0 !important;
  height: 0;
}

/* Карточки в каруселях не должны нести общий нижний отступ списков:
   он делал бокс карусели выше карточки, и стрелки уезжали ниже центра. */
.owl-carousel .owl-item .radio-block {
  margin-bottom: 0;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  top: 50%;
  bottom: auto;
  margin: 0;
  transform: translateY(-50%);
}

/* ---------- Подвал ---------- */

#radio-footer {
  margin-top: 60px;
  padding: 45px 0 30px;
  background: var(--footer-bg);
  color: #fff;
}

.radio-footer-inner {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  align-items: center;
  gap: 40px;
}

#radio-footer .footer-item {
  text-align: left;
}

#radio-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

#radio-footer .radio-age {
  position: static;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff29;
  border-radius: 50%;
  font-size: 12px;
  color: #888;
}

#radio-footer .footer-menu {
  margin-top: 0;
  padding-top: 0;
  background: transparent;
  border: 0;
  min-height: 0;
  gap: 10px 22px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
}

#radio-footer .footer-brand img {
  border-radius: 0;
  width: 220px;
  height: auto;
}

#radio-footer .footer-legal {
  font-size: 11px;
  line-height: 1.5;
}

#radio-footer .footer-menu .radio-menu-item a {
  color: #bbb !important;
  font-size: 12px;
}

#radio-footer .footer-menu .radio-menu-item a:hover {
  color: #fff !important;
}

#radio-footer .footer-social {
  margin-top: 0;
  display: flex;
  gap: 12px;
}

#radio-footer .footer-social a {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin-left: 0;
  border: 1px solid #ffffff29;
  border-radius: 50%;
}

#radio-footer .footer-social a:hover {
  border-color: var(--red);
}

#radio-footer .footer-social img {
  width: 16px;
  height: 16px;
}

#radio-footer .footer-info {
  width: min(1240px, calc(100% - 48px));
  margin: 30px auto 0;
  padding-top: 22px;
  padding-bottom: 0;
  border-top: 1px solid #ffffff12;
  text-align: left;
  color: #888;
  font-size: 12px;
  line-height: 1.5;
}

#radio-footer .footer-info a {
  color: #bbb !important;
  margin-left: 0;
}

/* ---------- Главная: ближайшие гости передач ---------- */

.radio-home-next {
  margin-bottom: 32px;
}

.radio-home-next .radio-caption {
  margin-bottom: 18px;
}

.radio-home-next__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-home-next__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
}

.radio-home-next__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.radio-home-next__day {
  font: 700 14px/1.2 Arial, Helvetica, sans-serif;
  color: var(--ink);
}

.radio-home-next__time {
  font: 400 12px/1.2 Arial, Helvetica, sans-serif;
  color: var(--red);
  font-weight: 700;
}

.radio-home-next__body {
  min-width: 0;
}

.radio-home-next__program {
  font: 700 16px/1.25 Georgia, serif;
  color: var(--ink);
}

.radio-home-next__program:hover {
  color: var(--red);
}

.radio-home-next__topic {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-home-next__people {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: break-word;
}

.radio-home-next__people a {
  color: var(--red);
}

.radio-home-next__label {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  margin-right: 4px;
}

/* ---------- Главная: список программ ---------- */

.radio-home-programs {
  margin-bottom: 32px;
}

.radio-home-programs .radio-caption {
  margin-bottom: 18px;
}

.radio-home-programs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.radio-home-programs__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px 10px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  font: 700 13px/1.25 Georgia, serif;
  transition: border-color .15s ease;
}

.radio-home-programs__item:hover {
  border-color: var(--ink);
}

.radio-home-programs__item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 9px;
  flex-shrink: 0;
}

.radio-home-programs__item span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---------- Главная: последние выпуски ---------- */

.radio-home-episodes {
  margin-bottom: 32px;
}

.radio-home-episodes .radio-caption {
  margin-bottom: 18px;
}

.radio-home-episodes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.radio-home-episodes__item {
  display: flex;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease;
}

.radio-home-episodes__item:hover {
  border-color: var(--ink);
  text-decoration: none;
}

.radio-home-episodes__pic {
  flex: 0 0 132px;
  width: 132px;
  height: 78px;
  border-radius: 9px;
  overflow: hidden;
  background: #eceae6;
}

.radio-home-episodes__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.radio-home-episodes__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.radio-home-episodes__date {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.radio-home-episodes__program {
  font: 700 15px/1.25 Georgia, serif;
  color: var(--ink);
}

.radio-home-episodes__topic {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-home-episodes__people {
  font-size: 12px;
  line-height: 1.35;
  color: var(--red);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-home-episodes__label {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-right: 4px;
}

.radio-home-episodes__more {
  margin-top: 14px;
}

.radio-home-episodes__more a {
  font-size: 13px;
  color: var(--red);
}

/* ---------- Раздел «Ведущие»: лёгкие карточки вместо тёмного стиля историй (type-7) ---------- */

.radio-persons .radio-block {
  min-height: 0;
  overflow: visible;
  border-radius: 0;
}

.radio-persons .radio-block::before {
  content: none;
}

.radio-persons .radio-block__inner {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  overflow: hidden;
}

.radio-persons .radio-block__inner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
}

.radio-persons-popular .radio-block-caption a {
  color: var(--ink) !important;
}

.radio-persons .radio-block__inner a {
  background: transparent !important;
  color: var(--ink) !important;
  font: 700 15px/1.25 Georgia, serif;
}

.radio-persons .radio-block-subcaption a {
  font: 400 12px/1.35 Arial, Helvetica, sans-serif;
  color: var(--muted) !important;
}

/* ---------- Раздел «Гости»: лёгкие карточки вместо тёмного стиля историй (type-7) ---------- */

.radio-guests-block {
  margin-bottom: 44px;
}

.radio-guests-block .radio-caption {
  margin-bottom: 18px;
}

.radio-guests-block .radio-block-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.radio-guests-block .radio-block-img a {
  display: block;
  height: 100%;
}

.radio-guests-block .radio-block-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.radio-guests-block .radio-block-content__inner {
  padding: 12px 14px 16px;
}

.radio-guests-block .radio-block-caption {
  height: auto;
  margin-bottom: 4px;
}

.radio-guests-block .radio-block-subcaption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-guests-block .radio-block-content,
.radio-guests-block .radio-block__inner {
  height: auto;
  min-height: 0;
}

/* Карточки ведущих и гостей: фиксированная ширина 168px, одинаковая высота (десктоп) */
@media (min-width: 768px) {
  .radio-guests-block .radio-blocks__inner.row,
  .radio-persons .radio-blocks__inner.row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .radio-guests-block .radio-block,
  .radio-persons .radio-block {
    flex: 0 0 168px;
    width: 168px;
    max-width: 168px;
    padding-left: 0;
    padding-right: 0;
  }

  /* Было height: 300px — у людей без описания под именем оставалась дыра.
     Теперь карточка тянется по высоте своего ряда (flex-stretch), а ряд
     подстраивается под содержимое. */
  .radio-guests-block .radio-block__inner,
  .radio-persons .radio-block__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Легаси держит описание в фиксированной высоте — пустое всё равно занимало
     53px. Снимаем, чтобы карточка без описания была короче. */
  .radio-guests-block .radio-block-subcaption,
  .radio-persons .radio-block-subcaption {
    height: auto;
  }

  .radio-guests-block .radio-block-img,
  .radio-persons .radio-block-img {
    height: 168px;
    flex-shrink: 0;
  }

  .radio-persons .radio-block-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.radio-persons .radio-block-subcaption {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .radio-persons .radio-block__inner,
  .radio-guests-block .radio-block__inner {
    height: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
  }

  .radio-guests-block .radio-block-img {
    height: 100px;
  }

  .radio-persons .radio-block-img,
  .radio-guests-block .radio-block-img {
    flex-shrink: 0;
    margin: 0;
  }

  .radio-persons .radio-block-content,
  .radio-guests-block .radio-block-content {
    width: auto;
    min-width: 0;
    margin-left: 0;
  }

  .radio-persons .radio-block-content__inner,
  .radio-guests-block .radio-block-content__inner {
    padding: 0;
  }

  .radio-persons .radio-block-img img,
  .radio-persons .radio-block-img__cover,
  .radio-guests-block .radio-block-img img,
  .radio-guests-block .radio-block-img__cover {
    border-radius: 9px;
  }

  .radio-persons .radio-block-subcaption,
  .radio-guests-block .radio-block-subcaption {
    -webkit-line-clamp: 2;
    max-height: 2.7em;
    overflow: hidden;
  }
}

.radio-guests-block .radio-block {
  min-height: 0;
  overflow: visible;
  border-radius: 0;
}

.radio-guests-block .radio-block::before {
  content: none;
}

.radio-guests-block .radio-block__inner {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
}

.radio-guests-block .radio-block__inner a {
  background: transparent !important;
  color: var(--ink) !important;
  font: 700 15px/1.25 Georgia, serif;
}

.radio-guests-block .radio-block-subcaption a {
  font: 400 12px/1.35 Arial, Helvetica, sans-serif;
  color: var(--muted) !important;
}

/* ---------- Расписание: карусель дней и список программ ---------- */

.radio-timetable-carousel {
  border-bottom: 0;
  margin: 23px 0 8px;
}

.radio-timetable-carousel .radio-timetable-carousel-item {
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 4px;
  text-align: center;
  transition: border-color .15s ease;
}

.radio-timetable-carousel .radio-timetable-carousel-item:hover {
  border-color: var(--ink);
}

.radio-timetable-carousel .radio-timetable-carousel-item:has(.radio-timetable-carousel-item__caption-active) {
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(1, 14, 35, .08);
}

.radio-timetable-carousel-item__subcaption {
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.radio-timetable-carousel-item__caption {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.radio-timetable-carousel-item__caption-active,
.radio-timetable-carousel-item__subcaption.radio-timetable-carousel-item__caption-active {
  color: var(--red);
}

.radio-timetable__table {
  margin-top: 16px;
}

.radio-timetable__table .radio-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
  margin-bottom: 10px;
  padding: 12px 16px;
  align-items: center;
}

.radio-timetable__table .radio-block__left-time {
  font-weight: 700;
  font-size: 15px;
  color: var(--red);
}

.radio-timetable__table .radio-block__right-caption a {
  color: var(--ink);
  font: 700 16px/1.2 Georgia, serif;
  text-transform: none;
}

.radio-timetable__table .radio-block__middle-img {
  height: 64px;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {
  .radio-timetable__table .radio-block__middle-img {
    height: 42px;
    margin-bottom: 8px;
  }
}

/* ---------- Медиазапросы макета ---------- */

@media (max-width: 950px) {
  .radio-topbar {
    grid-template-columns: 1fr auto auto;
    gap: 16px;
  }

  .radio-topbar-search {
    display: none;
  }

  .radio-menu:not(.footer-menu) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .radio-menu:not(.footer-menu) .radio-menu-item {
    flex: 0 0 auto;
  }

  .radio-menu::-webkit-scrollbar {
    display: none;
  }

  .radio-page .radio-menu {
    flex-wrap: wrap;
    overflow: visible;
  }

  .radio-footer-inner {
    grid-template-columns: 1fr auto;
  }

  #radio-footer .footer-menu {
    display: none;
  }
}

@media (max-width: 620px) {
  .radio-page.container-sm,
  .radio-header-container {
    width: calc(100% - 28px);
  }

  .radio-topbar {
    min-height: 66px;
    gap: 6px;
  }

  .radio-menu-item a {
    font-size: 13px;
  }

  .radio-home-next__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .radio-home-next__date {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding-right: 0;
    padding-bottom: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .radio-home-programs__grid {
    grid-template-columns: 1fr;
  }

  .radio-home-episodes__grid {
    grid-template-columns: 1fr;
  }

  .radio-home-episodes__pic {
    flex-basis: 104px;
    width: 104px;
    height: 62px;
  }

  .radio-home-programs__item span {
    overflow-wrap: normal;
    word-break: normal;
  }

  #radio-footer .radio-footer-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ==========================================================================
   Дизайн-ревью 2026-09-21: единая система акцентов, медиа, фокуса и плотности
   ========================================================================== */

:root {
  /* Затемнённый красный для текстовых ссылок: 5.3:1 на белом, 4.8:1 на paper
     (фирменный --red #e94b43 даёт лишь 3.4–3.8:1 и для текста не годится). */
  --red-link: #c33a30;
  /* Подложка под любое изображение: нейтральный тон + внутренняя рамка,
     чтобы светлые обложки не читались как «картинка не загрузилась». */
  --tile: #e8e5df;
  --tile-edge: inset 0 0 0 1px rgba(23, 24, 23, .09);
  --focus: #2b6fdb;
  --focus-dark: #7fb0ff;
}

/* ---------- Роли акцента: красный — навигация и эфир, ссылки — тёмный красный ---------- */

.radio-home-next__people a,
.radio-home-episodes__people,
.radio-next-item__text a,
.radio-home-episodes__more a,
.radio-programs-heading a,
.radio-page .radio-content a:not(.radio-menu-item a) {
  color: var(--red-link);
}

/* Второстепенная ссылка рядом с подписью секции — один в один «Архив программ»
   на /programs/, где она собрана бутстраповскими .small + .font-weight-normal + .ml-3:
   8.8px (80% от подписи), обычное начертание, межбуквенное расстояние наследуется. */
.radio-caption__link {
  margin-left: 16px;
  font-size: 80%;
  font-weight: 400;
  color: var(--red-link);
}

.radio-caption__link:hover {
  color: var(--ink);
}

.radio-home-next__people a:hover,
.radio-next-item__text a:hover,
.radio-home-episodes__more a:hover {
  color: var(--ink);
}

/* Описание в сайдбаре — обычный текст, ссылкой-акцентом выглядят только имена */
.radio-next-item__subcaption a {
  color: var(--muted);
}

/* Даты и время — служебная информация, не ссылка */
.radio-home-next__time,
.radio-next-item__date,
.radio-timetable__table .radio-block__left-time {
  color: var(--muted);
}

.radio-home-next__day {
  color: var(--ink);
}

/* ---------- Видимый фокус (WCAG 2.2) ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.radio-header a:focus-visible,
#radio-footer a:focus-visible,
.radio-home-stories a:focus-visible {
  outline-color: var(--focus-dark);
}

/* ---------- Единый медиа-язык: подложка, рамка, кадр ---------- */

.radio-home-episodes__pic,
.radio-program-card__image,
.radio-programs-popular .radio-block-img,
.radio-timetable__table .radio-block__middle-img {
  background-color: var(--tile);
  box-shadow: var(--tile-edge);
}

/* У портретов ведущих и гостей скругление задано самому <img>, а контейнер
   прямоугольный: внутренняя обводка на контейнере вылезала прямыми уголками
   из-под скруглённого фото. Оставляем только подложку, без обводки. */
.radio-guests-block .radio-block-img,
.radio-persons .radio-block-img {
  background-color: var(--tile);
  box-shadow: none;
}

.radio-program-card__image,
.radio-programs-popular .radio-block-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
}

/* Обложки программ разнородны (фото и логотипы). Пробовали contain на подложке —
   логотипы всё равно обрезаны в самих исходниках, зато фотографии получали серые
   поля. Оставлен cover: единый полноразмерный кадр без «букв в рамке». */
.radio-program-card__image img,
.radio-programs-popular .radio-block-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Портреты кадрируются по лицам, а не по центру тела */
.radio-persons .radio-block-img img,
.radio-guests-block .radio-block-img img {
  object-position: 50% 22%;
}

/* ---------- Истории: скрим сильнее, заголовок в 3 строки, отклик на наведение ---------- */

.radio-home-stories .radio-block {
  min-height: 260px;
  background-color: var(--graphite);
  transition: transform .18s ease, box-shadow .18s ease;
}

.radio-home-stories .radio-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(1, 14, 35, .18);
}

.radio-home-stories .radio-block::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, .88) 100%);
}

.radio-home-stories .radio-block__inner a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* ---------- Расписание: плотность, две колонки, «сейчас в эфире» ---------- */

.radio-timetable__table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.radio-timetable__table.hidd {
  display: none;
}

/* Карточки расписания несут легаси-класс row, и vuetify добавляет им
   `.row + .row { margin-top: 12px }` — первая карточка правила не получала,
   и правая колонка съезжала на 12px вниз. Селектор с .row перебивает. */
.radio-timetable__table .radio-block,
.radio-timetable__table .radio-block.row {
  margin: 0;
  padding: 10px 14px;
  flex-wrap: nowrap;
  gap: 12px;
}

.radio-timetable__table .radio-block__left,
.radio-timetable__table .radio-block__middle,
.radio-timetable__table .radio-block__right {
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 auto;
  max-width: none;
  width: auto;
}

.radio-timetable__table .radio-block__left {
  flex: 0 0 52px;
}

.radio-timetable__table .radio-block__middle {
  flex: 0 0 96px;
}

.radio-timetable__table .radio-block__right {
  flex: 1 1 auto;
  min-width: 0;
}

.radio-timetable__table .radio-block__middle-img {
  width: 96px;
  height: 54px;
  min-height: 0; /* легаси-правило .radio-block__middle-img{min-height:154px} тянуло превью вверх */
  border-radius: 9px;
}

/* Стрелки карусели дней — за пределами ленты, чтобы не накрывать чипы */
.radio-timetable-carousel .owl-prev {
  left: -16px;
}

.radio-timetable-carousel .owl-next {
  right: -16px;
}

.radio-timetable__table .radio-block__right-caption a {
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-timetable__table .radio-block__left-in {
  display: none;
}

/* Текущая передача */
.radio-timetable__table .radio-block.is-on-air {
  border-color: var(--red);
  box-shadow: 0 4px 14px rgba(233, 75, 67, .16);
}

.radio-timetable__table .radio-block.is-on-air .radio-block__left-time {
  color: var(--red);
}

.radio-timetable__table .radio-block.is-on-air .radio-block__left-in {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}

/* Сегодняшний день — мягкая заливка вместо подписи «Сегодня».
   Выбранный день по-прежнему обозначается тёмной рамкой и красной датой. */
.radio-timetable-carousel .radio-timetable-carousel-item.is-today {
  background: rgba(233, 75, 67, .07);
  border-color: rgba(233, 75, 67, .32);
}

/* ---------- Пустые состояния ---------- */

.radio-timetable__table .radio-empty,
.radio-empty {
  grid-column: 1 / -1;
  padding: 26px 18px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ---------- Страница выпуска: типографика по системе ---------- */

/* Заголовок страницы выпуска (h1) */
h1.radio-banner__caption-text {
  font: 700 27px/1.22 Georgia, serif;
  color: var(--ink);
  margin: 18px 0 10px;
  text-transform: none;
}

/* Подпись живого эфира на главной — это анонс целиком, а не заголовок:
   меньший кегль и две строки, иначе она забирает весь первый экран. */
div.radio-banner__caption-text {
  font: 700 17px/1.4 Georgia, serif;
  color: var(--ink);
  margin: 14px 0 8px;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-banner__caption .radio-live.radio-caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
}

/* Кнопка «Поделиться»: иконки Яндекс.Поделиться — 32px, они были выше
   внутренней высоты пилюли и распирали её. Делаем флекс по центру и ужимаем
   бейджи до 24px. */
.radio-banner__caption-social__buttons-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px 5px 16px;
  font-size: 13px;
  color: var(--muted);
}

.radio-banner__caption-social__buttons-btn .radio-share {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
}

.radio-share .ya-share2__container,
.radio-share .ya-share2__list {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.radio-share .ya-share2__item {
  margin: 0 !important;
}

.radio-share .ya-share2__badge {
  border-radius: 8px !important;
}

.radio-share .ya-share2__icon {
  width: 24px !important;
  height: 24px !important;
  background-size: 24px 24px !important;
}

.radio-banner__about-content__caption a {
  font: 700 16px/1.25 Georgia, serif;
  color: var(--ink);
}

.radio-banner__about-content__subcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.radio-youtube-banner .radio-banner img,
.radio-youtube-banner .radio-banner iframe {
  border-radius: 17px;
  max-height: 520px;
  object-fit: cover;
  background: var(--tile);
}

/* ---------- Правая колонка: промо-блок вместо стены текста ---------- */

.radio-page-right .radio-promo {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 16px 18px 18px;
  margin-bottom: 22px;
}

.radio-page-right .radio-promo .radio-caption {
  margin-bottom: 10px;
}

.radio-promo__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-promo__toggle:checked ~ .radio-promo__text {
  display: block;
  overflow: visible;
}

.radio-promo__toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-promo__more {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--red-link);
  cursor: pointer;
}

.radio-promo__toggle:checked ~ .radio-promo__more .radio-promo__more-open {
  display: none;
}

.radio-promo__more-close {
  display: none;
}

.radio-promo__toggle:checked ~ .radio-promo__more .radio-promo__more-close {
  display: inline;
}

/* ---------- Мобильные уточнения ревью ---------- */

@media (max-width: 950px) {
  /* Строки поиска в шапке больше нет — логотип, кнопка «Поиск» и город
     держатся той же сеткой, что на десктопе. */
  .radio-topbar {
    padding-bottom: 4px;
  }

  /* Подвальное меню на мобильном было скрыто — возвращаем в две колонки */
  #radio-footer .footer-menu {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
  }

  .radio-timetable__table {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .radio-banner__caption-text {
    font-size: 21px;
  }

  .radio-timetable__table .radio-block__middle {
    flex: 0 0 84px;
  }

  .radio-timetable__table .radio-block__middle-img {
    width: 84px;
    height: 48px;
    min-height: 0;
    margin-bottom: 0;
  }
}

/* ---------- Правая колонка на длинных каталогах: последний блок «догоняет» ---------- */

@media (min-width: 992px) {
  /* Колонка растягивается по высоте строки (flex stretch), поэтому последний
     блок можно закрепить — на длинных списках справа больше нет пустой полосы. */
  .radio-page-right > .radio-next:last-of-type {
    position: sticky;
    top: 92px;
  }
}

/* Расписание на мобильном: превью слева, время и название — колонкой справа */
@media (max-width: 767px) {
  .radio-timetable__table .radio-block {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
  }

  .radio-timetable__table .radio-block__middle {
    display: contents;
  }

  .radio-timetable__table .radio-block__middle > a {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .radio-timetable__table .radio-block__middle .radio-block__left {
    grid-column: 2;
    grid-row: 1;
  }

  .radio-timetable__table .radio-block__right {
    grid-column: 2;
    grid-row: 2;
  }

  .radio-timetable__table .radio-block__left-time {
    font-size: 13px;
  }
}

/* ---------- Плеер: фиксированная пропорция вместо min-height: 60vh ---------- */
/* Виджет эфира задаёт инлайновый min-height: 60vh — на высоких экранах player
   превращался в чёрное поле во весь первый экран. */
.radio-youtube-banner iframe,
.radio-iframe-container__round iframe,
#radio-archive-youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
  max-height: 560px;
  border-radius: 17px;
  display: block;
}

/* Анонсы на главной — две колонки: в одну строка занимала ~830px при содержимом в 560px */
@media (min-width: 992px) {
  .radio-home-next__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .radio-home-next__item {
    margin: 0;
  }
}

/* ---------- Страница выпуска: текст и ссылки по системе ---------- */

/* Легаси красит ссылки в тексте выпуска в #007bff !important — чужой синий */
.radio-banner__about-content__text a,
.radio-banner__about-content__caption a {
  color: var(--red-link) !important;
}

/* Тело выпуска было сдвинуто на 53px относительно заголовка и ведущего */
.radio-banner__about-content__text {
  margin-left: 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 72ch;
}

.radio-banner__about-content__text p {
  margin-bottom: 14px;
}

/* Скрипт виджета резервирует min-height под десктопную раскладку (695px при
   содержимом 484px) — под плеером оставалась пустая полоса. Высоту задаёт
   пропорция iframe, поэтому резерв снимаем. */
#mywidget-1,
#mywidget-2,
.radio-widget {
  min-height: 0 !important;
  height: auto !important;
}

/* Виджет — vuetify-приложение, и его собственный CSS (внешний домен) вешает
   контейнеру margin-top: 11px; из-за него сайдбар стоял ниже левой колонки. */
#mywidget-1,
#mywidget-2 {
  margin-top: 0 !important;
}

/* Скрипт виджета выставляет внешней обёртке инлайновый min-height (684px при
   содержимом 351px) — под блоком эфира оставалась пустая полоса. */
.radio-page-left > .radio-youtube-banner,
.radio-youtube-banner:has(> .radio-widget) {
  min-height: 0 !important;
  height: auto !important;
}

/* ---------- Истории: сетка с настоящими промежутками ---------- */
/* Карточки историй — это бутстраповские колонки col-lg-3, у которых 12px
   паддинга работали отбивкой. Но фон, скругление и тень висят на самой
   колонке, поэтому плитки стояли встык (233px шириной с шагом 233px), а тень
   при наведении наползала на соседей. Переводим ряд в грид с реальным gap. */

.radio-home-stories .radio-blocks__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.radio-home-stories .radio-block {
  flex: none;
  width: auto;
  max-width: none;
  padding: 0;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .radio-home-stories .radio-blocks__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .radio-home-stories .radio-blocks__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Виджет эфира в сайдбаре ---------- */
/* Бокс iframe был 284×150 (1.89:1) при видео 16:9 — плеер добавлял чёрные поля
   слева и справа. Приводим бокс к 16:9, поля исчезают. */
#mywidget-1 iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* У блока виджета не было нижнего отступа, у остальных карточек сайдбара — 22px:
   «Аренда студии» прилипала к плееру и ломала ритм колонки. */
.radio-live-widget {
  margin-bottom: 22px;
}

/* ---------- Верх колонок на одной линии ---------- */
/* Первый блок каждой колонки нёс свой margin-top (баннер 28px, карусель дней
   23px, виджет эфира 29px, промо 0), поэтому контент и сайдбар начинались на
   разной высоте и по-разному на разных страницах. Отступ сверху задаём один раз
   колонкам, а margin первых блоков гасим. */
@media (min-width: 992px) {
  /* vuetify подключён ПОСЛЕ нашего файла, и его `.col-lg-9 { padding: 12px }`
     перебивал отступ при равной специфичности — отсюда селектор с .row. */
  .radio-page .row > .radio-page-left,
  .radio-page .row > .radio-page-right {
    padding-top: 28px;
  }

  .radio-page-left > :first-child,
  .radio-page-left > main > :first-child,
  .radio-page-left > main > article > :first-child,
  .radio-page-right > :first-child {
    margin-top: 0;
  }

  /* Отступы вложенных блоков схлопываются наружу и утягивают колонку: виджет
     эфира вкладывает свой .radio-youtube-banner (28px), контейнер .radio-widget
     несёт 11px, каталог программ — .radio-blocks с 17px. Гасим второй уровень.
     Исключение — .owl-stage-outer: там -25px компенсируют padding карусели. */
  .radio-widget > .radio-youtube-banner,
  .radio-page-left > :first-child .radio-youtube-banner,
  .radio-page-left > :first-child > :first-child:not(.owl-stage-outer),
  .radio-page-right > :first-child > :first-child {
    margin-top: 0;
  }
}

/* ---------- Иконки людей в подписях — единый размер 35×35 ---------- */

.radio-widget-guest img,
.radio-widget-guests__list img,
.radio-block__broadcaster-img {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px;
  max-width: 35px;
  min-height: 35px;
  max-height: 35px;
  flex: 0 0 35px;
  object-fit: cover;
  border-radius: 50% !important;
  box-sizing: border-box;
}

/* ---------- Страница выпуска: единый блок «человек» для ведущих и гостей ---------- */
/* Разметка у ведущего и гостя одинаковая (аватар + имя + описание), но
   инлайн-блоки переносились, и у гостей фото было 70px против 140px
   у ведущего. Приводим к одной карточке с одинаковым аватаром. */

.radio-banner__presenter,
.radio-banner__guest {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 0 !important;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.radio-banner__presenter:first-of-type,
.radio-banner__guest:first-of-type {
  border-top: 0;
}

.radio-banner__presenter .radio-banner__about-img,
.radio-banner__guest .radio-banner__about-img {
  flex: 0 0 120px;
  width: 120px;
  margin: 0;
  display: block;
}

.radio-banner__presenter .radio-banner__about-img img,
.radio-banner__guest .radio-banner__about-img img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.radio-banner__presenter .radio-banner__about-content,
.radio-banner__guest .radio-banner__about-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin-left: 0;
  display: block;
}

.radio-banner__presenter .radio-banner__about-content__caption,
.radio-banner__guest .radio-banner__about-content__caption {
  margin-bottom: 6px;
}

/* Блок гостей лежит в общей текстовой обёртке с мерой 72ch — для карточек её снимаем */
.radio-banner__about-content__text:has(.radio-banner__guest) {
  max-width: none;
}

.radio-episode-section,
.radio-banner__about-content__text > h2 {
  font: 700 11px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
}

@media (max-width: 575px) {
  .radio-banner__presenter,
  .radio-banner__guest {
    gap: 14px;
  }

  .radio-banner__presenter .radio-banner__about-img,
  .radio-banner__guest .radio-banner__about-img {
    flex-basis: 84px;
    width: 84px;
  }

  .radio-banner__presenter .radio-banner__about-img img,
  .radio-banner__guest .radio-banner__about-img img {
    width: 84px;
    height: 84px;
  }
}

/* ---------- Страница программы: шапка ---------- */
/* Было: тёмная полоса с обложкой по центру, крошечные аватарки ведущих внахлёст
   и название поверх градиента. Стало: обложка + текстовый блок, ведущие —
   такими же карточками, как на странице выпуска. */

.radio-program-head {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.radio-program-head__cover {
  aspect-ratio: 16 / 9;
  border-radius: 17px;
  overflow: hidden;
  background-color: var(--tile);
  box-shadow: var(--tile-edge);
}

.radio-program-head__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.radio-program-head__body {
  padding-top: 2px;
}

.radio-program-head .radio-program-title {
  font: 700 30px/1.15 Georgia, serif;
  color: var(--ink);
  margin: 0 0 12px;
}

.radio-program-head__about {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.radio-program-hosts {
  padding: 22px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

.radio-program-hosts .radio-episode-section {
  margin-bottom: 14px;
}

@media (max-width: 767px) {
  .radio-program-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .radio-program-head .radio-program-title {
    font-size: 23px;
  }
}

/* ---------- Мобильная шапка: город и меню ---------- */

@media (max-width: 950px) {
  /* Кнопка выбора города — absolute из легаси: ячейка схлопывалась в 0px,
     а сама кнопка накрывала поле поиска. Возвращаем её в поток. */
  .radio-topbar {
    align-items: center;
  }

  .radio-topbar-region {
    width: auto;
    min-width: 0;
  }

  .radio-topbar-region .radio-dropdown-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0;
    white-space: nowrap;
  }

  /* Меню — две строки по три пункта вместо горизонтальной прокрутки:
     все разделы видны сразу, без скрытой части и без бургера. */
  .radio-header .radio-menu:not(.footer-menu) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 6px;
    overflow: visible;
    flex-wrap: wrap;
  }

  /* Подчёркивание активного пункта — absolute с bottom: -17px: при двух рядах
     оно попадало в строку ниже. Прижимаем к своему пункту. */
  .radio-header .radio-menu:not(.footer-menu) .radio-menu-item a::after {
    bottom: -6px;
  }

  .radio-header .radio-menu:not(.footer-menu) .radio-menu-item {
    flex: none;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .radio-header .radio-menu:not(.footer-menu) .radio-menu-item a {
    font-size: 15px;
  }

  .radio-topbar-searchlink {
    margin-right: 10px;
  }
}

/* ---------- Единый вертикальный ритм списков ---------- */
/* Было вразнобой: выпуски 14px, программы и истории 16px, анонсы 12px,
   расписание 10px, а гости и ведущие — 40px (12px паддинга колонки сверху и
   снизу + 16px margin). Сводим к одному значению. */

:root {
  --card-gap: 14px;
}

.radio-home-episodes__grid,
.radio-home-stories .radio-blocks__inner,
.radio-programs-grid,
.radio-timetable__table,
.radio-home-next__list {
  gap: var(--card-gap);
}

.radio-persons .radio-blocks__inner > .radio-block,
.radio-guests-block .radio-blocks__inner > .radio-block {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: var(--card-gap);
}

/* ---------- Расписание на мобильном: превью во всю высоту карточки ---------- */
/* Картинка была «внутри» паддинга карточки; прижимаем её к краю, как в
   карточках каталога программ. */

@media (max-width: 767px) {
  /* .radio-block.row (0,3,0) задаёт padding выше по файлу — держим ту же
     специфичность, иначе обнуление не сработает. */
  .radio-timetable__table .radio-block,
  .radio-timetable__table .radio-block.row {
    padding: 0;
    overflow: hidden;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }

  .radio-timetable__table .radio-block__left {
    margin: 0;
  }

  .radio-timetable__table .radio-block__middle > a {
    align-self: stretch;
    display: block;
    height: 100%;
  }

  .radio-timetable__table .radio-block__middle-img {
    width: 104px;
    height: 100%;
    min-height: 84px;
    border-radius: 0;
    box-shadow: none;
  }

  .radio-timetable__table .radio-block__left {
    padding-top: 12px;
  }

  .radio-timetable__table .radio-block__right {
    padding: 0 14px 12px 0;
  }

  .radio-timetable__table .radio-block.is-on-air .radio-block__left {
    padding-left: 0;
  }
}

/* ---------- Страницы ведущего и гостя: шапка как у программы ---------- */
/* Тот же разбив (медиа 420px слева, имя и биография справа) и те же стили.
   Пропорция 4:3 вместо 16:9: портрет в широком кадре обрезается по макушке. */

/* Фото ведущих и гостей в исходниках мелкие, поэтому блок не растягиваем:
   фиксированный квадрат 168×168 — столько же, сколько в карточках списков. */
.radio-person-head {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 22px;
}

.radio-person-head__photo {
  width: 168px;
  aspect-ratio: 1 / 1;
}

.radio-person-head__photo img {
  object-position: 50% 22%;
}

@media (max-width: 767px) {
  .radio-person-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Логотип на мобильном — тот же локап, только меньше */


/* ---------- Десктоп: город и поиск по одной нижней линии ---------- */
/* Кнопка города — легаси-`position: absolute`, из-за чего ячейка
   .radio-topbar-region схлопывалась в 0×0, а сама кнопка вставала на 24px ниже
   поля поиска. Плюс ячейка поиска была на 7px выше содержимого: .radio-search —
   inline-block, под ним оставался зазор строки. Выравниваем оба бокса в 40px. */

@media (min-width: 951px) {
  /* display у .radio-search не перебить: в разметке бутстраповский
     d-sm-inline-block с !important. Делаем флексом саму ячейку — зазор
     инлайн-строки исчезает, и её высота становится равной полю (40px). */
  .radio-topbar-search {
    display: flex;
    align-items: center;
  }

  .radio-topbar-region .radio-dropdown-btn {
    position: relative !important;
    top: auto !important;
  }

  .radio-topbar-region .radio-dropdown-btn .nav1 > ul > li.zq > span {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ---------- Перечисление гостей в виджете эфира ---------- */
/* Элементы шли инлайном вплотную: правый край одного совпадал с левым краем
   следующего. Разводим и заодно задаём зазор между аватаркой и именем. */

.radio-widget-guest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

.radio-widget-guest:not(:last-child) {
  margin-right: 24px;
}

/* ---------- Плавная загрузка: резерв места под поздние блоки ---------- */
/* Карусели owl до инициализации JS имеют нулевую высоту, а затем раскрываются
   и толкают страницу вниз (на /programs/ так «наезжала» карусель популярных,
   на /timetable/ — лента дней). Держим их финальную высоту до `owl-loaded`,
   после инициализации резерв снимается сам. */

/* owl до инициализации не просто нулевой — он `display: none`
   (`.owl-carousel{display:none}` в owl.carousel.min.css), а на скрытом блоке
   min-height ничего не резервирует. Поэтому показываем блок, держим высоту и
   прячем «сырые» элементы, чтобы они не мелькали до сборки карусели. */
#radio-timetable:not(.owl-loaded) {
  /* После инициализации внутренняя .owl-stage-outer несёт margin-top: -25px,
     он схлопывается наружу и поднимает карусель — до этого вся страница стояла
     ниже и при сборке карусели прыгала вверх. Повторяем компенсацию.
     На мобильном у карусели остаётся собственный отступ 23px (на десктопе он
     обнуляется правилом выравнивания колонок), поэтому итог 23 − 25 = −2px. */
  box-sizing: border-box;
  margin-top: -2px;
  padding-top: 25px;
}

@media (min-width: 992px) {
  #radio-timetable:not(.owl-loaded) {
    margin-top: -25px;
  }
}

#radio-timetable:not(.owl-loaded) {
  display: block;
  overflow: hidden;
  /* `visibility: hidden` у детей скрывает их, но место они занимают: до
     инициализации блок был выше резерва (7 чипов в столбик), и после сборки
     карусели страница прыгала вверх. Поэтому высота фиксируется жёстко.
     108px — замеренная высота ленты дней после удаления подписи «Сегодня». */
  height: 108px;
}

#radio-timetable:not(.owl-loaded) > * {
  visibility: hidden;
}

/* Место под карусель зарезервировано, но содержимое до инициализации скрыто и
   появляется рывком — смягчаем появление коротким проявлением. На раскладку
   не влияет: меняется только прозрачность. */
#radio-timetable {
  transition: opacity .18s ease;
}

#radio-timetable:not(.owl-loaded) {
  opacity: 0;
}



/* До инициализации owl карточки не прятались, а выкладывались тем же рядом, что
   и в собранной карусели: ширина элемента у owl равна (W + 20px) / items - 20px
   (проверено на 1440 → 278.7, 768 → 170.4, 375 → 208.7), отступы 25px сверху и
   снизу повторяют .owl-stage-outer. Высота получается сама и по определению равна
   итоговой, поэтому страница не прыгает, а содержимое не появляется рывком.
   Раньше здесь были ступеньки 218/222/258px: они совпадали с фактической высотой
   только на 375, 1280 и 1440px, а на промежуточных ширинах расходились на 5-12px —
   это и был прыжок при загрузке. */
.radio-programs-popular .owl-carousel:not(.owl-loaded) {
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: -25px;
  /* 25px сверху и снизу — как у .owl-stage-outer собранной карусели (легаси даёт
     ей padding: 25px и margin-top: -25px). Замер без JS показал ровно ту же высоту
     блока и то же положение следующей секции, что и после инициализации. */
  padding: 25px 0;
}

.radio-programs-popular .owl-carousel:not(.owl-loaded) > * {
  visibility: visible;
  flex: 0 0 calc((100% + 20px) / 1.5 - 20px);
  margin-right: 20px;
}

@media (min-width: 600px) {
  .radio-programs-popular .owl-carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% + 20px) / 2.5 - 20px);
  }
}

@media (min-width: 800px) {
  .radio-programs-popular .owl-carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% + 20px) / 3.1 - 20px);
  }
}

/* Название всегда в двух строках: иначе высота карусели зависит от переноса,
   карточки в ряду получаются разной высоты, а резерв посчитать невозможно.
   40px = две строки шрифта 16px/1.25. Селектор длиннее правила height: auto
   выше по файлу — иначе оно выигрывает по специфичности. */
.radio-blocks__type-2.radio-programs-popular .radio-block-caption {
  /* Именно min-height: легаси в @media (max-width: 768px) держит
     `.radio-block-caption { height: unset !important }`, и фиксированную высоту
     на мобильном сбивало — карточки снова получались в одну строку. */
  min-height: 40px;
}

.radio-blocks__type-2.radio-programs-popular .radio-block-caption a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Виджет эфира вставляет скриптом плеер И подпись под ним: пустой контейнер
   занимал 0px, и при появлении содержимого колонка съезжала на ~500px.
   Резервируем обе части: 56.25% ширины — кадр 16:9, плюс замеренная высота
   подписи (в сайдбаре 314px при итоговых 474px, на главной 294px при 804px).
   Процент в padding-top считается от ширины, поэтому резерв тянется за ней. */
#mywidget-1:empty,
#mywidget-2:empty {
  display: block;
  background: var(--tile);
  border-radius: 17px;
}

#mywidget-1:empty::before,
#mywidget-2:empty::before {
  content: "";
  display: block;
}

#mywidget-1:empty::before {
  padding-top: calc(56.25% + 314px);
}

/* Скрипт вставляет свой контейнер раньше, чем наполняет его: `:empty` уже не
   совпадает, а высота ещё нулевая, и сайдбар съезжал на ~500px. Поэтому на
   десктопе блок виджета держит замеренную итоговую высоту (474px) безусловно —
   резерв не «схлопывается» между вставкой контейнера и появлением контента. */
@media (min-width: 992px) {
  .radio-live-widget {
    min-height: 476px;
  }
}

/* Планшетная полоса: виджет виден (ниже 576px он `d-none`), а резерва не было —
   при появлении плеера сайдбар подпрыгивал на ~420px. Пол берём чуть ниже
   замеренного минимума полосы (576 → 408px, 600 → 412, 768 → 437, 991 → 435),
   чтобы резерв никогда не оказался больше фактической высоты. */
@media (min-width: 576px) and (max-width: 767.98px) {
  .radio-live-widget {
    min-height: 404px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .radio-live-widget {
    min-height: 430px;
  }
}

#mywidget-2:empty::before {
  padding-top: calc(56.25% + 294px);
}

/* ---------- Поле поиска: без белой вспышки при переходах ---------- */
/* Легаси красит `.ya-site-form__input-text` в белый с `!important`, а тёмный
   вид поле получает только после инициализации виджета — при каждом переходе
   оно моргало белым. Задаём финальный вид сразу. */

/* Красим ТОЛЬКО ячейку: форма виджета вдвое выше поля (80px против 40px), и
   её фон вылезал серой плитой под инпутом. Всё внутри — прозрачное, поэтому
   белый фон инпута (легаси ставит его с !important) не мелькает: цвет даёт
   ячейка. #313332 — это rgba(255,255,255,.04) поверх графита шапки. */
.radio-topbar-search {
  background: #313332;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  height: 40px;
  overflow: hidden;
}

.radio-topbar-search .radio-search,
.radio-topbar-search .ya-site-form,
.radio-topbar-search .ya-site-form__form,
.radio-topbar-search .ya-site-form__input,
.radio-topbar-search .ya-site-form__search,
.radio-topbar-search .ya-site-form__wrap,
.radio-topbar-search input,
.radio-topbar-search input[type="search"],
.radio-topbar-search input.ya-site-form__input-text {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #eee !important;
  border-radius: 0 !important;
}

/* ---------- Оптическое выравнивание логотипа по меню ---------- */
/* Бокс логотипа начинается там же, где пункты меню, но внутри SVG у знака
   «m» свой отступ — 8.5% ширины локапа. Сдвигаем на эту величину, чтобы буква
   вставала в одну вертикаль с «Главная». */

.radio-topbar-brand .radio-site-logo {
  /* у logo-clean.svg знак отстоит от края на 9 из 99 единиц viewBox */
  margin-left: -10px;
}

@media (max-width: 620px) {
  .radio-topbar-brand .radio-site-logo {
    width: 96px;
    margin-left: -9px;
  }
}

/* ---------- Попап подсказок поиска ---------- */
/* Белый блок, мелькающий под строкой поиска при загрузке, — это попап подсказок
   виджета (`ya-site-suggest`). Он `position: absolute` и живёт вне ячейки,
   поэтому её `overflow: hidden` его не обрезает. Показываем попап только когда
   поле в фокусе, то есть когда подсказки реально нужны. */

body:not(:has(.radio-topbar-search input:focus)) .ya-site-suggest,
body:not(:has(.radio-topbar-search input:focus)) .ya-site-suggest-popup {
  display: none !important;
}

/* Запасной вариант для браузеров без :has — белый фон самого фрейма подсказок */
.ya-site-suggest__iframe {
  background: transparent !important;
}

/* ---------- Ссылка «Поиск» в шапке и форма на странице поиска ---------- */
/* Виджет поиска Яндекса убран из шапки: он рисовал белый попап подсказок в
   момент инициализации, и моментом отрисовки чужого скрипта мы не управляем.
   Логотип, ссылка и город разнесены по колонкам сетки — без отступов-подпорок,
   иначе на узких экранах город уезжал за край. */

.radio-topbar {
  grid-template-columns: auto 1fr auto auto;
  column-gap: 0;
  align-items: center;
}

.radio-topbar-searchlink {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  margin-right: 20px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: #313332;
  color: #eee;
  font-size: 14px;
  white-space: nowrap;
  transition: border-color .15s ease;
}

.radio-topbar-searchlink:hover {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  text-decoration: none;
}

.radio-topbar-searchlink__icon {
  font-size: 17px;
  line-height: 1;
}

.radio-topbar-region {
  grid-column: 4;
  justify-self: end;
}

@media (max-width: 620px) {
  .radio-topbar-searchlink {
    margin-right: 10px;
    padding: 0 12px;
    font-size: 13px;
  }
}

.radio-search-form {
  display: flex;
  gap: 10px;
  margin: 0 0 26px;
}

.radio-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: 15px;
  color: var(--ink);
}

.radio-search-form__input:focus {
  border-color: var(--ink);
  outline: none;
}

.radio-search-form__btn {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 24px;
  background: var(--ink);
  border: 0;
  border-radius: 13px;
  /* легаси красит кнопки в цвет текста — надпись сливалась с фоном */
  color: #fff !important;
  font-size: 14px;
  cursor: pointer;
}

.radio-search-form__btn:hover {
  background: var(--red-link);
}

/* Выдача Яндекса — ссылки в фирменном цвете вместо дефолтного синего */
#ya-site-results a {
  color: var(--red-link);
}

#ya-site-results .b-serp-url__item,
#ya-site-results .b-serp-url a {
  color: var(--muted);
}

/* ---------- Субнавигация разделов на мобильном — одной строкой ---------- */
/* Три чипа («Контакты», «Презентация», «О предприятиии») в сумме шире экрана,
   поэтому переносились. Ужимаем кегль и отступы, строку не переносим: если
   всё же не помещаются — прокручиваются по горизонтали. */

@media (max-width: 620px) {
  .radio-page .radio-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
    padding-bottom: 2px;
  }

  .radio-page .radio-menu::-webkit-scrollbar {
    display: none;
  }

  .radio-page .radio-menu-item {
    flex: 0 0 auto;
    padding: 7px 9px;
  }

  .radio-page .radio-menu-item a {
    font-size: 11px;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* ---------- Карточки выпусков: одинаковая высота ---------- */
/* Легаси держал подпись в фиксированных 40px (две строки), в редизайне стало
   `height: auto` — и карточки в ряду запрыгали. Закладываем место под три
   строки темы, остальное обрезаем. Шрифт подписи 16px/20px, значит 60px. */

.radio-blocks__type-6 .radio-block-caption {
  min-height: 60px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 575px) {
  .radio-blocks__type-6 .radio-block-caption {
    min-height: 0;
  }
}

/* Ведущие в анонсах — строкой над названием программы, без подписи */
.radio-home-next__hosts {
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 5px;
}

.radio-home-next__hosts a {
  color: var(--red-link);
}

.radio-home-next__hosts a:hover {
  color: var(--ink);
}

/* ---------- Главная: компактнее верхний блок ---------- */
/* Плеер занимал 510px по высоте (16:9 при ширине колонки 906px) и вместе с
   подписью и блоком ведущих съедал весь первый экран. Ограничиваем ширину
   плеера — высота уменьшается пропорционально, без обрезки картинки. */

@media (min-width: 992px) {
  .radio-page-left .radio-youtube-banner iframe,
  .radio-page-left .radio-iframe-container__round iframe {
    max-width: 760px;
  }

  /* На широких экранах плеер и текст эфира встают в две колонки: и пустого
     места справа от плеера нет, и блок вдвое ниже. */
  @media (min-width: 1100px) {
    /* Ширина плеера = ровно одна колонка сетки «Последние выпуски», а зазор —
       тот же --card-gap, поэтому вертикали блока эфира и карточек совпадают. */
    #mywidget-2 > .radio-youtube-banner {
      display: grid;
      grid-template-columns: calc((100% - var(--card-gap)) / 2) minmax(0, 1fr);
      column-gap: var(--card-gap);
      align-items: start;
    }

    #mywidget-2 > .radio-youtube-banner > .radio-iframe-container__round {
      grid-column: 1;
      grid-row: 1 / span 2;
    }

    #mywidget-2 > .radio-youtube-banner > .radio-banner__caption {
      grid-column: 2;
      grid-row: 1;
      margin-top: 0;
    }

    #mywidget-2 > .radio-youtube-banner > .radio-banner__about {
      grid-column: 2;
      grid-row: 2;
      margin-top: 10px;
      border-top: 0;
    }

    .radio-page-left .radio-youtube-banner iframe,
    .radio-page-left .radio-iframe-container__round iframe {
      max-width: 100%;
    }
  }

  /* Резерв под ещё не вставленный плеер должен совпадать с итоговой высотой,
     иначе вернётся прыжок: 16:9 от ширины, но не выше 428px, плюс подпись. */
  #mywidget-2:empty::before {
    padding-top: calc(min(56.25%, 428px) + 294px);
  }

  /* В двухколоночной раскладке блок эфира ниже — резерв тоже другой.
     Плеер шириной в одну колонку выпусков даёт 251px, вместе с подписью и
     ведущими блок выходит около 300px. */
  @media (min-width: 1100px) {
    #mywidget-2:empty::before {
      padding-top: 300px;
    }
  }

  .radio-banner__about {
    padding: 10px 0 0;
    margin-top: 12px;
  }
}

/* ---------- Виджет эфира: блок гостей под плеером ---------- */
/* Подпись «Гости» приводим к стилю секционных подписей сайта, имя отодвигаем
   от аватарки и выделяем так же, как имена ведущих. */

.radio-widget-guests__title {
  display: block;
  margin-bottom: 8px;
  font: 700 11px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.radio-widget-guest {
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--red-link);
}

.radio-widget-guest:hover {
  color: var(--ink);
}

/* ---------- Главная: наши гости ---------- */

.radio-home-guests {
  margin-bottom: 32px;
}

.radio-home-guests .radio-caption {
  margin-bottom: 18px;
}

.radio-home-guests__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--card-gap);
}

.radio-home-guests__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  color: var(--ink);
  transition: border-color .15s ease;
}

.radio-home-guests__item:hover {
  border-color: var(--ink);
  text-decoration: none;
}

.radio-home-guests__pic {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--tile);
}

.radio-home-guests__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}

.radio-home-guests__air {
  padding: 11px 14px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.radio-home-guests__name {
  padding: 5px 14px 0;
  font: 700 14px/1.25 Georgia, serif;
  color: var(--ink);
}

.radio-home-guests__about {
  padding: 4px 14px 14px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.radio-home-guests__more {
  margin-top: 14px;
}

.radio-home-guests__more a {
  font-size: 13px;
  color: var(--red-link);
}

@media (max-width: 620px) {
  .radio-home-guests__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ---------- Партнёрский виджет «Доктор.ру» ---------- */
/* Содержимое внутри iframe чужое и стилизовать его нельзя — приводим к сайту
   только рамку: карточка с той же заливкой, рамкой и скруглением. */

/* Блок без собственной карточки — оформление даёт сам виджет ВК,
   как у блока сообщества радио выше. */
.radio-partner {
  margin-bottom: 22px;
  padding: 0;
  background: none;
  border: 0;
}

/* Виджет ВК рисует сообщество в своей ширине и не тянется на колонку —
   центрируем, чтобы поля слева и справа были одинаковыми. */
.radio-partner #vk_groups_doctor {
  margin: 0 auto;
}

.radio-partner #vk_groups_doctor iframe {
  display: block;
  border: 0;
  border-radius: 13px;
}