/* ============================================================
   smi24 — public site styles
   Google News + Arts-style: різноманітні секції, плоскі картки,
   кольорові акценти, FontAwesome-іконки.
   ============================================================ */

:root {
    /* Палітра */
    --c-bg:           #fdfeff;
    --c-bg-2:         #eef1f6;
    --c-surface:      #ffffff;
    --c-surface-2:    #f8f9fa;
    --c-surface-3:    #f1f3f5;
    --c-border:       #e5e7eb;
    --c-border-soft:  #eef0f3;
    --c-text:         #1a1a1a;
    --c-text-dim:     #5f6368;
    --c-text-soft:    #80868b;
    --c-link:         #1a73e8;
    --c-link-hover:   #1557b0;
    --c-accent:       #1a73e8;
    --c-accent-soft:  #e8f0fe;

    /* Палітра категорій (для фолбеків) */
    --c-green:    #34a853;
    --c-yellow:   #fbbc04;
    --c-red:      #ea4335;
    --c-violet:   #9334e8;
    --c-teal:     #00897b;
    --c-orange:   #f4511e;

    --c-shadow:       0 1px 2px rgba(60,64,67,.04);
    --c-shadow-hov:   0 1px 3px rgba(60,64,67,.08);

    /* Шрифт */
    --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Розміри */
    --container-w:    1280px;
    --container-narrow:1100px;
    --radius:         12px;
    --radius-sm:      8px;
    --gap:            16px;
    --gap-lg:         24px;
    --gap-xl:         32px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--c-text); color: var(--c-surface);
    padding: 10px 16px; border-radius: 0 0 6px 0;
    z-index: 100; font-weight: 600;
}
.skip-link:focus { left: 0; }

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-link-hover); }
button { font: inherit; }

/* ============================================================
   HEADER — Google News стиль
   ============================================================ */
.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 50;
}

/* Одна лінійка: лого ліворуч, таби праворуч */
.site-header__bar {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--c-text);
    flex-shrink: 0;
}
.site-header__brand:hover { color: var(--c-text); }

.site-header__logo {
    display: block;
    height: 36px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.locale-link {
    display: inline-flex; align-items: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    color: var(--c-text-dim);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.locale-link:hover    { background: var(--c-surface-2); color: var(--c-text); }
.locale-link.is-active { background: var(--c-accent-soft); color: var(--c-accent); }

.site-header__actions { display: flex; gap: 4px; margin-left: 8px; }
.icon-btn {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--c-text-dim);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }

.site-header__menu-toggle {
    display: none;
    width: 40px; height: 40px;
    border: 0; background: transparent;
    cursor: pointer;
    padding: 8px;
}
.site-header__menu-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--c-text); margin: 4px auto;
    border-radius: 2px;
}

/* Таб-навігація — інлайн праворуч у шапці */
.site-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    min-width: 0;
}
.site-tabs::-webkit-scrollbar { height: 4px; width: 0; }
.site-tabs::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

/* Таби-пігулки (Google News / app-style) */
.tab-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 16px;
    color: var(--c-text-dim);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft);
    border-radius: 999px;
    transition: color .12s, background .12s, border-color .12s;
}
.tab-link:hover { color: var(--c-text); background: var(--c-surface-3); }
.tab-link.is-active {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.tab-sep { display: none; }

/* Legacy chips (на випадок, якщо десь лишилися) */
.site-header__chips { display: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.site-main {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 24px;
}

.row-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--gap-lg);
    align-items: start;
}
@media (max-width: 1024px) {
    .row-2col { grid-template-columns: 1fr; }
}

/* ============================================================
   PANEL (загальна біла обгортка секції)
   ============================================================ */
.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 20px 24px;
}
.panel + .panel { margin-top: var(--gap-lg); }
.panel--flush { padding: 0; overflow: hidden; }

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.panel-header__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--c-link);
    letter-spacing: -0.01em;
}
.panel-header__title.is-plain { color: var(--c-text); }
.panel-header__title a { color: inherit; }
.panel-header__title .fa-chevron-right {
    font-size: 14px;
    margin-left: 4px;
    opacity: 0.8;
}
.panel-header__actions {
    display: flex; align-items: center; gap: 6px;
    color: var(--c-text-dim);
}

/* Section title (плейн, без панелі) */
.section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

