/* Ensure Inter font is available or define a fallback */
body {
    font-family: 'Inter', sans-serif;
}

/* Base gallery item styling */
.my-gallery-item {
    position: relative;
    background-color: #e5e7eb; /* gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.my-gallery-item:hover {
    transform: scale(1.02);
}

.my-gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Default for grid, overridden for masonry */
    transition: opacity 0.5s ease-in-out;
}

/* Skeleton loader styling */
.my-gallery-item .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-color: #d1d5db; /* gray-300 */
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* --- Gallery Layouts --- */

/* Base container styling for both grid and masonry */
.my-custom-gallery-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px; /* max-w-7xl from Elementor */
    padding: 0; /* Ensure no extra padding on the container itself */
}

/* Grid Layout */
.my-gallery-layout-grid {
    display: grid;
    /* grid-auto-rows is set via JS based on row_height */
    /* grid-template-columns and gap are set via JS based on responsive controls */
}

.my-gallery-layout-grid .my-gallery-item {
    /* Height is set by JS based on row_height for consistent rows */
    /* object-fit: cover; is default for img, ensures image fills space and clips if necessary */
}

/* Masonry Layout: Handled by Macy.js, but these classes ensure proper item sizing */
.my-gallery-layout-masonry {
    /* Macy.js handles column-count and column-gap internally via JS options */
    /* Ensure container takes full width for Macy.js to calculate correctly */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Include padding/border in width */
    padding: 0; /* No padding that might interfere with Macy.js calculations */
}

.my-gallery-layout-masonry .my-macy-item { /* Class specifically for Macy.js items */
    /* Macy.js will set width and position; ensure no conflicting CSS */
    width: auto; /* Allow Macy to control width based on column calculations */
    /* Macy.js handles gutter, but this adds vertical margin within a column */
    margin-bottom: var(--my-gallery-gap); /* Vertical gap controlled by CSS Variable */
    box-sizing: border-box; /* Crucial for correct sizing */
}

.my-gallery-layout-masonry .my-macy-item img.my-gallery-masonry-img {
    position: relative; /* Allow image to flow naturally within its item */
    height: auto; /* Maintain aspect ratio */
    width: 100%; /* Fill the width of the Macy item */
    object-fit: contain; /* Ensure full image is visible, not cut off */
    display: block; /* Remove any extra space below image */
}


/* --- Lightbox Overlay (NO CHANGES AS PER REQUEST) --- */
.my-gallery-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 0;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.my-gallery-lightbox-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.my-gallery-lightbox-content {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
    width: auto;
    height: auto;
    margin: 1rem;
    box-sizing: border-box;
}

.my-gallery-lightbox-image-container {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.my-gallery-lightbox-content img.my-gallery-lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 100px);
    object-fit: contain;
    border-radius: 0;
}

.my-gallery-lightbox-close {
    font-family: 'Inter', sans-serif;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--lightbox-ui-color, #ffffff);
    border: none;
    cursor: pointer;
    font-size: 2.25rem;
    width: 1.4em;
    height: 1.4em;
    line-height: 1;
    border-radius: 9999px;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.my-gallery-lightbox-close:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.my-gallery-lightbox-nav {
    font-family: 'Inter', sans-serif;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--lightbox-ui-color, #ffffff);
    border: none;
    cursor: pointer;
    aspect-ratio: 1;
    font-size: 3rem;
    line-height: 1;
    padding-bottom:0.2em;
    width: 1em;
    height: 1em;
    border-radius: 9999px;
    transition: background-color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.my-gallery-lightbox-nav:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.my-gallery-lightbox-prev {
    left: 1rem;
}

.my-gallery-lightbox-next {
    right: 1rem;
}

.my-gallery-lightbox-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: #212124;
    padding: 1rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .my-gallery-lightbox-buttons {
        flex-direction: row;
    }
}

.my-gallery-download-btn,
.my-gallery-cta-button {
    min-width: 150px;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    gap: 8px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.my-gallery-download-btn {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
}
.my-gallery-download-btn:hover {
    background-color: #1d4ed8;
}

.my-gallery-download-btn svg {
    width: 1.4em;
}

/* Custom CTA Button style will come from inline style attributes via PHP */

/* Tailwind CSS-like responsive classes for grid and masonry (CSS side) */
.my-custom-gallery-container {
    --my-gallery-gap: 16px; /* Default value, overridden by JS */
}

/* Grid columns */
.my-gallery-layout-grid.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.my-gallery-layout-grid.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.my-gallery-layout-grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.my-gallery-layout-grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.my-gallery-layout-grid.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.my-gallery-layout-grid.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (min-width: 640px) {
    .my-gallery-layout-grid.sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .my-gallery-layout-grid.sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .my-gallery-layout-grid.sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .my-gallery-layout-grid.sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .my-gallery-layout-grid.sm\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .my-gallery-layout-grid.sm\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

    .my-gallery-lightbox-prev { left: 2rem; }
    .my-gallery-lightbox-next { right: 2rem; }
}

@media (min-width: 1024px) {
    .my-gallery-layout-grid.lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .my-gallery-layout-grid.lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .my-gallery-layout-grid.lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .my-gallery-layout-grid.lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .my-gallery-layout-grid.lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .my-gallery-layout-grid.lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

    .my-gallery-lightbox-prev { left: 4rem; }
    .my-gallery-lightbox-next { right: 4rem; }
}