/* Details: Gallery (agd-gal-*) and its lightbox (agd-lb-*). Shared .agd-section / .agd-section-title come from nav.css. */
.agd-gal-intro { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; color: var(--ag-muted); font-size: .92rem; }
.agd-gal-intro .bi { color: var(--ag-brand); }

/* Masonry-like grid: the JS (and Blade, first paint) sets data-count on the grid and data-pos on each shown tile */
.agd-gal-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(104px, 11.5vw, 168px);
  grid-auto-flow: dense; gap: 12px;
}
.agd-gal-item { position: relative; min-width: 0; }
.agd-gal-item[hidden] { display: none; }
.agd-gal-item[data-pos="1"] { grid-column: span 2; grid-row: span 2; }
.agd-gal-grid[data-count="1"] { grid-template-columns: 1fr; grid-auto-rows: clamp(200px, 30vw, 380px); }
.agd-gal-grid[data-count="1"] .agd-gal-item[data-pos="1"] { grid-column: auto; grid-row: auto; }
.agd-gal-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agd-gal-grid[data-count="2"] .agd-gal-item { grid-column: auto; grid-row: span 2; }
.agd-gal-grid[data-count="3"] .agd-gal-item[data-pos="2"],
.agd-gal-grid[data-count="3"] .agd-gal-item[data-pos="3"],
.agd-gal-grid[data-count="4"] .agd-gal-item[data-pos="2"],
.agd-gal-grid[data-count="7"] .agd-gal-item[data-pos="6"],
.agd-gal-grid[data-count="7"] .agd-gal-item[data-pos="7"],
.agd-gal-grid[data-count="8"] .agd-gal-item[data-pos="6"] { grid-column: span 2; }
.agd-gal-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.agd-gal-tile {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; cursor: zoom-in;
  border-radius: var(--ag-radius-sm); overflow: hidden; isolation: isolate;
  background: var(--ag-surface-2); box-shadow: inset 0 0 0 1px var(--ag-line);
  transition: transform .4s var(--ag-ease), box-shadow .4s var(--ag-ease);
}
.agd-gal-item[data-pos="1"] .agd-gal-tile { border-radius: var(--ag-radius); }
/* Skeleton shimmer until the photo has loaded */
.agd-gal-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ag-brand) 10%, transparent) 50%, transparent 80%);
  transform: translateX(-100%); animation: agd-gal-shimmer 1.4s var(--ag-ease) infinite;
}
.agd-gal-tile.is-loaded::before { animation: none; opacity: 0; }
.agd-gal-tile img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .6s var(--ag-ease), transform .8s var(--ag-ease);
}
.agd-gal-tile.is-loaded img { opacity: 1; transform: scale(1); }
.agd-gal-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(2, 44, 34, .55), transparent 55%);
  opacity: 0; transition: opacity .4s var(--ag-ease);
}
.agd-gal-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px; color: #fff; font-size: .9rem;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ag-ease), transform .35s var(--ag-ease);
}
.agd-gal-tile:hover { box-shadow: inset 0 0 0 1px var(--ag-line), 0 16px 34px var(--ag-glow); }
.agd-gal-tile.is-loaded:hover img { transform: scale(1.06); }
.agd-gal-tile:hover::after, .agd-gal-tile:focus-visible::after { opacity: 1; }
.agd-gal-tile:hover .agd-gal-zoom, .agd-gal-tile:focus-visible .agd-gal-zoom { opacity: 1; transform: none; }
.agd-gal-tile:focus-visible { outline: 3px solid var(--ag-brand); outline-offset: 3px; }

/* "+N more" cover on the last shown tile */
.agd-gal-more {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  color: #fff; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(135deg, rgba(2, 44, 34, .78), rgba(5, 102, 79, .62));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background-color .3s;
}
.agd-gal-more[hidden] { display: none; }
.agd-gal-item.has-more .agd-gal-zoom { display: none; }

@keyframes agd-gal-shimmer { to { transform: translateX(100%); } }

