/*
   AI Zagrożenia — Portal o zagrożeniach sztucznej inteligencji
   Design inspirowany zero.pl: minimalistyczny, modularny grid, zaokrąglone miniaturki, ciemno-biały
   Stack: Astro v6, vanilla CSS, CSS vars, mobile-first
   Wersja: 3.0 — AI Threats Edition
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Color palette — cxterto inspirowana zero.pl */
    --bg-main: #ffffff;
    --bg-card: #ffffff;
    --bg-alt: #f6f7f8;        /* neutral-light-050 z zero.pl */
    --bg-dark: #0e1114;       /* neutral-dark-900 z zero.pl */
    --bg-dark-alt: #151a22;   /* neutral-dark-800 */

    --text-main: #0e1114;     /* neutral-dark-900 */
    --text-muted: #55657b;    /* neutral-dark-200 */
    --text-light: #637289;    /* neutral-dark-100 */
    --text-on-dark: #ffffff;
    --text-on-dark-muted: #637289;

    --primary: #fb2e2e;       /* red-500 z zero.pl */
    --primary-light: #fdf0f0;
    --primary-dark: #a62222;
    --accent: #fb2e2e;        /* zero.pl używa czerwonego jako akcent */

    --border: #d3d8df;         /* neutral-light-300 */
    --border-light: #eaecf0;  /* neutral-light-100 */
    --border-dark: #202834;   /* neutral-dark-700 */

    /*zero.pl gradient overlays */
    --post-gradient: linear-gradient(180deg, #01010100, #000000bf);
    --post-blur-mask: linear-gradient(180deg, #0000, #000 60%, #000);
    --hero-gradient: linear-gradient(180deg, rgba(9,11,12,0.7) 0%, rgba(9,11,12,0.5) 20%, transparent 45%, rgba(0,0,0,0.7) 75%, #000 95%, #000);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.05);

    /* Radius — dokładnie z zero.pl :root */
    --radius-sm: 0.25rem;      /* 4px */
    --radius-md: 0.375rem;     /* 6px */
    --radius-lg: 0.5rem;       /* 8px — zero.pl rounded-lg */
    --radius-xl: 0.75rem;      /* 12px — zero.pl rounded-xl */
    --radius-2xl: 1rem;        /* 16px — zero.pl rounded-2xl */
    --radius-3xl: 1.5rem;      /* 24px — zero.pl rounded-3xl */
    --radius-4xl: 2rem;        /* 32px — zero.pl rounded-4xl (hero bottom) */
    --radius-full: 9999px;

    /* Typography */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-hero: 2.5rem;    /* display-lg z zero.pl: 2.5rem */
    --text-display: 1.75rem;  /* display-md z zero.pl: 1.75rem */

    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;

    /* Layout — zero.pl max-w-326 = 81.5rem = 1304px */
    --container-max: 1304px;
    --header-height: 56px;  /* 3.5rem z zero.pl desktop */
    --gutter: 0.75rem;      /* container-padding = calc(spacing*3) = 0.75rem z zero.pl */

    /* Transition */
    --transition-fast: 0.15s ease;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === RESET === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    line-height: var(--leading-normal);
    overflow-x: hidden;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 600;             /* zero.pl używa font-weight 600 w nagłówkach */
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--text-main);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

img, video {
    max-width: 100%;
    display: block;
}

/* === CONTAINER === */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Header jest wewnątrz main, sticky na stronach wewn. */
.main-content {
    min-height: 60vh;
}
/* Na stronach wewn. header sticky zajmuje miejsce, nie trzeba padding-top */

/* === AI CREATOR BANNER === */
.ai-creator-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(90deg, #0e1114 0%, #1a1f24 50%, #0e1114 100%);
    color: #e8e8e8;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(251, 46, 46, 0.2);
}
.ai-creator-banner__icon {
    font-size: 0.9rem;
    line-height: 1;
}
.ai-creator-banner__text {
    opacity: 0.85;
}
@media (max-width: 640px) {
    .ai-creator-banner {
        font-size: 0.65rem;
        padding: 0.35rem 0.5rem;
    }
    .ai-creator-banner__text {
        opacity: 0.75;
    }
}

/* === HEADER — zero.pl style === */
/* zero.pl na homepage: header POD hero, w flow dokumentu. Po scroll → sticky przy górze. */
/* Na stronach wewn.: header zawsze sticky na górze. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Na homepage: header jest po hero w flow, nie na samej górze */
.main-content--home .site-header {
    position: relative;
}

/* Po scrollu JS dodaje .header-scrolled → sticky na homepage */
.main-content--home .site-header.header-scrolled {
    position: sticky;
    top: 0;
}

/* Overlay mode — nie używane, zostaje dla zgodności wstecznej */
.site-header.header-overlay {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

/* Header-home: tło zawsze białe, relative w flow (pod hero) */
.site-header.header-home {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
}

.header-wrapper {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* zero.pl: header-inner height = 3.75rem = 60px, desktop px-3 = 0.75rem = 12px */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--gutter);
    gap: 1rem;
}

/* zero.pl: logo font-weight 600, nie 800; text-size = text-display-md (1.75rem) */
.logo-link {
    display: flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    color: var(--text-main);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.logo-text { font-weight: 600; }
.logo-accent { color: var(--primary); }

/* zero.pl: nav-link = text-label-sm (0.875rem), height 2rem, font-weight 600 */
.main-navigation {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

.nav-links-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
}

.nav-links-list a {
    font-size: 0.75rem;            /* text-label-xs = 0.75rem z zero.pl (nie 0.875rem) */
    font-weight: 600;              /* font-weight 600 */
    color: var(--text-muted);
    padding: 0;                   /* zero.pl nie używa padding, używa height */
    height: 2rem;                  /* calc(spacing*8) = 2rem z zero.pl */
    display: inline-flex;
    align-items: center;
    border-bottom: none;          /* zero.pl nie używa border-bottom na hover, używa color */
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-links-list a:hover {
    color: var(--text-main);
}

/* zero.pl: btn-pill style dla "NA ŻYWO" */
.header-live {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    height: 2rem;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.header-live:hover {
    border-color: var(--text-main);
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav-toggle .line {
    width: 24px;
    height: 2px;
    background: var(--text-main);
    border-radius: 2px;
    transition: var(--transition-fast);
}

.mobile-nav-menu {
    display: none;
    padding: 1rem var(--gutter);
    background: var(--bg-main);
    border-top: 1px solid var(--border);
}

.mobile-nav-menu.hidden { display: none; }
.mobile-nav-menu:not(.hidden) { display: block; }

.mobile-nav-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-nav-menu a {
    display: block;
    padding: 0.75rem 0;
    font-weight: 500;
    border-bottom: 1px solid var(--border-light);
}

/* zero.pl: breakpoint desktop = 81.5rem = 1304px (min-width) */
@media (max-width: 1304px) {
    .main-navigation { display: none; }
    .header-live { display: none; }
    .mobile-nav-toggle { display: flex; }
}

/* === HOMEPAGE LAYOUT — zero.pl homepage-layout-v2 === */
/* zero.pl: homepage-layout-v2 = flex min-h-dvh flex-col */
.homepage-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 1rem var(--gutter) 4rem;
}

/* Layout pod hero: dwie kolumny — treść + sidebar */
/* zero.pl: section__wrapper = mx-auto mb-10 flex w-full max-w-326 gap-10 px-3 */
.homepage-below-hero {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter) 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .homepage-below-hero {
        /* zero.pl: section__aside = w-[19.0625rem] = 305px, gap-10 = 2.5rem */
        grid-template-columns: 1fr 305px;
        gap: 2.5rem;
    }
}

.homepage-below-hero__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.homepage-below-hero__sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
}
/* Najnowsze: nagłówek wyrównany z nagłówkiem sekcji po lewej (section-divider:first-child = 1px + 2rem margin) */
.homepage-below-hero__sidebar .zero-heading {
    flex-shrink: 0;
    margin-top: calc(1px + 2rem);   /* wyrównanie z nagłówkiem sekcji po lewej */
}
.homepage-below-hero__sidebar .latest-list {
    flex: 1;
}

/* Pełna szerokość — sekcje bez sidebaru */
.homepage-fullwidth {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter) 2rem;
}
@media (max-width: 1023px) {
    .homepage-below-hero__sidebar {
        order: -1;
    }
}

/* === SIDEBAR TILES — 3 kafelki nad Najnowsze === */
.sidebar-tiles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
}

.sidebar-tile {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.sidebar-tile:hover {
    opacity: 0.85;
}

.sidebar-tile .thumbnail--sm {
    margin-bottom: 0.5rem;
}

/* zero.pl: badge w lewym górnym rogu dla sidebar-tile (jak article-tile--sm) */
.sidebar-tile .thumbnail__content {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    bottom: auto;
    right: auto;
    padding: 0;
    height: auto;
    z-index: 10;
}

.sidebar-tile__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--text-main);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* zero.pl: sidebar-post = flex items-start gap-2 border-b py-3, ZERO miniatur, ZERO badge'ów */
/* zero.pl: sidebar-post__time = w-10 shrink-0, text-body-xs, font-semibold */
/* zero.pl: sidebar-post__title = text-body-sm, tracking-sidebar, font-semibold */
.latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.latest-list__item {
    /* border-bottom jest na .latest-list__link */
}
.latest-list__item:last-child .latest-list__link {
    border-bottom: none;
}

/* zero.pl: sidebar-post = border-b py-3, flex items-start gap-2 */
.latest-list__link {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;            /* gap-2 = 0.5rem */
    padding: 0.75rem 0;     /* py-3 = 0.75rem */
    width: 100%;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
    border-bottom: 1px solid var(--border-light);
}

.latest-list__link:last-child {
    border-bottom: none;
}

.latest-list__link:hover {
    opacity: 0.7;
}

/* zero.pl: sidebar-post__time = w-10 (2.5rem), shrink-0, text-body-xs, font-semibold */
.latest-list__time {
    flex-shrink: 0;
    width: 2.5rem;             /* w-10 z zero.pl = 2.5rem */
    font-size: 0.6875rem;     /* text-body-xs */
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    padding-top: 0.0625rem;
    line-height: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* zero.pl: sidebar-post__title = text-body-sm (0.875rem), tracking-sidebar, font-semibold */
.latest-list__title {
    font-size: 0.875rem;     /* text-body-sm */
    font-weight: 600;
    line-height: 1.25rem;
    margin: 0;
    color: var(--text-main);
    letter-spacing: 0.14px;  /* tracking-sidebar */
    flex: 1;
    min-width: 0;
}

/* UKRYWAMY miniatury i badge w sidebar — zero.pl ich nie ma */
.latest-list__thumb,
.latest-list__img {
    display: none !important;
}

.latest-list__content {
    flex: 1;
    min-width: 0;
}

.latest-list__date {
    display: none;
}

/* === HOME HERO — zero.pl style === */
/* zero.pl: hero = max-w-103.125rem (1650px), max-h-179 (716px), rounded-b-4xl, absolute top-0 left-1/2 -translate-x-1/2 */
.home-hero {
    position: relative;
    width: 100%;
    max-width: 1650px;        /* max-w-[103.125rem] z zero.pl */
    margin: 0 auto;
    height: 70vh;
    min-height: 500px;
    max-height: 716px;        /* max-h-179 z zero.pl */
    border-radius: 0 0 var(--radius-4xl) var(--radius-4xl);  /* rounded-b-4xl = 2rem = 32px */
    overflow: hidden;
    color: var(--text-on-dark);
}

.home-hero .article-tile--hero {
    width: 100%;
    height: 100%;
    position: relative;
}

.home-hero .thumbnail--hero {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
    position: relative;
}

/* zero.pl: hero thumbnail__content = absolute inset-x-0 bottom-0 flex h-full flex-col justify-end gap-3 */
.home-hero .thumbnail__content {
    padding: 0;     /* padding jest w article__main */
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    color: #fff;
}

/* zero.pl: hero-gradient = linear-gradient(180deg, #090b0c, #090b0c 12%, #0000 50%, #000000bf 80%, #000000bf) */
/* Hero używa CAŁOŚCI gradientu (od góry), nie tylko dolnej połowy — dla kontrastu badge u góry + tytuł u dołu */
.home-hero .thumb-overlay-color {
    background: var(--hero-gradient);
    top: 0;
    height: 100%;
    inset: 0;
}

.home-hero .thumb-overlay-blur {
    top: 50%;
    bottom: 0;
}

/* zero.pl: hero content = thumbnail__content > article__main, mx-auto max-w-326 px-3 pb-10 */
/* article__main w hero jest wewnątrz thumbnail__content (już absolute bottom-0) */
.home-hero .article__main {
    position: static;
    width: 100%;
    max-width: var(--container-max);   /* max-w-326 = 1304px */
    margin: 0 auto;
    padding: 0 var(--gutter) 1.5rem;    /* px-3 pb-6 — tytuł w lewym dolnym rogu (1.5rem = 24px od dołu) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;                       /* gap-3 */
    box-sizing: border-box;
    z-index: 20;
    text-align: left;
}

/* zero.pl: display-lg = 2.5rem, line-height 2.75rem, font-weight 600 */
.home-hero .article__main h2 {
    font-size: 2.5rem;            /* display-lg z zero.pl */
    font-weight: 600;             /* font-weight 600 (nie 700) */
    line-height: 2.75rem;         /* display-lg--line-height */
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;      /* tracking-tight */
    max-width: 46rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.4);
}

.home-hero .article__main .article__description {
    color: rgba(255,255,255,0.95);
    font-size: 1rem;
    line-height: 1.5rem;
    max-width: 40rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* zero.pl: article-badge = bg-basic-black/60, backdrop-blur-xs, text-caption-md */
.home-hero .article-badge {
    background: rgba(14, 17, 20, 0.6);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

.home-hero .article-author {
    color: rgba(255,255,255,0.85);
}

.home-hero .article-author__label {
    color: rgba(255,255,255,0.95);
}

.home-hero .article-info__item {
    color: rgba(255,255,255,0.8);
}

/* Mobile: hero na pełną wysokość */
@media (max-width: 1024px) {
    .home-hero {
        height: 60vh;
        min-height: 400px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    .home-hero .article__main h2 {
        font-size: 1.5rem;               /* display-sm na mobile = 1.5rem */
        line-height: 1.75rem;
    }
    .home-hero .article__main .article__description {
        font-size: var(--text-sm);
    }
}

/* === HERO ASIDE — 2 kafelki na hero (zero.pl style, tekst POD obrazem) === */
/* zero.pl: home-hero__aside = mr-3, max-w-[19.0625rem] = 305px */
/* zero.pl: home-hero__overlay-container = mx-auto max-w-326 items-end justify-end pb-10 */
.home-hero__aside {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 var(--gutter) 2.5rem;
    z-index: 20;
    pointer-events: none;
}

.home-hero__aside-item {
    display: flex;
    flex-direction: column;
    width: 305px;
    max-width: 100%;
    text-decoration: none;
    color: var(--text-on-dark);
    border-radius: var(--radius-xl);    /* rounded-xl = 12px z zero.pl */
    overflow: hidden;
    background: rgba(14, 17, 20, 0.6);    /* bg-basic-black/60 */
    backdrop-filter: blur(12px);           /* backdrop-blur-md = 12px */
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem;                      /* p-2 = 0.5rem */
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.home-hero__aside-item:not(:last-child) {
    margin-bottom: 0.5rem;
}

.home-hero__aside-item:hover {
    opacity: 0.85;
}

.home-hero__aside-item .thumbnail {
    aspect-ratio: 76 / 51;
    border-radius: var(--radius-lg);    /* rounded-lg = 8px */
}

/* Badge w lewym górnym rogu obrazu */
.home-hero__aside-item .thumbnail__content {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    bottom: auto;
    right: auto;
    padding: 0;
    height: auto;
    z-index: 10;
}

/* Tytuł POD obrazem */
.home-hero__aside-item .article__main {
    padding: 0.5rem 0.25rem 0.25rem;
}

.home-hero__aside-item .article-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.15rem;
    margin: 0;
    color: var(--text-on-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile: ukryj aside na hero, mniejszy border-radius */
@media (max-width: 1024px) {
    .home-hero {
        border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);  /* rounded-b-2xl = 16px na mobile */
    }
    .home-hero__aside {
        display: none;
    }
}

/* === SECTION WRAPPER — zero.pl style === */
/* zero.pl: section__wrapper = mx-auto mb-10 flex w-full max-w-326 gap-10 px-3 */
.section__wrapper {
    display: flex;
    gap: 2.5rem;          /* gap-10 = 2.5rem */
    margin-bottom: 2.5rem;  /* mb-10 */
    align-items: start;
}

/* zero.pl: section__main = w-full */
.section__main {
    flex: 1;
    min-width: 0;
}

/* zero.pl: section__aside = w-[19.0625rem] = 305px, shrink-0, flex-col gap-6 */
.section__aside {
    width: 305px;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .section__wrapper { flex-direction: column; }
    .section__aside { width: 100%; }
}

/* === GRID — zero.pl: grid grid-cols-12 gap-4 === */
.section__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;             /* gap-4 = 1rem */
}

.col-span-12 { grid-column: span 12; }
.col-span-9 { grid-column: span 9; }
.col-span-8 { grid-column: span 8; }
.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }

@media (min-width: 640px) {
    .sm\:col-span-4 { grid-column: span 4; }
    .sm\:col-span-6 { grid-column: span 6; }
}

@media (min-width: 1024px) {
    .lg\:col-span-9 { grid-column: span 9; }
    .lg\:col-span-8 { grid-column: span 8; }
    .lg\:col-span-6 { grid-column: span 6; }
    .lg\:col-span-4 { grid-column: span 4; }
    .lg\:col-span-3 { grid-column: span 3; }
}

/* === ARTICLE TILE — zero.pl style === */
/* zero.pl: article-tile = relative overflow-hidden, rounded */
.article-tile {
    display: block;
    border-radius: var(--radius-lg);     /* rounded-lg = 8px z zero.pl */
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: none;  /* zero.pl nie używa shadow na kafelkach */
    transition: all var(--transition);
}

.article-tile:hover {
    transform: none;  /* zero.pl nie podnosi kafelków */
}

/* contained-xl: theme--inverted (overlay z tekstem na obrazie) */
.article-tile--contained-xl {
    position: relative;
    color: var(--text-on-dark);
}

/* sm: tekst POD obrazem (nie na overlay!) */
.article-tile--sm {
    position: relative;
}

.article {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.article.relative { position: relative; }
.article.size-full { width: 100%; height: 100%; }
.article.flex { display: flex; }
.article.h-full { height: 100%; }
.article.flex-col { flex-direction: column; }

/* === THUMBNAIL — zero.pl style === */
/* zero.pl: thumbnail = relative overflow-hidden, rounded-lg (0.5rem = 8px) */
.thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);     /* 8px */
    background: var(--bg-alt);
}

/* zero.pl: thumbnail--xl = desktop:aspect-160/107, mobile:aspect-392/500, rounded-xl (0.75rem) */
.thumbnail--xl {
    aspect-ratio: 160 / 107;
    border-radius: var(--radius-xl);   /* 12px */
}
/* layout-featured: duży na całą szerokość — proporcje */
.layout-featured .thumbnail--xl {
    aspect-ratio: 16 / 9;
}
@media (max-width: 767px) {
    .thumbnail--xl {
        aspect-ratio: 392 / 500;
    }
    .layout-featured .thumbnail--xl {
        aspect-ratio: 16 / 10;
    }
}

/* zero.pl: thumbnail--inset = padding inside contained tile, rounded-xl (12px) */
.thumbnail--inset {
    border-radius: var(--radius-xl);   /* rounded-xl = 12px */
}

.thumbnail--hero {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
}

/* zero.pl: thumbnail--sm = aspect-76/51, rounded-lg, mb-2 */
.thumbnail--sm {
    aspect-ratio: 76 / 51;
    border-radius: var(--radius-lg);
}

.article-tile--sm .thumbnail--sm {
    margin-bottom: 0.5rem;  /* mb-2 */
}

.thumbnail--md {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md);
}

.thumbnail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.article__thumbnail {
    margin-bottom: 0;
}

.article__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

/* zero.pl: hover = scale(1.05) tylko na obrazku */
.article-tile:hover .article__img,
.article-tile:hover .thumbnail__image {
    transform: scale(1.05);
}

/* === OVERLAY — zero.pl gradient style === */
/* zero.pl: post-gradient = linear-gradient(180deg, transparent, #000000bf) */
/* zero.pl: thumb-overlay-color = top-1/2 h-1/2 (od połowy w dół) */
.thumb-overlay-color {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 50%;
    background: var(--post-gradient);
    pointer-events: none;
    z-index: 1;
}

/* zero.pl: blur od połowy w dół, mask-image */
.thumb-overlay-blur {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    -webkit-mask-image: var(--post-blur-mask);
    mask-image: var(--post-blur-mask);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

/* === THUMBNAIL CONTENT — zero.pl style === */
/* zero.pl: thumbnail__content = absolute inset-x-0 bottom-0 z-10 flex h-full flex-col justify-end gap-3 */
/* UWAGA: thumbnail__content jest używane TYLKO w contained-xl i hero (overlay z tekstem na obrazie) */
/* W tile--sm: thumbnail__content zawiera TYLKO badge w lewym górnym rogu (absolute top-2 left-2) */
.thumbnail__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;       /* gap-3 = 0.75rem */
    padding: 1rem;     /* p-4 = 1rem */
    height: 100%;
    color: #fff;
}

/* W tile--sm: thumbnail__content = tylko badge w lewym górnym rogu */
.article-tile--sm .thumbnail__content {
    position: absolute;
    top: 0.5rem;        /* top-2 */
    left: 0.5rem;       /* left-2 */
    bottom: auto;
    right: auto;
    height: auto;
    width: auto;
    padding: 0;
    gap: 0;
    z-index: 5;
}

/* W tile--sm: tytuł i opis są POD obrazem, nie w overlay */
.article-tile--sm .article__main {
    padding: 0;
    position: static;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* zero.pl: sm article-title = text-title-lg (1.125rem) na pierwszy, text-title-md (1rem) na resztę */
.article-tile--sm .article__title {
    color: var(--text-main);
    font-size: 1rem;             /* text-title-md z zero.pl = 1rem */
    font-weight: 600;
    line-height: 1.25rem;        /* title-md--line-height */
    margin-bottom: 0;
}

.article-tile--sm .article__description {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* === ARTICLE CONTENT OVERLAY === */
.article__main {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* gdy article__main jest wewnątrz thumbnail__content (zero.pl overlay) */
.thumbnail__content .article__main {
    padding: 1.5rem;     /* px-6 pb-8 ≈ 1.5rem */
    position: static;
    color: inherit;
}

/* zero.pl: contained-xl = article__main wewnątrz thumbnail__content (overlay), px-6 pb-8 (1.5rem 1.5rem 2rem) */
.article-tile--contained-xl .article__main {
    padding: 1.5rem 1.5rem 2rem;  /* px-6 pb-8 z zero.pl */
    color: var(--text-on-dark);
}

.article-tile--contained-xl .article__main h2,
.article-tile--contained-xl .article__main h3,
.article-tile--contained-xl .article__main .article__description {
    color: var(--text-on-dark);
}

/* === ZERO HEADING (section header w stylu zero.pl) === */
/* zero.pl: zero__heading = flex items-center justify-between border-b-2 pb-1.5 mb-4 */
.zero-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 0.375rem;   /* pb-1.5 */
    margin-bottom: 1rem;        /* mb-4 */
    width: 100%;
}

/* zero.pl: zero__heading-title = text-heading-sm (1.25rem), font-semibold, flex items-center gap-0.5 */
.zero-heading-title {
    font-size: 1.25rem;       /* text-heading-sm z zero.pl */
    font-weight: 600;         /* font-weight 600 */
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.125rem;    /* gap-0.5 */
}

/* zero.pl: nawiasy [ ] = i-zero:bracket-left/right, text-accent, h-8 w-2.5 */
.bracket-left, .bracket-right {
    color: var(--primary);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* VP Block continuation (cd.) i subtitle */
.vp-block-continuation {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.5rem;
}

.vp-block-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 400;
}

.vp-block-continuation {
    font-weight: 400;
}

/* zero.pl: article-badge = bg-basic-background-inverted (czarne tło), rounded-md (6px) */
.article-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;       /* py-1.5 px-2 */
    background: #0e1114;            /* bg-basic-background-inverted = neutral-dark-900 */
    color: #fff;
    font-size: 0.75rem;             /* text-caption-md */
    font-weight: 600;               /* font-weight 600 ( nie 700) */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--radius-md);  /* rounded-md = 6px */
    margin-bottom: 0;
    backdrop-filter: blur(4px);       /* backdrop-blur-xs */
    -webkit-backdrop-filter: blur(4px);
    text-decoration: none;
    line-height: 1;
    gap: 0.25rem;
    min-height: 1.5rem;             /* min-h-6 */
}

/* W contained-xl i hero: badge czerwony (kraj/accent) */
.article-tile--contained-xl .article-badge,
.home-hero .article-badge {
    background: var(--primary);      /* #fb2e2e */
    color: #fff;
}

/* W tile--sm: badge na obrazie (w thumbnail__content, top-2 left-2) */
.article-tile--sm .article-badge {
    margin-bottom: 0;
    font-size: 0.6875rem;          /* text-caption-md na sm */
    padding: 0.25rem 0.5rem;
}

.article-title {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
    margin-bottom: 0.5rem;
}

.article__title {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

/* zero.pl: contained-xl article-title = text-display-sm (1.5rem), font-weight 600 */
.article-tile--contained-xl .article__title {
    font-size: 1.5rem;               /* text-display-sm z zero.pl */
    font-weight: 600;               /* font-weight 600 */
    line-height: 1.75rem;           /* display-sm--line-height */
    margin-bottom: 0.75rem;
}

/* zero.pl: text-display = text-display-sm = 1.5rem, font-weight 600 */
.text-display {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.article__description {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-tile--contained-xl .article__description {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
}

/* === ARTICLE AUTHOR/INFO === */
.article-author {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: auto;
}

.article-author--md { font-size: var(--text-sm); }
.article-author--sm { font-size: var(--text-xs); }

.article-author__main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.article-author__label {
    font-weight: 600;
    color: var(--text-main);
    font-size: var(--text-sm);
}

.article-tile--contained-xl .article-author__label {
    color: rgba(255, 255, 255, 0.95);
}

.article-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.article-tile--contained-xl .article-info {
    color: rgba(255, 255, 255, 0.8);
}

.article-info__item {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.article-tile--contained-xl .article-info__item {
    color: rgba(255, 255, 255, 0.85);
}

.article-info--sm .article-info__item {
    font-size: var(--text-xs);
}

/* === SIDEBAR === */
.sidebar-title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--text-main);
    margin-bottom: 1rem;
}

/* === HOMEPAGE CONTENT WRAPPER === */
.homepage-content-wrapper {
    margin-top: 0;
}

.section-divider {
    height: 1px;
    background: var(--border);
    margin: 2rem 0;
}
.section-divider:first-child {
    margin-top: 0;
}

/* === VP BLOCK === */
.vp-block {
    margin-bottom: 2.5rem;
}

.vp-block-inner { width: 100%; }

/* stary vp-block-header zastąpiony przez zero-heading — usunięto duplikaty */

/* === LAYOUT VARIANTS in VpBlock — wzorowane na zero.pl === */
/* layout-news: 1 duży (col-span-9) + 3 małe (col-span-3) obok, potem kolejny rząd */
.layout-news .article-tile--contained-xl { grid-column: span 12; }
.layout-news .article-tile--sm { grid-column: span 12; }

@media (min-width: 640px) {
    .layout-news .article-tile--sm { grid-column: span 6; }
}

@media (min-width: 1024px) {
    .layout-news .article-tile--contained-xl { grid-column: span 9; }
    .layout-news .article-tile--sm { grid-column: span 3; }
}

/* layout-grid-3x3: 4 karty w rzędzie (col-span-3) — tak jak zero.pl */
.layout-grid-3x3 .article-tile--sm { grid-column: span 12; }
.layout-grid-3x3 .article-tile--sm:first-child { grid-column: span 12; }

@media (min-width: 640px) {
    .layout-grid-3x3 .article-tile--sm { grid-column: span 6; }
    .layout-grid-3x3 .article-tile--sm:first-child { grid-column: span 12; }
}

@media (min-width: 1024px) {
    .layout-grid-3x3 .article-tile--sm { grid-column: span 3; }
    .layout-grid-3x3 .article-tile--sm:first-child { grid-column: span 6; }
}

/* layout-feature: 1 duży (col-span-8) + 1 średni (col-span-4) + małe (col-span-4) */
.layout-feature .article-tile--contained-xl { grid-column: span 12; }
.layout-feature .article-tile--sm { grid-column: span 12; }

@media (min-width: 640px) {
    .layout-feature .article-tile--sm { grid-column: span 6; }
}

@media (min-width: 1024px) {
    .layout-feature .article-tile--contained-xl { grid-column: span 8; }
    .layout-feature .article-tile--sm { grid-column: span 4; }
}

/* === WARNING SECTION (Key AI Threats) — styl zero.pl === */
.warning-section {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.section-title {
    font-size: 1.5rem;             /* text-display-sm z zero.pl */
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: left;
    color: var(--text-main);
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 0.375rem;
}

.warning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.warning-card {
    background: white;
    border-radius: var(--radius-lg);     /* 8px */
    padding: 1.25rem;
    box-shadow: none;
    border: 1px solid var(--border-light);
    transition: all var(--transition);
    text-align: left;
}

.warning-card:hover {
    box-shadow: var(--shadow-sm);
    transform: none;                /* zero.pl nie podnosi */
}

.warning-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.warning-card h3 {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.warning-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.warning-link {
    display: inline-block;
    color: var(--primary);
    font-weight: 600;
    font-size: var(--text-sm);
    border-bottom: 1px solid transparent;
}

.warning-link:hover {
    border-bottom-color: var(--primary);
}

/* === FOOTER — zero.pl: theme--inverted, rounded-t-4xl === */
.site-footer {
    background: var(--bg-dark);       /* neutral-dark-900 */
    color: var(--text-on-dark);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
    border-radius: var(--radius-4xl) var(--radius-4xl) 0 0;  /* rounded-t-4xl = 32px */
}

.footer-wrapper {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 2.5rem;          /* x2 — var(--text-xl)=1.25rem * 2 */
    color: white;
}

.footer-logo .logo-accent {
    color: var(--primary);
}

.footer-tagline {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
    line-height: var(--leading-normal);
}

.footer-navigation {
    display: flex;
    justify-content: center;
}

.footer-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.footer-navigation a {
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
    transition: color var(--transition-fast);
}

.footer-navigation a:hover {
    color: white;
}

.footer-privacy-contact {
    margin-top: 1rem;
    font-size: var(--text-sm);
    color: var(--text-on-dark-muted);
}

.footer-privacy-contact a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-bottom {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.copyright {
    font-size: var(--text-xs);
    color: var(--text-on-dark-muted);
    margin-bottom: 0.25rem;
}

.footer-disclaimer {
    font-size: var(--text-xs);
    color: var(--text-on-dark-muted);
    opacity: 0.7;
}
.footer-ai-notice {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: rgba(251, 46, 46, 0.7);
    letter-spacing: 0.01em;
}

/* === ARTICLE PAGE === */
.main-content {
    min-height: 70vh;
    /* Wszystkie dzieci main_content trzymają się container-max — poza hero i header */
}

.article-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem var(--gutter);
}

.premium-article {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.article-headline {
    font-size: var(--text-display);   /* 1.75rem = display-md z zero.pl */
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 2rem;               /* display-md--line-height */
}

.article-meta-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.meta-text time {
    font-weight: 600;
    color: var(--text-main);
}

.featured-image {
    width: 100%;
    border-radius: var(--radius-lg);
    margin: 2rem 0;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.featured-image-attribution {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: -1.5rem 0 2rem;
    text-align: right;
}

.featured-image-attribution a {
    color: var(--accent);
    text-decoration: underline;
}

.premium-article h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 2rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.premium-article h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

.premium-article p {
    margin-bottom: 1rem;
    color: var(--text-main);
}

.premium-article ul, .premium-article ol {
    margin: 1rem 0 1rem 1.5rem;
}

.premium-article li {
    margin-bottom: 0.5rem;
}

.premium-article blockquote {
    border-left: 4px solid var(--primary);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-muted);
    background: var(--bg-alt);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.premium-article a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.premium-article a:hover {
    color: var(--primary);
}

.premium-article code {
    background: var(--bg-alt);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
}

/* === TAGS PAGE === */
.tag-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem var(--gutter);
}

.tag-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--text-main);
}

.tag-header h1 {
    font-size: var(--text-display);
    text-transform: capitalize;
}

.tag-header .tag-count {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* === UTILITY === */
.hidden { display: none !important; }

/* === CTA BUTTON === */
.trigger-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 3rem 0 2rem;
    padding: 2rem 1rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: var(--text-main);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 600;
    transition: all var(--transition);
    border: none;
    cursor: pointer;
    text-align: center;
    max-width: 90%;
}

.cta-button:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

/* === TAG PAGE === */
.tag-page-header {
    padding: 2rem 0 1.5rem;
    border-bottom: 2px solid var(--text-main);
    margin-bottom: 2rem;
}

.tag-page-title {
    font-size: var(--text-display);   /* display-md = 1.75rem */
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: -0.02em;
}

.tag-page-count {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* === STATIC PAGE === */
.page-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem var(--gutter) 4rem;
}

.page-body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.page-body h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: 2rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.page-body h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

.page-body p {
    margin-bottom: 1rem;
    color: var(--text-main);
}

.page-body ul, .page-body ol {
    margin: 1rem 0 1rem 1.5rem;
}

.page-body li {
    margin-bottom: 0.5rem;
}

.page-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-body a:hover {
    color: var(--primary);
}

/* === ARTICLE DESC SM === */
.article__desc-sm {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === TEXT DISPLAY SM === */
.text-display-sm {
    font-size: var(--text-xl);
    font-weight: 700;
}

/* === BACK TO HOME === */
.back-to-home {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* === CONSENT BANNER === */
.consent-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 480px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    font-size: var(--text-sm);
    animation: consent-slide-up 0.3s ease-out;
}

@keyframes consent-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.consent-inner { display: flex; flex-direction: column; gap: 0.75rem; }

.consent-text { color: var(--text-muted); line-height: var(--leading-normal); }
.consent-text a { color: var(--accent); text-decoration: underline; }

.consent-buttons { display: flex; gap: 0.75rem; }

.consent-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: var(--transition-fast);
}

.consent-btn:hover { background: var(--bg-alt); }

.consent-btn--accept {
    background: var(--text-main);
    color: white;
    border-color: var(--text-main);
}

.consent-btn--accept:hover { background: var(--primary); border-color: var(--primary); }

.consent-btn--decline:hover { color: var(--text-main); }

/* === SOCIAL SHARE === */
.social-share-list {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    list-style: none;
    margin: 1.5rem 0;
}

.social-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--bg-alt);
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.social-share-link:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* === PAGINATION === */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.pagination a, .pagination span {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 500;
}

.pagination .current {
    background: var(--text-main);
    color: white;
    border-color: var(--text-main);
}

/* === HEADER SCROLLED === */
/* Homepage: header transparent nad hero, białe tło po scrollu */
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

/* Header ma ciemny tekst na transparentnym tle nad hero — TYLKO overlay mode */
.site-header.header-overlay .logo-text,
.site-header.header-overlay .nav-links-list a,
.site-header.header-overlay .live-label {
    color: #fff;
}
.site-header.header-overlay .live-dot {
    background: var(--primary);
}
/* Header ma ciemny tekst po scrollu lub na stronach wewnętrznych */
.site-header.scrolled .logo-text,
.site-header.scrolled .nav-links-list a,
.site-header.scrolled .live-label,
.site-header.header-solid .logo-text,
.site-header.header-solid .nav-links-list a,
.site-header.header-solid .live-label,
.site-header.header-home .logo-text,
.site-header.header-home .nav-links-list a,
.site-header.header-home .live-label {
    color: var(--text-main);
}
.site-header.scrolled .mobile-nav-toggle .line,
.site-header.header-solid .mobile-nav-toggle .line,
.site-header.header-home .mobile-nav-toggle .line {
    background: var(--text-main);
}
.site-header.header-overlay .mobile-nav-toggle .line {
    background: #fff;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    :root {
        --gutter: 1rem;
        --text-display: 1.75rem;
        --text-hero: 2rem;
    }
    .article-tile--contained-xl .article__main {
        padding: 1.25rem;
    }
    .article-tile--contained-xl .article__title {
        font-size: var(--text-xl);
    }
    .warning-section {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }
}