/* Irregular Gallery Grid - Frontend CSS (based on your original CSS) */

/* root wrapper variables default (can be overridden inline) */
.irregular-gallery {
    --desktop-image-gap: 15px;
    --mobile-image-gap: 12px;
    --hover-image-animation-duration: 0.35s;
    --hover-image-scale: 1.06;
    --item-border-radius: 12px;
    --collage-overlap: -30px;
}

/* Shared gallery basic styling */
.irregular-gallery .gallery {
    display: grid;
    gap: var(--desktop-image-gap);
    align-items: stretch;
}

.irregular-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}



/*

.irregular-gallery .gallery-item {
    -webkit-mask-image: radial-gradient(circle at center, #000 70%, transparent 72%);
    mask-image: radial-gradient(circle at center, #000 70%, transparent 72%);
}

*/

.irregular-gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--item-border-radius);
    transition: transform var(--hover-image-animation-duration) ease, box-shadow var(--hover-image-animation-duration) ease;
    will-change: transform;
}





/* Gallery 1 */
.tca-gallery-1 .gallery {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.tca-gallery-1 .gallery-item:nth-child(1) {
    grid-column: 2/4;
    grid-row: 1/3;
}

.tca-gallery-1 .gallery-item:nth-child(2) {
    grid-column: 4/6;
    grid-row: 1/3;
}

.tca-gallery-1 .gallery-item:nth-child(3) {
    grid-column: 1/3;
    grid-row: 2/4;
}

.tca-gallery-1 .gallery-item:nth-child(4) {
    grid-column: 3/5;
    grid-row: 2/4;
}

.tca-gallery-1 .gallery-item:nth-child(5) {
    grid-column: 5/7;
    grid-row: 2/4;
}

.tca-gallery-1 .gallery-item:nth-child(6) {
    grid-column: 2/4;
    grid-row: 3/5;
}

.tca-gallery-1 .gallery-item:nth-child(7) {
    grid-column: 4/6;
    grid-row: 3/5;
}

/* mobile layout for gallery 1 */
@media (max-width: 767px) {
    .tca-gallery-1 .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: var(--mobile-image-gap);
    }

    .tca-gallery-1 .gallery-item:nth-child(1) {
        grid-column: 2/4;
        grid-row: 1/3;
    }

    .tca-gallery-1 .gallery-item:nth-child(2) {
        grid-column: 1/3;
        grid-row: 2/4;
    }

    .tca-gallery-1 .gallery-item:nth-child(3) {
        grid-column: 3/5;
        grid-row: 2/4;
    }

    .tca-gallery-1 .gallery-item:nth-child(4) {
        grid-column: 2/4;
        grid-row: 3/5;
    }

    .tca-gallery-1 .gallery-item:nth-child(5) {
        grid-column: 1/3;
        grid-row: 4/6;
    }

    .tca-gallery-1 .gallery-item:nth-child(6) {
        grid-column: 3/5;
        grid-row: 4/6;
    }

    .tca-gallery-1 .gallery-item:nth-child(7) {
        grid-column: 2/4;
        grid-row: 5/7;
    }
}

/* Hover animation for gallery 1 (applies when screen >= 1025) */
@media (min-width: 1025px) {
    .tca-gallery-1 .gallery-item {
        animation: scaleOut forwards var(--hover-image-animation-duration) 1;
    }

    .tca-gallery-1 .gallery-item:hover {
        animation: scaleIn forwards var(--hover-image-animation-duration) 1;
    }

    @keyframes scaleIn {
        0% {
            transform: scale(1);
            z-index: 2;
        }

        100% {
            transform: scale(var(--hover-image-scale));
            z-index: 2;
        }
    }

    @keyframes scaleOut {
        0% {
            transform: scale(var(--hover-image-scale));
            z-index: 1;
        }

        99.9% {
            transform: scale(1);
            z-index: 1;
        }

        100% {
            transform: scale(1);
            z-index: initial;
        }
    }
}










