/* ============================================================
   tg_styles.css
   ============================================================ */

/* ── Таб-переключатель ───────────────────────────────────────── */
.feed-tabs {
    background: var(--paper);
    border-bottom: 2px solid var(--rule);
    margin-bottom: 28px;
}
.feed-tabs-inner {
    display: flex;
    align-items: center;
    padding: 0 var(--gutter);
    max-width: var(--max-w);
    margin: 0 auto;
}
.feed-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .18s, border-color .18s;
    white-space: nowrap;
}
.feed-tab:hover { color: var(--navy); }
.feed-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.feed-tab .feed-tab-icon { opacity: .45; transition: opacity .18s; }
.feed-tab.active .feed-tab-icon,
.feed-tab:hover  .feed-tab-icon { opacity: 1; }

.feed-tab.tg-tab .feed-tab-icon { color: #26A5E4; opacity: .7; }
.feed-tab.tg-tab:hover  { color: #1a8ec4; }
.feed-tab.tg-tab.active { color: #26A5E4; border-bottom-color: #26A5E4; }
.feed-tab.tg-tab.active .feed-tab-icon { opacity: 1; }


/* ── Страница tg_feed.php — шапка ───────────────────────────── */
.tg-page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--rule);
}
.tg-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
}
.tg-channels-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
.tg-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--ch-color, #26A5E4) 12%, transparent);
    color: var(--ch-color, #26A5E4);
    border: 1px solid color-mix(in srgb, var(--ch-color, #26A5E4) 28%, transparent);
    text-decoration: none;
    transition: background .18s;
}
.tg-pill:hover {
    background: color-mix(in srgb, var(--ch-color, #26A5E4) 22%, transparent);
}


/* ── CSS Masonry для tg_feed.php ─────────────────────────────── */
/* Суть: columns раскладывает items сверху вниз по колонкам,
   каждый item занимает ровно столько высоты, сколько нужно embed'у.
   Никаких дыр, никаких обрезаний. */
.tg-masonry {
    column-count: 3;        /* всегда ровно 3 на десктопе */
    column-gap: 22px;
}
.tg-masonry-item {
    break-inside: avoid;    /* не разрывать карточку между колонками */
    margin-bottom: 22px;
}

/* Обёртка embed-карточки */
.tg-embed-wrap {
    background: var(--paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(11,45,110,.07), 0 4px 20px rgba(11,45,110,.05);
    transition: box-shadow var(--med) var(--ease);
    position: relative;
}
.tg-embed-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #26A5E4 0%, #1c86c9 100%);
    z-index: 1;
}
.tg-embed-wrap:hover {
    box-shadow: 0 4px 20px rgba(38,165,228,.14), 0 12px 40px rgba(11,45,110,.08);
}

.tg-embed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 6px;
}
.tg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}
.tg-channel-link {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ch-color, #26A5E4);
    text-decoration: none;
    line-height: 1.2;
}
.tg-channel-link:hover { text-decoration: underline; }
.tg-channel-username {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 400;
    margin-top: 1px;
}
.tg-embed-widget {
    padding: 0 6px 8px;
}


/* ── Нативная TG-карточка в общей ленте новостей ─────────────── */
/* Стилизована идентично .news-card — единая стена с новостями   */
.tg-native-card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(11,45,110,.06), 0 4px 16px rgba(11,45,110,.04);
    transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
    position: relative;
    text-decoration: none;
    color: inherit;
}
.tg-native-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #26A5E4 0%, #1c86c9 100%);
    opacity: 0;
    transition: opacity var(--fast) var(--ease);
}
.tg-native-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(38,165,228,.12), 0 12px 40px rgba(11,45,110,.08);
}
.tg-native-card:hover::before { opacity: 1; }

/* Картинка — такие же пропорции как у news-card */
.tg-native-img {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    flex-shrink: 0;
}
.tg-native-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--med) var(--ease);
}
.tg-native-card:hover .tg-native-img img { transform: scale(1.04); }

/* Заглушка без картинки */
.tg-native-noimg {
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d6eef8 0%, #b3dcf0 100%);
    flex-shrink: 0;
    opacity: .6;
}

/* Бейдж TG */
.tg-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #26A5E4;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 10px;
}

/* Тело карточки */
.tg-native-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.tg-native-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tg-native-channel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ch-color, #26A5E4);
}
.tg-avatar-sm {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}
.tg-native-date {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.tg-native-text {
    font-size: 0.88rem;
    line-height: 1.58;
    color: var(--body);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}


/* ── Сайдбар ─────────────────────────────────────────────────── */
.tg-sidebar-list { display: flex; flex-direction: column; }
.tg-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--body);
    transition: color .18s;
    padding-left:1.3vh;
}
.tg-sidebar-item:last-child { border-bottom: none; }
.tg-sidebar-item:hover { color: var(--navy); }
.tg-sidebar-item-info { display: flex; flex-direction: column; gap: 1px; }
.tg-sidebar-item-name { font-size: 0.87rem; font-weight: 700; }
.tg-sidebar-item-handle { font-size: 0.73rem; color: var(--muted); }
.tg-avatar-sidebar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
}


/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tg-masonry { column-count: 2; }
}
@media (max-width: 560px) {
    .tg-masonry { column-count: 1; }
    .tg-page-title { font-size: 1.1rem; }
    .tg-channels-pills { margin-left: 0; }
    .feed-tab { padding: 12px 14px; font-size: 0.82rem; }
}


/* ── Masonry для главной страницы ────────────────────────────── */
/* Hero — первая новость, на всю ширину, как раньше news-card:first-child */
.news-card-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 2px 12px rgba(11,45,110,0.08), 0 8px 32px rgba(11,45,110,0.06);
    transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
    margin-bottom: 24px;
}
.news-card-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(11,45,110,0.12), 0 16px 48px rgba(11,45,110,0.10);
}
.news-card-hero .card-img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
    border-radius: 0;
}
.news-card-hero .card-img img {
    width: 100%; height: 100%;
    object-fit: scale-down;
    object-position: center;
}
.news-card-hero .card-body {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-card-hero .card-title {
    font-size: 1.55rem;
    line-height: 1.4;
    -webkit-line-clamp: 4;
}
.news-card-hero .card-excerpt {
    display: block;
    -webkit-line-clamp: 4;
}

/* Masonry-сетка для остальных карточек.
   Внутри main-wrap с сайдбаром (~300px) → 2 колонки максимум */
.news-masonry {
    columns: 300px;
    column-gap: 24px;
}
.news-masonry-item {
    break-inside: avoid;
    margin-bottom: 24px;
}
/* Карточки внутри masonry занимают полную ширину колонки */
.news-masonry-item .news-card,
.news-masonry-item .tg-native-card {
    width: 100%;
}

@media (max-width: 900px) {
    .news-masonry { columns: 1; }
    .tg-masonry { column-count: 2; }
    .news-card-hero {
        grid-template-columns: 1fr;
    }
    .news-card-hero .card-img { min-height: 200px; }
    .news-card-hero .card-body { padding: 24px; }
    .news-card-hero .card-title { font-size: 1.25rem; }
    .news-card-hero .card-excerpt { display: none; }
}
@media (max-width: 560px) {
    .news-masonry { columns: 1; }
    .tg-masonry { column-count: 1; }
}