/* Baza wiedzy /rules (rules.php) - tylko to, czego nie ma w site.css */

/* ---------- Naglowek ---------- */
.rules-hero {
    isolation: isolate;
}

.rules-hero::before {
    content: "";
    position: absolute;
    inset: 0 calc(var(--gutter) * -1);
    z-index: -1;
    background:
        radial-gradient(40rem 20rem at 50% 38%, rgba(var(--accent-rgb), 0.12), transparent 70%);
    pointer-events: none;
}

.rules-hero .h1 {
    text-shadow: 0 20px 80px rgba(var(--accent-rgb), 0.14);
}

.rules-hero .text-grad {
    padding-right: .04em;
}

.rules-hero .lead {
    max-width: 60ch;
}

/* ---------- Grupy dokumentow ---------- */
.rules-group {
    padding-block: clamp(20px, 3vw, 32px);
}

.rules-group:first-of-type {
    padding-top: clamp(8px, 2vw, 24px);
}

.rules-group:last-of-type {
    padding-bottom: clamp(56px, 8vw, 104px);
}

.rules-group-head {
    margin-bottom: clamp(18px, 2.4vw, 26px);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.rules-group-title {
    font-size: clamp(26px, 3vw, 34px);
}

.rules-count {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-3);
}

/* ---------- Karty ---------- */
.rules-card .card-text {
    max-width: 44ch;
}

.rules-card.is-locked {
    container-type: inline-size;
    border-style: dashed;
    border-color: var(--line-2);
    background: rgba(255, 255, 255, 0.012);
    box-shadow: none;
    cursor: not-allowed;
}

.rules-card.is-locked .card-icon {
    filter: grayscale(1);
}

/* Przygaszamy tresc, nie cala karte: [data-reveal].is-visible z site.css
   ustawia opacity: 1 i nadpisuje .card.is-locked { opacity: .62 } */
.rules-card.is-locked > :not(.rules-lock) {
    opacity: .62;
}

/* Bez JS nie ma [data-reveal] - wtedy .card.is-locked z site.css przygaszalby
   karte drugi raz (razem z dziecmi wyzej) */
html:not(.js) .rules-card.is-locked {
    opacity: 1;
}

.rules-lock {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Waska karta (grid-4 przy ~961-1090px): plakietka nachodzilaby na ikone,
   wiec wraca do normalnego przeplywu nad ikona */
@container (max-width: 190px) {
    .rules-lock {
        position: static;
        margin-bottom: 14px;
    }
}

/* 3 karty w 2 kolumnach: ostatnia na cala szerokosc zamiast osieroconej */
@media (min-width: 641px) and (max-width: 960px) {
    .rules-grid.grid-3 > :nth-child(3):last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .rules-group-head {
        gap: 10px;
    }
}