/*
 * W wąskim kontenerze siatka ma trzy kolumny, a w szerokim cztery.
 * Dodatkowy kafelek każdego rzędu pokazujemy dopiero razem z czwartą kolumną.
 */
.siatka-tresci--aktualnosci
    > .kafelek-tresci--aktualnosc-tylko-szeroka {
    display: none;
}

@container (min-width: 90rem) {
    .siatka-tresci--aktualnosci
        > .kafelek-tresci--aktualnosc-tylko-szeroka {
        display: block;
    }
}

/*
 * Subtelne rozwiniecie drugiej linii nad podpisem kafelka.
 * Osobny element dekoracyjny nie zmienia obszaru glownego linku.
 */
.kafelek-tresci--aktualnosc .kafelek-tresci__linia-animowana {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 var(--aktualnosci-belka-animowana-grubosc, 0.25rem);
    inline-size: 100%;
    block-size: var(--aktualnosci-belka-animowana-grubosc, 0.25rem);
    margin-block-end: calc(
        -1 * var(--aktualnosci-belka-animowana-grubosc, 0.25rem)
    );
    background: var(
        --aktualnosci-belka-animowana-kolor,
        var(--kolor-akcentowy, currentColor)
    );
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.kafelek-tresci--aktualnosc:is(:hover, :has(:focus-visible))
.kafelek-tresci__linia-animowana {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
    .kafelek-tresci--aktualnosc .kafelek-tresci__linia-animowana {
        transition: transform var(--aktualnosci-belka-animowana-czas, 800ms) ease-in-out;
    }
}

@media (forced-colors: active) {
    .kafelek-tresci--aktualnosc .kafelek-tresci__linia-animowana {
        background: Highlight;
    }
}