/* -- Gallery 2 (same idea, different template) -- */
.tca-gallery-2 .gallery {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.tca-gallery-2 .gallery-item:nth-child(1) {
    grid-column: 2/4;
    grid-row: 1/3;
}

.tca-gallery-2 .gallery-item:nth-child(2) {
    grid-column: 4/6;
    grid-row: 1/3;
}

.tca-gallery-2 .gallery-item:nth-child(3) {
    grid-column: 6/8;
    grid-row: 1/3;
}

.tca-gallery-2 .gallery-item:nth-child(4) {
    grid-column: 1/3;
    grid-row: 2/4;
}

.tca-gallery-2 .gallery-item:nth-child(5) {
    grid-column: 3/5;
    grid-row: 2/4;
}

.tca-gallery-2 .gallery-item:nth-child(6) {
    grid-column: 5/7;
    grid-row: 2/4;
}

.tca-gallery-2 .gallery-item:nth-child(7) {
    grid-column: 7/9;
    grid-row: 2/4;
}

.tca-gallery-2 .gallery-item:nth-child(8) {
    grid-column: 2/4;
    grid-row: 3/5;
}

.tca-gallery-2 .gallery-item:nth-child(9) {
    grid-column: 4/6;
    grid-row: 3/5;
}

.tca-gallery-2 .gallery-item:nth-child(10) {
    grid-column: 6/8;
    grid-row: 3/5;
}

/* mobile layout for gallery 2 */
@media (max-width: 767px) {
    .tca-gallery-2 .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: var(--mobile-image-gap);
    }

    .tca-gallery-2 .gallery-item:nth-child(1) {
        grid-column: 2/4;
        grid-row: 1/3;
    }

    .tca-gallery-2 .gallery-item:nth-child(2) {
        grid-column: 1/3;
        grid-row: 2/4;
    }

    .tca-gallery-2 .gallery-item:nth-child(3) {
        grid-column: 3/5;
        grid-row: 2/4;
    }

    .tca-gallery-2 .gallery-item:nth-child(4) {
        grid-column: 2/4;
        grid-row: 3/5;
    }

    .tca-gallery-2 .gallery-item:nth-child(5) {
        grid-column: 1/3;
        grid-row: 4/6;
    }

    .tca-gallery-2 .gallery-item:nth-child(6) {
        grid-column: 3/5;
        grid-row: 4/6;
    }

    .tca-gallery-2 .gallery-item:nth-child(7) {
        grid-column: 2/4;
        grid-row: 5/7;
    }

    .tca-gallery-2 .gallery-item:nth-child(8) {
        grid-column: 1/3;
        grid-row: 6/8;
    }

    .tca-gallery-2 .gallery-item:nth-child(9) {
        grid-column: 3/5;
        grid-row: 6/8;
    }

    .tca-gallery-2 .gallery-item:nth-child(10) {
        grid-column: 2/4;
        grid-row: 7/9;
    }
}

/* Hover animation for gallery 2 (desktop) */
@media (min-width: 1025px) {
    .tca-gallery-2 .gallery-item {
        animation: scaleOut forwards var(--hover-image-animation-duration) 1;
    }

    .tca-gallery-2 .gallery-item:hover {
        animation: scaleIn forwards var(--hover-image-animation-duration) 1;
    }

    /* reuse same keyframes above */
}













/* Irregular Gallery Grid - Frontend CSS */

/* root wrapper variables default (can be overridden inline) */
.irregular-gallery {
    --desktop-image-gap: 15px;
    --mobile-image-gap: 15px;
    --hover-image-animation-duration: 0.4s;
    --hover-image-scale: 1;
}

/* Shared gallery basic styling */
.irregular-gallery .gallery {
    display: grid;
    gap: var(--desktop-image-gap);
}

.irregular-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}


