:root{
  --ir-safe: env(safe-area-inset-bottom, 0px);
  --ir-gap: 8px;
  --ir-vh: 100dvh;
  --ir-edge: 12px;
  --ir-seek-h: 22px;
  --ir-audio-h: 44px;
  --ir-frame-left: 0px;
  --ir-frame-right: 0px;
  --ir-frame-top: 0px;
  --ir-frame-bottom: 0px;
}

[inert]{ display:none !important; }

/* ---------- GRID ---------- */
.ir-container{position:relative;width:100%;overflow:hidden;}
.ir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;padding:0;width:100%;}
.ir-grid-item{position:relative;display:block;overflow:hidden;background:#111;aspect-ratio:3/4;cursor:pointer;}
.ir-grid-item img{width:100%;height:100%;object-fit:cover;display:block;}
.ir-grid .ir-badge{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;padding:3px 8px;border-radius:12px;font-weight:500;}
.ir-load-more{display:block;margin:24px auto 48px;padding:12px 20px;border-radius:999px;background:#000;color:#fff;border:1px solid #000;font-weight:600;cursor:pointer;max-width:240px;text-align:center;}
.ir-load-more[disabled]{opacity:.5;cursor:default;}

.ir-grid-item.is-skeleton{pointer-events:none;aspect-ratio:9/16;background:#121212;}
.ir-skel{position:relative;width:100%;height:100%;background:#121212;overflow:hidden;}
.ir-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,0));animation:ir-shimmer 1.15s linear infinite;}
.ir-skel-meta{position:absolute;left:10px;right:10px;bottom:10px;}
.ir-skel-line{height:10px;border-radius:6px;background:#1e1e1e;margin-top:8px;}
@keyframes ir-shimmer{100%{transform:translateX(100%);}}

/* ---------- OVERLAY SHELL ---------- */
.ir-overlay{position:fixed;inset:0;background:#000;z-index:999999;display:none;}
.ir-overlay.is-open{display:block;}
.ir-frame{position:absolute;inset:0;padding-bottom:var(--ir-safe);display:flex;justify-content:center;align-items:stretch;}
.ir-view{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:transform .3s ease;}
.ir-view.is-dragging{transition:none;}
.ir-view *{-webkit-tap-highlight-color:transparent;}
.ir-view a:focus,.ir-view button:focus,.ir-view input:focus{outline:none;box-shadow:none;}

/* Close button (must be inside .ir-stage in HTML) */
.ir-close{
  position:absolute;top:16px;right:16px;z-index:20;
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}

/* ---------- SWIPER ---------- */
.ir-vertical.swiper{width:100%;height:100%;}
.ir-vertical .swiper-wrapper{height:100%;margin-block-start:0;}
.ir-vertical .swiper-slide{height:100%;}

/* ---------- STAGE (the reel canvas) ---------- */
.ir-stage{position:relative;overflow:hidden;}

/* Desktop: 9:16 card with rounded corners, no crop */
@media (min-width:1024px){
  .ir-view{ padding-inline: var(--ir-edge); }
  .ir-stage{
    height: calc(var(--ir-vh) - var(--ir-safe));
    aspect-ratio: 9 / 16;
    max-width: 100vw;
    margin: 0 auto;
    border-radius: 12px;             /* rounded corners on desktop */
  }
}

/* Mobile: true fullscreen, edge-to-edge (crop allowed) */
@media (max-width:1023.98px){
  .ir-view{ padding:0 !important; }
  .ir-stage{
    width:100vw; height:100dvh; aspect-ratio:auto; border-radius:0;
  }
  .ir-close{
    top: max(16px, env(safe-area-inset-top, 0px) + 8px);
    right: max(16px, env(safe-area-inset-right, 0px) + 8px);
  }
}

/* ---------- MEDIA ---------- */
.ir-slide{position:relative;width:100%;height:100%;color:#fff;background:#000;}
.ir-media{position:absolute;inset:0;}
/* Default (desktop): show full frame */
.ir-overlay .ir-media video,
.ir-overlay .ir-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;z-index:1;
}
/* Mobile: fill screen (may crop) */
@media (max-width:1023.98px){
  .ir-overlay .ir-media video,
  .ir-overlay .ir-media img{ object-fit:cover !important; }
}

/* ---------- META & CONTROLS ---------- */
.ir-meta{position:absolute;left:var(--ir-edge);bottom:calc(var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + (var(--ir-gap) * 2));z-index:90;font-size:13px;color:#fff;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.ir-meta .ir-title{font-weight:700;margin-bottom:4px;}
.ir-meta a{color:#fff;text-decoration:underline;}

.ir-seek{position:absolute;left:var(--ir-edge);right:var(--ir-edge);bottom:calc(var(--ir-edge) + var(--ir-safe));z-index:96;height:var(--ir-seek-h);-webkit-appearance:none;background:transparent;outline:none;cursor:pointer;margin:0;}
.ir-seek::-webkit-slider-runnable-track{height:4px;background:rgba(255,255,255,.35);border-radius:999px;}
.ir-seek::-moz-range-track{height:4px;background:rgba(255,255,255,.35);border-radius:999px;}
.ir-seek.progressed::-webkit-slider-runnable-track{background:linear-gradient(to right,#fff var(--ir-progress,0%),rgba(255,255,255,.35) var(--ir-progress,0%));}
.ir-seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-6px;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.ir-seek::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#fff;}

.ir-audio{position:absolute;right:var(--ir-edge);bottom:calc(var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + var(--ir-gap));z-index:95;display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.6);color:#fff;font-weight:600;font-size:13px;cursor:pointer;}
.ir-audio[hidden]{display:none !important;}
.ir-audio .dot{width:8px;height:8px;border-radius:50%;background:#ff5757;transition:background .2s;}
.ir-audio.is-unmuted .dot{background:#4ade80;}

.ir-like{position:absolute;display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(0,0,0,.6);color:#fff;font-weight:600;border-radius:999px;padding:6px 10px;cursor:pointer;line-height:1;}
.ir-like .heart{font-size:13px;line-height:1;}
.ir-like .count{min-width:10px;display:inline-block;}
.ir-like.is-liked{background:rgba(239,68,68,.85);}
.ir-like--grid{right:6px;bottom:6px;left:auto;z-index:6;}
.ir-like--overlay{right:var(--ir-edge);left:auto;bottom:calc(var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + var(--ir-gap) + var(--ir-audio-h) + var(--ir-gap));z-index:98;}

/* ---------- RESPONSIVE MISC ---------- */
@media (max-width:640px){ .ir-grid{grid-template-columns:repeat(3,1fr);} }
@media (prefers-reduced-motion:reduce){
  .swiper,.ir-grid img,.ir-grid-item::before,.ir-grid-item::after,.ir-grid .ir-badge,.ir-like--grid,.ir-helper{transition:none !important;animation:none !important;}
}
@media (hover:none),(pointer:coarse){
  .ir-like--grid{display:none !important;}
  .ir-grid .ir-badge{display:inline-flex;align-items:center;background:rgba(0,0,0,.65);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;opacity:1;}
}

/* Hover niceties for desktop only */
@media (hover:hover) and (pointer:fine){
  .ir-grid-item img{transition:transform .25s ease,filter .25s ease;will-change:transform;}
  .ir-grid-item:hover img{transform:scale(1.04);filter:brightness(.9);}
  .ir-grid-item::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .18s ease;z-index:2;pointer-events:none;}
  .ir-grid-item:hover::after{opacity:1;}
  .ir-like--grid{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;z-index:3;transition:opacity .18s ease,transform .18s ease;}
  .ir-grid-item:hover .ir-like--grid{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
}

/* Helper overlays (unchanged, just grouped) */
.ir-helper-overlay{position:absolute;inset:0;z-index:101;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;color:#fff;opacity:1;transition:opacity .4s ease,visibility .4s ease;text-shadow:0 1px 5px rgba(0,0,0,.8);}
.ir-helper-overlay.is-hidden{opacity:0;visibility:hidden;}
.ir-helper{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600;font-size:14px;}
.ir-helper svg{width:32px;height:32px;stroke-width:2.5px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));}
.ir-helper--swipe-up{top:70%;animation:ir-pulse-up 2s ease-in-out infinite;}
.ir-helper--swipe-right{left:10%;animation:ir-pulse-right 2s ease-in-out infinite;}
.ir-helper-icon--desktop,.ir-helper-text--desktop{display:none;}
@keyframes ir-pulse-up{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-10px);opacity:1}}
@keyframes ir-pulse-down{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(10px);opacity:1}}
@keyframes ir-pulse-right{0%,100%{transform:translateX(0);opacity:.9}50%{transform:translateX(10px);opacity:1}}
@media (min-width:1024px){
  .ir-helper--swipe-up{top:auto;bottom:20%;animation-name:ir-pulse-down;}
  .ir-helper--swipe-right{display:none;}
  .ir-helper-icon--mobile,.ir-helper-text--mobile{display:none;}
  .ir-helper-icon--desktop,.ir-helper-text--desktop{display:block;}
}
/* kill WP block gap just for the overlay */
.ir-overlay{
  margin: 0 !important;
  --wp--style--block-gap: 0 !important;  /* if the theme uses the variable */
}

/* extra safety for common wrappers */
.is-layout-flow > .ir-overlay,
.is-layout-constrained > .ir-overlay,
.is-layout-flex > .ir-overlay{
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.ir-meta .ir-title{ font-weight:700; margin-bottom:2px; }
.ir-meta .ir-subtitle{
  font-size:12px;
  opacity:.9;
  line-height:1.35;
  margin-bottom:6px; /* space before "Open post" */
}



/* Reserve space on the right for floating controls */
.ir-slide{ --ir-ui-pad: 160px; }           /* sensible fallback */

.ir-meta{
  left: var(--ir-edge);
  right: var(--ir-edge);                   /* let padding work */
  padding-right: var(--ir-ui-pad);         /* keep text away from buttons */
  word-break: break-word;
}

/* tiny phones can use a bit less */
@media (max-width: 360px){
  .ir-slide{ --ir-ui-pad: 140px; }
}

/* desktop card has room; still keep a gap on the right */
@media (min-width: 1024px){
  .ir-slide{ --ir-ui-pad: 190px; }
}

/* Bigger type for title/subtitle in overlay */
.ir-meta{ 
  font-size: 14px;          /* base for misc text like “Open post” */
  line-height: 1.4;
}

.ir-meta .ir-title{
  font-size: 14px;          /* was inheriting 13px */
  line-height: 1.25;
  font-weight: 700;
}

.ir-meta .ir-subtitle{
  font-size: 12px;          /* was 12px */
  line-height: 1.35;
}

/* Give desktop a touch more size */
@media (min-width:1024px){
  .ir-meta{ font-size: 15px; }
  .ir-meta .ir-title{ font-size: 20px; }
  .ir-meta .ir-subtitle{ font-size: 15px; }
}



/* Rich image/text reel */
.ir-media .ir-rich{
  position:absolute;inset:0;background:#000;color:#fff;overflow:auto;
  display:block;padding:24px;line-height:1.35;font-size:16px;
}
.ir-media .ir-rich a{color:#7aa2ff;text-decoration:underline}
.ir-media .ir-rich h1,h2,h3{font-weight:800;line-height:1.1;margin:0.4em 0}
.ir-media .ir-rich .huge{font-size: clamp(28px, 6vw, 80px); font-family: Georgia, "Times New Roman", serif;}


/* Reserve space on the right for floating controls */
.ir-slide{ --ir-ui-pad: 160px; }

/* Meta text block (title / Open post) */
.ir-meta{
  left:  calc(var(--ir-edge) + var(--ir-frame-left));
  right: calc(var(--ir-edge) + var(--ir-frame-right));
  bottom: calc(var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + (var(--ir-gap) * 2) + var(--ir-frame-bottom));
  padding-right: var(--ir-ui-pad);
  word-break: break-word;
  z-index: 90;
}

/* Seek bar follows the same frame */
.ir-seek{
  left:  calc(var(--ir-edge) + var(--ir-frame-left));
  right: calc(var(--ir-edge) + var(--ir-frame-right));
  bottom: calc(var(--ir-edge) + var(--ir-safe) + var(--ir-frame-bottom));
  z-index: 96;
}

/* Audio pill sits inside the frame, above the seek */
.ir-audio{
  right: calc(var(--ir-edge) + var(--ir-frame-right));
  bottom: calc(var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + var(--ir-gap) + var(--ir-frame-bottom));
  z-index: 95;
}

/* Like button floats inside the frame, above audio */
.ir-like--overlay{
  right: calc(var(--ir-edge) + var(--ir-frame-right));
  bottom: calc(
    var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + var(--ir-gap) +
    var(--ir-audio-h) + var(--ir-gap) + var(--ir-frame-bottom)
  );
  z-index: 98;
}

/* Tiny phones keep your existing tweak */
@media (max-width: 360px){
  .ir-slide{ --ir-ui-pad: 140px; }
}
@media (min-width: 1024px){
  .ir-slide{ --ir-ui-pad: 190px; }
}


/* When a slide has no video */
.ir-slide.is-image .ir-seek,
.ir-slide.is-image .ir-audio { display: none !important; }

/* Position inside the visible media frame */
.ir-meta{
  left:  calc(var(--ir-edge) + var(--ir-frame-left));
  right: calc(var(--ir-edge) + var(--ir-frame-right));
  bottom: calc(
    var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + (var(--ir-gap) * 2) + var(--ir-frame-bottom)
  );
  padding-right: var(--ir-ui-pad);
}

.ir-like--overlay{
  right:  calc(var(--ir-edge) + var(--ir-frame-right));
  bottom: calc(
    var(--ir-edge) + var(--ir-safe) + var(--ir-seek-h) + var(--ir-gap) +
    var(--ir-audio-h) + var(--ir-gap) + var(--ir-frame-bottom)
  );
}

/* For image slides: drop the extra seek/audio spacing to sit LOWER */
.ir-slide.is-image .ir-meta{
  bottom: calc(var(--ir-edge) + var(--ir-safe) + var(--ir-frame-bottom));
}
.ir-slide.is-image .ir-like--overlay{
  bottom: calc(var(--ir-edge) + var(--ir-safe) + var(--ir-frame-bottom));
}