/* ============================================================
   SOURCE BULLET (• Категорія)
   ============================================================ */
.src-bullet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
}
.src-bullet:hover { color: var(--c-link); }
.src-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--c-text-soft);
    flex-shrink: 0;
}
.src-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-text-soft);
    color: #fff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}
.src-name { line-height: 1; }
.verified-badge {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: var(--c-accent);
    vertical-align: middle;
    margin-left: 1px;
}

/* ============================================================
   CARD — універсальна
   ============================================================ */
.card {
    background: var(--c-surface);
    overflow: hidden;
    transition: transform .15s;
}
.card__link { display: block; color: inherit; }
.card__link:hover { color: inherit; }
.card__link:hover .card__title { color: var(--c-link); }

.card__media {
    aspect-ratio: 16 / 9;
    background: var(--c-surface-2);
    overflow: hidden;
    border-radius: var(--radius-sm);
    position: relative;
}
.card__media--empty { background: linear-gradient(135deg, var(--c-surface-2), var(--c-border-soft)); }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card__link:hover .card__img { transform: scale(1.03); }

.card__body { padding: 12px 0 0; }

.card__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: var(--c-text-soft);
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.card__date::before { content: '·'; margin-right: 4px; opacity: 0.7; }
.card__author { color: var(--c-text); font-weight: 600; }
.card__author::before { content: '·'; margin-right: 4px; opacity: 0.7; font-weight: 400; color: var(--c-text-soft); }

