/*
 * Набор оформления HTML-баннеров (.bn-*) для баннерного слота.
 *
 * Зачем отдельный CSS, а не Tailwind: HTML баннера живёт в базе, а Tailwind
 * собирает классы по исходникам — класс из базы в сборку не попал бы, и
 * баннер «богатого» вида на проде оказался бы голым. Здесь — ограниченный,
 * но выразительный набор: темы, свечения, крупный заголовок с курсивным
 * акцентом, «парящие» карточки, кнопки. Цвета и градиенты можно дописать
 * инлайновым style — санитайзер их пропускает.
 *
 * Слот показывает десктопную версию от 640px и мобильную — уже.
 */

.bn-slot { margin-top: 0.5rem; }
/* Баннер не выходит за свой слот. overflow: hidden у .bn фиксированные
   элементы не обрезает: position из style режет санитайзер, но классы
   сайта «fixed inset-0» накрыли бы всю главную. contain: paint делает
   обёртку контейнером и для fixed-потомков и обрезает их по её краю. */
.bn-slot__desktop, .bn-slot__mobile { contain: layout paint; }
.bn-slot__mobile { display: none; }
@media (max-width: 639px) {
  .bn-slot__desktop { display: none; }
  .bn-slot__mobile { display: block; }
}

.bn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  padding: 2.5rem;
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  font-family: var(--hm-text, Manrope, system-ui, sans-serif);
}
.bn--stack { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 639px) {
  .bn { padding: 1.4rem; border-radius: 24px; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
}

/* Темы */
.bn--dark { background: #16121f; color: #fff; }
.bn--light { background: linear-gradient(135deg, #fff4e8 0%, #ffe9e0 50%, #fde2f3 100%); color: #0f172a; }
.bn--sunset { background: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #f43f5e 100%); color: #fff; }
.bn--violet { background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #d946ef 100%); color: #fff; }
.bn--sky { background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #6366f1 100%); color: #fff; }

/* Декор: свечения и точечная фактура. Под содержимым (z-index), не ловят клики. */
.bn-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 20rem; height: 20rem; border-radius: 9999px; filter: blur(64px);
}
.bn-glow--orange { background: rgba(249, 115, 22, 0.45); right: -3rem; top: -6rem; }
.bn-glow--fuchsia { background: rgba(192, 38, 211, 0.32); left: 33%; bottom: -7rem; }
.bn-glow--rose { background: rgba(251, 113, 133, 0.4); left: -3rem; top: -5rem; }
.bn-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* Текст */
.bn-eyebrow {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fdba74; margin: 0;
}
.bn--light .bn-eyebrow { color: #c2410c; }
.bn-title {
  margin: 0.75rem 0 0; font-size: 2.25rem; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em;
}
.bn-title em {
  font-family: var(--blog-serif, Georgia, serif); font-style: italic; font-weight: 500; color: #fdba74;
}
.bn--light .bn-title em { color: #ea580c; }
.bn-accent { color: #fdba74; }
.bn--light .bn-accent { color: #ea580c; }
.bn-text { margin: 0.75rem 0 0; max-width: 28rem; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.bn--light .bn-text { color: #475569; }
.bn-note { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.bn--light .bn-note { color: #64748b; }
.bn-note s { opacity: 0.7; }
.bn-note b { color: inherit; filter: brightness(1.4); }
@media (max-width: 639px) {
  .bn-title { font-size: 1.5rem; }
  .bn-text { font-size: 0.9rem; }
}

/* Кнопки */
.bn-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.bn-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px;
  padding: 0.85rem 1.5rem; font-weight: 800; font-size: 0.95rem; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bn-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.45); }
.bn-btn--light { background: #fff; color: #0f172a; }
.bn-btn--dark { background: #0f172a; color: #fff; }
.bn-btn--brand { background: linear-gradient(90deg, #f97316, #ef4444); color: #fff; }

/* «Парящие» карточки справа: кусочек урока, ответ Lucía, результат теста */
.bn-aside { position: relative; display: grid; gap: 0.5rem; }
.bn-card {
  border-radius: 24px; background: #fff; color: #0f172a; padding: 1rem;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45);
}
.bn-card--soft { background: rgba(255, 255, 255, 0.95); }
.bn-card--tilt-r { transform: rotate(2deg); }
.bn-card--tilt-l { transform: rotate(-3deg); margin-left: 2.5rem; margin-top: -0.5rem; }
.bn-card-row { display: flex; align-items: center; gap: 0.75rem; }
.bn-card-title { margin: 0; font-weight: 800; }
.bn-card-sub { margin: 0; font-size: 0.75rem; color: #64748b; }
.bn-play {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
  border-radius: 9999px; background: #f97316; color: #fff; font-size: 0.9rem;
}
.bn-bar { margin-top: 0.75rem; height: 0.375rem; border-radius: 9999px; background: #f1f5f9; overflow: hidden; }
.bn-bar > span { display: block; height: 100%; border-radius: 9999px; background: #f97316; }
.bn-chip {
  display: inline-flex; border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 800;
  background: rgba(255, 255, 255, 0.95); color: #0f172a;
}
.bn-big { font-size: 3rem; font-weight: 800; line-height: 1; }
@media (max-width: 639px) {
  .bn-aside { display: none; }
  .bn-aside--mobile { display: grid; }
}