/*
 * gc-gallery.css — Gossner College
 * ─────────────────────────────────────────────────────────
 * Pure CSS replacement for Isotope.js grid layout.
 * Works on every gallery page with zero JS changes.
 * Add this file after gc-modern.css in _webLayout.cshtml.
 *
 * Supports all existing classes:
 *   .gallery-isotope
 *   .grid-2 / .grid-3 / .grid-4 / .grid-5 / .grid-6
 *   .gutter / .gutter-small / .gutter-30
 *   .gallery-item  (any category class ignored — no filter needed)
 * ─────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════
   BASE GRID — replaces Isotope float layout
══════════════════════════════════════════════ */
.gallery-isotope {
  display: grid !important;
  width: 100%;
  /* default: 4 columns (matches .gallery-item { width:25% } from style-main.css) */
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* ── Column count variants ── */
.gallery-isotope.grid-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-isotope.grid-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-isotope.grid-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-isotope.grid-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-isotope.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ── Gutter variants ── */
.gallery-isotope.gutter        { gap: 6px; }
.gallery-isotope.gutter-small  { gap: 3px; }
.gallery-isotope.gutter-30     { gap: 30px; }
.gallery-isotope.gutter-40     { gap: 40px; }

/* ── Wide items span 2 columns ── */
.gallery-isotope .gallery-item.wide {
  grid-column: span 2;
}

/* ══════════════════════════════════════════════
   GALLERY ITEMS
   Reset the old float/percentage width styles
   from style-main.css so grid takes over.
══════════════════════════════════════════════ */
.gallery-isotope .gallery-item {
  width: 100% !important;       /* override style-main.css percentage widths */
  float: none !important;       /* kill old float layout */
  padding: 0 !important;        /* grid gap handles spacing */
  position: relative;
  overflow: hidden;
  break-inside: avoid;
}

/* ── Inner wrapper ── */
.gallery-isotope .gallery-item > div {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════
   IMAGES
   Fixed aspect ratio so all cells are uniform.
══════════════════════════════════════════════ */
.gallery-isotope .gallery-item img,
.gallery-isotope .gallery-item .img-fullwidth {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.gallery-isotope .gallery-item:hover img,
.gallery-isotope .gallery-item:hover .img-fullwidth {
  transform: scale(1.06) !important;
}

/* ══════════════════════════════════════════════
   HOVER OVERLAY (keep existing template styles)
══════════════════════════════════════════════ */
.gallery-isotope .gallery-item .overlay-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 77, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.gallery-isotope .gallery-item:hover .overlay-shade {
  opacity: 1;
}

.gallery-isotope .gallery-item .icons-holder {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-isotope .gallery-item:hover .icons-holder {
  opacity: 1;
}

.gallery-isotope .gallery-item .icons-holder-inner {
  position: static !important;
  margin: 0 !important;
}

.gallery-isotope .gallery-item .styled-icons a {
  background: rgba(255,255,255,0.15) !important;
  border: 2px solid rgba(255,255,255,0.8) !important;
  color: #fff !important;
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.gallery-isotope .gallery-item .styled-icons a:hover {
  background: rgba(255,255,255,0.35) !important;
  transform: scale(1.1) !important;
}
.gallery-isotope .gallery-item .styled-icons a i {
  color: #fff !important;
  font-size: 16px !important;
}

/* ══════════════════════════════════════════════
   LIGHTBOX LINK — make full item clickable
══════════════════════════════════════════════ */
.gallery-isotope .gallery-item [data-lightbox-gallery] {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════ */

/* Tablet: max 3 columns */
@media (max-width: 991px) {
  .gallery-isotope,
  .gallery-isotope.grid-4,
  .gallery-isotope.grid-5,
  .gallery-isotope.grid-6 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .gallery-isotope.grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: max 2 columns */
@media (max-width: 767px) {
  .gallery-isotope,
  .gallery-isotope.grid-3,
  .gallery-isotope.grid-4,
  .gallery-isotope.grid-5,
  .gallery-isotope.grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gallery-isotope .gallery-item img,
  .gallery-isotope .gallery-item .img-fullwidth {
    height: 160px !important;
  }
}

/* Small mobile: 1 column */
@media (max-width: 479px) {
  .gallery-isotope,
  .gallery-isotope[class*="grid-"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .gallery-isotope .gallery-item img,
  .gallery-isotope .gallery-item .img-fullwidth {
    height: 220px !important;
  }
  .gallery-isotope .gallery-item.wide {
    grid-column: span 1 !important;
  }
}

/* ══════════════════════════════════════════════
   LIGHTBOX — Nivo Lightbox fix
   jquery-plugin-collection.js is removed, so
   we need a lightweight click-to-open fallback
   for [data-lightbox-gallery] links.
   This opens the image in a new tab if no
   lightbox plugin is available.
══════════════════════════════════════════════ */