/* =========================================================
   SL Insider Gallery v2 — Front-end Styles
   Flex Mag Theme Compatible | Mobile-First
   ========================================================= */

:root {
  --slg-primary: #c8102e;
  --slg-primary-dark: #a00d26;
  --slg-radius: 4px;
  --slg-gutter: 10px;
  --slg-trans: 0.28s cubic-bezier(.4,0,.2,1);
  --slg-overlay-bg: rgba(0,0,0,0.55);
  --slg-overlay-primary: rgba(200,16,46,0.85);
}

/* ── Reset ─────────────────────────────────────────────── */
.slg-gallery-wrap *, .slg-gallery-wrap *::before, .slg-gallery-wrap *::after { box-sizing: border-box; }
.slg-gallery-wrap { width:100%; max-width:100%; margin:20px 0; position:relative; clear:both; }
.slg-no-images { color:#999; font-style:italic; padding:20px 0; }

/* ── Counter badge ─────────────────────────────────────── */
.slg-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--slg-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.slg-counter-icon { font-size: 13px; line-height: 1; }
.slg-counter-badge svg { display:none; }

/* ── Filter bar ────────────────────────────────────────── */
.slg-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.slg-filter-btn {
  padding: 5px 14px;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all var(--slg-trans);
  -webkit-appearance: none;
}
.slg-filter-btn:hover { border-color: var(--slg-primary); color: var(--slg-primary); }
.slg-filter-btn.active { background: var(--slg-primary); border-color: var(--slg-primary); color: #fff; }
.slg-item.slg-hidden { display: none !important; }

/* ── Grid ──────────────────────────────────────────────── */
.slg-layout-grid .slg-grid {
  display: grid;
  grid-template-columns: repeat(var(--slg-cols,3), 1fr);
  gap: var(--slg-gutter);
}

/* ── Masonry ───────────────────────────────────────────── */
.slg-layout-masonry .slg-grid {
  column-count: var(--slg-cols, 3);
  column-gap: var(--slg-gutter);
}
.slg-layout-masonry .slg-item {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: var(--slg-gutter);
  animation: slg-fadeup .35s both;
}
.slg-layout-masonry .slg-item:nth-child(1)  { animation-delay: .00s; }
.slg-layout-masonry .slg-item:nth-child(2)  { animation-delay: .05s; }
.slg-layout-masonry .slg-item:nth-child(3)  { animation-delay: .10s; }
.slg-layout-masonry .slg-item:nth-child(4)  { animation-delay: .15s; }
.slg-layout-masonry .slg-item:nth-child(5)  { animation-delay: .20s; }
.slg-layout-masonry .slg-item:nth-child(n+6){ animation-delay: .25s; }
.slg-layout-masonry .slg-thumb-wrap { aspect-ratio: auto; }
.slg-layout-masonry .slg-img { height:auto; object-fit:initial; }

/* ── Justified ─────────────────────────────────────────── */
.slg-layout-justified .slg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--slg-gutter);
}
.slg-layout-justified .slg-item { flex:1 1 220px; max-width:400px; }
.slg-layout-justified .slg-thumb-wrap img { width:100%; height:200px; object-fit:cover; }

/* ── Mosaic ────────────────────────────────────────────── */
.slg-layout-mosaic .slg-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 160px;
  gap: var(--slg-gutter);
}
.slg-layout-mosaic .slg-item:nth-child(6n+1) { grid-column:span 2; grid-row:span 2; }
.slg-layout-mosaic .slg-item:nth-child(6n+4) { grid-column:span 2; }

