/**
 * Strony statyczne (SEO / LLM)
 *
 * Wczytywane TYLKO przez strony z katalogow /{lang}/ - aplikacja ich nie
 * pobiera. Korzystaja z tokenow i komponentow z main.css (naglowek, stopka,
 * przyciski), wiec wygladaja jak reszta serwisu, ale maja wlasne tabele:
 * .page__table zamiast .data-table, bo na mobile nie zamieniaja sie w karty -
 * to macierze liczb, ktore czyta sie wierszami, a nie pojedynczo.
 */

.page__main {
    max-width: 60rem;
    margin-inline: auto;
    width: 100%;
}

.page__article h1 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
    .page__article h1 {
        font-size: var(--text-3xl);
    }
}

.page__lead {
    font-size: var(--text-base);
    color: var(--color-text);
    max-width: 44rem;
}

.page__facts {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ===================
   WEZWANIE DO APLIKACJI
   =================== */

.page__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-6);
}

.page__cta .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.page__cta-hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ===================
   SEKCJE I TABELE
   =================== */

.page__section {
    margin-bottom: var(--space-7);
}

.page__section h2 {
    font-size: var(--text-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

/* Tabele licz sa szersze od telefonu - przewija sie kontener, nie strona.
   Cien na krawedzi sygnalizuje, ze tresc ma dalszy ciag. */
.page__scroll {
    /* ramka obejmuje tabele, nie cala szerokosc kolumny tekstu - inaczej po
       prawej zostawal pusty, obramowany obszar */
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(to right, var(--color-bg) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, var(--color-bg) 30%, rgba(255, 255, 255, 0)) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(15, 36, 64, 0.16), rgba(15, 36, 64, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(15, 36, 64, 0.16), rgba(15, 36, 64, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.page__table {
    /* max-content, nie 100%: przy pieciu kolumnach rozciagniecie na cala szerokosc
       robilo kolumny szerokie na 250 px dla piecioznakowej wartosci, a naglowek
       i liczba stawaly na przeciwnych koncach kolumny */
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.page__table th,
.page__table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
}

.page__table thead th {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    position: sticky;
    top: 0;
}

/* Kolumna kategorii zostaje widoczna przy przewijaniu w poziomie -
   bez tego przy skrajnej prawej kolumnie nie wiadomo, ktory to wiersz */
.page__table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    background-color: var(--color-bg);
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.page__table td.num,
.page__table th.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Bez rozciagania na cala szerokosc kolumny hugaja tresc, ale liczby potrzebuja
   minimum, zeby naglowek "Mezczyzni" nie robil kolumny szerszej od danych */
.page__table th.num,
.page__table td.num {
    min-width: 4.5rem;
}

/* Liczba probek pod wartoscia - mniejsza, ale nie mniej niz 12 px */
.page__n {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
}

.page__table tbody tr:last-child th,
.page__table tbody tr:last-child td {
    border-bottom: 0;
}

/* ===================
   LISTY I NOTATKI
   =================== */

.page__list {
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.page__list a,
.page__related a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.page__list a:hover,
.page__related a:hover {
    background-color: var(--color-bg-subtle);
}

.page__note {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background-color: var(--color-bg-subtle);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.page__faq h2 {
    font-size: var(--text-base);
    margin-top: var(--space-5);
}

.page__faq p {
    max-width: 44rem;
}

.page__related {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.page__related h2 {
    font-size: var(--text-base);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.page__related ul {
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .page__list,
    .page__related ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===================
   PRZELACZNIK JEZYKA
   =================== */

.page-langs {
    display: flex;
    gap: var(--space-1);
}

.page-langs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--color-text-inverse);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.page-langs a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 480px) {
    /* Przy pieciu jezykach i waskim ekranie przyciski musza sie zmiescic
       obok marki - zwezamy je, wysokosc celu dotyku zostaje */
    .page-langs a {
        min-width: 34px;
        padding-inline: 0;
        font-size: var(--text-xs);
    }
}