/* Gallery 1 (desktop template will be overridden by frontend.js inline if needed) */
.tca-gallery-1 .gallery {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

/* Positions (fallback if JS disabled) */
.tca-gallery-1 .gallery-item:nth-child(1) { grid-column: 2/4; grid-row: 1/3; }
.tca-gallery-1 .gallery-item:nth-child(2) { grid-column: 4/6; grid-row: 1/3; }
.tca-gallery-1 .gallery-item:nth-child(3) { grid-column: 1/3; grid-row: 2/4; }
.tca-gallery-1 .gallery-item:nth-child(4) { grid-column: 3/5; grid-row: 2/4; }
.tca-gallery-1 .gallery-item:nth-child(5) { grid-column: 5/7; grid-row: 2/4; }
.tca-gallery-1 .gallery-item:nth-child(6) { grid-column: 2/4; grid-row: 3/5; }
.tca-gallery-1 .gallery-item:nth-child(7) { grid-column: 4/6; grid-row: 3/5; }

/* Mobile fallback */
@media (max-width: 767px) {
    .tca-gallery-1 .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: var(--mobile-image-gap);
    }

    .tca-gallery-1 .gallery-item:nth-child(1) { grid-column: 2/4; grid-row: 1/3; }
    .tca-gallery-1 .gallery-item:nth-child(2) { grid-column: 1/3; grid-row: 2/4; }
    .tca-gallery-1 .gallery-item:nth-child(3) { grid-column: 3/5; grid-row: 2/4; }
    .tca-gallery-1 .gallery-item:nth-child(4) { grid-column: 2/4; grid-row: 3/5; }
    .tca-gallery-1 .gallery-item:nth-child(5) { grid-column: 1/3; grid-row: 4/6; }
    .tca-gallery-1 .gallery-item:nth-child(6) { grid-column: 3/5; grid-row: 4/6; }
    .tca-gallery-1 .gallery-item:nth-child(7) { grid-column: 2/4; grid-row: 5/7; }
}

/* Hover animation (desktop) */
@media (min-width: 1025px) {
    .irregular-gallery .gallery-item {
        transition: transform var(--hover-image-animation-duration) ease;
    }
    .irregular-gallery .gallery-item:hover {
        transform: scale(var(--hover-image-scale));
        z-index: 2;
    }
}



/* Gallery 2 fallback */
.tca-gallery-2 .gallery {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.tca-gallery-2 .gallery-item:nth-child(1) { grid-column: 2/4; grid-row: 1/3; }
.tca-gallery-2 .gallery-item:nth-child(2) { grid-column: 4/6; grid-row: 1/3; }
.tca-gallery-2 .gallery-item:nth-child(3) { grid-column: 6/8; grid-row: 1/3; }
.tca-gallery-2 .gallery-item:nth-child(4) { grid-column: 1/3; grid-row: 2/4; }
.tca-gallery-2 .gallery-item:nth-child(5) { grid-column: 3/5; grid-row: 2/4; }
.tca-gallery-2 .gallery-item:nth-child(6) { grid-column: 5/7; grid-row: 2/4; }
.tca-gallery-2 .gallery-item:nth-child(7) { grid-column: 7/9; grid-row: 2/4; }
.tca-gallery-2 .gallery-item:nth-child(8) { grid-column: 2/4; grid-row: 3/5; }
.tca-gallery-2 .gallery-item:nth-child(9) { grid-column: 4/6; grid-row: 3/5; }
.tca-gallery-2 .gallery-item:nth-child(10){ grid-column: 6/8; grid-row: 3/5; }

@media (max-width: 767px) {
    .tca-gallery-2 .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: var(--mobile-image-gap);
    }
    .tca-gallery-2 .gallery-item:nth-child(1) { grid-column: 2/4; grid-row: 1/3; }
    .tca-gallery-2 .gallery-item:nth-child(2) { grid-column: 1/3; grid-row: 2/4; }
    .tca-gallery-2 .gallery-item:nth-child(3) { grid-column: 3/5; grid-row: 2/4; }
    .tca-gallery-2 .gallery-item:nth-child(4) { grid-column: 2/4; grid-row: 3/5; }
    .tca-gallery-2 .gallery-item:nth-child(5) { grid-column: 1/3; grid-row: 4/6; }
    .tca-gallery-2 .gallery-item:nth-child(6) { grid-column: 3/5; grid-row: 4/6; }
    .tca-gallery-2 .gallery-item:nth-child(7) { grid-column: 2/4; grid-row: 5/7; }
    .tca-gallery-2 .gallery-item:nth-child(8) { grid-column: 1/3; grid-row: 6/8; }
    .tca-gallery-2 .gallery-item:nth-child(9) { grid-column: 3/5; grid-row: 6/8; }
    .tca-gallery-2 .gallery-item:nth-child(10){ grid-column: 2/4; grid-row: 7/9; }
}







