/* ==========================================================================
   Smash Balloon Instagram Feed Override Styles
   ==========================================================================
   These styles ensure the Smash Balloon feed HTML renders correctly
   when its own JS lazy loader (sb-instagram.js) is not present —
   i.e., when the HTML is consumed via the REST API proxy.
   ========================================================================== */

/* Main feed container */
#sb_instagram.sbi {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Images container — use CSS grid matching the SPA's instagram-grid */
#sbi_images {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: var(--spacing-md, 1rem) !important;
  width: 100% !important;
}

@media (max-width: 600px) {
  #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-sm, 0.5rem) !important;
  }
}

/* Individual feed items */
.sbi_item {
  position: relative !important;
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  border-radius: var(--border-radius, 12px) !important;
  background-color: var(--bg-secondary, #f0ece7) !important;
  border: 1px solid var(--border-color, #e0dbd4) !important;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Photo wrapper — fill the grid item */
.sbi_photo_wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Photo anchor — fill parent */
.sbi_photo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

/* The actual images — cover the container */
.sbi_photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hover effect matching the SPA's instagram-post hover */
.sbi_item:hover .sbi_photo img {
  transform: scale(1.05) !important;
}

/* Hide Smash Balloon's own header (we render our own in the SPA) */
.sb_instagram_header {
  display: none !important;
}

/* Hide the "load more" button area */
#sbi_load {
  display: none !important;
}

/* Hide screen reader text that may show visually */
.sbi-screenreader {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* Hide resized image data span */
.sbi_resized_image_data {
  display: none !important;
}

/* Smash Balloon header hover overlay - hide it */
.sbi_header_img_hover {
  display: none !important;
}

/* Fix any SB inline padding/margin that breaks layout */
.sbi .sbi_item {
  padding-bottom: 0 !important;
}