/**
 * Wspolne style dla nowych artykulow generowanych przez panel admina
 * (renderowanych przez aktualnosci/article.php).
 *
 * Stare artykuly (16 plikow .php w aktualnosci/) maja wlasne inline-style
 * i NIE korzystaja z tego pliku. Style ponizej sa zgodne wizualnie ze starymi.
 *
 * Bazowe style (.article-header, .article-content, .article-meta, .news-card itp.)
 * sa dziedziczone z css/style.css. Tutaj definiujemy tylko style blokow.
 */

/* =====================================================================
   HEADER ARTYKULU (nadpisanie zachowania ze style.css na potrzeby renderera)
   ===================================================================== */
.article-header {
    position: relative;
    height: 400px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.article-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-header-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.2) 100%);
    padding: 2rem;
    color: white;
}
.article-header-overlay h1 {
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 1rem;
    line-height: 1.2;
    color: #ffffff;
}
.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    color: #fff;
}
.article-meta i { color: #fff !important; opacity: 1 !important; }
.article-meta .date,
.article-meta time { color: #fff !important; font-weight: bold; letter-spacing: 0.5px; }

/* Autor artykulu (kto napisal) - obok daty, dyskretny styl */
.article-meta .article-author {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-weight: 500;
    opacity: 0.95;
}
.article-meta .article-author i {
    font-size: 0.95em;
}

/* Licznik komentarzy - klikalna kotwica do sekcji #comments */
.article-meta .article-comments-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.article-meta .article-comments-count:hover {
    opacity: 1;
    transform: translateY(-1px);
    text-decoration: none;
}
.article-meta .article-comments-count i {
    font-size: 0.95em;
}

/* Na desktop kategorie sa wypchniete na prawy koniec wiersza */
.article-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.article-category {
    background-color: #1a4c8b;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 3px;
    font-size: 0.8rem;
}


/* =====================================================================
   BAZOWA TYPOGRAFIA ARTYKULU
   ===================================================================== */
.article-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.8;
}
.article-content p {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    color: #1f2937;
}
.article-content h2 {
    color: #1a4c8b;
    font-size: 1.7rem;
    font-weight: 800;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}
.article-content h3 {
    color: #1a2332;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1.5rem 0 0.6rem;
}
.article-content strong { color: #1a4c8b; }
.article-content a {
    color: #1a4c8b;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* =====================================================================
   BLOK: intro-box
   ===================================================================== */
.intro-box {
    --gs-orientation: vertical;
    background: linear-gradient(135deg, #f5f7fa 0%, #fffdf6 100%);
    padding: 1.5rem 1.75rem 1.5rem 2rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.intro-box::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    /* Fallback dla braku JS - gradient 200deg matchuje to, co buduje silnik gold-sweep w trybie vertical. */
    background: linear-gradient(
        200deg,
        #AE802F 0%,
        #FFEFA7 15%,
        #AE802F 30%,
        #AE802F 42%,
        #fffdf0 48%,
        #fff 50%,
        #fffdf0 52%,
        #AE802F 58%,
        #AE802F 70%,
        #FFEFA7 85%,
        #AE802F 100%
    );
    background-size: 100% 300%;
    animation: goldSweepV 10s ease-in-out infinite;
}
/* Nazwa zawiera "goldsweep" - silnik gold-sweep-engine.js wykryje pseudo ::after,
   sklasyfikuje jako divider-after i wyrenderuje dynamiczne flary w pionie.
   Keyframe pełni rolę fallbacku gdy JS jest wyłączony. */
@keyframes goldSweepV {
    0%, 15% { background-position: 50% 100%; }
    40%, 60% { background-position: 50% 0%; }
    85%, 100% { background-position: 50% 100%; }
}
.intro-box p { margin: 0 0 1rem; font-size: 1.1rem; }
.intro-box p:last-child { margin-bottom: 0; }

/* =====================================================================
   BLOK: feature-grid + feature-card
   ===================================================================== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}
.feature-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.08);
    border-color: #AE802F;
}
.feature-card .feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a4c8b 0%, #142a66 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
}
.feature-card h4 {
    margin: 0 0 0.4rem;
    color: #1a2332;
    font-size: 1.05rem;
    font-weight: 800;
}
.feature-card p {
    margin: 0;
    font-size: 0.92rem;
    color: #4b5563;
    line-height: 1.5;
}

/* =====================================================================
   BLOK: category-pills
   ===================================================================== */
.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    margin: 1rem 0 1.5rem;
}
.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    background: #f5f7fa;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.92rem;
    color: #1f2937;
    font-weight: 600;
}
.category-pill .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* =====================================================================
   BLOK: subscribe-apps
   ===================================================================== */
.subscribe-apps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin: 1.25rem 0 1.75rem;
}
.subscribe-app {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #1a4c8b 0%, #142a66 100%);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: transform 0.18s;
}
.subscribe-app:hover { transform: translateY(-2px); }
.subscribe-app i { font-size: 1.4rem; }

/* =====================================================================
   BLOK: highlight-box
   ===================================================================== */
.highlight-box {
    background: #1a2332;
    color: #fff;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}
.highlight-box::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(
        110deg,
        #AE802F 0%,
        #FFEFA7 15%,
        #AE802F 30%,
        #AE802F 42%,
        #fffdf0 48%,
        #fff 50%,
        #fffdf0 52%,
        #AE802F 58%,
        #AE802F 70%,
        #FFEFA7 85%,
        #AE802F 100%
    );
    background-size: 300% 100%;
    animation: goldSweep 10s ease-in-out infinite;
}
.highlight-box p { margin: 0; color: #fff; font-size: 1.05rem; }
.highlight-box strong,
.highlight-box h3 {
    background: linear-gradient(
        110deg,
        #AE802F 0%,
        #FFEFA7 15%,
        #AE802F 30%,
        #AE802F 42%,
        #fffdf0 48%,
        #fff 50%,
        #fffdf0 52%,
        #AE802F 58%,
        #AE802F 70%,
        #FFEFA7 85%,
        #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}
.highlight-box h3 { margin: 0 0 0.6rem; font-size: 1.2rem; font-weight: 800; }

/* =====================================================================
   BLOK: info-box (lekka wersja highlight-box)
   ===================================================================== */
.info-box {
    background: #eef4fc;
    border-left: 4px solid #1a4c8b;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #1a2332;
    font-size: 1rem;
    line-height: 1.6;
}
.info-box i {
    color: #1a4c8b;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* =====================================================================
   BLOK: summary-box
   ===================================================================== */
.summary-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.summary-box h3 {
    margin: 0 0 0.75rem;
    color: #1a4c8b;
    font-size: 1.1rem;
    font-weight: 800;
}
.summary-box ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #1f2937;
}
.summary-box li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

/* =====================================================================
   BLOK: stats-grid
   ===================================================================== */
.article-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.article-stat-item {
    text-align: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #fffdf6 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1rem;
}
.article-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: #1a4c8b;
    line-height: 1.1;
    margin-bottom: 0.3rem;
}
.article-stat-label {
    font-size: 0.85rem;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* =====================================================================
   BLOK: levels-table (article-table)
   ===================================================================== */
.article-table-wrapper {
    margin: 1.5rem 0 2rem;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.article-table th,
.article-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
.article-table th {
    background: #1a4c8b;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.article-table tbody tr:nth-child(even) { background: #f5f7fa; }
.article-table tbody tr:last-child td { border-bottom: none; }

/* =====================================================================
   BLOK: event-box
   ===================================================================== */
.event-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #1a4c8b;
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.event-box h3 {
    margin: 0 0 0.75rem;
    color: #1a4c8b;
    font-size: 1.2rem;
    font-weight: 800;
}
.event-box .event-meta {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.95rem;
    color: #4b5563;
}
.event-box .event-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.event-box .event-meta i { color: #1a4c8b; }
.event-box p { margin: 0; color: #1f2937; }

/* =====================================================================
   BLOK: checklist
   ===================================================================== */
.article-checklist {
    list-style: none;
    margin: 1.25rem 0 1.75rem;
    padding: 0;
}
.article-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #e5e7eb;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.5;
}
.article-checklist li:last-child { border-bottom: none; }
.article-checklist li i {
    color: #10B981;
    font-size: 1rem;
    margin-top: 0.3rem;
    flex-shrink: 0;
}

/* =====================================================================
   BLOK: cta-box
   ===================================================================== */
.cta-box {
    background: linear-gradient(135deg, #1a4c8b 0%, #142a66 100%);
    color: #fff;
    border-radius: 14px;
    padding: 2rem;
    text-align: center;
    margin: 2.5rem 0 1.5rem;
}
.cta-box h3 {
    font-size: 1.5rem;
    margin: 0 0 0.6rem;
    background: linear-gradient(
        110deg,
        #AE802F 0%,
        #FFEFA7 15%,
        #AE802F 30%,
        #AE802F 42%,
        #fffdf0 48%,
        #fff 50%,
        #fffdf0 52%,
        #AE802F 58%,
        #AE802F 70%,
        #FFEFA7 85%,
        #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}
.cta-box p { color: rgba(255,255,255,0.9); margin: 0 0 1.25rem; }
.cta-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #AE802F 0%, #D4A23E 50%, #FFEFA7 100%);
    color: #1a2332 !important;
    text-decoration: none !important;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 6px 16px rgba(174,128,47,0.35);
}
.cta-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.35) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.35) 52%,
        transparent 65%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: goldSweepBg 10s ease-in-out infinite;
    pointer-events: none;
}
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(174,128,47,0.5);
}

/* =====================================================================
   BLOK: image (figure)
   ===================================================================== */
.article-image {
    margin: 1.75rem 0;
    text-align: center;
}
.article-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-image figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #6b7280;
    font-style: italic;
}
/* Warianty rozmiaru - gorny limit szerokosci obrazu. min() chroni przed
   przepelnieniem na waskich ekranach i nie powieksza malych zrodel. */
.article-image--large img  { max-width: min(680px, 100%); }
.article-image--medium img { max-width: min(480px, 100%); }
.article-image--small img  { max-width: min(320px, 100%); }
/* Warianty wyrownania (domyslnie wysrodkowany dziedziczony z .article-image) */
.article-image--left  { text-align: left; }
.article-image--right { text-align: right; }

/* =====================================================================
   BLOK: gallery (kilka zdjec w jednym bloku)

   Piec ukladow do wyboru w panelu:
     slider   - jedno zdjecie na ekran + strzalki i kropki
     showcase - jedno zdjecie na ekran + pasek miniatur pod spodem
     carousel - kilka zdjec obok siebie, przewijane w bok
     portrait - jak carousel, ale kadr 9:16 pod zdjecia z telefonu
     grid     - siatka kafelkow (2-4 kolumny)
     masonry  - mozaika, zdjecia zachowuja wlasne proporcje

   Uklady przewijane opieraja sie na natywnym scroll-snap - dzialaja palcem
   i scrollem nawet gdy js/article-gallery.js sie nie zaladuje.
   ===================================================================== */
.article-gallery {
    --ksp-gal-radius: 10px;
    --ksp-gal-gap: 0.75rem;
    --ksp-gal-frame: #eef1f5;   /* tlo kadru zanim zdjecie sie doczyta */
    --ksp-gal-shadow: 0 6px 18px rgba(26, 35, 50, 0.14);
    margin: 2rem 0;
}

/* ---- Kafelek (wspolny dla wszystkich ukladow) ---- */
.article-gallery__item {
    margin: 0;
    position: relative;
}
.article-gallery__frame {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0;
    background: var(--ksp-gal-frame);
    border-radius: var(--ksp-gal-radius);
    overflow: hidden;
    box-shadow: var(--ksp-gal-shadow);
}
.article-gallery__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
/* Kadr klikalny (wlaczony lightbox) - kursor lupy + delikatny zoom i plakietka */
button.article-gallery__frame {
    position: relative;
    cursor: zoom-in;
}
button.article-gallery__frame:hover img,
button.article-gallery__frame:focus-visible img {
    transform: scale(1.045);
}
button.article-gallery__frame:focus-visible {
    outline: 3px solid #1a4c8b;
    outline-offset: 3px;
}
button.article-gallery__frame::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(26, 35, 50, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6M15.5 15.5L21 21'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
button.article-gallery__frame:hover::after,
button.article-gallery__frame:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

/* ---- Uklady przewijane: tor ze scroll-snap ---- */
.article-gallery__stage {
    position: relative;
}
.article-gallery__track {
    display: flex;
    gap: var(--ksp-gal-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;          /* nawigujemy strzalkami i kropkami */
    -ms-overflow-style: none;
    padding-bottom: 3px;            /* zeby cien kadru nie byl przycinany */
}
.article-gallery__track::-webkit-scrollbar { display: none; }
.article-gallery__track > .article-gallery__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.article-gallery__track:focus-visible {
    outline: 3px solid #1a4c8b;
    outline-offset: 4px;
    border-radius: var(--ksp-gal-radius);
}

/* Podpis w ukladach przewijanych - jako warstwa na zdjeciu (przyciemnienie
   od dolu). Dzieki temu wysokosc sceny = wysokosc kadru i strzalki siedza
   dokladnie na srodku zdjecia, a nie ponizej. */
.article-gallery--slider .article-gallery__cap,
.article-gallery--showcase .article-gallery__cap,
.article-gallery--carousel .article-gallery__cap,
.article-gallery--portrait .article-gallery__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2.25rem 1rem 0.85rem;
    background: linear-gradient(to top, rgba(10, 14, 22, 0.9) 0%, rgba(10, 14, 22, 0.55) 55%, rgba(10, 14, 22, 0) 100%);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
    border-radius: 0 0 var(--ksp-gal-radius) var(--ksp-gal-radius);
    pointer-events: none;
}

/* slider + showcase: jedno zdjecie na szerokosc */
.article-gallery--slider .article-gallery__track > .article-gallery__item,
.article-gallery--showcase .article-gallery__track > .article-gallery__item {
    width: 100%;
    scroll-snap-align: center;
}
.article-gallery--slider .article-gallery__frame,
.article-gallery--showcase .article-gallery__frame {
    aspect-ratio: 16 / 10;
}

/* carousel: trzy zdjecia obok siebie */
.article-gallery--carousel .article-gallery__track > .article-gallery__item {
    width: calc((100% - 2 * var(--ksp-gal-gap)) / 3);
}
.article-gallery--carousel .article-gallery__frame {
    aspect-ratio: 4 / 3;
}

/* portrait: zdjecia z telefonu (pionowe). Kadr 9:16, trzy obok siebie -
   pionowe zdjecie na cala szerokosc artykulu byloby wyzsze niz ekran. */
.article-gallery--portrait .article-gallery__track > .article-gallery__item {
    width: calc((100% - 2 * var(--ksp-gal-gap)) / 3);
    max-width: 300px;
}
.article-gallery--portrait .article-gallery__frame {
    aspect-ratio: 9 / 16;
}
/* Podpis przy waskim kadrze musi byc mniejszy, inaczej zjada pol zdjecia */
.article-gallery--portrait .article-gallery__cap {
    padding: 1.75rem 0.6rem 0.7rem;
    font-size: 0.8rem;
}

/* ---- Strzalki, licznik, kropki, miniatury ---- */
/* UWAGA: js/script.js dokleja klase .touch-friendly do KAZDEGO <button> na stronie
   (fixes.css: min-width/min-height 44px + padding 12px). Dla sterowania galerii to za
   duzo - zerujemy minima tam, gdzie sami pilnujemy rozmiaru, a obszar dotyku kropek
   powiekszamy niewidoczna warstwa ::before. */
.article-gallery__frame,
.article-gallery__dot,
.article-gallery__thumb {
    min-width: 0;
    min-height: 0;
}

.article-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(26, 35, 50, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #1a2332;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    z-index: 2;
}
.article-gallery__arrow--prev { left: 10px; }
.article-gallery__arrow--next { right: 10px; }
.article-gallery__arrow:hover {
    background: #d4af37;
    color: #1a2332;
}
.article-gallery__arrow:focus-visible {
    outline: 3px solid #1a4c8b;
    outline-offset: 2px;
}
.article-gallery__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}
/* Jedno zdjecie - nie ma po czym nawigowac */
.article-gallery[data-count="1"] .article-gallery__arrow,
.article-gallery[data-count="1"] .article-gallery__counter,
.article-gallery[data-count="1"] .article-gallery__dots,
.article-gallery[data-count="1"] .article-gallery__thumbs {
    display: none;
}

.article-gallery__counter {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(26, 35, 50, 0.78);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    z-index: 2;
    pointer-events: none;
}

.article-gallery__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}
.article-gallery__dot {
    position: relative;
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c7ccd6;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
/* Niewidoczny, powiekszony obszar klikania (kropka ma 9px, palec potrzebuje ~40px) */
.article-gallery__dot::before {
    content: '';
    position: absolute;
    inset: -15px -4px;
}
.article-gallery__dot:hover { background: #8f97a6; }
.article-gallery__dot[aria-current="true"] {
    background: #1a4c8b;
    transform: scale(1.35);
}

.article-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}
.article-gallery__thumb {
    flex: 0 0 auto;
    width: 88px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ksp-gal-frame);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.article-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-gallery__thumb:hover { opacity: 1; }
.article-gallery__thumb:focus-visible {
    outline: 3px solid #1a4c8b;
    outline-offset: 2px;
    opacity: 1;
}
.article-gallery__thumb[aria-current="true"] {
    opacity: 1;
    border-color: #d4af37;
    transform: translateY(-2px);
}

/* ---- Siatka i mozaika ---- */
.article-gallery__grid {
    display: grid;
    grid-template-columns: repeat(var(--ksp-gal-cols, 3), 1fr);
    gap: var(--ksp-gal-gap);
}
.article-gallery--grid .article-gallery__frame {
    aspect-ratio: 4 / 3;
}
.article-gallery--masonry .article-gallery__grid {
    display: block;
    column-count: var(--ksp-gal-cols, 3);
    column-gap: var(--ksp-gal-gap);
}
.article-gallery--masonry .article-gallery__item {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--ksp-gal-gap);
    break-inside: avoid;
}
.article-gallery--masonry .article-gallery__frame img {
    height: auto;
}
/* Podpis pod kafelkiem (siatka, mozaika) */
.article-gallery--grid .article-gallery__cap,
.article-gallery--masonry .article-gallery__cap {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #6b7280;
    font-style: italic;
    text-align: center;
}

/* ---- Powiekszenie (lightbox budowany przez js/article-gallery.js) ---- */
body.ksp-lightbox-open { overflow: hidden; }
.ksp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem 3.5rem;
    /* Tresc strony pod spodem ma zniknac z pola widzenia - stad wysokie krycie
       i rozmycie tla (nagłówki artykulu potrafily przebijac przez sam kolor). */
    background: rgba(8, 11, 17, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    /* Nakladka powstaje raz i zostaje w DOM na zawsze. Bez tego zamkniety podglad
       (przezroczysty, ale nadal na wierzchu calego ekranu) przechwytywalby KAZDE
       klikniecie na stronie - strona wygladala jak zwiesznieta. */
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.ksp-lightbox--open {
    opacity: 1;
    pointer-events: auto;
}

/* Przycisk panelu bocznego siedzi dokladnie tam, gdzie strzalka "nastepne"
   (prawa krawedz, polowa wysokosci). Na czas powiekszenia go chowamy, zeby
   klikniecie obok strzalki nie trafialo w panel. Visibility zamiast display -
   sidebar-panel.js steruje wlasnym inline display (ustawienie konta). */
body.ksp-lightbox-open .sidebar-trigger-btn,
body.ksp-lightbox-open .sidebar-trigger-tooltip {
    visibility: hidden;
    pointer-events: none;
}
.ksp-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    max-width: min(1180px, 100%);
}
.ksp-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 11rem);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
}
/* Nowe zdjecie pobiera sie w tle, a poprzednie zostaje na ekranie przygaszone.
   Dzieki temu podglad nie zapada sie do zera przy kazdej zmianie kadru. */
.ksp-lightbox--loading .ksp-lightbox__img { opacity: 0.45; }
.ksp-lightbox__spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #d4af37;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.ksp-lightbox--loading .ksp-lightbox__spin {
    opacity: 1;
    animation: ksp-lightbox-spin 0.8s linear infinite;
}
@keyframes ksp-lightbox-spin {
    to { transform: rotate(360deg); }
}
.ksp-lightbox__cap {
    max-width: 70ch;
    color: #e8eaf0;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}
.ksp-lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Niewidoczny zapas wokol przycisku. Strzalki stoja tuz przy krawedzi ekranu,
   a klikniecie o wlos obok trafialo w tlo, czyli zamykalo podglad w polowie
   ogladania galerii. */
.ksp-lightbox__btn::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
}
.ksp-lightbox__btn:hover {
    background: #d4af37;
    color: #1a2332;
}
.ksp-lightbox__btn:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: 3px;
}
.ksp-lightbox__close { top: 1rem; right: 1rem; }
.ksp-lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.ksp-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.ksp-lightbox__counter {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #9aa3b5;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.ksp-lightbox[data-count="1"] .ksp-lightbox__prev,
.ksp-lightbox[data-count="1"] .ksp-lightbox__next,
.ksp-lightbox[data-count="1"] .ksp-lightbox__counter {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .article-gallery__track { scroll-behavior: auto; }
    .article-gallery__frame img,
    .article-gallery__arrow,
    .article-gallery__thumb,
    .ksp-lightbox { transition: none; }
    button.article-gallery__frame:hover img { transform: none; }
    .ksp-lightbox--loading .ksp-lightbox__spin { animation: none; }
}

/* =====================================================================
   BLOK: youtube (responsive 16:9 iframe)
   ===================================================================== */
.article-youtube {
    margin: 1.75rem 0;
}
.article-youtube__wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    background: #000;
}
.article-youtube__wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.article-youtube figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #6b7280;
    font-style: italic;
    text-align: center;
}
@supports not (aspect-ratio: 16 / 9) {
    .article-youtube__wrap {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* =====================================================================
   BLOK: quote
   ===================================================================== */
.article-quote {
    /* Wszystko, co rozni jasny motyw od ciemnego, siedzi w tych zmiennych -
       dark-theme.css nadpisuje wylacznie je, a nie rysunek bloku. */
    --aq-ring-w: 3px;                          /* grubosc zlotego pierscienia */
    --aq-ring-bg: #fff;                        /* tlo pod zdjeciem (wycinanki maja alfe) */
    --aq-role: #6b7280;
    --aq-line: rgba(26, 35, 50, 0.14);
    --aq-shadow: 0 6px 16px rgba(26, 35, 50, 0.16);
    background: linear-gradient(135deg, #f5f7fa 0%, #fffdf6 100%);
    border-left: 4px solid #1a4c8b;
    margin: 1.75rem 0;
    padding: 1.5rem 1.75rem;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #1a2332;
}
.article-quote p {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}
.article-quote cite {
    display: block;
    font-size: 0.9rem;
    color: #4b5563;
    font-style: normal;
    font-weight: 600;
    text-align: right;
}
/* Kreska przed nazwiskiem tylko w cytacie bez zdjecia (plaska struktura,
   cite jest bezposrednim dzieckiem). Przy zdjeciu podpis stoi obok portretu
   i kreska tylko zasmieca. */
.article-quote > cite::before { content: '- '; }

/* ---------------------------------------------------------------------
   Cytat ze zdjeciem osoby - 6 usytuowan portretu.

   Wszystkie warianty stoja na jednej siatce: portret i tresc sa
   rodzenstwem w HTML, a .article-quote__body znika z ukladu
   (display: contents), wiec portret, tekst i podpis rozstawia sie
   wylacznie przez grid-template-areas. Jeden HTML, szesc ukladow.
   Rozmiar portretu przechodzi zmienna --aq-size.
   --------------------------------------------------------------------- */
.article-quote__person {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.4rem;
}
.article-quote__person cite {
    text-align: left;
}
.article-quote__role {
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25;
    color: var(--aq-role);
}
/* Podpis bez zdjecia (sama funkcja pod nazwiskiem) trzyma sie prawej krawedzi,
   tak jak klasyczny cytat - inaczej jeden blok mialby podpis raz z lewej, raz z prawej. */
.article-quote:not(.article-quote--avatar) .article-quote__person {
    align-items: flex-end;
}
.article-quote:not(.article-quote--avatar) .article-quote__person cite,
.article-quote:not(.article-quote--avatar) .article-quote__role {
    text-align: right;
}
/* Pierscien to systemowe zloto strony, nie plaski kolor: ten sam gradient
   i ta sama animacja co .gold-sweep w css/style.css. js/gold-sweep-engine.js
   rozpoznaje elementy po nazwie animacji (goldSweep) i podmienia keyframe na
   wielo-flarowy efekt - pierscien lapie sie sam, tak jak zdjecie w karcie
   urodzinowej. Gdyby zloto siedzialo na pseudoelemencie, silnik by go nie
   zeskanowal i zostalby zwykly, jednoflarowy przelot. */
.article-quote__portrait {
    display: block;
    width: var(--aq-size, 76px);
    height: var(--aq-size, 76px);
    padding: var(--aq-ring-w, 3px);
    border-radius: 50%;
    box-shadow: var(--aq-shadow);
    flex-shrink: 0;
    background: linear-gradient(
        110deg,
        #AE802F 0%,
        #FFEFA7 15%,
        #AE802F 30%,
        #AE802F 42%,
        #fffdf0 48%,
        #fff 50%,
        #fffdf0 52%,
        #AE802F 58%,
        #AE802F 70%,
        #FFEFA7 85%,
        #AE802F 100%
    );
    background-size: 300% 100%;
    animation: goldSweep 10s ease-in-out infinite;
}
/* Wnetrze pierscienia: przycina kadr i daje nieprzezroczyste tlo - zdjecia
   kadry to wycinanki z alfa, wiec bez tego zloto przebijaloby przez sylwetke. */
.article-quote__portrait-inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--aq-ring-bg);
}
.article-quote__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Zdjecia kadry to ujecia do pasa (1000x667, glowa w gornej jednej trzeciej).
       Sam object-fit wcisnalby w kolo cala sylwetke - twarz bylaby wielkosci
       ziarnka. Stad przyblizenie na glowe i ramiona; punkt zaczepienia lekko
       nad gorna krawedzia, zeby czubek glowy nie dotykal pierscienia. */
    transform: scale(1.45);
    transform-origin: 50% -2%;
}

