/* ==========================================================================
   CUSTOM GALLERY — SQUARE GRID
   Class: tv-square-gallery
   Add this class to any Divi Gallery module in the CSS Class field.
   Renders images as square tiles in a clean grid with a dark hover
   overlay. Divi lightbox still triggers on click.

   NOTE: Divi 5 uses CSS Grid natively for the gallery layout.
   This stylesheet works WITH Divi's grid rather than replacing it.
   Set "Number of Columns" to 4 and images per page to 16 in the
   Divi Gallery module settings for a 4×4 grid.
   ========================================================================== */

/* ---------- Grid overrides ---------- */
.tv-square-gallery .et_pb_gallery_items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ---------- Individual gallery item ---------- */
.tv-square-gallery .et_pb_gallery_item {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ---------- Square image container ---------- */
.tv-square-gallery .et_pb_gallery_image {
    position: relative;  /* anchor for ::after overlay */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    will-change: transform;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- Hover: scale + shadow lift ---------- */
.tv-square-gallery .et_pb_gallery_image:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(25, 25, 25, 0.35);
}

/* ---------- Dark overlay on hover ---------- */
.tv-square-gallery .et_pb_gallery_image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;          /* match parent radius */
    background: rgba(25, 25, 25, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;        /* allow click-through to Divi lightbox */
}

.tv-square-gallery .et_pb_gallery_image:hover::after {
    opacity: 1;
}

/* ---------- Image fill ---------- */
.tv-square-gallery .et_pb_gallery_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Kill Divi's default left-to-right animation ---------- */
.tv-square-gallery .et_pb_gallery_item {
    animation: none;
    opacity: 1;
}

/* ---------- Staggered fade-in (tiles pop in one by one) ---------- */
@keyframes tv-tile-pop {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tv-square-gallery .et_pb_gallery_item {
    opacity: 0;
    animation: tv-tile-pop 0.4s ease-out forwards;
}

.tv-square-gallery .et_pb_gallery_item:nth-child(1)  { animation-delay: 0.00s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(2)  { animation-delay: 0.05s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(3)  { animation-delay: 0.10s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(4)  { animation-delay: 0.15s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(5)  { animation-delay: 0.20s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(6)  { animation-delay: 0.25s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(7)  { animation-delay: 0.30s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(8)  { animation-delay: 0.35s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(9)  { animation-delay: 0.40s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(10) { animation-delay: 0.45s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(11) { animation-delay: 0.50s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(12) { animation-delay: 0.55s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(13) { animation-delay: 0.60s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(14) { animation-delay: 0.65s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(15) { animation-delay: 0.70s; }
.tv-square-gallery .et_pb_gallery_item:nth-child(16) { animation-delay: 0.75s; }

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .tv-square-gallery .et_pb_gallery_item {
        animation: none;
        opacity: 1;
    }
}

/* ---------- Hide Divi default title/caption if present ---------- */
.tv-square-gallery .et_pb_gallery_title,
.tv-square-gallery .et_pb_gallery_caption {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet: 2 columns */
@media (max-width: 980px) {
    .tv-square-gallery .et_pb_gallery_items {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .tv-square-gallery .et_pb_gallery_items {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .tv-square-gallery .et_pb_gallery_image:hover {
        transform: none;          /* disable scale on touch devices */
    }
}