.card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.card__excerpt {
    color: var(--c-text-dim);
    font-size: 14px; line-height: 1.5;
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hero / Lead — у Google News це велика картка ліворуч в lead-stack */
.card--lead .card__media { aspect-ratio: 4 / 3; }
.card--lead .card__title { font-size: 22px; line-height: 1.25; font-weight: 700; -webkit-line-clamp: 4; margin-top: 12px; }
.card--lead .card__meta  { margin-top: 12px; }

/* Hero — велика картка для категорійної шапки */
.card--hero .card__media { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.card--hero .card__title { font-size: 26px; font-weight: 700; line-height: 1.25; -webkit-line-clamp: 3; }

/* List row — заголовок зліва, маленький thumb справа */
.card--list-row { padding: 0; }
.card--list-row .card__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 16px;
    align-items: start;
    padding: 16px 0;
    border-top: 1px solid var(--c-border-soft);
}
.card--list-row:first-child .card__link { border-top: 0; padding-top: 0; }
.card--list-row .card__media {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    width: 110px;
}
.card--list-row .card__body {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.card--list-row .card__title {
    font-size: 16px;
    -webkit-line-clamp: 3;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
}
.card--list-row .card__meta { margin-bottom: 8px; }
.card--list-row.no-media .card__link {
    grid-template-columns: 1fr;
}
.card--list-row.no-media .card__media { display: none; }

/* List row — дзеркало: картинка ліворуч, текст праворуч */
.card--list-row-left .card__link { grid-template-columns: 110px minmax(0, 1fr); }
.card--list-row-left .card__media { grid-column: 1; }
.card--list-row-left .card__body  { grid-column: 2; }

/* Wide — широка картка: зображення зверху на всю ширину + джерело/заголовок під ним */
.card--wide { background: transparent; }
.card--wide .card__media { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); }
.card--wide .card__body  { padding: 12px 2px 0; }
.card--wide .card__title { font-size: 20px; font-weight: 700; line-height: 1.3; -webkit-line-clamp: 3; }

/* Головна і категорія — контентна колонка 900px (десктоп) */
.home-wrap, .category-wrap { max-width: 900px; margin: 0 auto; }
/* Розмежувач між секціями (та сама тонка лінія, що й між новинами) */
.home-section { padding-bottom: 24px; border-bottom: 1px solid #1717181f; }
/* Блоки новин/креативів без додаткової заливки — зливаються з фоном сайту */
.home-wrap .panel, .category-wrap .panel { background: transparent; border: 0; padding: 0; }

/* Циклічний фід головної (1 широка + 4 картинка-ліворуч) — рядки з тонким розділювачем */
.home-feed__items { display: flex; flex-direction: column; margin-bottom: 32px; }
.home-feed__items > * {
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid #1717181f;
}
.home-feed__items > *:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.home-feed .card--list-row .card__link { border-top: 0; padding: 0; }
/* широкий банер — без внутрішнього відступу/лінії знизу (лишаємо лише зовнішній gap) */
.home-feed__items > .featured-banner { padding-bottom: 0; border-bottom: 0; }

/* Секція 2: 2 новини «картинка ліворуч» у панелі */
.home-rows { display: flex; flex-direction: column; }
.home-rows > * {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #1717181f;
}
.home-rows > *:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.home-rows .card--list-row .card__link { border-top: 0; padding: 0; }

/* Рядки «картинка ↔ текст» у фіді/секції-2 — пропорції під колонку 900px */
.home-feed .card--list-row .card__link,
.home-rows  .card--list-row .card__link {
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 16px;
    align-items: start;
}
.home-feed .card--list-row-left .card__link,
.home-rows  .card--list-row-left .card__link {
    grid-template-columns: 140px minmax(0, 1fr);
}
.home-feed .card--list-row .card__media,
.home-rows  .card--list-row .card__media {
    width: 140px;
    aspect-ratio: 16 / 9;
}
.home-feed .card--list-row .card__title,
.home-rows  .card--list-row .card__title {
    font-size: 16px;
    -webkit-line-clamp: 3;
}

/* Десктоп ≥961 (сітка-3 = 3 колонки): фото в рядках = ширині картки сітки секції-3.
   Діє і для секції 2 (.home-rows), і для циклічної стрічки (.home-feed). */
@media (min-width: 961px) {
    .home-feed .card--list-row .card__link,
    .home-rows  .card--list-row .card__link {
        grid-template-columns: minmax(0, 1fr) calc((100% - 2 * var(--gap)) / 3);
        gap: var(--gap);
    }
    .home-feed .card--list-row-left .card__link,
    .home-rows  .card--list-row-left .card__link {
        grid-template-columns: calc((100% - 2 * var(--gap)) / 3) minmax(0, 1fr);
    }
    .home-feed .card--list-row .card__media,
    .home-rows  .card--list-row .card__media { width: 100%; }
    .home-feed .card--list-row .card__title,
    .home-rows  .card--list-row .card__title { font-size: 20px; line-height: 1.3; }
}
/* Планшет 641–960 (сітка-3 = 2 колонки) */
@media (min-width: 641px) and (max-width: 960px) {
    .home-feed .card--list-row .card__link,
    .home-rows  .card--list-row .card__link {
        grid-template-columns: minmax(0, 1fr) calc((100% - var(--gap)) / 2);
        gap: var(--gap);
    }
    .home-feed .card--list-row-left .card__link,
    .home-rows  .card--list-row-left .card__link {
        grid-template-columns: calc((100% - var(--gap)) / 2) minmax(0, 1fr);
    }
    .home-feed .card--list-row .card__media,
    .home-rows  .card--list-row .card__media { width: 100%; }
    .home-feed .card--list-row .card__title,
    .home-rows  .card--list-row .card__title { font-size: 18px; line-height: 1.3; }
}

/* duo — два вертикальні поруч (картинка зверху, текст знизу) */
.feed-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card--duo .card__media { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
.card--duo .card__body  { padding: 8px 0 0; }
.card--duo .card__title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 3; }
.card--duo .src-logo { width: 18px; height: 18px; font-size: 8px; }
.card--duo .card__meta { font-size: 11px; }

/* Compact — використовується у бокових панелях, flex-layout (thumb справа, текст зліва) */
.card--compact { padding: 0; }
.card--compact .card__link {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid var(--c-border-soft);
}
.card--compact:first-child .card__link { border-top: 0; padding-top: 0; }
.card--compact .card__body {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card--compact .card__media {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    order: 2;
    aspect-ratio: auto;
}
.card--compact .card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.card--compact .card__meta { font-size: 11px; margin: 0 0 2px; }
.card--compact.no-media .card__media { display: none; }

/* Small (стара назва, лишаю для article sidebar) */
.card--small { padding: 0; background: transparent; }
.card--small .card__media { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
.card--small .card__title { font-size: 14px; -webkit-line-clamp: 3; }
.card--small .card__body { padding: 8px 0 0; }

/* Normal (для feed-grid) — обводимо плоско */
.card--normal {
    background: transparent;
    border: 0;
    padding: 0;
}
/* менший логотип-чіп у вузьких картках */
.card--compact .src-logo,
.card--list-row .src-logo { width: 18px; height: 18px; font-size: 8px; }
.card--normal .card__media { border-radius: var(--radius-sm); }
.card--normal .card__body { padding: 10px 2px 0; }

/* Картки без рамки (lead/hero/small) — підйом самого медіа */
.card--lead .card__media,
.card--hero .card__media,
.card--small .card__media {
    box-shadow: var(--c-shadow);
    transition: box-shadow .15s, transform .15s;
}
.card--lead .card__link:hover .card__media,
.card--hero .card__link:hover .card__media,
.card--small .card__link:hover .card__media {
    box-shadow: var(--c-shadow-hov);
    transform: translateY(-2px);
}

/* Галочка верифікації у шапці статті */
.article-head__category .verified-badge { font-size: 16px; }

/* ============================================================
   YOUTUBE PLAY OVERLAY (тільки візуально, без JS)
   ============================================================ */
.play-overlay {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 40px;
    background: #ff0000;
    border-radius: 11px;
    pointer-events: none;
    transition: background .15s, transform .15s;
    z-index: 1;
}
.play-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0; height: 0;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: translateX(2px); /* оптично центруємо трикутник */
}
.card__link:hover .play-overlay,
.mosaic-tile:hover .play-overlay {
    background: #cc0000;
    transform: scale(1.06);
}

/* Великий варіант (mosaic-tile--big, hero) */
.play-overlay--lg {
    width: 80px;
    height: 56px;
    border-radius: 14px;
}
.play-overlay--lg::after {
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}

/* Малий варіант (list-row, compact) */
.play-overlay--sm {
    width: 36px;
    height: 26px;
    border-radius: 7px;
}
.play-overlay--sm::after {
    border-left: 10px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

/* ============================================================
   GRIDS
   ============================================================ */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Lead-stack: ліворуч велика картка, праворуч стек з кількох рядків */
.lead-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--gap-lg);
    align-items: start;
}
.lead-stack__main { min-width: 0; }
.lead-stack__list { min-width: 0; }
@media (max-width: 720px) {
    .lead-stack { grid-template-columns: 1fr; }
}

/* Десктоп: ліва картка — акуратне hero-фото 16:9 + заголовок під ним;
   праві 3 новини рівномірно заповнюють ту саму висоту (без розтягування фото). */
@media (min-width: 721px) {
    .lead-stack { align-items: stretch; }
    .lead-stack__main .card--lead .card__media { aspect-ratio: 16 / 9; }
    .lead-stack__list { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
}

/* Розділювач між блоками */
.divider {
    height: 1px;
    background: var(--c-border-soft);
    margin: var(--gap-lg) 0;
}

/* Гарненький pill-link "Zobraziť viac" */
.btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--c-surface-3);
    color: var(--c-text);
    border: 1px solid var(--c-border-soft);
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    transition: background .12s, border-color .12s;
}
.btn-more:hover {
    background: #e8eaef;
    color: var(--c-text);
    border-color: var(--c-border);
}
.btn-more .fa-newspaper { color: var(--c-accent); }

/* ============================================================
   NEWS MOSAIC — image-fill tiles, 1 big + 4 medium
   ============================================================ */
.news-mosaic-section { margin-bottom: var(--gap-lg); }

.news-mosaic {
    display: grid;
    gap: 12px;
    min-height: 460px;
}
.news-mosaic--5 {
    grid-template-columns: 1.45fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a b c"
        "a d e";
}
.news-mosaic--5 > :nth-child(1) { grid-area: a; }
.news-mosaic--5 > :nth-child(2) { grid-area: b; }
.news-mosaic--5 > :nth-child(3) { grid-area: c; }
.news-mosaic--5 > :nth-child(4) { grid-area: d; }
.news-mosaic--5 > :nth-child(5) { grid-area: e; }

.news-mosaic--4 {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a b c"
        "a d d";
}
.news-mosaic--4 > :nth-child(1) { grid-area: a; }
.news-mosaic--4 > :nth-child(2) { grid-area: b; }
.news-mosaic--4 > :nth-child(3) { grid-area: c; }
.news-mosaic--4 > :nth-child(4) { grid-area: d; }

.news-mosaic--3 {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a b"
        "a c";
}
.news-mosaic--3 > :nth-child(1) { grid-area: a; }
.news-mosaic--3 > :nth-child(2) { grid-area: b; }
.news-mosaic--3 > :nth-child(3) { grid-area: c; }

.news-mosaic--2 {
    grid-template-columns: 1.2fr 1fr;
    min-height: 320px;
}

.news-mosaic--1 {
    grid-template-columns: 1fr;
    min-height: 360px;
}

.mosaic-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-surface-2);
    color: #fff;
    display: block;
    isolation: isolate;
    min-height: 220px;
    transition: transform .25s ease;
}
.mosaic-tile:hover { transform: translateY(-2px); color: #fff; }
.mosaic-tile:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.mosaic-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.mosaic-tile:hover .mosaic-tile__img { transform: scale(1.04); }
.mosaic-tile__img--empty {
    background: linear-gradient(135deg, var(--c-surface-3), var(--c-border));
}

.mosaic-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
}