/* ── Item base ─────────────────────────────────────────── */
.slg-gallery-wrap .slg-item { position:relative; overflow:hidden; border-radius:var(--slg-radius); background:#eee; }
.slg-gallery-wrap .slg-item a { display:block !important; text-decoration:none !important; border:none !important; box-shadow:none !important; margin:0 !important; padding:0 !important; }
.slg-gallery-wrap .slg-thumb-wrap { position:relative; overflow:hidden; width:100%; line-height:0; display:block; background:#d8d8d8; }
.slg-layout-grid .slg-thumb-wrap,
.slg-layout-mosaic .slg-thumb-wrap { aspect-ratio:4/3; }

/* ── Image ─────────────────────────────────────────────── */
.slg-gallery-wrap .slg-img {
  width:100%; height:100%; object-fit:cover; display:block;
  position:relative; z-index:2;
  transition: transform var(--slg-trans), filter var(--slg-trans);
  opacity:1;
}
.slg-gallery-wrap .slg-layout-masonry .slg-img { height:auto; object-fit:initial; }

/* Shimmer — strictly scoped inside .slg-gallery-wrap only */
.slg-gallery-wrap .slg-thumb-wrap::before {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg,#d0d0d0 25%,#c0c0c0 50%,#d0d0d0 75%);
  background-size:200% 100%;
  animation: slg-shimmer 1.4s infinite;
  pointer-events:none;
  transition: opacity .3s;
}
.slg-gallery-wrap .slg-thumb-wrap:has(.lazyloaded)::before,
.slg-gallery-wrap .slg-thumb-wrap:has(img:not([data-src]))::before {
  opacity:0;
  pointer-events:none;
}
@keyframes slg-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* Lazy load states — native loading="lazy" handles this, no JS classes needed */
.slg-gallery-wrap .slg-img { opacity:1; }

/* ── Overlay ───────────────────────────────────────────── */
.slg-gallery-wrap .slg-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--slg-overlay-bg);
  opacity:0;
  transition: opacity var(--slg-trans);
  pointer-events:none;
}
.slg-gallery-wrap .slg-overlay-icon {
  width: 36px; height: 36px;
  transform: scale(.7); transition: transform var(--slg-trans);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* Pure CSS expand icon — two diagonal arrows made from borders */
.slg-gallery-wrap .slg-overlay-icon::before,
.slg-gallery-wrap .slg-overlay-icon::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  width: 12px; height: 12px;
  border-color: #fff;
  border-style: solid;
}
.slg-gallery-wrap .slg-overlay-icon::before {
  top: 2px; left: 2px;
  border-width: 2px 0 0 2px;
}
.slg-gallery-wrap .slg-overlay-icon::after {
  bottom: 2px; right: 2px;
  border-width: 0 2px 2px 0;
}
.slg-gallery-wrap .slg-overlay-title { color:#fff; font-size:12px; font-weight:600; padding:3px 8px; margin-top:4px; text-align:center; max-width:90%; }

/* ── Hover effects ─────────────────────────────────────── */
/* Zoom */
.slg-gallery-wrap.slg-hover-zoom .slg-item:hover .slg-img       { transform:scale(1.08); }
.slg-gallery-wrap.slg-hover-zoom .slg-item:hover .slg-overlay   { opacity:1; }
.slg-gallery-wrap.slg-hover-zoom .slg-item:hover .slg-overlay-icon { transform:scale(1); }

/* Fade */
.slg-gallery-wrap.slg-hover-fade .slg-item:hover .slg-overlay   { opacity:1; }
.slg-gallery-wrap.slg-hover-fade .slg-item:hover .slg-overlay-icon { transform:scale(1); }

/* Slide */
.slg-gallery-wrap.slg-hover-slide .slg-overlay { transform:translateY(100%); opacity:1; transition:transform var(--slg-trans); }
.slg-gallery-wrap.slg-hover-slide .slg-item:hover .slg-overlay  { transform:translateY(0); }

/* Flip */
.slg-gallery-wrap.slg-hover-flip .slg-thumb-wrap { perspective:700px; }
.slg-gallery-wrap.slg-hover-flip .slg-img { backface-visibility:hidden; transition:transform .5s; }
.slg-gallery-wrap.slg-hover-flip .slg-overlay { transform:rotateY(90deg); opacity:1; background:var(--slg-primary); transition:transform .4s .08s; }
.slg-gallery-wrap.slg-hover-flip .slg-item:hover .slg-img     { transform:rotateY(-90deg); }
.slg-gallery-wrap.slg-hover-flip .slg-item:hover .slg-overlay { transform:rotateY(0); }

/* ── Caption ───────────────────────────────────────────── */
.slg-caption {
  padding:6px 10px;
  font-size:12px; line-height:1.4;
  color:#555; text-align:center;
  background:#fafafa;
  border-top:1px solid #eee;
}

/* ── Video items ───────────────────────────────────────── */
.slg-video-thumb { cursor:pointer; }
.slg-video-overlay { opacity:1 !important; background:rgba(0,0,0,.35); }
.slg-play-btn {
  width:52px; height:52px;
  background:rgba(255,255,255,.9);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--slg-trans), background var(--slg-trans);
}
.slg-play-btn svg { width:20px; height:20px; color:#222; margin-left:3px; }
.slg-video-thumb:hover .slg-play-btn { transform:scale(1.12); background:#fff; }

/* Video modal */
.slg-video-modal {
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center;
}
.slg-video-modal-inner {
  position:relative;
  width:90vw; max-width:960px;
  aspect-ratio:16/9;
  background:#000;
}
.slg-video-modal iframe { width:100%; height:100%; border:none; }
.slg-video-modal-close {
  position:absolute; top:-36px; right:0;
  color:#fff; font-size:28px; cursor:pointer; line-height:1;
  background:none; border:none; padding:0;
}

/* ── Slideshow ─────────────────────────────────────────── */
.slg-slideshow {
  position:relative; overflow:hidden; border-radius:var(--slg-radius); background:#111;
}
.slg-slides { position:relative; }
.slg-slide { display:none; }
.slg-slide.active { display:block; }
.slg-slide .slg-img { width:100%; max-height:560px; object-fit:contain; display:block; }
.slg-slide a { display:block; }

.slg-prev, .slg-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.5); color:#fff; border:none;
  font-size:22px; cursor:pointer; padding:10px 14px; z-index:10;
  border-radius:3px; transition:background var(--slg-trans);
  -webkit-appearance:none;
}
.slg-prev { left:10px; }
.slg-next { right:10px; }
.slg-prev:hover, .slg-next:hover { background:var(--slg-primary); }