.tca-gallery-3 .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--desktop-image-gap);
}

.tca-gallery-3 .gallery-item {
    aspect-ratio: 1;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .tca-gallery-3 .gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--desktop-image-gap) * 0.8);
    }
}
@media (max-width: 600px) {
    .tca-gallery-3 .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mobile-image-gap);
    }
}

/* subtle hover effect specific */
.tca-gallery-3 .gallery-item:hover img {
    transform: scale(1.03);
    transition: transform var(--hover-image-animation-duration) ease;
}

/* ---------------------------
   NEW GALLERY: tca-gallery-4 (REGULAR: Masonry-like columns)
   - Uses CSS columns for masonry flow (easy fallback/no JS)
   --------------------------- */
.tca-gallery-4 .gallery {
    display: block; /* columns expect block children */
    column-gap: var(--desktop-image-gap);
    column-count: 4;
}

.tca-gallery-4 .gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--desktop-image-gap);
    break-inside: avoid;
    border-radius: var(--item-border-radius);
}

/* image adjusts to block flow */
.tca-gallery-4 .gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    display: block;
}

/* responsive */
@media (max-width: 991px) {
    .tca-gallery-4 .gallery { column-count: 3; column-gap: calc(var(--desktop-image-gap) * 0.8); }
}
@media (max-width: 600px) {
    .tca-gallery-4 .gallery { column-count: 2; column-gap: var(--mobile-image-gap); }
}

/* hover lift for masonry items */
.tca-gallery-4 .gallery-item {
    transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.tca-gallery-4 .gallery-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    z-index: 3;
}

/* ---------------------------
   NEW GALLERY: tca-gallery-5 (CREATIVA: Collage / Overlap)
   - Overlapping, rotated pieces, artistic look
   --------------------------- */
.tca-gallery-5 .gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 120px;
    gap: 0; /* we handle spacing with transforms to overlap */
    position: relative;
}

/* baseline styling: make every item slightly offset and rotated */
.tca-gallery-5 .gallery-item {
    grid-column: auto / span 2;
    grid-row: auto;
    transform-origin: center;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    transition: transform 0.45s cubic-bezier(.2,.9,.2,1), filter 0.35s ease;
}

/* different visual variants by nth-child to create collage */
.tca-gallery-5 .gallery-item:nth-child(odd)  { transform: translateY(var(--collage-overlap)) rotate(-3deg); }
.tca-gallery-5 .gallery-item:nth-child(even) { transform: translateY(calc(var(--collage-overlap) * -0.6)) rotate(4deg); }
.tca-gallery-5 .gallery-item:nth-child(3n)  { transform: translateY(calc(var(--collage-overlap) * -1.2)) rotate(-6deg); }
.tca-gallery-5 .gallery-item:nth-child(4n)  { transform: translateY(calc(var(--collage-overlap) * 0.6)) rotate(6deg); }

/* give a few items bigger footprint to break monotony */
.tca-gallery-5 .gallery-item:nth-child(2) { grid-column: 2 / span 3; grid-row: span 2; }
.tca-gallery-5 .gallery-item:nth-child(5) { grid-column: 4 / span 3; grid-row: span 2; }

/* hover: straighten and emphasize */
.tca-gallery-5 .gallery-item:hover {
    transform: translateY(0) rotate(0) scale(1.06);
    filter: saturate(1.08);
    z-index: 8;
}

/* responsive */
@media (max-width: 991px) {
    .tca-gallery-5 .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; }
    .tca-gallery-5 .gallery-item { grid-column: auto / span 2; }
    .tca-gallery-5 .gallery-item:nth-child(2), .tca-gallery-5 .gallery-item:nth-child(5) { grid-column: auto / span 2; grid-row: span 1; }
}
@media (max-width:600px){
    .tca-gallery-5 .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    .tca-gallery-5 .gallery-item { transform: none; rotate: 0; }
}

