/*
 * Stenos – Efekt 3D dla kart produktów
 * Plik: style.css  (ładowany na front-endzie i w edytorze)
 */

/* Kontener – zostawia miejsce na cień */
.efekt-3d-wrap {
    position:      relative;
    margin-bottom: 20px;
    margin-right:  15px;
}

/* Link okalający zdjęcie */
.efekt-3d {
    display:       block;
    border-radius: 6px 6px 0 0;
}

/* Zdjęcie główne z miękkim cieniem 3D */
.efekt-3d img {
    display:       block;
    width:         100%;
    aspect-ratio:  4 / 3;
    object-fit:    cover;
    border-radius: 6px 6px 0 0;

    /*
     * EFEKT 3D:
     *  8px  → przesunięcie w prawo
     *  8px  → przesunięcie w dół
     *  12px → rozmycie (miękki, subtelny cień)
     *  rgba → czarny na 20% przezroczystości (delikatna szarość)
     */
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.20);

    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Subtelna animacja po najechaniu */
.efekt-3d:hover img {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.28);
    transform:  translateY(-2px);
}

/* Podgląd w edytorze Gutenberga */
.wp-block[data-type="stenos/karta-zdjecie"] .efekt-3d-wrap {
    margin-right: 0;  /* edytor ma własne marginesy kolumn */
}

/* -----------------------------------------------------------------------
   Odznaka tekstowa (np. WSZECHSTRONNE 1)
   background:     #c17d3c;
------------------------------------------------------------------------ */
.stenos-badge {
    position:       absolute;
    top:            10px;
    left:           10px;
    background:     #535864;
    color:          #ffffff;
    font-size:      0.72rem;
    font-weight:    700;
    padding:        4px 10px;
    border-radius:  3px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    pointer-events: none;
    z-index:        2;
}

/* -----------------------------------------------------------------------
   Okrągła ikonka (przekrój produktu) – prawy dolny róg
------------------------------------------------------------------------ */
.stenos-icon {
    position:      absolute;
    bottom:        10px;
    right:         18px;
    width:         52px;
    height:        52px;
    border-radius: 50%;
    background:    #ffffff;
    border:        2px solid #dddddd;
    overflow:      hidden;
    z-index:       2;
}