/* ============================================================================
   RM CUSTOM-IG INLINE VIDEO — theme skin
   ----------------------------------------------------------------------------
   This file does NOT change the plugin. It only restyles the markup the plugin
   already outputs, so `ig-inline-video.php` stays exactly as you wrote it.

   The plugin's core idea is untouched:
     · a blurred dummy media card sitting BEHIND
     · a card tilted in FRONT carrying the Instagram-style content
     · a play button that opens the animated popup player
     · a "View on Instagram" link

   What changed is the skin: Instagram's white/pink chrome becomes the site's
   forest green, Fraunces + Plus Jakarta Sans, the site's radii, and the cards
   are smaller so three sit comfortably in a row.

   Load it after rm.css:
     wp_enqueue_style( 'rm-ig-skin', get_stylesheet_directory_uri()
       . '/assets/css/ig-inline-video-rm.css', array( 'rm-site' ), null );
   ========================================================================== */

/* Three across, dropping to two then one. Each card is capped so the tilt
   never collides with its neighbour. */
.rm-igrow{
  display:grid;gap:clamp(1.4rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start;
}
@media(min-width:1080px){.rm-igrow{grid-template-columns:repeat(3,1fr)}}

/* Below the width where two fit, the three become a slider rather than a
   stack.

   Stacked, the three reels were about 1,700px of page — three near-identical
   cards one under the other, and by the third most people have stopped
   looking. Side by side you can see there are three; stacked you cannot. As a
   row you swipe, the set stays one thing, and the page gets a screenful back.

   The design of the cards themselves does not change: same size, same tilt,
   same blurred card behind. Only the container changes from a grid to a
   scroller, with the same centred snapping the photo gallery uses, so the two
   sliders on a programme page behave identically.

   One card at a time, filling the width, with arrows underneath — not a card
   and a half with the next one's edge showing. A sliver of the next card is a
   common way to say "there is more this way", but these cards are tilted and
   layered over a second blurred card, so the sliver was a stack of cut edges
   rather than a recognisable photograph, and it made the row look broken. The
   arrows say the same thing and say it plainly.

   The vertical padding is not decoration: the card behind is rotated 2.5deg,
   so its corners sit outside the card's own box, and `overflow-x` on a
   scroller clips the other axis too. Without the padding the tilt is sliced
   off top and bottom. */
@media(max-width:599px){
  .rm-igrow{
    display:flex;flex-wrap:nowrap;align-items:start;
    gap:1.4rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-block:.5rem .4rem;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .rm-igrow::-webkit-scrollbar{display:none}
  /* `> *` because the two builds wrap the card differently: the static build
     has .ig-stack directly, WordPress puts an Elementor widget div around it. */
  .rm-igrow > *{flex:0 0 100%;scroll-snap-align:center}
}

/* The plugin sets max-width inline (width="540"). Override it so the card
   scales to the column instead — no shortcode change needed. */
.rm-igrow .ig-stack{max-width:100%!important;width:100%}

.ig-stack{position:relative;margin-inline:auto;padding:14px 14px 0}

/* ── the blurred card behind ───────────────────────────────────────────── */
.ig-stack__bg{
  position:absolute;inset:0;border-radius:var(--r-lg,28px);overflow:hidden;
  transform:rotate(2.5deg) translateY(6px);
  box-shadow:0 22px 48px -28px rgba(8,23,19,.55);
  background:var(--forest-700,#1B4239);
}
.ig-stack__bg-img,.ig-stack__bg-video{
  width:100%;height:100%;object-fit:cover;
  filter:blur(16px) saturate(.7) brightness(.62);transform:scale(1.15);
}
.ig-stack__bg-grad{
  display:block;width:100%;height:100%;
  background:linear-gradient(150deg,var(--forest-600,#265A4D),var(--forest-900,#081713));
}
.ig-stack__bg::after{
  content:"";position:absolute;inset:0;background:rgba(8,23,19,.35);
}

/* ── the tilted card in front ──────────────────────────────────────────── */
.ig-card{
  position:relative;z-index:1;background:var(--surface,#fff);
  border-radius:var(--r,18px);overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(8,23,19,.6);
  transform:rotate(-1.6deg);
  transition:transform .45s cubic-bezier(.22,.68,.32,1),box-shadow .45s;
  font-family:var(--f-sans,"Plus Jakarta Sans",system-ui,sans-serif);
}
.ig-stack:hover .ig-card{transform:rotate(0deg) translateY(-6px);
  box-shadow:0 38px 80px -34px rgba(8,23,19,.7)}
.ig-stack:hover .ig-stack__bg{transform:rotate(4deg) translateY(10px)}

/* header ---------------------------------------------------------------- */
.ig-card__header{
  display:flex;align-items:center;gap:.65rem;padding:.85rem .95rem;
  border-bottom:1px solid var(--line,#E2E8E5);
}
.ig-card__avatar{
  width:36px;height:36px;border-radius:50%;flex:none;padding:2px;
  background:conic-gradient(from 140deg,var(--forest,#122F2A),var(--red,#E11B1B),
             var(--forest-400,#4F8C7B),var(--forest,#122F2A));
}
.ig-card__avatar-inner{
  display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:#fff;overflow:hidden;
}
.ig-card__avatar-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ig-card__avatar-fallback{
  font-family:var(--f-display,Georgia,serif);font-weight:600;font-size:.82rem;
  color:var(--forest,#122F2A);text-transform:uppercase;
}
.ig-card__meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ig-card__username{font-weight:700;font-size:.85rem;color:var(--forest,#122F2A);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-card__location{font-size:.7rem;font-weight:600;color:var(--ink-3,#7C918B);margin-top:.15rem}
.ig-card__more{
  margin-left:auto;background:none;border:none;cursor:pointer;padding:.25rem;
  color:var(--ink-3,#7C918B);display:grid;place-items:center;
}
.ig-card__more svg{width:17px;height:17px}

/* media ----------------------------------------------------------------- */
.ig-card__media{position:relative;height:0;background:var(--forest-050,#EDF3F0);overflow:hidden}
.ig-card__front{position:absolute;inset:0}
.ig-card__front-img,.ig-card__front-video{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.68,.32,1)}
.ig-stack:hover .ig-card__front-img,.ig-stack:hover .ig-card__front-video{transform:scale(1.05)}
.ig-card__front-grad{display:block;width:100%;height:100%;
  background:linear-gradient(150deg,var(--forest-600,#265A4D),var(--forest-900,#081713))}

/* Play button — RM red, not Instagram pink */
/* CENTRED ONCE, NOT TWICE.
   `transform:none` is the whole fix, and it is not tidying.

   The plugin already centres this button the classic way — left:50%, top:50%,
   then `transform:translate(-50%,-50%)` to pull it back by half its own size.
   This file centred it again with the newer `translate` property. Those are two
   different properties, so both applied: the button was pulled back a FULL
   button width instead of half, and sat 31px up and to the left of the middle
   of the video. Measured against the card front: 32px left, 30px high.

   Centring stays on `translate`, and `transform` is cleared so the plugin's
   copy of it cannot double up. The hover grows the button with the separate
   `scale` property rather than `transform`, for the same reason: writing
   `transform:scale()` would wipe out the `translate` and throw the button back
   off-centre for as long as the pointer was on it. */
.ig-card__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;transform:none;
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:var(--red,#E11B1B);color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 34px -10px rgba(225,27,27,.75);
  transition:scale .3s cubic-bezier(.22,.68,.32,1),background .25s;
}
.ig-card__play:hover{scale:1.09;background:var(--red-dark,#B81414)}
.ig-card__play svg{width:22px;height:22px;margin-left:3px}
/* Soft pulse so the card reads as playable at a glance */
.ig-card__play::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px solid rgba(225,27,27,.45);animation:igPulse 2.6s ease-out infinite;
}
@keyframes igPulse{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* actions / caption / link ---------------------------------------------- */
.ig-card__actions{display:flex;gap:.9rem;padding:.8rem .95rem .3rem}
.ig-card__action{color:var(--forest,#122F2A);display:grid;place-items:center;opacity:.85}
.ig-card__action:first-child{color:var(--red,#E11B1B);opacity:1}
.ig-card__action svg{width:19px;height:19px}
.ig-card__caption{
  padding:.35rem .95rem .8rem;font-size:.85rem;line-height:1.5;color:var(--ink-2,#48605A);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ig-card__caption-user{font-weight:700;color:var(--forest,#122F2A);margin-right:.35em}
.ig-card__view{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin:0 .95rem .95rem;padding:.6rem 1rem;border-radius:999px;
  background:var(--forest-050,#EDF3F0);color:var(--forest,#122F2A);
  font-size:.78rem;font-weight:700;letter-spacing:.03em;text-decoration:none;
  transition:background .2s,color .2s;
}
.ig-card__view:hover{background:var(--forest,#122F2A);color:#fff}

/* popup ------------------------------------------------------------------ */
.ig-popup{position:fixed;inset:0;z-index:420;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}
.ig-popup__scrim{position:absolute;inset:0;background:rgba(8,23,19,.94);backdrop-filter:blur(4px)}
.ig-popup__inner{
  position:relative;z-index:1;width:min(460px,100%);
  background:var(--surface,#fff);border-radius:var(--r-lg,28px);overflow:hidden;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.8);
  animation:igIn .34s cubic-bezier(.22,.68,.32,1);
}
@keyframes igIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.ig-popup__close{
  position:absolute;top:.85rem;right:.85rem;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(8,23,19,.55);border:1.5px solid rgba(255,255,255,.3);color:#fff;
  font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.ig-popup__close:hover{background:rgba(8,23,19,.8)}
.ig-popup__body video,.ig-popup__body iframe{display:block;width:100%;border:0;background:#000}

@media (prefers-reduced-motion:reduce){
  .ig-card,.ig-stack__bg,.ig-card__play,.ig-card__front-img,.ig-card__front-video{transition:none}
  .ig-card__play::after{animation:none}
  .ig-popup__inner{animation:none}
}