/**
 * Simple Gallery Plugin - Style 1 (Grid Layout)
 * Copyright (C) 2025
 * License: GNU GPL v2+
 */

/* Gallery Container */
.simplegallery {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    box-sizing: border-box;
    /* اضافه کردن این خطوط */
    display: block;
    position: relative;
}

.simplegallery * {
    box-sizing: border-box;
}

/* Alignment - مهم: استفاده از !important برای اطمینان */
.simplegallery.align-left {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

.simplegallery.align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

.simplegallery.align-center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}



/* استفاده از متغیرهای CSS با fallback */
.simplegallery-grid {
    display: grid;
    gap: var(--vertical-gap, 10px) var(--horizontal-gap, 10px);
    grid-template-columns: repeat(1, 1fr);
}


/* Gallery Grid - Base Styles */
/* پیش‌فرض برای موبایل */
.simplegallery-grid {
    display: grid;
    gap: var(--vertical-gap, 10px) var(--horizontal-gap, 10px);
    grid-template-columns: repeat(1, 1fr);
}

/* کلاس‌های sm برای موبایل */
.simplegallery-grid.columns-sm-1 { grid-template-columns: repeat(1, 1fr); }
.simplegallery-grid.columns-sm-2 { grid-template-columns: repeat(2, 1fr); }
.simplegallery-grid.columns-sm-3 { grid-template-columns: repeat(3, 1fr); }

/* تبلت - 768px و بالاتر */
@media (min-width: 768px) {
    .simplegallery-grid.columns-md-1 { grid-template-columns: repeat(1, 1fr); }
    .simplegallery-grid.columns-md-2 { grid-template-columns: repeat(2, 1fr); }
    .simplegallery-grid.columns-md-3 { grid-template-columns: repeat(3, 1fr); }
    .simplegallery-grid.columns-md-4 { grid-template-columns: repeat(4, 1fr); }
}

/* دسکتاپ - 1200px و بالاتر */
@media (min-width: 1200px) {
    .simplegallery-grid.columns-lg-1 { grid-template-columns: repeat(1, 1fr); }
    .simplegallery-grid.columns-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .simplegallery-grid.columns-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .simplegallery-grid.columns-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .simplegallery-grid.columns-lg-5 { grid-template-columns: repeat(5, 1fr); }
    .simplegallery-grid.columns-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Gallery Item */
.simplegallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.simplegallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Gallery Link */
.simplegallery-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.simplegallery-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.simplegallery-link:hover::after {
    background: rgba(0, 0, 0, 0.2);
}

/* Gallery Image */
.simplegallery-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption */
.simplegallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    font-size: 14px;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    text-transform: none !important;
}

.simplegallery-item:hover .simplegallery-caption {
    transform: translateY(0);
}

/* Error Message */
.simplegallery-error {
    padding: 20px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 5px;
    color: #856404;
    text-align: center;
    font-size: 14px;
}

/* RTL Support */
[dir="rtl"] .simplegallery.align-left {
    margin-right: 0;
    margin-left: auto;
}

[dir="rtl"] .simplegallery.align-right {
    margin-right: auto;
    margin-left: 0;
}

/* Loading Animation */
.simplegallery-image[loading="lazy"] {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Lightbox Support Preparation */
.simplegallery-link[data-lightbox] {
    cursor: zoom-in;
}