/* ═══════════════ CERTIFICATE GALLERY LIGHTBOX ═══════════════
   By Mourad Mekki

   The overlay fills the screen; the gallery inside it is the SAME element
   that normally lives in the panel, so its cards are untouched. Only two
   things change while it is expanded: the grid's height cap is lifted so
   more rows show, and the columns are allowed to grow from 3 to as many as
   fit — the thumbnails keep their own aspect ratio, so each plate looks
   exactly as it does in the small gallery, just with room to breathe. */

.om-gal-lightbox{
  position:fixed;inset:0;z-index:4000;
  display:flex;align-items:center;justify-content:center;
  padding:min(4vh,40px) min(4vw,48px);
}
.om-gal-lightbox[hidden]{display:none}
.om-gal-lb-scrim{
  position:absolute;inset:0;
  background:rgba(10,16,32,.55);backdrop-filter:blur(3px);
  animation:omLbFade .18s ease;
}
@keyframes omLbFade{from{opacity:0}to{opacity:1}}

.om-gal-lb-panel{
  position:relative;z-index:1;
  width:min(1200px,100%);height:min(88vh,900px);
  display:flex;flex-direction:column;
  background:var(--ok-ivory,#FAF7EF);
  border:1px solid var(--ok-border,rgba(16,26,45,.12));
  border-radius:18px;
  box-shadow:0 24px 70px rgba(10,16,32,.4);
  overflow:hidden;
  animation:omLbRise .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes omLbRise{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

.om-gal-lb-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--ok-border,rgba(16,26,45,.1));
  background:#fff;
}
.om-gal-lb-title{
  font-size:1rem;font-weight:800;color:var(--ok-navy,#101A2D);letter-spacing:.01em;
}
.om-gal-lb-close{
  margin-inline-start:auto;
  width:40px;height:40px;border-radius:11px;cursor:pointer;
  border:1px solid var(--ok-border,rgba(16,26,45,.14));background:#fff;
  color:var(--ok-navy,#101A2D);font-size:1.05rem;line-height:1;
  display:grid;place-items:center;transition:.15s;
}
.om-gal-lb-close:hover{background:rgba(201,154,61,.14);border-color:var(--ok-gold,#C99A3D);color:var(--ok-gold,#C99A3D)}

.om-gal-lb-body{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:16px 20px 20px;overflow:hidden;
}

/* ── The gallery WHILE it is in the lightbox ─────────────────────────
   These rules apply only to #platesGallery.in-lightbox, so the small
   in-panel gallery is completely untouched. */
#platesGallery.in-lightbox{
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto;width:100%;
}
/* The header (search + chips) sits at the top and stays put. */
#platesGallery.in-lightbox .om-gal-head{flex:0 0 auto;margin-bottom:12px}
/* The one change that opens it up: drop the 230px cap and let the grid
   take the remaining height, scrolling inside the big panel instead. */
#platesGallery.in-lightbox .pg-grid{
  max-height:none !important;height:auto;flex:1 1 auto;min-height:0;
  overflow-y:auto;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;
  gap:14px !important;padding-inline-end:6px;
}
/* Bigger hit area for the cards, same aspect — the img is object-fit:cover
   at 100%, so the plate art scales identically, just larger. */
#platesGallery.in-lightbox .pg-thumb{min-height:120px}
/* Preview strip / name / actions that live in the gallery stay visible
   below the grid if present. */
#platesGallery.in-lightbox .pg-actions{flex:0 0 auto;margin-top:12px}

/* Body scroll lock while open. */
body.om-lb-open{overflow:hidden}

/* ── The Expand trigger in the gallery header ── */
.om-gal-expand{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--ok-border,rgba(16,26,45,.14));
  background:#fff;color:var(--ok-navy,#101A2D);
  font-size:.76rem;font-weight:700;transition:.15s;white-space:nowrap;
}
.om-gal-expand:hover{border-color:var(--ok-gold,#C99A3D);color:var(--ok-gold,#C99A3D);background:rgba(201,154,61,.1)}
.om-gal-expand svg{flex:0 0 auto}
/* Inside the lightbox the Expand button is redundant — hide it there. */
#platesGallery.in-lightbox .om-gal-expand{display:none}

@media (max-width:640px){
  .om-gal-lightbox{padding:0}
  .om-gal-lb-panel{width:100%;height:100%;border-radius:0}
  #platesGallery.in-lightbox .pg-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important}
}