/* ---------- Lightbox ---------- */
html.agd-lb-lock { overflow: hidden; }
.agd-lb {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; color: #fff; overflow: hidden;
  background: rgba(3, 12, 9, .9);
}
.agd-lb::backdrop { background: rgba(3, 12, 9, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.agd-lb[open] { display: block; animation: agd-lb-in .35s var(--ag-ease); }
.agd-lb-stage { display: grid; place-items: center; width: 100%; height: 100%; padding: 64px 84px 40px; }
.agd-lb-fig { margin: 0; display: grid; justify-items: center; gap: 14px; max-width: 100%; pointer-events: none; }
.agd-lb-img {
  display: block; max-width: min(100%, 1280px); max-height: calc(100dvh - 160px); width: auto; height: auto;
  object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); pointer-events: auto;
  opacity: 0; transform: translateX(calc(var(--agd-lb-dir, 0) * 28px)) scale(.965);
  transition: opacity .35s var(--ag-ease), transform .5s var(--ag-ease);
}
.agd-lb.is-ready .agd-lb-img { opacity: 1; transform: none; }
.agd-lb-cap { max-width: 70ch; text-align: center; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.agd-lb-count { margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; color: #fff; background: rgba(255, 255, 255, .14); white-space: nowrap; }
.agd-lb-btn {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-size: 1.15rem; cursor: pointer;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s, transform .3s var(--ag-ease), border-color .25s;
}
.agd-lb-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); }
.agd-lb-btn:focus-visible { outline: 3px solid #6EE7B7; outline-offset: 2px; }
.agd-lb-close { top: 16px; right: 16px; }
.agd-lb-prev, .agd-lb-next { top: 50%; transform: translateY(-50%); }
.agd-lb-prev { left: 18px; }
.agd-lb-next { right: 18px; }
.agd-lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.agd-lb-next:hover { transform: translateY(-50%) translateX(2px); }
@keyframes agd-lb-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767.98px) {
  .agd-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(92px, 22vw, 150px); gap: 10px; }
  .agd-gal-grid[data-count="6"] .agd-gal-item[data-pos="1"] { grid-column: span 2; }
}
@media (max-width: 575.98px) {
  .agd-gal-grid, .agd-gal-grid[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(96px, 30vw, 150px); gap: 8px; }
  .agd-gal-grid .agd-gal-item[data-pos] { grid-column: auto; grid-row: auto; }
  .agd-gal-grid .agd-gal-item[data-pos="1"] { grid-column: span 2; grid-row: span 2; }
  .agd-gal-grid .agd-gal-item.is-lastwide { grid-column: span 2; }
  .agd-gal-grid[data-count="1"] .agd-gal-item[data-pos="1"] { grid-row: span 2; }
  .agd-lb-stage { padding: 64px 12px 96px; }
  .agd-lb-img { max-height: calc(100dvh - 200px); border-radius: 10px; }
  .agd-lb-prev, .agd-lb-next { top: auto; bottom: 22px; transform: none; }
  .agd-lb-prev { left: calc(50% - 60px); }
  .agd-lb-next { right: calc(50% - 60px); }
  .agd-lb-prev:hover, .agd-lb-next:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .agd-gal-tile::before { animation: none; }
  .agd-gal-tile, .agd-gal-tile img, .agd-gal-tile::after, .agd-gal-zoom, .agd-lb-img, .agd-lb-btn { transition: none; }
  .agd-gal-tile img, .agd-gal-tile.is-loaded:hover img { transform: none; }
  .agd-lb[open] { animation: none; }
  .agd-lb-img { transform: none; }
}

/* ---- Round 4: compact 4-column thumbs ---- */
.agd-gal-intro { margin: -4px 0 10px; font-size: .82rem; }
.agd-gal-grid, .agd-gal-grid[data-count] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(64px, 9vw, 120px); gap: 8px; }
.agd-gal-grid[data-count] .agd-gal-item[data-pos] { grid-column: auto; grid-row: auto; }
.agd-gal-item[data-pos="1"] .agd-gal-tile { border-radius: var(--ag-radius-sm); }
.agd-gal-more { font-size: .8rem; }