/* ---------------------------
   NEW GALLERY: tca-gallery-6 (CREATIVA: Circular mosaic)
   - Centered circular composition using grid + clip-path
   --------------------------- */
.tca-gallery-6 .gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 120px;
    gap: calc(var(--desktop-image-gap) / 2);
    justify-items: center;
    align-items: center;
    padding: 30px;
}

/* Position items roughly in concentric formation using nth-child assignments */
.tca-gallery-6 .gallery-item {
    width: 100%;
    height: 100%;
    border-radius: 999px; /* pill -> circle via overflow hidden + aspect */
    overflow: hidden;
    clip-path: circle(48% at 50% 50%);
    transition: transform 0.36s ease, box-shadow 0.36s ease, filter 0.36s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}

/* place items to create a circular feeling (fallback grid placements) */
.tca-gallery-6 .gallery-item:nth-child(1) { grid-column: 3; grid-row: 1; }
.tca-gallery-6 .gallery-item:nth-child(2) { grid-column: 2; grid-row: 2; }
.tca-gallery-6 .gallery-item:nth-child(3) { grid-column: 3; grid-row: 2; }
.tca-gallery-6 .gallery-item:nth-child(4) { grid-column: 4; grid-row: 2; }
.tca-gallery-6 .gallery-item:nth-child(5) { grid-column: 1; grid-row: 3; }
.tca-gallery-6 .gallery-item:nth-child(6) { grid-column: 2; grid-row: 3; }
.tca-gallery-6 .gallery-item:nth-child(7) { grid-column: 3; grid-row: 3; }
.tca-gallery-6 .gallery-item:nth-child(8) { grid-column: 4; grid-row: 3; }
.tca-gallery-6 .gallery-item:nth-child(9) { grid-column: 5; grid-row: 3; }

/* hover: pop and slight rotate */
.tca-gallery-6 .gallery-item:hover {
    transform: translateY(-8px) scale(1.08) rotate(2deg);
    box-shadow: 0 16px 36px rgba(0,0,0,0.28);
    z-index: 10;
}

/* responsive behaviour */
@media (max-width: 991px) {
    .tca-gallery-6 .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; padding: 18px; }
    .tca-gallery-6 .gallery-item { clip-path: circle(50% at 50% 50%); border-radius: 999px; }
}
@media (max-width: 600px) {
    .tca-gallery-6 .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; padding: 12px; }
    .tca-gallery-6 .gallery-item { width: 90%; height: 90%; }
}


/* ---------------------------
   Variant: tca-gallery-7 (inspirada en gallery-3, layout irregular)
   --------------------------- */
.tca-gallery-7 .gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 160px;
    gap: var(--desktop-image-gap);
    align-items: stretch;
}

/* Mantener bordes redondeados e imágenes completas */
.tca-gallery-7 .gallery-item {
    border-radius: var(--item-border-radius);
    overflow: hidden;
    position: relative;
    transition: transform 0.36s ease, box-shadow 0.36s ease;
}

/* Asegurar la imagen rellene el contenedor */
.tca-gallery-7 .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transition: transform var(--hover-image-animation-duration) ease;
}

/* Composición irregular (ejemplo para ~10 items) */
/* Top-left: columna estrecha y alta */
.tca-gallery-7 .gallery-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }

/* Top-center: imagen panorámica grande */
.tca-gallery-7 .gallery-item:nth-child(2) { grid-column: 2 / 6; grid-row: 1 / 2; }

/* Top-right: columna estrecha con dos apiladas */
.tca-gallery-7 .gallery-item:nth-child(3) { grid-column: 6 / 7; grid-row: 1 / 2; }
.tca-gallery-7 .gallery-item:nth-child(4) { grid-column: 6 / 7; grid-row: 2 / 3; }