.slg-ss-fullscreen {
  position:absolute; bottom:10px; right:10px;
  background:rgba(0,0,0,.5); border:none; color:#fff;
  width:34px; height:34px; cursor:pointer; z-index:10; border-radius:3px;
  display:flex; align-items:center; justify-content:center; padding:6px;
  transition:background var(--slg-trans);
}
.slg-ss-fullscreen:hover { background:var(--slg-primary); }
.slg-ss-fullscreen svg { width:100%; height:100%; }

.slg-dots {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:10;
}
.slg-dot {
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.45); cursor:pointer;
  transition:all var(--slg-trans);
}
.slg-dot.active, .slg-dot:hover { background:var(--slg-primary); transform:scale(1.25); }

.slg-slide-counter {
  position:absolute; top:10px; right:12px;
  color:rgba(255,255,255,.75); font-size:12px; font-weight:600;
  background:rgba(0,0,0,.4); padding:2px 8px; border-radius:10px; z-index:10;
}

/* Fullscreen slideshow */
.slg-slideshow.slg-fullscreen {
  position:fixed !important; inset:0 !important; z-index:99990 !important;
  width:100vw !important; height:100vh !important; border-radius:0 !important;
  display:flex; flex-direction:column;
}
.slg-slideshow.slg-fullscreen .slg-slide .slg-img { max-height:calc(100vh - 80px); }

