/* =====================================================
   RouteBook — style.css
   Конвенции:
   - Каждый блок помечен START/END
   - Утилиты (helpers) выше, компоненты ниже
   - Без дублей и без "плавающих" фрагментов
   ===================================================== */

/* =====================================================
   START: Text helpers / Utilities
   ===================================================== */

/* Ограничение количества строк (используется в карточках) */
.rb-clamp-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* =====================================================
   END: Text helpers / Utilities
   ===================================================== */



/* =====================================================
   START: Links / Card-as-CTA helpers
   ===================================================== */

/* Когда вся карточка — ссылка: убираем подчеркивание и наследуем цвета */
.rb-card-link,
.rb-card-link:hover,
.rb-card-link:focus,
.rb-card-link:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* На всякий случай: не даём подчеркивать элементы внутри карточки-ссылки */
.rb-card-link * {
  text-decoration: none !important;
}

/* =====================================================
   END: Links / Card-as-CTA helpers
   ===================================================== */



/* =====================================================
   START: Universal media card overlay (regions + routes)
   Задача: белый текст внизу картинки + затемнение
   ===================================================== */
/* START: fix for Bootstrap ratio wrapper */
.rb-card-media {
  width: 100%;
  height: 100%;
}
.rb-card-media {
  position: relative;


/* END: fix for Bootstrap ratio wrapper */

  /* КЛЮЧЕВОЕ: прижимаем контент к низу */
  display: flex;
  align-items: flex-end;

  overflow: hidden;
}

/* Изображение растягиваем на весь контейнер ratio */
.rb-card-media img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение картинки, чтобы белый текст читался */
.rb-card-media-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82),
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.12)
  );

  pointer-events: none;
}

/* Контент (заголовок + мета/бейджи) — поверх overlay, внизу */
.rb-card-media-content {
  position: relative;
  z-index: 2;

  width: 100%;

  /* Отступы как на главной: слева/справа + снизу */
  padding: 1rem 1.25rem;
}

/* Заголовок поверх изображения (белый) */
.rb-card-media-title {
  margin: 0;

  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
/* =====================================================
   START: Universal media card overlay (regions + routes)
   ===================================================== */

/* ВАЖНО: Bootstrap .ratio требует, чтобы прямой ребёнок был position:absolute.
   Мы фиксируем это точечно, чтобы ничего не "уезжало" и не появлялся белый верх. */
.ratio > .rb-card-media {
  position: absolute;
  inset: 0;
}

/* Базовая карточка-оверлей */
.rb-card-media {
  /* position НЕ задаём тут, чтобы не ломать .ratio > * */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* ... дальше твои текущие правила:
   .rb-card-media img { ... }
   .rb-card-media-overlay { ... }
   .rb-card-media-content { ... }
   .rb-card-media-title { ... }
*/

/* =====================================================
   END: Universal media card overlay (regions + routes)
   ===================================================== */


/* -----------------------------------------------------
   START: Hard fix — гарантируем белый текст в overlay-контенте
   (если bootstrap/темы внезапно перекрашивают заголовки/спаны)
   ----------------------------------------------------- */
.rb-card-media-content,
.rb-card-media-content * {
  color: #fff;
}

.rb-card-media-content a,
.rb-card-media-content a:hover,
.rb-card-media-content a:focus,
.rb-card-media-content a:active {
  color: #fff !important;
  text-decoration: none !important;
}
/* -----------------------------------------------------
   END: Hard fix — гарантируем белый текст в overlay-контенте
   ----------------------------------------------------- */

/* =====================================================
   END: Universal media card overlay (regions + routes)
   ===================================================== */



/* =====================================================
   START: Route badges (duration) — old format (if used)
   ===================================================== */

/* Контейнер бейджей (если используешь на главной маршрутов) */
.rb-card-media-badges {
  margin-top: 0.5rem;

  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Бейдж длительности (light glass) */
.rb-badge {
  display: inline-flex;
  align-items: center;

  padding: 0.25rem 0.5rem;

  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;

  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;

  backdrop-filter: blur(4px);
}

/* =====================================================
   END: Route badges (duration)
   ===================================================== */



/* =====================================================
   START: Route meta (Top routes in region)
   Формат:
   "Продолжительность: X / Вид маршрута: A, B"
   ===================================================== */

.rb-card-media-meta {
  margin-top: 0.5rem;

  /* БЕЛЫЙ ТЕКСТ (ключ к твоей проблеме "не видно") */
  color: rgba(255, 255, 255, 0.92);

  font-size: 0.85rem;
  line-height: 1.35;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);

  /* Разрешаем переносы, чтобы не вылезало */
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.rb-card-media-meta-item {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.rb-card-media-meta-label {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.rb-card-media-meta-sep {
  color: rgba(255, 255, 255, 0.60);
}

/* =====================================================
   END: Route meta (Top routes in region)
   ===================================================== */



/* =====================================================
   START: Region hero
   (картинка 400px + overlay + breadcrumbs над H1 + lead + buttons)
   ===================================================== */

.rb-hero {
  position: relative;
}

.rb-hero-inner {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 1rem;
}


.rb-hero-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Затемнение hero — чтобы белый текст читался */
.rb-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.70)
  );
}

.rb-hero-content {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;

  padding-bottom: 2rem;
}

.rb-hero-title {
  margin: 0;
  max-width: 32ch;


  color: #fff;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 3rem);

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.rb-hero-lead {
  margin: 0.75rem 0 0;

  color: rgba(255, 255, 255, 0.92);
  

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* --- Breadcrumbs in hero --- */
.rb-hero-breadcrumbs {
  margin-bottom: 0.75rem;
}

.rb-hero-breadcrumbs .breadcrumb {
  background: none;
  padding: 0;
  margin: 0;

  font-size: 0.875rem;
}

.rb-hero-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.65);
}

.rb-hero-breadcrumbs a {
  color: rgba(255, 255, 255, 0.90);
  text-decoration: none;
}

.rb-hero-breadcrumbs a:hover {
  text-decoration: underline;
}

.rb-hero-breadcrumbs .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.70);
}