.mosaic-tile__overlay {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mosaic-tile__chip {
    align-self: flex-start;
    display: inline-block;
    background: var(--c-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* Рядок джерела в overlay мозаїки (логотип + назва + галочка) */
.mosaic-tile__source {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.mosaic-tile__source .verified-badge { fill: #fff; }

.mosaic-tile__title {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mosaic-tile--big {
    min-height: 460px;
}
.mosaic-tile--big .mosaic-tile__overlay {
    left: 24px;
    right: 24px;
    bottom: 24px;
    gap: 10px;
}
.mosaic-tile--big .mosaic-tile__title {
    font-size: 26px;
    -webkit-line-clamp: 4;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.mosaic-tile__date {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

@media (max-width: 900px) {
    .news-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: none;
        min-height: 0;
    }
    .news-mosaic > * {
        grid-area: auto !important;
        min-height: 180px;
    }
    .news-mosaic > :nth-child(1) {
        grid-column: 1 / -1;
        min-height: 280px;
    }
    .mosaic-tile--big { min-height: 280px; }
    .mosaic-tile--big .mosaic-tile__title { font-size: 22px; }
}
@media (max-width: 520px) {
    .news-mosaic { grid-template-columns: 1fr; }
    .news-mosaic > * { min-height: 200px; }
    .news-mosaic > :nth-child(1) { min-height: 240px; }
}

/* ============================================================
   COMPACT PANEL (правий блок Vybrané pre teba)
   ============================================================ */
.compact-panel .panel-header { padding-bottom: 8px; border-bottom: 1px solid var(--c-border-soft); }
.compact-panel__list { display: block; padding-top: 4px; }

/* ============================================================
   CATEGORY TILES
   ============================================================ */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.tile {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff;
    background: var(--c-accent);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform .2s, box-shadow .2s;
}
.tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    color: #fff;
}
.tile__icon {
    position: absolute;
    top: 14px; right: 14px;
    font-size: 36px;
    opacity: 0.35;
}
.tile__icon-big {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 80px;
    opacity: 0.16;
    pointer-events: none;
}
.tile__label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.tile__sub {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 4px;
}

/* ============================================================
   FEATURED BANNER (full-bleed кольоровий блок)
   ============================================================ */
.featured-banner {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff;
    background: var(--c-accent);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: stretch;
    min-height: 280px;
}
.featured-banner__body {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.featured-banner__eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.85;
    font-weight: 600;
}
.featured-banner__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #fff;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-banner__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-banner__cta {
    align-self: flex-start;
    margin-top: 8px;
    background: #fff;
    color: var(--c-text);
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    transition: transform .12s, box-shadow .12s;
}
.featured-banner__cta:hover { color: var(--c-text); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.featured-banner__cta .fa-arrow-right { margin-left: 6px; }

.featured-banner__media {
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,0.18);
    background-size: cover;
    background-position: center;
}
.featured-banner__media-img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {
    .featured-banner { grid-template-columns: 1fr; }
    .featured-banner__media { aspect-ratio: 16 / 9; order: -1; }
    .featured-banner__title { font-size: 22px; }
    .featured-banner__body { padding: 24px; }
}

/* ============================================================
   HORIZONTAL SCROLLER
   ============================================================ */
.scroller-section { position: relative; }
.scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.scroller > * { scroll-snap-align: start; min-width: 0; }
.scroller::-webkit-scrollbar { height: 8px; }
.scroller::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

/* ============================================================
   CATEGORY HERO
   ============================================================ */
.category-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 8px 0 var(--gap-lg);
    flex-wrap: wrap;
    background: var(--c-surface);
    border: 1px solid var(--c-border-soft);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: var(--c-shadow);
}
.category-hero__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--c-accent);
    font-size: 26px;
    flex-shrink: 0;
}
.category-hero__title {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--c-text);
    flex: 1;
    min-width: 200px;
}
.category-hero__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn-outline:hover { background: var(--c-surface-2); border-color: #c9cdd3; color: var(--c-text); }
.btn-outline .fa-solid { color: var(--c-text-dim); }

.category-hero__info {
    flex-basis: 100%;
    color: var(--c-text-dim);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.category-hero__info i { color: var(--c-text-soft); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
    display: flex; gap: 8px; align-items: center;
    font-size: 13px;
    color: var(--c-text-dim);
    margin-bottom: 8px;
}
.breadcrumbs a { color: var(--c-text-dim); }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs__sep { opacity: 0.6; }
.breadcrumbs__current { color: var(--c-text); font-weight: 600; }

/* ============================================================
   FEED GRID (для load-more)
   ============================================================ */
/* feed-grid — layout-контейнер (біла панель усередині = .feed-main) */
.feed-grid { align-items: start; }
.feed-main > .panel-header { padding-bottom: 8px; border-bottom: 1px solid var(--c-border-soft); margin-bottom: var(--gap); }
.feed-grid__items { margin-bottom: var(--gap-lg); }

/* Список новин у стилі TSN (list-rows стопкою) */
.feed-list .card--list-row { padding: 0; }

/* Правий рейл основної стрічки */
.feed-rail {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    align-self: start;
}
/* Банер у вузькому рейлі — в одну колонку */
.feed-rail .featured-banner { grid-template-columns: 1fr; min-height: 0; }
.feed-rail .featured-banner__body { padding: 20px 22px; }
.feed-rail .featured-banner__media { min-height: 160px; }

/* Повноширинна сіра смуга для тематичних секцій (як «В тренді» у TSN) */
.section-band {
    margin: 0 0 24px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--c-bg-2);
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 1px solid var(--c-border-soft);
    padding: 24px 0;
}
.section-band__inner {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 24px;
}
.section-band .panel,
.section-band .scroller-section { background: transparent; border: 0; padding: 0; }

.feed-more { display: flex; justify-content: center; padding: 4px 0 0; }
.btn-load-more {
    appearance: none;
    border: 1px solid var(--c-border-soft);
    background: var(--c-surface-3);
    color: var(--c-text);
    padding: 12px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    transition: background .12s, border-color .12s, transform .1s;
}
.btn-load-more:hover  { background: #e8eaef; border-color: var(--c-border); }
.btn-load-more:active { transform: translateY(1px); }
.btn-load-more:disabled { opacity: 0.6; cursor: default; }
.btn-load-more .fa-newspaper { color: var(--c-accent); }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-page {
    background: var(--c-surface);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    padding: 32px 40px 40px;
    max-width: 900px;
    margin: 0 auto;
}

.article-head { max-width: 760px; margin: 0 auto 24px; }
.article-head__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-text);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 14px;
}
.article-head__category:hover { color: var(--c-link); }
.article-head__category::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--cat-color, var(--c-accent));
}
.article-head__title {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}
.article-head__meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    color: var(--c-text-dim);
    font-size: 14px;
    margin-bottom: 16px;
}
.article-head__author { color: var(--c-text); font-weight: 600; }
.article-head__sep { opacity: 0.5; }

