/* ============================================================
   ROZDROZA W DZIALE "KOLOR I INSPIRACJE"
   Markup: 'rozdroze.php'. Ladowane tylko na czterech stronach.

   Wszystko lezy w '.bmx', wiec tokeny makiety (--navy, --r, --shadow-*,
   --ease) dzialaja bez powtarzania, a przycisk '.bmx-btn' ma pedzel
   od pierwszej chwili. Ten plik dokłada WYLACZNIE uklad.
   Autor: claude, 2026-09-16.
   ============================================================ */

.bmx-roz__hd {
    max-width: 640px;
    margin: 0 0 clamp(30px, 3.6vw, 52px);
}

.bmx-roz__hd .bmx-lead {
    margin-top: 14px;
}

/* Dwa kafelki obok siebie; na waskim ekranie jeden pod drugim. */
.bmx-roz__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-karty);
}

/* Karta. Zachowanie 1:1 z '.bmx-card' z makiety: uniesienie na hover,
   cien ze stanu HOVER (nigdy spoczynkowego - patrz 'design.md'). */
.bmx-roz__k {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: var(--white);
    transition: transform .55s var(--ease),
                box-shadow .55s var(--ease),
                border-color .45s var(--ease);
}

.bmx-roz__k:hover,
.bmx-roz__k:focus-within {
    transform: translateY(-7px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

/* Zdjecie ma staly format, zeby dwa kafelki mialy rowna wysokosc
   niezaleznie od tego, jaki plik wskazuje redakcja. */
.bmx-roz__img {
    overflow: hidden;
    background: var(--cream);
}

.bmx-roz__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.bmx-roz__k:hover .bmx-roz__img img {
    transform: scale(1.06);
}

.bmx-roz__b {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: clamp(20px, 2.2vw, 28px);
}

.bmx-roz__nm {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 500;
    line-height: 1.22;
    color: var(--navy);
}

.bmx-roz__d {
    margin: 0;
    flex: 1;
    font-size: .875rem;
    font-weight: 400;
    color: var(--muted);
}

/* Przycisk jest '<span>', a nie '<a>' - klikalna jest CALA karta
   (nakladka nizej). Dwa odnosniki prowadzace w to samo miejsce
   kazalyby czytnikowi ekranu czytac ten sam cel dwa razy. */
.bmx-roz__cta {
    margin-top: 6px;
    pointer-events: none;
}

/* Pedzel na przycisku ma ruszac z hoveru CALEJ karty - tak samo,
   jak kafelki na stronach Oxygena (patrz 'pedzel.css'). */
.bmx-roz__k:hover .bmx-roz__cta::after,
.bmx-roz__k:focus-within .bmx-roz__cta::after {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
}

.bmx-roz__k:hover .bmx-roz__cta,
.bmx-roz__k:focus-within .bmx-roz__cta {
    color: #fff;
    border-color: var(--navy);
    transition: color .3s var(--ease) .3s, border-color .45s var(--ease);
}

/* Rozciagniety odnosnik - odpowiednik '.bmx-card__lnk' z makiety. */
.bmx-roz__lnk {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.bmx-roz__lnk:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: -4px;
    border-radius: var(--r);
}