/* ============================================================================
   microsite-gallery.css  -  shared Gallery block engine
   Six presentation layouts (masonry, justified rows, uniform grid, mosaic,
   carousel, filmstrip) + a universal zoom lightbox. Driven entirely by
   microsite-gallery.js, which reads each .ms-gallery's data-* settings and the
   item JSON, then builds the chosen layout into .msg-stage. The same engine
   renders the live preview inside the gallery editor and the public pages, so
   there is one source of truth for presentation.

   Theme packs tweak the chrome via CSS variables only (accent, radius, lightbox
   backdrop, caption colour) - never by re-implementing the layouts.
   ========================================================================== */

.ms-gallery{
  --msg-accent:#f3307a;
  --msg-radius:14px;
  --msg-gap:14px;
  --msg-cols:3;
  --msg-cap:#5b6b78;
  --msg-tile:linear-gradient(135deg,#dce3ea,#b9c6d1);
  --msg-lb-bg:rgba(10,14,18,.92);
}
.ms-gallery .msg-stage{margin:0;}
.ms-gallery figure{margin:0;}
.ms-gallery .msg-cap{font-size:13px; color:var(--msg-cap); line-height:1.45; padding:8px 2px 0;}

/* the image / poster box - shared by every tile layout */
.ms-gallery .msg-box{position:relative; cursor:zoom-in; background:var(--msg-tile); overflow:hidden; border-radius:var(--msg-radius);}
.ms-gallery .msg-box img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.ms-gallery .msg-box:hover img{transform:scale(1.045);}
.ms-gallery[data-lightbox="0"] .msg-box{cursor:default;}
.ms-gallery[data-lightbox="0"] .msg-box:hover img{transform:none;}

/* video badge + play button */
.ms-gallery .msg-badge{position:absolute; top:10px; left:10px; z-index:3; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#fff; background:rgba(20,33,43,.62); backdrop-filter:blur(3px); padding:5px 9px; border-radius:999px;}
.ms-gallery .msg-play{position:absolute; inset:0; display:grid; place-items:center; z-index:3; pointer-events:none;}
.ms-gallery .msg-play span{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 6px 22px rgba(0,0,0,.28); transition:.2s;}
.ms-gallery .msg-play span::after{content:""; margin-left:4px; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #15212b;}
.ms-gallery .msg-box:hover .msg-play span{transform:scale(1.08);}

/* caption modes (set on .msg-stage) */
.ms-gallery .msg-ov{display:none;}
.ms-gallery .capm-overlay .msg-ov{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 14px 12px; color:#fff; font-size:12.5px; line-height:1.4; background:linear-gradient(to top, rgba(10,16,22,.78), rgba(10,16,22,0)); display:block;}
.ms-gallery .capm-overlay .msg-cap{display:none;}
.ms-gallery .capm-hover .msg-ov{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 14px 13px; color:#fff; font-size:12.5px; line-height:1.4; background:linear-gradient(to top, rgba(10,16,22,.82), rgba(10,16,22,0)); opacity:0; transform:translateY(8px); transition:.28s; display:block;}
.ms-gallery .capm-hover .msg-box:hover .msg-ov{opacity:1; transform:none;}
.ms-gallery .capm-hover .msg-cap{display:none;}
.ms-gallery .capm-none .msg-cap, .ms-gallery .capm-none .msg-ov{display:none;}
.ms-gallery .capm-below .msg-ov{display:none;}

/* ============ MASONRY ============ */
.ms-gallery .msg-masonry{column-count:var(--msg-cols); column-gap:var(--msg-gap);}
.ms-gallery .msg-masonry figure{break-inside:avoid; margin-bottom:var(--msg-gap);}
.ms-gallery .msg-masonry .msg-box img{height:auto;}   /* image's own ratio sizes the tile */

/* ============ UNIFORM GRID ============ */
.ms-gallery .msg-grid{display:grid; grid-template-columns:repeat(var(--msg-cols),1fr); gap:var(--msg-gap);}
.ms-gallery .msg-grid .msg-box{aspect-ratio:1/1;}

/* ============ JUSTIFIED ROWS ============ */
.ms-gallery .msg-justified{display:flex; flex-wrap:wrap; gap:var(--msg-gap);}
.ms-gallery .msg-justified figure{display:flex; flex-direction:column;}
.ms-gallery .msg-justified .msg-box{height:100%;}
.ms-gallery .msg-justified .msg-cap{padding-top:6px;}

/* ============ MOSAIC / FEATURED ============ */
.ms-gallery .msg-mosaic{display:grid; grid-template-columns:repeat(var(--msg-cols),1fr); gap:var(--msg-gap); grid-auto-flow:dense;}
.ms-gallery .msg-mosaic figure{margin:0;}
.ms-gallery .msg-mosaic .msg-box{height:100%;}
.ms-gallery .msg-mosaic figure.feat-big{grid-column:span 2; grid-row:span 2;}
.ms-gallery .msg-mosaic figure.feat-wide{grid-column:span 2;}
.ms-gallery .msg-mosaic .msg-cap{display:none;}

/* ============ CAROUSEL ============ */
.ms-gallery .msg-carousel{position:relative;}
.ms-gallery .msg-track{display:flex; gap:var(--msg-gap); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
.ms-gallery .msg-track:focus{outline:none;}
.ms-gallery .msg-track::-webkit-scrollbar{height:8px;}
.ms-gallery .msg-track::-webkit-scrollbar-thumb{background:#cfd8de; border-radius:99px;}
.ms-gallery .msg-carousel figure{flex:0 0 auto; width:min(62%, 460px); scroll-snap-align:center;}
.ms-gallery .msg-carousel .msg-box{aspect-ratio:16/10;}
.ms-gallery .msg-arrow{position:absolute; top:45%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; background:#fff; box-shadow:0 1px 2px rgba(20,33,43,.05), 0 8px 26px rgba(20,33,43,.18); cursor:pointer; font-size:20px; line-height:1; color:#15212b; z-index:5; display:grid; place-items:center;}
.ms-gallery .msg-arrow.prev{left:-6px;}
.ms-gallery .msg-arrow.next{right:-6px;}
.ms-gallery .msg-arrow:hover{color:var(--msg-accent);}

/* ============ FILMSTRIP ============ */
.ms-gallery .msg-film-main{position:relative; border-radius:var(--msg-radius); overflow:hidden; background:#e9eef2; aspect-ratio:16/9; cursor:zoom-in;}
.ms-gallery .msg-film-main img{width:100%; height:100%; object-fit:cover;}
.ms-gallery .msg-film-cap{font-size:13px; color:var(--msg-cap); padding:10px 2px 14px;}
.ms-gallery .msg-film-thumbs{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;}
.ms-gallery .msg-film-thumbs button{flex:0 0 auto; width:96px; height:64px; border-radius:9px; overflow:hidden; border:2px solid transparent; padding:0; background:#e9eef2; cursor:pointer; transition:.18s; position:relative;}
.ms-gallery .msg-film-thumbs img{width:100%; height:100%; object-fit:cover;}
.ms-gallery .msg-film-thumbs button.on{border-color:var(--msg-accent);}
.ms-gallery .msg-film-thumbs button .msg-mini-badge{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:18px; text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* ============ LIGHTBOX (one per page, appended to <body>) ============ */
.msg-lb{position:fixed; inset:0; z-index:1000; background:var(--msg-lb-bg,rgba(10,14,18,.92)); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .25s;}
.msg-lb.open{display:flex; opacity:1;}
.msg-lb-stage{max-width:92vw; max-height:82vh; display:flex; flex-direction:column; align-items:center; gap:14px;}
.msg-lb-media{max-width:92vw; max-height:74vh; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.5); background:#000;}
.msg-lb-media img, .msg-lb-media video{display:block; max-width:92vw; max-height:74vh; border-radius:10px;}
.msg-lb-media iframe{width:min(92vw,1100px); height:min(74vh,620px); aspect-ratio:16/9; border:0; border-radius:10px; background:#000;}
.msg-lb-cap{color:#eef2f5; font-size:14px; text-align:center; max-width:760px; line-height:1.5;}
.msg-lb-count{position:fixed; top:22px; left:0; right:0; text-align:center; color:rgba(255,255,255,.7); font-size:13px; letter-spacing:.04em;}
.msg-lb-x{position:fixed; top:16px; right:20px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer;}
.msg-lb-x:hover{background:rgba(255,255,255,.22);}
.msg-lb-nav{position:fixed; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:26px; line-height:1; cursor:pointer;}
.msg-lb-nav:hover{background:rgba(255,255,255,.22);}
.msg-lb-nav.prev{left:18px;}
.msg-lb-nav.next{right:18px;}
.msg-lb-single .msg-lb-nav{display:none;}

@media (max-width:720px){
  .ms-gallery{--msg-cols:2;}
  .ms-gallery .msg-carousel figure{width:86%;}
  .msg-lb-nav{width:44px; height:44px; font-size:20px;}
}
@media (prefers-reduced-motion: reduce){
  .ms-gallery .msg-box img, .ms-gallery .msg-box:hover img{transition:none; transform:none;}
  .ms-gallery .msg-track{scroll-behavior:auto;}
}