.article-media {
    margin: 0 0 32px;
    border-radius: var(--radius);
    overflow: hidden;
}
.article-media__img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.article-media__yt {
    position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer;
}
.article-media__yt .article-media__img { aspect-ratio: 16 / 9; opacity: 0.85; transition: opacity .2s; }
.article-media__yt:hover .article-media__img { opacity: 1; }
.article-media__play {
    position: absolute; inset: 0; margin: auto;
    width: 80px; height: 56px;
    background: #ff0000;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    transition: background .15s, transform .15s;
}
.article-media__yt:hover .article-media__play { background: #cc0000; transform: scale(1.05); }
.article-media__play::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 0; height: 0;
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    margin-bottom: 40px;
}

.article-body {
    font-size: 18px;
    line-height: 1.7;
    color: var(--c-text);
    max-width: 720px;
    margin: 0 auto;
}
.article-body p { margin: 0 0 1.2em; }
.article-body h2 { font-size: 26px; margin: 1.6em 0 .6em; line-height: 1.3; }
.article-body h3 { font-size: 21px; margin: 1.4em 0 .5em; line-height: 1.35; }
.article-body img { border-radius: var(--radius-sm); margin: 1em auto; max-width: 100%; height: auto; }
.article-body blockquote {
    margin: 1.5em 0;
    padding: 0 1.2em;
    border-left: 4px solid var(--c-accent);
    color: var(--c-text-dim);
    font-style: italic;
}
.article-body a { color: var(--c-link); }
.article-body a:hover { text-decoration: underline; }

