/* ============================================================================
   Ruby Rays — Instagram Carousel element.
   Full-width run of square images, each with an Instagram-tag pill; arrow
   controls overlay the bottom-left. Colours/spacing come from CSS variables
   set inline by the widget's Style controls (fallback defaults below).
   ========================================================================== */
.rr-igc{
  --rr-gap:14px;
  --rr-per:3.5;                 /* images visible on desktop */
  --rr-bg:#efdcd1;              /* colour shown in the gaps between images */
  --rr-maroon:#8e2246;          /* arrow pill */
  --rr-arrow:#FFFFBB;           /* arrow icon */
  --rr-tag-bg:#f7eae4;          /* Instagram-tag pill background */
  --rr-tag-text:#1b1b1b;        /* Instagram-tag text */
  --rr-radius:0px;              /* image corner radius */
  --rr-sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  position:relative;
  background:var(--rr-bg);
  font-family:var(--rr-sans);
  box-sizing:border-box;
}
.rr-igc *,.rr-igc *::before,.rr-igc *::after{box-sizing:border-box}

.rr-igc__viewport{overflow:hidden}
.rr-igc__track{
  display:flex;gap:var(--rr-gap);will-change:transform;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.rr-igc__slide{
  position:relative;
  flex:0 0 calc((100% - ((var(--rr-per) - 1) * var(--rr-gap))) / var(--rr-per));
  aspect-ratio:1;
}
.rr-igc__slide img,.rr-igc__slide--ph{
  width:100%;height:100%;object-fit:cover;display:block;
  background:#b7b7b7;border-radius:var(--rr-radius);
}

/* -------- Instagram tag pill (bottom-centre of each slide) -------- */
.rr-igc__tag{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:inline-block;max-width:calc(100% - 32px);
  background:var(--rr-tag-bg);color:var(--rr-tag-text);
  font-family:Gilroy,var(--rr-sans);font-weight:bold;font-size:14px;line-height:1;
  padding:10px 20px;border-radius:999px;white-space:nowrap;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
a.rr-igc__tag{transition:transform .15s ease,filter .2s ease}
a.rr-igc__tag:hover{filter:brightness(.97);transform:translateX(-50%) translateY(-1px)}

/* -------- Nav arrows (bottom-left overlay) -------- */
.rr-igc__nav{
  position:absolute;left:24px;bottom:20px;
  display:inline-flex;align-items:center;gap:2px;
  background:var(--rr-maroon);border-radius:999px;padding:8px 10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:3;
}
.rr-igc__nav-divider{width:1px;height:20px;background:rgba(255,255,255,.30)}
.rr-igc__arrow{
  appearance:none;border:0;background:transparent;cursor:pointer;color:var(--rr-arrow);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;transition:background .2s,opacity .2s,transform .1s;
}
.rr-igc__arrow svg{width:24px;height:auto;display:block}
.rr-igc__arrow[data-dir="next"] svg{transform:rotate(180deg)}
.rr-igc__arrow:hover{background:rgba(255,255,255,.14)}
.rr-igc__arrow:active{transform:scale(.92)}
.rr-igc__arrow:disabled{opacity:.35;cursor:default}
.rr-igc__arrow:focus-visible{outline:2px solid var(--rr-arrow);outline-offset:2px}

/* ============================ MOBILE ==================================== */
@media (max-width:900px){
  .rr-igc__slide{flex:0 0 82%}      /* one image with a peek of the next */
  .rr-igc__nav{left:16px;bottom:16px}
  .rr-igc__tag{bottom:16px}
}