/* =========================================================
   LZK — MODALS PRESETS

   MD01 (current): "AG" modal bar preset
   - Markup: .ag-modal / .ag-modal__panel / .ag-modal__bar / .ag-btn
   - Use-case: modal footer with Prev / Next / Close (reusable)

   Rule: keep every preset scoped to its own class namespace.
   ========================================================= */

/* =========================
   PRESET MD01
   (implemented via .ag-* classes)
   ========================= */

.ag-modal{position:fixed;inset:0;display:none;z-index:9999;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:2.5rem 1.5rem;}
.ag-modal.is-open{display:flex;align-items:center;justify-content:center;}
.ag-modal__panel{
  width: min(800px, calc(100vw - 3rem));
  border-radius: 24px;
  overflow: hidden;
  background: #0f0f0f;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ag-modal__stage{
  width: 100%;
  max-height: 72vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.ag-modal__stage--video{
  aspect-ratio: 16 / 9;
}
.ag-modal__stage--video iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}
.ag-modal__stage img{
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  display:block;
  background:#000;
}
.ag-modal__bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#1f1f1f;border-top:1px solid rgba(255,255,255,.06);}
.ag-modal__left{display:flex;gap:10px;}
.ag-modal__right{display:flex;}
.ag-btn{
  height:44px;
  width:44px;
  min-width:44px;
  padding: 0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-family:inherit;
  font-size:1.15rem;
  line-height:1;
}
.ag-btn:hover{background:rgba(255,255,255,.10);}
.ag-btn--close{
  width: auto;
  min-width: auto;
  padding: 0 18px;
  border-radius:14px;
  font-size:.95rem;
  letter-spacing:.01em;
}
@media (max-width:720px){
  .ag-modal{padding:2rem 1rem;}
  .ag-modal__bar{padding:12px 12px;}
  .ag-btn{height:42px;min-width:42px;}
}


/* =========================
   MODAL (HOME/LAB) — .modal namespace
   Purpose: video modal used by modal-video.js (id="video-modal")
   Note: HOME may also carry legacy inline styles; this keeps LAB working.
   ========================= */

.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  padding: 20px;
}
.modal.is-open,
.modal[aria-hidden="false"]{
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__panel{
  position: relative;
  width: min(980px, 100%);
  background: rgba(10,10,10,.92);
  border: none;
  border-radius: 18px;
  overflow: hidden;
  max-height: calc(100vh - 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal__frame{
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  font-size: 0;
  line-height: 0;
}

.modal__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}


/* Fix (LAB): remove 1px gaps/lines from Vimeo iframe due to subpixel rounding */
.lab-page .modal__frame{
  overflow: hidden;
}
.lab-page .modal__frame iframe{
  transform: scale(1.01);
  transform-origin: center center;
}

/* =========================
   GOLUBO V2 — modal skin (scoped)
   ========================= */
.gm2-modal{position:fixed;inset:0;display:none;z-index:9999;}
.gm2-modal.is-open{display:flex;}
.gm2-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);}
.gm2-dialog{position:relative;margin:auto;max-width:1100px;width:calc(100% - 50px);max-height:calc(100% - 50px);display:flex;flex-direction:column;gap:25px;padding:25px;border-radius:14px;background:#0c0c0c;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden;}
.gm2-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer;}
.gm2-content{display:flex;flex-direction:column;gap:25px;overflow:auto;padding-top:10px;}
.gm2-grid{display:grid;grid-template-columns:300px 1fr;gap:25px;align-items:start;}
.gm2-card{border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.03);padding:14px;}
.gm2-logo img{width:100%;height:auto;display:block;object-fit:contain;}
.gm2-big img{width:100%;height:100%;display:block;object-fit:contain;}
.gm2-right{display:flex;flex-direction:column;gap:25px;}
.gm2-video{padding:0;overflow:hidden;}
.gm2-video-ratio{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.gm2-video-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;}
.gm2-assets{display:grid;grid-template-columns:repeat(3, 1fr);gap:25px;}
.gm2-assets img{width:100%;height:auto;display:block;border-radius:10px;object-fit:cover;}
.gm2-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.gm2-nav{display:flex;gap:10px;}
.gm2-nav__btn{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-size:22px;cursor:pointer;}
.gm2-actions{display:flex;gap:10px;align-items:center;}
/* Mobile: hide BIG */
@media (max-width:900px){
  .gm2-dialog{width:calc(100% - 40px);max-height:calc(100% - 40px);padding:20px;gap:20px;}
  .gm2-content{gap:20px;}
  .gm2-grid{grid-template-columns:1fr;}
  .gm2-left{display:none;}
  .gm2-assets{grid-template-columns:1fr;gap:20px;}
}

/* hide gm2 close button (top-right X) */
.gm2-close{display:none !important;}

/* gm2 closing state: prevent click-through to underlying thumbs */
.gm2-modal.is-closing{display:flex; opacity:0; pointer-events:auto;}
.gm2-modal.is-open{pointer-events:auto;}


/* === EDGE-TO-EDGE IMAGES (v3.0) === */
.brand__card,
.brand__asset,
.brand__big,
.brand__media,
.gm-brand-item {
  padding: 0 !important;
  overflow: hidden;
}

.brand__card img,
.brand__asset img,
.brand__big img,
.brand__media img,
.gm-brand-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* === GM2 EDGE-TO-EDGE MEDIA (v3.0) === */
.gm2-card{
  padding: 0 !important;
  overflow: hidden;
}
.gm2-card img{
  display:block;
}
/* let the card radius clip the media */
.gm2-assets img{
  border-radius: 0 !important;
}
/* keep video edge-to-edge too */
.gm2-video,
.gm2-video-ratio{
  border-radius: 0;
}