/**
 * Modern Gallery Layout - Równe miniatury
 * Uporządkowany layout galerii z równymi miniaturkami
 * ZAWSZE 3 MINIATURY W RZĘDZIE NA DESKTOP
 */

/* ============================================
   GALERIA - ZAWARTOŚĆ WIDOCZNA
   (wcześniej ukryta, teraz przywrócona)
   ============================================ */

/* ============================================
   GALLERY CONTAINER - CSS Grid (UKRYTE)
   ============================================ */

/* Responsive columns */
/* @media (min-width: 1200px) - USUNIĘTE - teraz 4 kolumny na desktopie (ustawione w classic/main.css i ff-gallery-modern.css) */

@media (max-width: 768px) {
    .gallery,
    .newgallery,
    .image_list,
    div.gallery,
    div.newgallery,
    div.image_list,
    #bodyWrapper .gallery,
    #bodyWrapper .newgallery,
    #bodyWrapper .image_list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2, 8px) !important;
        padding: var(--space-2, 8px) !important;
    }
}

@media (max-width: 480px) {
    .gallery,
    .newgallery,
    .image_list,
    div.gallery,
    div.newgallery,
    div.image_list,
    #bodyWrapper .gallery,
    #bodyWrapper .newgallery,
    #bodyWrapper .image_list {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   PHOTO CARD - Równe miniatury
   ============================================ */

.gallery .photo,
.newgallery .photo,
.image_list .photo {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--color-bg-dark, #171717) !important;
    border-radius: var(--space-3, 12px) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12)) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.gallery .photo:hover,
.newgallery .photo:hover,
.image_list .photo:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md, 0 3px 6px rgba(0,0,0,0.16)) !important;
}

/* ============================================
   PHOTO LINK & IMAGE - Równe proporcje
   ============================================ */

.gallery .photo a.photo-link,
.newgallery .photo a.photo-link,
.image_list .photo a.photo-link,
.gallery .photo a,
.newgallery .photo a,
.image_list .photo a {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--color-bg-dark, #171717) !important;
    line-height: 0 !important; /* Usuwa odstęp pod obrazem */
}

.gallery .photo a.photo-link img.user_photo,
.newgallery .photo a.photo-link img.user_photo,
.image_list .photo a.photo-link img.user_photo,
.gallery .photo a img.user_photo,
.newgallery .photo a img.user_photo,
.image_list .photo a img.user_photo {
    width: 100% !important;
    height: auto !important; /* Zachowuje naturalne proporcje */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: transform 0.3s ease !important;
}

.gallery .photo:hover a img,
.newgallery .photo:hover a img,
.image_list .photo:hover a img {
    transform: scale(1.05) !important;
}

/* Badge - mała ikona w rogu karty */
.gallery .photo a img.badge,
.newgallery .photo a img.badge,
.image_list .photo a img.badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

/* Upewnij się, że photo-link ma position: relative dla badge */
.gallery .photo a.photo-link,
.newgallery .photo a.photo-link,
.image_list .photo a.photo-link {
    position: relative !important;
}

/* Wyklucz stats, ikony (nie badge) */
.gallery .photo a img[src*="views"],
.newgallery .photo a img[src*="views"],
.image_list .photo a img[src*="views"],
.gallery .photo a img[src*="likes"],
.newgallery .photo a img[src*="likes"],
.image_list .photo a img[src*="likes"],
.gallery .photo a img[src*="comments"],
.newgallery .photo a img[src*="comments"],
.image_list .photo a img[src*="comments"],
.gallery .photo a img[src*="favorites"],
.newgallery .photo a img[src*="favorites"],
.image_list .photo a img[src*="favorites"] {
    object-fit: contain !important;
    aspect-ratio: auto !important;
    height: auto !important;
    width: auto !important;
}

/* ============================================
   PHOTO TITLE & INFO
   ============================================ */

.gallery .photo .title,
.newgallery .photo .title,
.image_list .photo .title {
    padding: var(--space-3, 12px) !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--color-text-light, #e1e1e1) !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}

/* Ukryj puste tytuły */
.gallery .photo .title:empty,
.newgallery .photo .title:empty,
.image_list .photo .title:empty {
    display: none !important;
}

.gallery .photo .stats,
.newgallery .photo .stats,
.image_list .photo .stats {
    padding: 0 var(--space-3, 12px) var(--space-3, 12px) !important;
    margin: 0 !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2, 8px) !important;
    flex-wrap: wrap !important;
    line-height: 1.4 !important;
}

/* Małe ikony w stats - odsłony, komentarze, etc. */
.gallery .photo .stats img,
.newgallery .photo .stats img,
.image_list .photo .stats img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
}