/* Middle / Bottom area: varias miniaturas alineadas */
.tca-gallery-7 .gallery-item:nth-child(5) { grid-column: 2 / 4; grid-row: 2 / 3; }
.tca-gallery-7 .gallery-item:nth-child(6) { grid-column: 4 / 5; grid-row: 2 / 3; }
.tca-gallery-7 .gallery-item:nth-child(7) { grid-column: 5 / 6; grid-row: 2 / 3; }

/* Si hay más, que aparezcan abajo como fila de miniaturas */
.tca-gallery-7 .gallery-item:nth-child(8)  { grid-column: 1 / 3; grid-row: 3 / 4; }
.tca-gallery-7 .gallery-item:nth-child(9)  { grid-column: 3 / 5; grid-row: 3 / 4; }
.tca-gallery-7 .gallery-item:nth-child(10) { grid-column: 5 / 7; grid-row: 3 / 4; }

/* Hover: sutil pop (manteniendo bordes redondeados) */
.tca-gallery-7 .gallery-item:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 14px 34px rgba(0,0,0,0.20);
    z-index: 6;
}
.tca-gallery-7 .gallery-item:hover img {
    transform: scale(1.06);
}

/* Responsive: en pantallas medianas reorganizamos */
@media (max-width: 991px) {
    .tca-gallery-7 .gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 140px;
        gap: calc(var(--desktop-image-gap) * 0.8);
    }

    /* reasignamos posiciones para mantener la composición */
    .tca-gallery-7 .gallery-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
    .tca-gallery-7 .gallery-item:nth-child(2) { grid-column: 2 / 5; grid-row: 1 / 2; }
    .tca-gallery-7 .gallery-item:nth-child(3) { grid-column: 4 / 5; grid-row: 2 / 3; }
    .tca-gallery-7 .gallery-item:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }
    .tca-gallery-7 .gallery-item:nth-child(5) { grid-column: 1 / 3; grid-row: 3 / 4; }
    .tca-gallery-7 .gallery-item:nth-child(6) { grid-column: 3 / 4; grid-row: 3 / 4; }
    .tca-gallery-7 .gallery-item:nth-child(7) { grid-column: 4 / 5; grid-row: 3 / 4; }
    .tca-gallery-7 .gallery-item:nth-child(8),
    .tca-gallery-7 .gallery-item:nth-child(9),
    .tca-gallery-7 .gallery-item:nth-child(10) { grid-column: auto / span 2; grid-row: 4 / 5; }
}

/* Mobile: apilado vertical fácil de consumir */
@media (max-width: 600px) {
    .tca-gallery-7 .gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: var(--mobile-image-gap);
    }

    /* Reset de posiciones para evitar huecos raros en móvil */
    .tca-gallery-7 .gallery-item { grid-column: auto; grid-row: auto; }
}

/* Mostrar imagen completa (sin máscara) */
.tca-gallery-7 .gallery-item {
    -webkit-mask-image: none;
    mask-image: none;
}





/* Lightbox minimal styles for accessibility */
.igg-lightbox-overlay img {
    max-width: 92%;
    max-height: 86%;
}

.irregular-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* Rounded corners for images INSIDE diamond */
.irregular-gallery .gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.irregular-gallery .gallery-item:hover img {
    transform: scale(1.04);
}


/* ---------- Fix responsive gallery-7 and scale down gallery-5 & gallery-7 ---------- */

/* Make grid rows flexible and avoid one item expanding too much */
.tca-gallery-7 .gallery,
.tca-gallery-5 .gallery {
    /* set a controlled baseline height but allow growth */
    grid-auto-rows: minmax(90px, 1fr); /* reduces oversized boxes and keeps ratios */
}

