/* static/css/components/responsive-picture.css
   =============================================
   RESPONSIVE IMAGES DLA PROJEKTU ZAMEL
   Wersja: 1.0 Final
   =============================================

   Breakpointy (z projektu SCSS):
   - mobile: < 768px (xs)
   - tablet: 768px - 1023px (s)
   - desktop: 1024px - 1199px (m)
   - wide: ≥ 1200px (l)

   Presety:
   - hero_natural: Bannery główne (naturalne proporcje)
   - product: Produkty (kwadrat 1:1)
   - product_carousel: Karuzele (4:3 mobile, 1:1 tablet+)
   - banner: Bannery promocyjne (16:9 mobile, 21:9 desktop)
   - gallery: Galerie (4:3 mobile, 16:9 desktop)
   - thumbnail: Miniatury (kwadrat 1:1, max 150px)
   - video_intercom: Sekcje z video (4:3 mobile, 3:2 tablet+)
   ============================================= */

/* =============================================
   PODSTAWOWE STYLE
   ============================================= */

/* Bazowy kontener picture */
.zamel-picture {
    display: block;
    position: relative;
    width: 100%;
    line-height: 0; /* Usuwa spacing pod obrazem */
}

/* Obrazy wewnątrz picture */
.zamel-picture__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* =============================================
   ASPECT RATIO CONTAINERS
   ============================================= */

/* Kontener z zachowaniem proporcji */
.zamel-picture--aspect {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Domyślny aspect ratio */
.zamel-picture--aspect::before {
    content: "";
    display: block;
    padding-bottom: 56.25%; /* 16:9 domyślnie */
}

/* Obraz w aspect ratio container */
.zamel-picture--aspect .zamel-picture__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =============================================
   PRESET: HERO
   ============================================= */

.zamel-picture--hero {
    width: 100%;
    max-width: 100%;
}

/* Domyślne ustawienia dla hero */
.zamel-picture--hero .zamel-picture__img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: scale-down; /* Zmniejsza jeśli za duży, ale nie powiększa */
    object-position: center;
}

/* Hero z wymuszonym aspect ratio */
.zamel-picture--hero.zamel-picture--aspect .zamel-picture__img {
    object-fit: cover; /* Wypełnia kontener zachowując proporcje */
}

/* Specjalny tag hero_image */
.zamel-hero-image {
    display: block;
    width: 100%;
    max-width: 100%;
}

.zamel-hero-image .zamel-picture__img {
    width: 100%;
    height: auto;
    display: block;
}

/*!* Hero na pełną szerokość - klasa używana w template *!*/
.zamel-hero-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 1920px;
}

/* Centrowanie hero gdy ekran > 1920px */
@media (min-width: 1921px) {
    .zamel-hero-full-width {
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
    }
}

.zamel-hero-full-width .zamel-picture {
    max-width: 1920px;
    margin: 0 auto;
}

/* Zapewnij pełną szerokość na mobile */
@media (max-width: 767px) {
    .zamel-hero-full-width .zamel-picture__img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* Hero_natural preset - zawsze naturalne proporcje */
.zamel-picture--hero_natural {
    display: block;
    width: 100%;
    max-width: 100%;
}

.zamel-picture--hero_natural .zamel-picture__img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    object-fit: scale-down;
}

/* Hero aspect ratios */
@media (max-width: 767px) {
    .zamel-picture--hero.zamel-picture--aspect::before {
        padding-bottom: 56.25%; /* 16:9 mobile */
    }
}

@media (min-width: 768px) {
    .zamel-picture--hero.zamel-picture--aspect::before {
        padding-bottom: 42.553%; /* 2.35:1 (kinowe proporcje) */
    }
}

/* =============================================
   PRESET: PRODUCT
   ============================================= */

.zamel-picture--product {
    width: 100%;
}

.zamel-picture--product.zamel-picture--aspect::before {
    padding-bottom: 100%; /* 1:1 zawsze kwadrat */
}

/* Produkty w karuzeli */
.zamel-product-item .zamel-picture--product {
    width: 100%;
    height: auto;
}

/* Integracja z klasami produktów */
.zamel-product-item-picture {
    width: 100%;
    overflow: hidden;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.07));
}

.zamel-product-item-picture .zamel-picture__img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Pokazuje cały produkt */
    object-position: center;
}

/* =============================================
   PRESET: PRODUCT CAROUSEL
   ============================================= */

.zamel-picture--product_carousel {
    width: 100%;
}

/* Różne proporcje dla karuzeli produktów */
@media (max-width: 767px) {
    .zamel-picture--product_carousel.zamel-picture--aspect::before {
        padding-bottom: 75%; /* 4:3 mobile */
    }
}

@media (min-width: 768px) {
    .zamel-picture--product_carousel.zamel-picture--aspect::before {
        padding-bottom: 100%; /* 1:1 tablet+ */
    }
}

/* =============================================
   PRESET: BANNER
   ============================================= */

.zamel-picture--banner {
    width: 100%;
    max-width: 100%;
}

.zamel-picture--banner.zamel-picture--aspect::before {
    padding-bottom: 56.25%; /* 16:9 domyślnie */
}

@media (min-width: 1024px) {
    .zamel-picture--banner.zamel-picture--aspect::before {
        padding-bottom: 42.857%; /* 21:9 desktop */
    }
}