/* ── Enhanced lightbox toolbar ─────────────────────────── */
.slg-lb-toolbar {
  display:flex; gap:8px; justify-content:center; align-items:center;
  padding:8px;
  background:rgba(0,0,0,.7);
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:100000;
}
.slg-lb-btn {
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff;
  padding:6px 14px; border-radius:20px; font-size:12px; cursor:pointer;
  display:flex; align-items:center; gap:5px;
  transition:all var(--slg-trans);
}
.slg-lb-btn svg { width:14px; height:14px; }
.slg-lb-btn:hover { background:var(--slg-primary); border-color:var(--slg-primary); }

/* ── Password form ─────────────────────────────────────── */
.slg-password-form {
  padding:30px; border:2px dashed #ddd; border-radius:8px; text-align:center;
  background:#fafafa;
}
.slg-pw-input {
  padding:9px 14px; border:1px solid #ddd; border-radius:4px;
  font-size:14px; margin-right:8px;
}
.slg-pw-btn {
  background:var(--slg-primary); color:#fff; border:none;
  padding:9px 18px; border-radius:4px; cursor:pointer; font-size:14px;
  transition:background var(--slg-trans);
}
.slg-pw-btn:hover { background:var(--slg-primary-dark); }

/* ── Animations ────────────────────────────────────────── */
@keyframes slg-fadeup { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ── Flex Mag compat ───────────────────────────────────── */
.entry-content .slg-gallery-wrap { max-width:100% !important; overflow:visible !important; }
.entry-content .slg-item a, .entry-content .slg-gallery-wrap a { display:block !important; margin:0 !important; padding:0 !important; }
.entry-content .slg-grid { max-width:100% !important; width:100% !important; }

/* Suppress Flex Mag theme's diagonal expand-arrow overlay on gallery images.
   Flex Mag adds ::before/::after pseudo-elements to linked images for its
   hover effect — we don't want those inside our gallery. */
.slg-gallery-wrap a::before,
.slg-gallery-wrap a::after,
.slg-item a::before,
.slg-item a::after,
.slg-thumb-wrap::before,
.slg-thumb-wrap a::before,
.slg-thumb-wrap a::after { display:none !important; content:none !important; }

/* ── Touch: always show overlay ────────────────────────── */
.slg-touch .slg-gallery-wrap .slg-overlay { opacity:1 !important; background:rgba(0,0,0,.25); }
.slg-touch .slg-gallery-wrap.slg-hover-flip .slg-overlay { background:var(--slg-overlay-primary); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:1024px) {
  .slg-layout-grid .slg-grid { grid-template-columns:repeat(min(var(--slg-cols,3),3),1fr) !important; }
  .slg-layout-mosaic .slg-grid { grid-template-columns:repeat(3,1fr); }
  .slg-layout-masonry .slg-grid { column-count:min(var(--slg-cols,3),3) !important; }
}
@media (max-width:768px) {
  .slg-layout-grid .slg-grid { grid-template-columns:repeat(2,1fr) !important; }
  .slg-layout-masonry .slg-grid { column-count:2 !important; }
  .slg-layout-mosaic .slg-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .slg-layout-mosaic .slg-item:nth-child(6n+4) { grid-column:span 1; }
  .slg-filter-bar { gap:4px; }
  .slg-filter-btn { padding:4px 10px; font-size:11px; }
  .slg-prev, .slg-next { padding:8px 10px; font-size:18px; }
}
@media (max-width:480px) {
  .slg-layout-grid .slg-grid { grid-template-columns:repeat(2,1fr) !important; }
  .slg-layout-masonry .slg-grid { column-count:2 !important; }
  .slg-layout-justified .slg-item { flex:1 1 140px; }
  .slg-layout-mosaic .slg-grid { grid-template-columns:1fr 1fr; grid-auto-rows:110px; }
  .slg-layout-mosaic .slg-item:nth-child(6n+1) { grid-column:span 2; grid-row:span 1; }
  .slg-slide .slg-img { max-height:65vw; }
}