.article-sidebar {
    display: flex; flex-direction: column; gap: 14px;
    align-self: start;
    position: sticky; top: 110px;
    padding: 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.article-sidebar__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-soft);
    margin-bottom: 4px;
    display: inline-flex; align-items: center; gap: 6px;
}
.article-sidebar__label i { color: var(--c-accent); }

/* Inline injected block (натив у тілі статті) */
.inline-block {
    display: block;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    margin: 1.6em 0;
    overflow: hidden;
    transition: border-color .15s;
}
.inline-block:hover { border-color: var(--c-border); }
.inline-block__link {
    display: grid; grid-template-columns: 200px 1fr; gap: 0;
    color: inherit; align-items: stretch; min-height: 144px;
}
.inline-block__link:hover { color: inherit; }
/* Медіа тягнеться на всю висоту блока (висоту задає grid) — картинка дотягується
   до обох заокруглених кутів, без порожнечі знизу. aspect-ratio лишаємо тільки для мобайлу. */
.inline-block__media { overflow: hidden; }
/* .article-body-скоуп — щоб перебити загальні .article-body img / h3 (інакше течуть margin/radius/font) */
.article-body .inline-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.inline-block__body { padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.article-body .inline-block__title {
    font-size: 17px;
    line-height: 1.35;
    margin: 0;
    font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.inline-block__cta {
    color: var(--c-accent);
    font-weight: 600;
    font-size: 14px;
}

.article-related, .article-more { margin-top: 32px; }

/* Стрічка під статтею (цикл: 3× фото-ліворуч → 3× сітка → 1× банер) */
.article-feed { margin-top: 32px; }
.article-feed > * {
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid #1717181f;
}
.article-feed > *:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
/* банер — самодостатній блок, без внутрішнього розділювача */
.article-feed > .featured-banner { padding-bottom: 0; border-bottom: 0; }

.next-article-sentinel { height: 1px; }

/* Separator між статтями при infinite scroll */
.article-page + .article-page {
    margin-top: 40px;
}

/* ============================================================
   SHARE
   ============================================================ */
.share { display: inline-flex; gap: 6px; }
.share__btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-dim);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background .15s, color .15s, transform .15s;
}
.share__btn:hover { background: var(--c-surface-2); color: var(--c-text); transform: translateY(-1px); }
.share__btn--fb:hover  { color: #1877f2; border-color: rgba(24,119,242,.3); }
.share__btn--wa:hover  { color: #25d366; border-color: rgba(37,211,102,.3); }
.share__btn--tg:hover  { color: #2aabee; border-color: rgba(42,171,238,.3); }
.share__btn--copy.is-copied { background: var(--c-accent-soft); color: var(--c-accent); border-color: rgba(26,115,232,.3); }

/* ============================================================
   FOOTER — Google-style minimalist
   ============================================================ */
.site-footer {
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    margin-top: 48px;
    padding: 32px 24px 24px;
}
.site-footer__inner {
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--gap-lg);
}
.site-footer__col-brand { display: flex; flex-direction: column; gap: 8px; }
.site-footer__brand-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-text);
}
.site-footer__tagline {
    color: var(--c-text-dim);
    font-size: 14px;
    line-height: 1.5;
    max-width: 360px;
}
.site-footer__col-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-soft);
    margin: 0 0 12px;
}
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__links a {
    color: var(--c-text-dim);
    font-size: 14px;
}
.site-footer__links a:hover { color: var(--c-link); }

