/* ----------------------------------- 
   HERO TILES GALLERY (Cartzilla Structure)
   
   This component now uses Cartzilla's lightbox gallery structure with:
   - GLightbox for lightbox functionality
   - Cartzilla hover effects (hover-effect-scale, hover-effect-opacity)
   - Responsive grid layout maintained
   - Proper aspect ratios for different tile sizes
   
   Dependencies: GLightbox, Cartzilla theme CSS
-----------------------------------*/
.gallery {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 1rem; 
}

.gallery_kat {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 1rem; 
}

@media (max-width: 767.98px) {
  .gallery {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(12);
    grid-gap: 0.5rem;
  } 
}

@media (max-width: 767.98px) {
  .gallery_kat {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(12);
    grid-gap: 0.5rem;
  } 
}

.gallery__item {
  position: relative;
}

/* Cartzilla Hover Effects Integration */
.gallery__item .hover-effect-scale:hover .hover-effect-target {
  transform: scale(1.05);
}

.gallery__item .hover-effect-opacity .hover-effect-target {
  transition: all 0.3s ease;
}

.gallery__item .hover-effect-opacity:hover .hover-effect-target {
  opacity: 1 !important;
}

/* ----------------------------------- 1 (Wide tile) ----------------------------------- */
.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--1 .ratio {
  --cz-aspect-ratio: calc(300 / 600 * 100%); /* Wide aspect ratio */
}

@media (max-width: 767.98px) {
  .gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 4;
  }
  .gallery__item--1 .ratio {
    --cz-aspect-ratio: calc(200 / 600 * 100%);
  }
}

/* ----------------------------------- 2 (Square tile) ----------------------------------- */
.gallery__item--2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--2 .ratio {
  --cz-aspect-ratio: calc(300 / 300 * 100%); /* Square aspect ratio */
}

@media (max-width: 767.98px) {
  .gallery__item--2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 7;
  }
  .gallery__item--2 .ratio {
    --cz-aspect-ratio: calc(300 / 300 * 100%);
  }
}

/* ----------------------------------- 3 (Square tile) ----------------------------------- */
.gallery__item--3 {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--3 .ratio {
  --cz-aspect-ratio: calc(300 / 300 * 100%); /* Square aspect ratio */
}

@media (max-width: 767.98px) {
  .gallery__item--3 {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 7;
  }
  .gallery__item--3 .ratio {
    --cz-aspect-ratio: calc(300 / 300 * 100%);
  }
}

/* ----------------------------------- 4 (Tall tile - Das hohe Bild von Reihe 1 bis Reihe 7) ----------------------------------- */
.gallery__item--4 {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 7;
}

.gallery__item--4 .ratio {
  --cz-aspect-ratio: calc(700 / 300 * 100%); /* Very tall aspect ratio */
}

.gallery__item--4 a {height: 100%;}

@media (max-width: 767.98px) {
  .gallery__item--4 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 13;
  }
  .gallery__item--4 .ratio {
    --cz-aspect-ratio: calc(600 / 300 * 100%);
  }
}

/* ----------------------------------- 5 (Square tile) ----------------------------------- */
.gallery__item--5 {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4;
}

.gallery__item--5 .ratio {
  --cz-aspect-ratio: calc(300 / 300 * 100%); /* Square aspect ratio */
}

@media (max-width: 767.98px) {
  .gallery__item--5 {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 10;
  }
  .gallery__item--5 .ratio {
    --cz-aspect-ratio: calc(300 / 300 * 100%);
  }
}

/* ----------------------------------- 6 (Square tile) ----------------------------------- */
.gallery__item--6 {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 7;
}

.gallery__item--6 .ratio {
  --cz-aspect-ratio: calc(300 / 300 * 100%); /* Square aspect ratio */
}

@media (max-width: 767.98px) {
  .gallery__item--6 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 10;
  }
  .gallery__item--6 .ratio {
    --cz-aspect-ratio: calc(300 / 600 * 100%);
  }
}

/* ----------------------------------- 7 ----------------------------------- */
.gallery__item--7 {
  grid-column-start: 7;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--7 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 8; } }

/* ----------------------------------- 8 ----------------------------------- */
.gallery__item--8 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 8; }

@media (max-width: 767.98px) {
  .gallery__item--8 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 7; } }

/* ----------------------------------- 9 ----------------------------------- */
.gallery__item--9 {
  grid-column-start: 4;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--9 {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 7; } }

/* ----------------------------------- 10 ----------------------------------- */
.gallery__item--10 {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--10 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 7;
    grid-row-end: 12; } }

/* ----------------------------------- 11 ----------------------------------- */
.gallery__item--11 {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--11 {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 10; } }

/* ----------------------------------- 12 ----------------------------------- */
.gallery__item--12 {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--12 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 8; } }

/* ----------------------------------- 13 ----------------------------------- */
.gallery__item--13 {
  grid-column-start: 7;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--13 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 4; } }

/* ----------------------------------- 14 ----------------------------------- */
.gallery__item--14 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--14 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 4; } }

/* ----------------------------------- 15 ----------------------------------- */
.gallery__item--15 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--15 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 7; } }

/* ----------------------------------- 16 ----------------------------------- */
.gallery__item--16 {
  grid-column-start: 13;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 4; }

@media (max-width: 767.98px) {
  .gallery__item--16 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 7;
    grid-row-end: 7; } }

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Cartzilla ratio container ensures proper aspect ratios */
.gallery__item .ratio {
  height: 100%;
  flex: 1; /* Nimmt den gesamten verfügbaren Platz im Flex-Container */
}

/* Links in gallery items sollen die volle Höhe nutzen */
.gallery__item > a {
  height: 100%;
  align-items: stretch; /* Streckt die Inhalte auf volle Höhe */
}

.gallery__img__notround {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery__img__noscale {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-text {
  position: absolute;
  bottom: 0;
  left: 30px;
  font-family: 'Brandon Grotesque Bold', sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
  color: #fff; }

@media (max-width: 991.98px) {
  .gallery-text {
    bottom: -10px;
    left: 20px;
    font-size: 1.5rem; }
}

/* ----------------------------------- SLIDER INTEGRATION ----------------------------------- */
.opc-hero-tiles .swiper-slide .hover-effect-scale:hover .hover-effect-target {
  transform: scale(1.05);
}

.opc-hero-tiles .swiper-slide .hover-effect-opacity .hover-effect-target {
  transition: all 0.3s ease;
}

.opc-hero-tiles .swiper-slide .hover-effect-opacity:hover .hover-effect-target {
  opacity: 1 !important;
}

/* ----------------------------------- HERO TILES GALLERY END ----------------------------------- */