/* =========================================================
   Badr Al Safaa Medical Centre — Gallery album (detail) page
   Built from Figma file "Badr-Al-Safaa", frame 526:5637
   Loads after style.css + about.css (shared top bar & nav) and footer.css.
   ========================================================= */
.page-gallery-detail { background: #000; }

.gd { background: #000; padding: 76.5px 0 80px; }
.gd-title { font-family: var(--f-serif); font-weight: 400; font-size: 48px; line-height: 56px; color: #f2f2f4; }
.gd-lead { margin-top: 10.5px; max-width: 668px; font-weight: 300; font-size: 14px; line-height: 23px; color: #f2f2f2; }

/* Thumbnail grid: 3 columns; the large tile (video or feature image)
   takes columns 2–3 of rows 2–3, other photos flow around it. */
.gd-grid {
  margin-top: 48.5px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 368px; grid-auto-flow: row dense; gap: 24px;
}
.gd-item { position: relative; min-width: 0; }
.gd-item--feature { grid-column: 2 / 4; grid-row: span 2; }
.gd-grid--few .gd-item--feature { grid-column: 1 / 3; }
.gd-thumb {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden;
  border-radius: 10px; background: #111; cursor: zoom-in; isolation: isolate;
}
.gd-item--feature .gd-thumb { cursor: pointer; }
.gd-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: filter .4s ease;
}
.gd-thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); background: rgba(0,0,0,0); transition: background-color .3s ease;
}
.gd-thumb:hover::after, .gd-thumb:focus-visible::after { background: rgba(0,0,0,0.18); }
.gd-thumb:hover img { filter: brightness(1.05); }
.gd-thumb:focus-visible { outline: 2px solid #e6ca65; outline-offset: 3px; }

/* Play button on the video tile */
.gd-play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 80px; height: 80px; margin: -40px 0 0 -40px;
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
  border: 2px solid #d4a017; border-radius: 50%; color: #fabf23;
  background: rgba(10, 8, 6, 0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .3s ease, background-color .3s ease;
}
.gd-thumb:hover .gd-play { transform: scale(1.08); background: rgba(10, 8, 6, 0.7); }

.gd-empty { margin-top: 24px; font-size: 14px; line-height: 20px; color: #8a8580; }

/* ---------- Popup viewer ---------- */
.lb-open, .lb-open body { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 5, 0.92); }
.lightbox__stage { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(1200px, calc(100vw - 160px)); }
.lightbox__media { display: flex; align-items: center; justify-content: center; }
.lightbox__media img { display: block; max-width: min(1200px, calc(100vw - 160px)); max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); transform: scale(.97); transition: transform .3s ease; }
.lightbox.is-open .lightbox__media img { transform: none; }
.lightbox__media video, .lightbox__media iframe { display: block; width: min(1100px, calc(100vw - 160px)); aspect-ratio: 16 / 9; max-height: calc(100vh - 140px); border: 0; border-radius: 8px; background: #000; }
.lightbox__caption { display: flex; gap: 16px; align-items: baseline; font-size: 13px; line-height: 18px; color: #d6d3d1; text-align: center; }
.lightbox__count { font-size: 12px; letter-spacing: 1px; color: #e6ca65; white-space: nowrap; }
.lightbox__btn {
  position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; background: rgba(28, 26, 24, 0.8); color: #fff;
  transition: background-color .2s, border-color .2s, color .2s;
}
.lightbox__btn:hover { background: #2a2622; border-color: #d4a017; color: #e6ca65; }
.lightbox__btn:focus-visible { outline: 2px solid #e6ca65; outline-offset: 2px; }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 24px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 24px; top: 50%; margin-top: -24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .gd-grid { grid-auto-rows: 300px; }
}
@media (max-width: 860px) {
  .gd { padding-top: 56px; }
  .gd-title { font-size: 40px; line-height: 48px; }
  .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px; margin-top: 32px; }
  .gd-item--feature, .gd-grid--few .gd-item--feature { grid-column: 1 / -1; grid-row: span 2; }
}
@media (max-width: 640px) {
  .gd { padding: 40px 0 56px; }
  .gd-title { font-size: 34px; line-height: 42px; }
  .gd-grid { grid-auto-rows: 160px; gap: 12px; }
  .gd-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .lightbox__stage, .lightbox__media img { max-width: calc(100vw - 24px); }
  .lightbox__media video, .lightbox__media iframe { width: calc(100vw - 24px); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; margin-top: 0; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
  .lightbox__close { top: 16px; right: 16px; }
}