.gallery .photo .stats span,
.newgallery .photo .stats span,
.image_list .photo .stats span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.gallery .photo .stats a,
.newgallery .photo .stats a,
.image_list .photo .stats a {
    color: inherit !important;
    text-decoration: none !important;
    margin-right: 4px !important;
}

/* Ukryj ikonę i liczbę analiz (critiques) */
.gallery .photo .stats img[src*="critiques.gif"],
.newgallery .photo .stats img[src*="critiques.gif"],
.image_list .photo .stats img[src*="critiques.gif"],
.gallery .photo .stats img[alt*="analiz"],
.newgallery .photo .stats img[alt*="analiz"],
.image_list .photo .stats img[alt*="analiz"],
.gallery .photo .stats img[title*="analiz"],
.newgallery .photo .stats img[title*="analiz"],
.image_list .photo .stats img[title*="analiz"] {
    display: none !important;
}

/* Ukryj span z liczbą critiques (poprzedza img critiques.gif) - dla nowoczesnych przeglądarek */
.gallery .photo .stats span:has(+ img[src*="critiques.gif"]),
.newgallery .photo .stats span:has(+ img[src*="critiques.gif"]),
.image_list .photo .stats span:has(+ img[src*="critiques.gif"]) {
    display: none !important;
}

/* Ukryj ikonę i liczbę komentarzy (comments) */
.gallery .photo .stats img[src*="comments.gif"],
.newgallery .photo .stats img[src*="comments.gif"],
.image_list .photo .stats img[src*="comments.gif"],
.gallery .photo .stats img[alt*="kom"],
.newgallery .photo .stats img[alt*="kom"],
.image_list .photo .stats img[alt*="kom"],
.gallery .photo .stats img[title*="kom"],
.newgallery .photo .stats img[title*="kom"],
.image_list .photo .stats img[title*="kom"] {
    display: none !important;
}

/* Ukryj span z liczbą komentarzy (poprzedza img comments.gif) */
.gallery .photo .stats span:has(+ img[src*="comments.gif"]),
.newgallery .photo .stats span:has(+ img[src*="comments.gif"]),
.image_list .photo .stats span:has(+ img[src*="comments.gif"]) {
    display: none !important;
}

/* ============================================
   SECTION PHOTOS (Strona główna)
   ============================================ */

#bodyWrapper .section > .photo {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--color-bg-dark, #171717) !important;
    border-radius: var(--space-3, 12px) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12)) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#bodyWrapper .section {
    display: grid !important;
    /* grid-template-columns: repeat(3, 1fr) !important; - USUNIĘTE - teraz 4 kolumny na desktopie */
    gap: var(--space-4, 16px) !important;
    padding: var(--space-4, 16px) !important;
}

@media (max-width: 768px) {
    #bodyWrapper .section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2, 8px) !important;
        padding: var(--space-2, 8px) !important;
    }
}

#bodyWrapper .section > .photo a.photo-link,
#bodyWrapper .section > .photo a {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    line-height: 0 !important; /* Usuwa odstęp pod obrazem */
}

#bodyWrapper .section > .photo a img.user_photo {
    width: 100% !important;
    height: auto !important; /* Zachowuje naturalne proporcje */
    display: block !important;
}

#bodyWrapper .section > .photo .title {
    padding: var(--space-3, 12px) !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--color-text-light, #e1e1e1) !important;
    min-height: 40px !important;
}

/* ============================================
   FOLDER VIEW
   ============================================ */

#folderview .photo {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    background: var(--color-bg-dark, #171717) !important;
    border-radius: var(--space-3, 12px) !important;
    overflow: hidden !important;
}

#folderview .photo a {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    line-height: 0 !important; /* Usuwa odstęp pod obrazem */
}

#folderview .photo a img.user_photo {
    width: 100% !important;
    height: auto !important; /* Zachowuje naturalne proporcje */
    display: block !important;
}

/* ============================================
   CLEARFIX REMOVAL (niepotrzebne z Grid)
   ============================================ */

.gallery::after,
.newgallery::after,
.image_list::after {
    display: none !important;
}

/* ============================================
   LEGACY SUPPORT - Usuń stare style
   ============================================ */

.gallery .photo.first-child,
.newgallery .photo.first-child,
.image_list .photo.first-child {
    margin-left: 0 !important;
}

/* ============================================
   MOBILE SPECIFIC
   ============================================ */

@media (max-width: 768px) {
    .gallery .photo .title,
    .newgallery .photo .title,
    .image_list .photo .title,
    #bodyWrapper .section > .photo .title {
        font-size: 12px !important;
        padding: var(--space-2, 8px) !important;
        min-height: 36px !important;
    }
    
    .gallery .photo .stats,
    .newgallery .photo .stats,
    .image_list .photo .stats {
        font-size: 10px !important;
        padding: 0 var(--space-2, 8px) var(--space-2, 8px) !important;
    }
}