/* =============================================
   PRESET: GALLERY
   ============================================= */

.zamel-picture--gallery {
    width: 100%;
}

.zamel-picture--gallery.zamel-picture--aspect::before {
    padding-bottom: 75%; /* 4:3 mobile/tablet */
}

@media (min-width: 1024px) {
    .zamel-picture--gallery.zamel-picture--aspect::before {
        padding-bottom: 56.25%; /* 16:9 desktop */
    }
}

/* Galeria produktów - główne zdjęcie */
.gallery-main .zamel-picture--gallery {
    cursor: zoom-in;
}

/* =============================================
   PRESET: THUMBNAIL
   ============================================= */

.zamel-picture--thumbnail {
    width: 100%;
    max-width: 150px;
}

.zamel-picture--thumbnail.zamel-picture--aspect::before {
    padding-bottom: 100%; /* 1:1 kwadrat */
}

/* Thumbnails w galerii */
.gallery-thumbs .zamel-picture--thumbnail {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.gallery-thumbs .zamel-picture--thumbnail:hover {
    opacity: 0.8;
}

/* =============================================
   PRESET: VIDEO INTERCOM
   ============================================= */

.zamel-picture--video_intercom {
    width: 100%;
}

/* Różne proporcje dla video intercom */
@media (max-width: 767px) {
    .zamel-picture--video_intercom.zamel-picture--aspect::before {
        padding-bottom: 75%; /* 4:3 mobile */
    }
}

@media (min-width: 768px) {
    .zamel-picture--video_intercom.zamel-picture--aspect::before {
        padding-bottom: 66.667%; /* 3:2 tablet+ */
    }
}

/* Integracja z klasami video intercom */
.zamel-video-intercom-img {
    width: 100%;
    height: auto;
}

/* =============================================
   STYLE POMOCNICZE
   ============================================= */

/* Zaokrąglone rogi */
.zamel-picture--rounded {
    border-radius: 8px;
    overflow: hidden;
}

.zamel-picture--rounded .zamel-picture__img {
    border-radius: 8px;
}

/* Okrągły */
.zamel-picture--circle {
    border-radius: 50%;
    overflow: hidden;
}

.zamel-picture--circle .zamel-picture__img {
    border-radius: 50%;
}

/* Cień */
.zamel-picture--shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.zamel-picture--shadow:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Hover efekt */
.zamel-picture--hover {
    transition: transform 0.3s ease;
}

.zamel-picture--hover:hover {
    transform: translateY(-5px);
}

/* =============================================
   LAZY LOADING
   ============================================= */

/* Loading skeleton */
.zamel-picture--loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.zamel-picture--loading .zamel-picture__img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zamel-picture--loading .zamel-picture__img[src]:not([src=""]) {
    opacity: 1;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Placeholder dla lazy loading */
.zamel-picture[data-lazy] .zamel-picture__img {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.zamel-picture[data-lazy].loaded .zamel-picture__img {
    filter: blur(0);
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

/* Object fit utilities */
.zamel-picture--contain .zamel-picture__img {
    object-fit: contain;
}

.zamel-picture--cover .zamel-picture__img {
    object-fit: cover;
}

.zamel-picture--fill .zamel-picture__img {
    object-fit: fill;
}

.zamel-picture--scale-down .zamel-picture__img {
    object-fit: scale-down;
}

/* Object position utilities */
.zamel-picture--top .zamel-picture__img {
    object-position: top;
}

.zamel-picture--center .zamel-picture__img {
    object-position: center;
}

.zamel-picture--bottom .zamel-picture__img {
    object-position: bottom;
}

/* =============================================
   RESPONSYWNE KONTENERY
   ============================================= */

/* Kontener ograniczający szerokość */
.zamel-picture-container {
    width: 100%;
    max-width: var(--max-width, 100%);
    margin: 0 auto;
}

/* Różne maksymalne szerokości */
.zamel-picture-container--sm {
    --max-width: 640px;
}

.zamel-picture-container--md {
    --max-width: 1024px;
}

.zamel-picture-container--lg {
    --max-width: 1440px;
}

.zamel-picture-container--xl {
    --max-width: 1920px;
}

/* =============================================
   PRINT STYLES
   ============================================= */

@media print {
    .zamel-picture {
        break-inside: avoid;
    }

    .zamel-picture__img {
        max-width: 100%;
        height: auto;
    }
}

/* =============================================
   FALLBACK DLA STARSZYCH PRZEGLĄDAREK
   ============================================= */

/* Dla przeglądarek bez wsparcia dla aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .zamel-picture--aspect {
        position: relative;
        height: 0;
        overflow: hidden;
    }

    .zamel-picture--aspect::before {
        display: block;
        content: "";
    }

    .zamel-picture--aspect .zamel-picture__img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Fallback dla product item picture */
    .zamel-product-item-picture {
        position: relative;
        padding-bottom: 100%;
        overflow: hidden;
    }

    .zamel-product-item-picture .zamel-picture__img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* Cień dla obrazów produktów */
/*.zamel-product-item-img.with-shadow,*/
/*.zamel-product-item-picture img {*/
/*    filter: drop-shadow(5px 10px 7px rgba(0, 0, 0, 0.45));*/
/*    -webkit-filter: drop-shadow(5px 10px 7px rgba(0, 0, 0, 0.45));*/
/*}*/