.site-footer__bottom {
    max-width: var(--container-w);
    margin: 24px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--c-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--c-text-soft);
    font-size: 13px;
}
.site-footer__locales { display: inline-flex; gap: 4px; margin-left: auto; }
.site-footer__locales .locale-link {
    display: inline-flex; align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    color: var(--c-text-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
}
.site-footer__locales .locale-link:hover    { background: var(--c-surface-2); color: var(--c-text); }
.site-footer__locales .locale-link.is-active { background: var(--c-accent-soft); color: var(--c-accent); }

@media (max-width: 800px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   404
   ============================================================ */
.error-404 {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 80px 24px;
    text-align: center;
}
.error-404__code  { font-size: 96px; font-weight: 800; color: var(--c-accent); line-height: 1; letter-spacing: -0.04em; }
.error-404__title { margin: 16px 0 12px; font-size: 28px; font-weight: 800; }
.error-404__text  { color: var(--c-text-dim); margin: 0 0 32px; font-size: 16px; }
.error-404__cta   {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--c-accent); color: #fff;
    border-radius: 999px; font-weight: 600; font-size: 15px;
}
.error-404__cta:hover { background: var(--c-link-hover); color: #fff; }

/* Empty state */
.empty-state {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 60px 24px;
    text-align: center;
}
.empty-state p { color: var(--c-text-dim); font-size: 16px; margin: 0 0 20px; }
.btn-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: var(--c-accent); color: #fff;
    border-radius: 999px; font-weight: 600;
}
.btn-back:hover { background: var(--c-link-hover); color: #fff; }

/* Placeholder boxes (used by 404/empty/etc.) */
.home-placeholder, .article-placeholder, .category-placeholder {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 40px 24px;
    text-align: center;
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skel {
    background: linear-gradient(
        90deg,
        var(--c-surface-2) 0%,
        var(--c-border) 50%,
        var(--c-surface-2) 100%
    );
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.card--skeleton {
    pointer-events: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0;
}
.card--skeleton .card__media { background: var(--c-surface-2); border-radius: 0; }
.card--skeleton .card__media .skel { width: 100%; height: 100%; border-radius: 0; }
.card--skeleton .card__body { padding: 14px 16px 16px; }
.card--skeleton .skel--line { height: 14px; margin-bottom: 8px; }
.card--skeleton .skel--line:last-child { width: 60%; margin-bottom: 0; }

.feed-skeleton {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--gap-lg);
}
@media (max-width: 960px) { .feed-skeleton { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feed-skeleton { grid-template-columns: 1fr; } }

.article-skeleton {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 32px 40px 40px;
    max-width: var(--container-narrow);
    margin: 40px auto 0;
}
.article-skeleton__title { height: 32px; max-width: 560px; margin-bottom: 16px; }
.article-skeleton__meta  { height: 12px; max-width: 220px; margin-bottom: 24px; }
.article-skeleton__media { aspect-ratio: 16/9; margin-bottom: 24px; border-radius: var(--radius-sm); }
.article-skeleton__line  { height: 14px; margin-bottom: 10px; }
.article-skeleton__line:nth-child(5) { width: 80%; }
.article-skeleton__line:nth-child(7) { width: 60%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .article-head__title { font-size: 32px; }
}

@media (max-width: 1024px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { position: static; }
}

@media (max-width: 640px) {
    .site-header__bar { padding: 10px 12px; gap: 12px; }
    .site-header__logo { height: 30px; max-width: 130px; }
    .locale-link { padding: 0 7px; font-size: 11px; height: 28px; }
    .tab-link { padding: 7px 13px; font-size: 13px; }
    .site-main { padding: 16px; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .panel { padding: 16px; }
    .feed-grid { padding: 16px; }
    .article-page, .article-skeleton { padding: 20px 16px; border-radius: 0; border-left: 0; border-right: 0; }
    .article-head__title { font-size: 26px; }
    .article-body { font-size: 19px; }
    .inline-block__link { grid-template-columns: 1fr; min-height: 0; }
    .inline-block__media { aspect-ratio: 5 / 3; }
    .article-body .inline-block__title { font-size: 19px; }
    .lead-stack { gap: var(--gap); }
    .scroller { grid-auto-columns: minmax(180px, 1fr); }
    .category-hero__title { font-size: 24px; }
    .category-hero__icon { width: 52px; height: 52px; font-size: 22px; }
    .featured-banner__title { font-size: 22px; }
    .article-skeleton { padding: 20px 16px; border-radius: 0; }
}