/*
 * Instagram Feed – Scattered Layout
 *
 * Overrides the Smash Balloon SBI grid so each .sbi_item is individually
 * visible, scattered at fixed pixel positions with varied sizes.
 *
 * Container: 600 × 500 px (centered inside the section).
 * Items range from ~104 px to ~196 px wide; aspect-ratio 1:1 is preserved.
 * Most items don't overlap; only items 3 & 6 share a ~20 px strip for
 * the "scattered photos" feel without burying any photo.
 *
 * Scope: .instagram-feed wrapper that wraps #sb_instagram
 */

/* ── Outer wrapper ──────────────────────────────────────────────────────── */

.instagram-feed {
  width: 100% !important;
  overflow: visible !important;
}

.instagram-feed #sb_instagram {
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* ── Inner image container ──────────────────────────────────────────────── */

.instagram-feed #sbi_images {
  position: relative !important;
  display: block !important;
  width: 600px !important;
  max-width: 100% !important;
  height: 500px !important;
  margin: 0 auto !important;
  overflow: visible !important;
  gap: 0 !important;
  flex-wrap: unset !important;
}

/* ── Base item reset ────────────────────────────────────────────────────── */

.instagram-feed #sbi_images .sbi_item {
  --r: 0deg;   /* overridden per-item below; composed into transform here   */
  position: absolute !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transform: rotate(var(--r)) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform !important;
}

.instagram-feed #sbi_images .sbi_item:hover {
  z-index: 10 !important;
  box-shadow: none !important;
  /* straightens the item and scales up, like the theme card hover */
  transform: scale(1.1) rotate(0deg) !important;
}

/* Force inner wrappers to fill the item (overrides plugin's inline height) */
.instagram-feed #sbi_images .sbi_item .sbi_photo_wrap,
.instagram-feed #sbi_images .sbi_item .sbi_photo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.instagram-feed #sbi_images .sbi_item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ── Hide carousel icon ─────────────────────────────────────────────────── */

.instagram-feed .sbi_lightbox_carousel_icon {
  display: none !important;
}

.instagram-feed .sbi-screenreader { 
  display: none !important;
}

/* ── "Load more" button ─────────────────────────────────────────────────── */

.instagram-feed #sbi_load {
  position: absolute !important;
  bottom: -52px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ── Per-item positions, sizes, micro-rotations ─────────────────────────
 *
 * Layout map (all values in px, container = 600 × 500):
 * Scale factor applied: 600/780 ≈ 0.769
 *
 *   #   w    top  left   notes
 *   1  196    12    12   large,  top-left
 *   2  104    23   265   small,  top-center (fills gap 1↔3)
 *   3  135     4   435   small,  top-right
 *   4  169   150   212   medium, center
 *   5  150   185   427   medium, center-right
 *   6  154   312    19   medium, bottom-left
 *   7  162   296   281   medium, bottom-center
 *   8  119   365   462   small,  bottom-right corner
 * ─────────────────────────────────────────────────────────────────────── */

/* Item 1 — large, top-left */
.instagram-feed #sbi_images .sbi_item:nth-child(1) {
  --r: -2deg;
  width: 196px !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
}

/* Item 2 — small, top-center (gap filler between 1 and 3) */
.instagram-feed #sbi_images .sbi_item:nth-child(2) {
  --r: 1.8deg;
  width: 104px !important;
  top: 23px !important;
  left: 265px !important;
  z-index: 2 !important;
}

/* Item 3 — small, top-right */
.instagram-feed #sbi_images .sbi_item:nth-child(3) {
  --r: 3deg;
  width: 135px !important;
  top: 4px !important;
  left: 435px !important;
  z-index: 2 !important;
}

/* Item 4 — medium, center */
.instagram-feed #sbi_images .sbi_item:nth-child(4) {
  --r: -1deg;
  width: 169px !important;
  top: 150px !important;
  left: 212px !important;
  z-index: 4 !important;
}

/* Item 5 — medium, center-right */
.instagram-feed #sbi_images .sbi_item:nth-child(5) {
  --r: 2deg;
  width: 150px !important;
  top: 185px !important;
  left: 427px !important;
  z-index: 3 !important;
}

/* Item 6 — medium, bottom-left */
.instagram-feed #sbi_images .sbi_item:nth-child(6) {
  --r: -3deg;
  width: 154px !important;
  top: 312px !important;
  left: 19px !important;
  z-index: 2 !important;
}

/* Item 7 — medium, bottom-center */
.instagram-feed #sbi_images .sbi_item:nth-child(7) {
  --r: 1.5deg;
  width: 162px !important;
  top: 296px !important;
  left: 281px !important;
  z-index: 3 !important;
}

/* Item 8 — small, bottom-right corner (gap filler) */
.instagram-feed #sbi_images .sbi_item:nth-child(8) {
  --r: -1.5deg;
  width: 119px !important;
  top: 365px !important;
  left: 462px !important;
  z-index: 2 !important;
}

/* ── Responsive: revert to 2-column grid on mobile (≤ 767 px) ──────────
 *
 * Fixed-pixel absolute positioning collapses badly on narrow screens.
 * Hand control back to the plugin grid below 768 px.
 * ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .instagram-feed #sbi_images {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    gap: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .instagram-feed #sbi_images .sbi_item {
    position: static !important;
    width: calc(50% - 4px) !important;
    aspect-ratio: 1 / 1 !important;
    /* --r per-item is inherited; rotate(var(--r)) from the base rule applies */
  }

  .instagram-feed #sbi_images .sbi_item .sbi_photo_wrap,
  .instagram-feed #sbi_images .sbi_item .sbi_photo {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .instagram-feed #sbi_load {
    position: static !important;
    transform: none !important;
  }
}