/* Reduce default desktop height for gallery 5 & 7 (scale down visual size) */
@media (min-width: 1025px) {
    .tca-gallery-5 .gallery {
        grid-auto-rows: 110px !important; /* was larger — reduce to make tiles smaller */
        gap: calc(var(--desktop-image-gap) * 0.85);
    }
    .tca-gallery-7 .gallery {
        grid-auto-rows: 120px !important; /* earlier was 160px — reduce to 120px */
        gap: calc(var(--desktop-image-gap) * 0.9);
    }

    /* If you want the whole gallery visually narrower, limit the container max-width */
    .irregular-gallery.tca-gallery-5,
    .irregular-gallery.tca-gallery-7 {
        max-width: 1180px;    /* ajusta según tu contenedor / preferencia */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile: ensure panorama/top big image doesn't hog space */
@media (max-width: 767px) {
    .tca-gallery-7 .gallery {
        grid-auto-rows: minmax(90px, auto);
        grid-template-columns: repeat(2, 1fr) !important; /* reforzamos 2 cols si JS no lo hizo */
    }

    /* Make the big panorama (item 2) occupy full width but with controlled height */
    .tca-gallery-7 .gallery-item:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        height: auto;
        min-height: 120px;          /* controla altura mínima en móvil */
        aspect-ratio: 16 / 9;       /* mantén proporción agradable */
    }

    /* make sure other items have reasonable height */
    .tca-gallery-7 .gallery-item {
        min-height: 100px;
    }
}

/* For small screens, ensure images don't overflow and fill nicely */
.tca-gallery-7 .gallery-item img,
.tca-gallery-5 .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Temporary stronger override if inline styles from JS still interfieren */
/* Use only if necessary — quita luego cuando confirmes JS + CSS funcionan */
.tca-gallery-7.force-fix .gallery-item:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

/* Optional: slightly reduce box-shadow on the smaller tiles to match reduced size */
.tca-gallery-5 .gallery-item,
.tca-gallery-7 .gallery-item {
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* ====== Correcciones para gallery-7 responsive y reducción de tamaño en gallery-5/7 ====== */

/* Forzar filas de la grilla para evitar que un item crezca en exceso */
.tca-gallery-7 .gallery,
.tca-gallery-5 .gallery {
    /* Forzar un tamaño razonable por fila (sobrescribe inline si hace falta) */
    grid-auto-rows: 120px !important;
}

/* Si quieres aún más compacta en desktop ajusta aquí */
@media (min-width:1025px) {
    .tca-gallery-7 .gallery { grid-auto-rows: 110px !important; gap: 12px !important; }
    .tca-gallery-5 .gallery { grid-auto-rows: 100px !important; gap: 10px !important; }

    /* Limita ancho visual para que no se vea gigante en pantallas muy anchas */
    .irregular-gallery.tca-gallery-7,
    .irregular-gallery.tca-gallery-5 {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* MOBILE: asegurar que la imagen panorámica no coma todo el alto */
@media (max-width: 767px) {
    /* Reforzamos 2 columnas en móvil por seguridad */
    .tca-gallery-7 .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: minmax(90px, auto) !important;
        gap: calc(var(--mobile-image-gap) * 1) !important;
    }

    /* Hacemos que el item 2 (panorámico) ocupe fila completa pero con altura controlada */
    .tca-gallery-7 .gallery-item:nth-child(2) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        aspect-ratio: 16 / 9;
        min-height: 110px;
        max-height: 220px;
        height: auto;
    }

    /* Otros ítems tienen altura mínima razonable */
    .tca-gallery-7 .gallery-item { min-height: 90px; }

    /* Gallery-5 en móvil: reducir auto-rows para que no se vea gigante */
    .tca-gallery-5 .gallery { grid-auto-rows: 110px !important; gap: 8px !important; }
}

/* Asegurar imágenes rellenen y no deformen */
.tca-gallery-7 .gallery-item img,
.tca-gallery-5 .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Si JS sigue poniendo estilos inline que interfieren, añade una clase temporal "force-fix" al contenedor
   (puedes añadirla en el inspector o dinámicamente) que aplica reglas más agresivas */
.tca-gallery-7.force-fix .gallery { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 110px !important; }
.tca-gallery-7.force-fix .gallery-item:nth-child(2) { grid-column: 1 / -1 !important; aspect-ratio: 16/9 !important; }

/* Sutil ajuste visual: menos sombra al reducir tamaño */
.tca-gallery-5 .gallery-item,
.tca-gallery-7 .gallery-item { box-shadow: 0 8px 18px rgba(0,0,0,0.12); }