.article-quote--avatar {
    display: grid;
    align-items: start;
    column-gap: 1.15rem;
    row-gap: 0.2rem;
}
.article-quote--avatar .article-quote__body { display: contents; }
.article-quote--avatar .article-quote__portrait { grid-area: portrait; }
.article-quote--avatar .article-quote__person { grid-area: person; }
.article-quote--avatar .article-quote__body > p {
    grid-area: text;
    margin-bottom: 0;
}

/* Zdjecie z lewej, przy tekscie */
.article-quote--left {
    --aq-size: 76px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "portrait text"
        "portrait person";
}

/* Zdjecie oblane tekstem - jedyny wariant poza siatka.
   Reszta ukladow trzyma portret w osobnej kolumnie, wiec przy dlugim cytacie
   pod zdjeciem zostaje pusty pas, a tekst zjezdza waskim slupkiem. Tutaj portret
   jest zwyklym floatem: tekst mija go z boku, a po minieciu dolnej krawedzi
   wraca na pelna szerokosc. Dlatego wlasnie ten wariant NIE moze byc siatka. */
.article-quote--wrap {
    --aq-size: 88px;
    display: block;
}
.article-quote--wrap .article-quote__portrait {
    float: left;
    margin: 0 1.15rem 0.6rem 0;
    /* Tekst ma opływać koło, nie prostokąt. Dwie pułapki, obie kosztowały próbę:
       1. Przegladarka PRZYCINA ksztalt do pudelka marginesu, wiec powiekszenie
          przez shape-margin musi sie w nim zmiescic - stad prawy margines
          wiekszy od shape-margin. Przy shape-margin bez marginesu ksztalt
          zostawal przyciety do prostokata i cale wyciecie znowu bylo kanciaste.
       2. circle(50%) liczy promien z przekatnej pudelka marginesu, wiec przy
          niekwadratowym pudelku rozjezdza sie ze zdjeciem. Dlatego promien
          i srodek podajemy wprost. Strona ma globalne box-sizing: border-box
          (css/style.css), wiec --aq-size to CALY portret razem z pierscieniem. */
    --aq-r: calc(var(--aq-size, 88px) / 2);
    shape-outside: circle(var(--aq-r) at var(--aq-r) var(--aq-r));
    shape-margin: 0.85rem;
}
/* Float wyzszy od tekstu wystawalby poza tlo bloku - domykamy go klasycznie. */
.article-quote--wrap::after {
    content: '';
    display: block;
    clear: both;
}

