@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [Telega FM](//telega.fm)
 * @summary Единый стиль для проектов (Mobile version).
 * @created 2026-01
 * @modified 2026-01
 *
 * @file D:/controls-psr/sdqa.ru/cdn.sdqa.ru/css/styles-project-mobile-telega.css
 * @link https://cdn.telega.fm/css/styles-project-mobile-telega.css
 *
 * @remarks
 * - Стандарты CSS3 2025
 * - Поддержка тем
 * - Inline комментарии запрещены
 * - Мобильные стили выделены из файла `styles-standard-project.css`.
 * - Использование `@media (max-width: 768px)` внутри файла избыточно, так как сам файл подключается по этому условию.
 *
 * @example
 * <link rel="stylesheet" href="https://cdn.telega.fm/css/styles-standard-project-mobile-telega.min.css" media="screen and (max-width: 768px)">
 * =============================================================================
 */

/*
   RESPONSIVE UTILITIES */

/* Hide/Show on different screen sizes */
.d-sm-none
{
  display: none !important;
}

.d-md-block
{
  display: block !important;
}

.d-lg-block
{
  display: block !important;
}

/* Header & Footer Mobile Adaptation */
.header-actions
{
  gap: var(--spacing-xs);
}

/* Скрываем заголовок на очень маленьких экранах */
.header-title
{
  /* Пока так нужно */
  /* display: none; */
}

.header-btn
{
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.footer-links
{
  gap: var(--spacing-md);
}

/* Breadcrumbs Mobile Adaptation */
.breadcrumb
{
  padding: 0.25rem 0;
  margin: 0.125rem 0;
  font-size: 0.75rem;
}

.breadcrumb span[itemprop="itemListElement"]
{
  font-size: 0.65rem;
}

.breadcrumb a[itemprop="item"]
{
  padding: 0.15rem 0.3rem;
  font-size: 0.65rem;
}

.breadcrumb .divider::before
{
  margin: 0 0.15rem;
  font-size: 0.6rem;
}

/* Tables Mobile Adaptation */
/* Компенсация зафиксированного header для мобильных */
body
{
  flex-direction: column;
  padding-top: 60px !important;
}

.header
{
  padding: 0.5rem 0;
}

main
{

}
/* Горизонтальная прокрутка для таблиц на мобильных */
.table-responsive
{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.5rem;
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.param-table
{
  min-width: 376px;
  font-size: calc(var(--font-size-base) * 0.8);
  margin-bottom: 0;
}

.param-table.table-compact
{
  min-width: 320px;
  font-size: calc(var(--font-size-sm) * 0.8);
}

.param-table td,
.param-table th
{
  padding: 0.375rem 0.5rem;
  white-space: nowrap;
  border-right: 1px solid var(--color-border);
}

.param-table td:last-child,
.param-table th:last-child
{
  border-right: none;
}

.param-table.table-compact td,
.param-table.table-compact th
{
  padding: 0.25rem 0.375rem;
  font-size: calc(var(--font-size-xs) * 1.1);
}

/* Уменьшение отступов для основных элементов в 2 раза */
.container
{
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.card
{
  margin-bottom: calc(var(--spacing-lg) / 2);
}

.form-group
{
  margin-bottom: calc(var(--spacing-xl) / 2);
}

.btn
{
  padding: calc(var(--spacing-md) / 2) calc(var(--spacing-xl) / 2);
  margin: calc(var(--spacing-xs) / 2);
}

.card-body
{
  padding: calc(var(--spacing-xl) / 2);
}

.card-header,
.card-footer
{
  padding: calc(var(--spacing-lg) / 2) calc(var(--spacing-xl) / 2);
}

/* Дополнительные отступы для секций */
section
{
  padding: calc(var(--spacing-lg) / 2) 0;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  margin-bottom: calc(1.125rem / 2);
}

p
{
  margin-bottom: calc(var(--spacing-md) / 2);
}

/* Supply (Article TOC) Mobile Adaptation */
.supply
{
  margin: calc(var(--spacing-xl) / 2) 0;
}

.supply-header
{
  padding: calc(var(--spacing-lg) / 2) calc(var(--spacing-xl) / 2);
  font-size: var(--font-size-sm);
}

.supply-content
{
  padding: calc(var(--spacing-lg) / 2);
}

.supply ul
{
  padding-left: calc(var(--spacing-lg) / 2);
}

.supply ul li
{
  padding-left: calc(var(--spacing-xl) / 2);
  font-size: var(--font-size-sm);
}

.supply ul ul li
{
  font-size: var(--font-size-xs);
}

.supply-indicator
{
  width: 20px;
  height: 20px;
}

.supply-indicator::before
{
  font-size: var(--font-size-sm);
}

main
{
  flex-direction: column;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-sm);
}

.header-container
{
  padding: 0 16px;
}

.header-title-main
{
  font-size: 18px;
}

.header-subtitle
{
  font-size: 11px;
}

.header-actions
{
  gap: 4px;
}

.header-btn
{
  width: 36px;
  height: 36px;
}

.post-card,
.post-card-full
{
  width: 390px;
  padding: 10px;
}

.pagination__pages
{
  flex-wrap: wrap;
}

.pagination__page_next
{
  width: 100%;
  margin-right: 0;
}

/* Панель выбора ленты (Feeders) */
.feeders
{
  position: relative;
  top: 0;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 48px;
  min-height: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Контейнер для табов внутри feeders */
.feeders-tabs-container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: max-content;
  padding-top: 0;
}

/* Обычные ссылки */
.feeders .feeders-tab
{
  position: relative;

  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  border-left: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;

  font-size: 14px;
  font-weight: 500;
  color: var(--text-meta);
  text-decoration: none;

  transition: color 0.2s;
}

.feeders .active
{
  border-left-color: transparent;
  border-bottom-color: rgb(0, 150, 235);
}