/* =====================================================================
   STRONA GŁÓWNA — NAJNOWSZE WPISY
   Arkusz sekcji. Wspólne tokeny, siatka, niebo, nagłówki, ozdobnik
   i przyciski: strona-glowna.css. Każda reguła zaczyna się od .sg-blog.

   Ostatnie pasmo `/`: noc po papierze narzędzi, przezroczysta (pod spodem
   wspólne niebo). Głowa jak w pozostałych sekcjach (.sg-glowa, .sg-h2,
   .sg-lede); ozdobnik .sg-orn niesie tu nad-tytuł z copy. Kafle wpisów
   mówią językiem kart nowiu i pełni (złota ramka z drugą linią wewnątrz, półprzezroczysta
   noc), z okładką u góry. Każdy kafel to jeden link. Przycisk pod listą —
   drugorzędny na nocy (.sg-btn--obrys).

   Układ bez JS:
     podstawa  kafle w rzędzie przewijanym w poziomie (scroll-snap),
               następny wystaje zza krawędzi
     40em      dwa kafle w widoku, reszta przewijana
     60em      trzy kolumny, bez przewijania
   ===================================================================== */

/* ---------- głowa: nad-tytuł w ozdobniku ---------- */

.sg-blog .sg-blog__nad {
    font-family: var(--sg-font-tekst);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
/* rozstrzelenie dokłada odstęp za ostatnią literą — wyrównanie do gwiazdki */
.sg-blog .sg-blog__nad span { margin-right: -0.32em; }

.sg-blog .sg-h2 em {
    font-style: italic;
    color: var(--sg-zloto);
}

/* ---------- lista kafli ---------- */

.sg-blog .sg-blog__lista {
    list-style: none;
    /* 6 px oddechu dookoła: fokus (3 + 3 px) nie ucina się na krawędzi przewijanego rzędu */
    margin: 0 -6px;
    padding: 6px 6px 1rem;
    scroll-padding-inline: 6px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 22rem);
    gap: var(--sg-odstep);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 168, 76, 0.5) transparent;
}
.sg-blog .sg-blog__pozycja {
    display: flex;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}

@media (min-width: 40em) {
    .sg-blog .sg-blog__lista { grid-auto-columns: calc((100% - var(--sg-odstep)) / 2.15); }
}
@media (min-width: 60em) {
    .sg-blog .sg-blog__lista {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    /* uniesienie tylko w siatce — w przewijanym rzędzie ucinałby je brzeg */
    .sg-blog .sg-blog__karta:hover { transform: translateY(-4px); }
}

/* ---------- kafel ---------- */

.sg-blog .sg-blog__karta {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--sg-pergamin);
    text-decoration: none;
    border: 1px solid var(--sg-zloto-linia);
    outline: 1px solid rgba(201, 168, 76, 0.16);
    outline-offset: -9px;
    background: linear-gradient(180deg, rgba(26, 26, 51, 0.8) 0%, rgba(14, 14, 32, 0.72) 100%);
    transition: border-color .3s ease, transform .45s var(--sg-wyjscie);
}
.sg-blog .sg-blog__karta:hover {
    color: var(--sg-pergamin);
    border-color: var(--sg-zloto);
}
/* border-radius: 0 — blog.css daje globalne a:focus-visible { border-radius: 6px } */
.sg-blog .sg-blog__karta:focus-visible {
    outline: 3px solid var(--sg-terakota);
    outline-offset: 3px;
    border-radius: 0;
}

.sg-blog .sg-blog__kadr {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 9px 9px 0;
    background: var(--sg-noc-karta);
}
.sg-blog .sg-blog__obraz {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--sg-wyjscie);
}
.sg-blog .sg-blog__karta:hover .sg-blog__obraz { transform: scale(1.04); }

.sg-blog .sg-blog__tresc {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.25rem, 0.95rem + 1vw, 1.75rem) clamp(1.25rem, 0.95rem + 1vw, 1.75rem) clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.sg-blog .sg-blog__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0 0 0.85rem;
    font-size: var(--sg-fs-etykieta);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sg-zloto);
}

.sg-blog .sg-blog__tytul {
    margin: 0 0 0.75rem;
    font-family: var(--sg-font-naglowek);
    font-size: clamp(1.45rem, 1.28rem + 0.6vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--sg-papier);
    text-wrap: balance;
}

.sg-blog .sg-blog__zajawka {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(245, 237, 224, 0.84);
    text-wrap: pretty;
}

/* „Czytaj wpis” — etykieta przycisku (krój, wersaliki, rozstrzelenie .sg-btn)
   bez ramki: przycisk w kaflu, który sam jest linkiem, byłby drugim celem */
.sg-blog .sg-blog__czytaj {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(201, 168, 76, 0.3);
    font-size: var(--sg-fs-etykieta);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sg-zloto-jasne);
}
.sg-blog .sg-blog__czytaj::after {
    content: '→';
    content: '→' / '';
    letter-spacing: 0;
    transition: transform .35s var(--sg-wyjscie);
}
.sg-blog .sg-blog__karta:hover .sg-blog__czytaj::after,
.sg-blog .sg-blog__karta:focus-visible .sg-blog__czytaj::after { transform: translateX(4px); }

/* ---------- przycisk pod kaflami ---------- */

.sg-blog .sg-blog__stopka {
    margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 0;
    text-align: center;
}

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
    .sg-blog .sg-blog__karta,
    .sg-blog .sg-blog__obraz,
    .sg-blog .sg-blog__czytaj::after { transition: none; }
    .sg-blog .sg-blog__karta:hover,
    .sg-blog .sg-blog__karta:hover .sg-blog__obraz { transform: none; }
}