/* Duze zdjecie z lewej - portret wyrownany do srodka calej tresci.
   Grubszy pierscien, zeby przy tym rozmiarze zlota smuga byla widoczna. */
.article-quote--left-lg {
    --aq-size: 124px;
    --aq-ring-w: 4px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "portrait text"
        "portrait person";
    align-items: center;
}

/* Zdjecie z prawej */
.article-quote--right {
    --aq-size: 76px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "text portrait"
        "person portrait";
}

/* Zdjecie nad cytatem, calosc wysrodkowana */
.article-quote--top {
    --aq-size: 104px;
    --aq-ring-w: 4px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "portrait"
        "text"
        "person";
    justify-items: center;
    text-align: center;
    row-gap: 0.75rem;
    padding-top: 1.75rem;
}
.article-quote--top .article-quote__person {
    align-items: center;
    margin-top: 0;
}
.article-quote--top .article-quote__person cite { text-align: center; }

/* Karta: zdjecie z podpisem jako naglowek, cytat pod kreska */
.article-quote--card {
    --aq-size: 66px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "portrait person"
        "text text";
    align-items: center;
    row-gap: 0.95rem;
}
.article-quote--card .article-quote__person { margin-top: 0; }
.article-quote--card .article-quote__person cite { font-size: 1rem; }
.article-quote--card .article-quote__body > p {
    border-top: 1px solid var(--aq-line);
    padding-top: 0.95rem;
}

