/* ============================================================
   BROSZURY PRODUKTOWE - uklad kafelkow
   Markup: 'broszury-produktowe.php'. Ladowane tylko na dwoch stronach.

   Wartosci sa PRZEPISANE ZE WZORCA wskazanego przez klientke
   ('/kolor-inspiracje/', kafelek '#div_block-101-63'), zeby te strona
   nie wygladala jak osobny wynalazek:

       tlo kafelka     #fff          promien        18px (--r)
       ramka           rgba(11,34,64,.07)
       CIEN            brak w spoczynku
       odstep siatki   24px          tlo sekcji     --paper
       hover           translateY(-5px) + --shadow-mh, 0.5s
       odstepy tresci  20px 20px 22px

   Wszystko siedzi w '.bmx', wiec tokeny makiety i '.bmx-btn' razem
   z pedzlem dzialaja bez ani jednej reguly koloru.
   Autor: claude, 2026-09-17.
   ============================================================ */

.bmx-brosz {
    background: var(--paper);
}

.bmx-brosz__hd {
    max-width: 62ch;
    margin-bottom: clamp(26px, 3vw, 40px);
}

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

/* Siatka. 'auto-fill' zamiast sztywnych trzech kolumn: przy dziewieciu
   kafelkach i przy jednym (wersja EN) uklad ma zachowac te sama
   szerokosc karty, a nie rozciagac jej na cala sekcje. */
.bmx-brosz__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap-karty);
}

.bmx-brosz__k {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(11, 34, 64, .07);
    border-radius: var(--r);
    background: #fff;
    overflow: hidden;
    /* Bez cienia w spoczynku - pojawia sie dopiero na hoverze,
       tak jak na wszystkich pozostalych kafelkach serwisu. */
    box-shadow: none;
    transition: transform .5s var(--ease),
                box-shadow .5s var(--ease),
                border-color .5s var(--ease);
}

.bmx-brosz__k:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

/* Okladka. Staly format kadru - pliki maja rozne proporcje (od 720x509
   po 720x1022), a bez tego kafelki w rzedzie mialy rozna wysokosc. */
.bmx-brosz__img {
    aspect-ratio: 4 / 3;
    background: var(--cream);
    overflow: hidden;
}

.bmx-brosz__img img {
    display: block;
    width: 100%;
    height: 100%;
    /* 'contain', a nie 'cover': okladka broszury to grafika z tytulem,
       wiec przyciecie kadru obcieloby jej nazwe. Puste boki wypelnia
       kremowe tlo powyzej. */
    object-fit: contain;
    object-position: center;
}

.bmx-brosz__b {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 20px 22px;
}

.bmx-brosz__nm {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--navy);
}

.bmx-brosz__d {
    margin: 0 0 20px;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
}

/* 'auto' dociaga przyciski do dolu karty, wiec w calym rzedzie stoja
   w jednej linii niezaleznie od dlugosci opisu. */
.bmx-brosz__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

@media (max-width: 560px) {
    .bmx-brosz__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .bmx-brosz__k { transition: none; }
}

/* ------------------------------------------------------------
   CALA KARTA KLIKALNA + HOVER MALUJE TYLKO "ZOBACZ"
   Decyzja klientki 2026-09-17: "skoro mamy tu dwa buttony, zrobmy tak,
   zeby po najechaniu na karte wypelnialo sie view, bo to robi karta,
   a download wymagalo wcelowania w button".

   Hover karty ma wiec zapowiadac to, co zrobi KLIKNIECIE W KARTE -
   czyli podglad. Pobranie zostaje osobnym, swiadomym dzialaniem.
   ------------------------------------------------------------ */

.bmx-brosz__k {
    position: relative;
}

.bmx-brosz__lnk {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Przyciski NAD nakladka - inaczej "POBIERZ" zostalby przykryty
   i zachowywalby sie jak podglad. */
.bmx-brosz__cta .bmx-btn {
    position: relative;
    z-index: 2;
}

/* Kursor na calej karcie zapowiada klikniecie. */
.bmx-brosz__k:hover {
    cursor: pointer;
}

/* Farba wjezdza TYLKO na pierwszy przycisk ("ZOBACZ" / "VIEW"). */
.bmx-brosz__k:hover .bmx-brosz__cta .bmx-btn:first-child::after {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
}

.bmx-brosz__k:hover .bmx-brosz__cta .bmx-btn:first-child {
    color: #fff;
    border-color: var(--navy);
    transition: color .3s var(--ease) .3s, border-color .45s var(--ease);
}