/* =========================================================
   Photo Gallery – Directorate of Sericulture and Weaving, Meghalaya
   DBIM: A.5.4.1 (albums, caption + date), 6.1.1 (thumbnail / original),
   6.1.2 (alt text). Uses the site's DBIM colour tokens.
   ========================================================= */

.gallery-page {
  --gl-accent: var(--dbim-wintergreen-dream, #5D3E00);
  --gl-accent-2: var(--dbim-powder-blue, #916100);
  --gl-surface: var(--dbim-white, #fff);
  --gl-tint: var(--dbim-azureish-white, #FFF5E0);
  --gl-text: var(--dbim-dark-text, #1F1F1F);
  --gl-muted: var(--dbim-grey-03, #5A5A5A);
  --gl-radius: 0.8rem;
  --gl-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
  --gl-shadow-hover: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.16);
}

.gallery-page ul { list-style: none; margin: 0; padding: 0; }

.gl-intro {
  max-width: 80ch;
  margin: 0 0 2.4rem;
  font-size: var(--dbim-fs-p1);
  line-height: 1.6;
  color: var(--gl-text);
  text-align: left;
}

/* Screen-reader-only text (same as Bootstrap's .visually-hidden, in case it isn't loaded) */
.gallery-page .visually-hidden, .gl-viewer .visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ---------- Album jump links ---------- */
.gl-albums ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.6rem;
  margin-bottom: 4rem;
}
.gl-albums a {
  display: grid;
  grid-template-columns: 9.6rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.2rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid rgba(93, 62, 0, 0.18);
  border-radius: var(--gl-radius);
  background: var(--gl-surface);
  color: var(--gl-text);
  text-decoration: none;
  box-shadow: var(--gl-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.gl-albums img {
  grid-row: 1 / 3;
  width: 9.6rem; height: 7.2rem;
  object-fit: cover;
  border-radius: 0.6rem;
  background: var(--gl-tint);
}
.gl-album-name { align-self: end; font-weight: 700; font-size: var(--dbim-fs-p1); color: var(--gl-accent); line-height: 1.3; }
.gl-album-count { align-self: start; font-size: var(--dbim-fs-p2); color: var(--gl-muted); }
.gl-albums a:hover { border-color: var(--gl-accent); box-shadow: var(--gl-shadow-hover); transform: translateY(-2px); }
.gl-albums a:hover .gl-album-name { text-decoration: underline; }

/* ---------- Album ---------- */
.gl-album { margin-bottom: 4.8rem; scroll-margin-top: 12rem; }
.gl-album-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem;
  margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 2px solid var(--gl-tint);
  position: relative;
}
.gl-album-head::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 6.4rem; height: 2px; background: var(--gl-accent);
}
.gl-album-head h2 { margin: 0; font-size: var(--dbim-fs-h2); font-weight: 700; color: var(--gl-accent); }
.gl-album-meta { margin: 0; font-size: var(--dbim-fs-p2); color: var(--gl-muted); }
.gl-album-meta span {
  display: inline-block; padding: 0.2rem 1rem; margin-right: 0.2rem;
  border-radius: 99rem; background: var(--gl-tint); color: var(--gl-accent); font-weight: 600;
}

/* ---------- Photo grid ---------- */
.gl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 2.4rem;
}
.gl-item {
  height: 100%;
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--gl-surface);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.gl-item:hover, .gl-item:focus-within { box-shadow: var(--gl-shadow-hover); transform: translateY(-3px); }

.gl-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gl-tint); }
.gl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gl-thumb:hover img, .gl-thumb:focus-visible img { transform: scale(1.06); }
.gl-zoom {
  position: absolute; inset: auto 1rem 1rem auto;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: rgba(93, 62, 0, 0.9) center / 2.2rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s;
}
.gl-thumb:hover .gl-zoom, .gl-thumb:focus-visible .gl-zoom { opacity: 1; transform: scale(1); }
.gl-thumb:focus-visible { outline: 3px solid var(--gl-accent-2); outline-offset: -3px; }

.gl-item figcaption {
  flex: 1; display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.4rem 1.6rem 1.6rem;
  border-top: 3px solid var(--gl-accent);
  text-align: left;
}
.gl-caption { font-size: var(--dbim-fs-p1); line-height: 1.45; font-weight: 600; color: var(--gl-text); }
.gl-date { font-size: var(--dbim-fs-p2); color: var(--gl-muted); }
.gl-full {
  margin-top: auto; align-self: flex-start;
  display: inline-block;
  font-size: var(--dbim-fs-p2); font-weight: 600; color: var(--gl-accent);
  text-decoration: underline; text-underline-offset: 0.3rem;
}
.gl-full::before {
  content: ""; display: inline-block; vertical-align: -0.25rem; margin-right: 0.6rem;
  width: 1.6rem; height: 1.6rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gl-full:hover { color: var(--gl-accent-2); }
.gallery-page .file-type, .gl-viewer .file-type { font-weight: 400; }

/* ---------- Viewer (dialog) ---------- */
.gl-viewer {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #120D02; color: #fff;
}
.gl-viewer::backdrop { background: rgba(0, 0, 0, 0.6); }
.gl-viewer[open] { display: block; }
.gl-viewer-inner { height: 100%; display: flex; flex-direction: column; }
.gl-viewer-bar, .gl-viewer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding: 1.2rem 2rem;
}
.gl-viewer-count { margin: 0; font-size: var(--dbim-fs-p1); opacity: .85; }
.gl-viewer-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 0 7.2rem;
}
.gl-viewer-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 0.4rem; box-shadow: 0 1rem 4rem rgba(0, 0, 0, .5);
}
.gl-viewer-foot { flex-wrap: wrap; padding-bottom: 2rem; }
.gl-viewer-caption { margin: 0; font-size: var(--dbim-fs-p1); line-height: 1.5; max-width: 80ch; text-align: left; }
.gl-viewer-download {
  flex: none; display: inline-block; padding: 0.8rem 1.6rem;
  border: 1px solid rgba(255,255,255,.6); border-radius: 99rem;
  color: #fff; font-size: var(--dbim-fs-p2); font-weight: 600; text-decoration: none;
}
.gl-viewer-download:hover { background: #fff; color: var(--gl-accent, #5D3E00); }

.gl-btn {
  width: 4.8rem; height: 4.8rem; flex: none; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12) center / 2.4rem no-repeat;
  transition: background-color .2s;
}
.gl-btn:hover { background-color: rgba(255,255,255,.28); }
.gl-btn:focus-visible, .gl-viewer-download:focus-visible { outline: 3px solid #FFD54F; outline-offset: 2px; }
.gl-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.gl-prev, .gl-next { position: absolute; top: 50%; transform: translateY(-50%); }
.gl-prev { left: 1.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.gl-next { right: 1.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
body.gl-lock { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .gl-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .gl-item figcaption { padding: 1rem 1.2rem 1.2rem; }
  .gl-viewer-stage { padding: 0 1rem; }
  .gl-prev, .gl-next { top: auto; bottom: 1rem; transform: none; }
  .gl-viewer-stage { padding-bottom: 6.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-page *, .gl-viewer * { transition: none !important; }
  .gl-item:hover, .gl-item:focus-within, .gl-albums a:hover { transform: none; }
  .gl-thumb:hover img { transform: none; }
}
@media print {
  .gl-albums, .gl-zoom, .gl-viewer { display: none !important; }
  .gl-item { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}