/* Male zdjecie przy podpisie na koncu cytatu */
.article-quote--sign {
    --aq-size: 54px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "text text"
        "person portrait";
    align-items: center;
    row-gap: 0.8rem;
}
.article-quote--sign .article-quote__person {
    justify-self: end;
    align-items: flex-end;
    margin-top: 0;
}
.article-quote--sign .article-quote__person cite { text-align: right; }
.article-quote--sign .article-quote__role { text-align: right; }

/* Bez ruchu zloto zatrzymuje sie na srodku gradientu, a nie na krawedzi -
   inaczej pierscien swiecilby jednolitym #AE802F (ta sama sztuczka co przy
   zdjeciu w karcie urodzinowej). Silnik gold sweep i tak sie nie uruchamia. */
@media (prefers-reduced-motion: reduce) {
    .article-quote__portrait {
        animation: none;
        background-position: 50% center;
    }
}

@media (max-width: 600px) {
    .article-quote { padding: 1.3rem 1.15rem; }
    .article-quote--avatar { column-gap: 0.85rem; }
    .article-quote--left    { --aq-size: 60px; }
    .article-quote--right   { --aq-size: 60px; }
    /* Oblewanie tekstem ma na telefonie najwiecej sensu (kolumna jest waska),
       wiec zostaje - schodzi tylko rozmiar portretu i odstep. */
    .article-quote--wrap    { --aq-size: 68px; }
    .article-quote--wrap .article-quote__portrait {
        margin-right: 0.9rem;
        shape-margin: 0.65rem;
    }
    /* Duzy portret obok tekstu zostawia na telefonie kolumne szerokosci jednego
       slowa - dlatego "duze z lewej" idzie tam nad cytat. */
    .article-quote--left-lg {
        --aq-size: 96px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "portrait"
            "text"
            "person";
        align-items: start;
        row-gap: 0.7rem;
    }
    .article-quote--top     { --aq-size: 86px; padding-top: 1.4rem; }
    .article-quote--card    { --aq-size: 56px; }
    .article-quote--sign    { --aq-size: 46px; }
}