/* --- Hero buttons --- */
.rb-hero-actions {
  margin-top: 1rem;
}

.rb-hero-actions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rb-hero-btn {
  white-space: nowrap;
}

/* =====================================================
   END: Region hero
   ===================================================== */



/* =====================================================
   START: Region editorial content (Variant 1)
   Визуальная секция + отступы + "редакционная" колонка
   ===================================================== */

.rb-region-content {
  padding: 3.5rem 0; /* вертикальный ритм секции */
}

/* Внутренняя колонка текста */
.rb-region-content .rb-content-inner {
  max-width: 75ch; /* читабельная длина строки */
  margin: 0 auto;

  font-size: 1.05rem;
  line-height: 1.7;
  color: #212529;
}

/* Ритм абзацев */
.rb-region-content .rb-content-inner p + p {
  margin-top: 1.25rem;
}

/* Списки */
.rb-region-content .rb-content-inner ul,
.rb-region-content .rb-content-inner ol {
  margin: 1.25rem 0 1.25rem 1.25rem;
}

/* Подзаголовки в тексте */
.rb-region-content .rb-content-inner h2,
.rb-region-content .rb-content-inner h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* =====================================================
   END: Region editorial content (Variant 1)
   ===================================================== */

/* Lucide icons via SVG sprite */
.rb-ico{
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

.rb-ico--16{ font-size:16px; }
.rb-ico--18{ font-size:18px; }
.rb-ico--20{ font-size:20px; }
.rb-ico--24{ font-size:24px; }





/* =====================================================
   START: Responsive tweaks
   ===================================================== */

@media (max-width: 576px) {
  /* Hero */
  .rb-hero-inner {
    height: 360px;
    border-radius: 0.75rem;
  }

  /* Карточки: уменьшаем отступы/шрифты */
  .rb-card-media-content {
    padding: 0.75rem 1rem;
  }

  .rb-card-media-title {
    font-size: 1rem;
  }

  /* Region content */
  .rb-region-content {
    padding: 2.5rem 0;
  }

  .rb-region-content .rb-content-inner {
    font-size: 1rem;
  }
}

/* =====================================================
   END: Responsive tweaks
   ===================================================== */