/* =====================================================================
   SHARE BUTTONS + PODGLAD ADMINA
   ===================================================================== */
.article-share {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
    border-top: 1px solid #e5e7eb;
}
.article-share a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    color: #fff;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.18s;
}
.article-share a:hover { transform: translateY(-2px); }
.article-share .share-fb { background: #1877f2; }
.article-share .share-x  { background: #000; }

/* Banner draftu (widoczny tylko w preview administracyjnym) */
.article-draft-banner {
    background: #fef3c7;
    border-bottom: 2px solid #f59e0b;
    color: #78350f;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
}

/* =====================================================================
   POWIAZANE ARTYKULY (related-articles) - kopia z istniejacych artykulow
   ===================================================================== */
.related-articles {
    background-color: #f5f7fa;
    padding: 3rem 0;
    margin-top: 3rem;
}
.related-articles h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #1a4c8b;
    font-size: 2rem;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* Karty w sekcji "Zobacz również" - layout identyczny ze starymi artykulami.
   Bazowe style .news-card sa w style.css, tutaj domykamy uklad i padding tresci. */
.related-articles .news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Plakietki kategorii LEZA NA ZDJECIU, nie nad nim.
   Bez tych regul .news-categories jest zwyklym blokiem w przeplywie: zabiera
   pasek u gory karty (w jasnym motywie bialy, bo to tlo karty), a zdjecie
   o wysokosci 100% zostaje zepchniete w dol i przyciete przez overflow
   .news-image - kadr traci tyle, ile zajmuja plakietki.
   Listing aktualnosci ma te reguly w css/aktualnosci.css, ale tamten arkusz
   nie jest wpiety na stronie artykulu, a statyczne artykuly maja wlasna kopie
   w <style>. Ta sekcja domyka trzecie miejsce - karty generowane przez
   aktualnosci/article.php.
   Plakietki sa celowo drobniejsze i mniej krzykliwe niz na listingu: tu sa
   dodatkiem do kadru, nie glownym elementem karty. */
.related-articles .news-card .news-image {
    position: relative;
}
.related-articles .news-card .news-categories {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 16px);
}
/* Tlo z alfa + rozmycie dziala na kazdym zdjeciu, jasnym i ciemnym, wiec ta
   sama regula obsluguje oba motywy. Przegladarki bez backdrop-filter dostaja
   samo polprzezroczyste tlo - czytelne, tylko mniej efektowne. */
.related-articles .news-card .news-category {
    margin: 0;
    padding: 3px 8px;
    background-color: rgba(15, 23, 42, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.related-articles .news-card .news-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.related-articles .news-card h3 {
    color: #1a4c8b;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}
.related-articles .news-card p {
    color: #444;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

/* Przycisk "Czytaj wiecej" - wyzsza specificity, zeby pokonac konflikt
   miedzy ui-enhancements.css (niebieskie tlo) a ui-consistency.css (niebieski tekst).
   Bez tego override'u dostajemy niebieski tekst na niebieskim tle i maly padding. */
.related-articles .news-card .read-more {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: #1a4c8b;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    align-self: flex-start;
    margin-top: auto;
}
.related-articles .news-card .read-more:hover {
    background: #15407a !important;
    background-color: #15407a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-decoration: none;
    transform: translateY(-2px);
}

/* =====================================================================
   RESPONSYWNOSC
   ===================================================================== */
/* Galeria - na tablecie schodzimy do 2 kolumn i 2 zdjec w karuzeli */
@media (max-width: 900px) {
    .article-gallery--carousel .article-gallery__track > .article-gallery__item {
        width: calc((100% - var(--ksp-gal-gap)) / 2);
    }
    .article-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    .article-gallery--masonry .article-gallery__grid { column-count: 2; }
}
@media (max-width: 560px) {
    /* Karuzela: jedno zdjecie plus zajawka nastepnego (sygnal, ze mozna przewijac) */
    .article-gallery--carousel .article-gallery__track > .article-gallery__item { width: 84%; }
    /* Pionowe: dwa kadry na ekran telefonu (9:16 na cala szerokosc nie zmiescilby sie w oknie) */
    .article-gallery--portrait .article-gallery__track > .article-gallery__item { width: 58%; }
    .article-gallery--slider .article-gallery__frame,
    .article-gallery--showcase .article-gallery__frame { aspect-ratio: 4 / 3; }
    .article-gallery__arrow { width: 36px; height: 36px; font-size: 0.85rem; }
    .article-gallery__arrow--prev { left: 6px; }
    .article-gallery__arrow--next { right: 6px; }
    .article-gallery__thumb { width: 68px; height: 48px; }
    .article-gallery__cap { font-size: 0.82rem; }
    .ksp-lightbox { padding: 3.5rem 0.5rem; }
    .ksp-lightbox__btn { width: 40px; height: 40px; }
}

@media (max-width: 768px) {
    .article-header { height: 300px; }
    .article-header-overlay h1 { font-size: 1.75rem; }
    .feature-grid,
    .subscribe-apps,
    .article-stats-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .article-content { padding: 1.5rem 1rem; }

    /* Meta na mobile: nadpisujemy style.css:3830 (flex-direction: column, gap: 10px).
       Chcemy: data + autor + komentarze w jednej linii (z wrap'em jesli za waska),
       kategorie na osobnym wierszu pod spodem. Pomniejszony font, mniejszy gap. */
    .article-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem 0.75rem; /* row-gap | column-gap */
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .article-meta .article-author,
    .article-meta .article-comments-count {
        font-size: inherit;
    }
    /* Kategorie zawsze na osobnej linii (calej szerokosci), pod data/autorem/komentarzami */
    .article-categories {
        flex-basis: 100%;
        margin-left: 0;
        gap: 0.3rem;
    }
    .article-category {
        font-size: 0.7rem;
        padding: 0.2rem 0.55rem;
    }
}