/*
 * Happy Mouse — Smash Balloon Instagram Feed
 * Style ograniczony do sekcji .happy-mouse-instagram-feed na stronie głównej.
 */

.happy-mouse-instagram-feed {
  --hm-instagram-line: var(--line, #e5d5c2);
  --hm-instagram-paper: var(--paper, #fffdf9);
  --hm-instagram-rose: var(--rose-dark, #9d625b);
  width: 100%;
  margin: 0 auto 18px;
}

/* Usuń własny nagłówek oraz przyciski wtyczki — strona ma własny tytuł i CTA. */
.happy-mouse-instagram-feed #sb_instagram .sb_instagram_header,
.happy-mouse-instagram-feed #sb_instagram .sbi_header,
.happy-mouse-instagram-feed #sb_instagram #sbi_load,
.happy-mouse-instagram-feed #sb_instagram .sbi_load_btn,
.happy-mouse-instagram-feed #sb_instagram .sbi_follow_btn {
  display: none !important;
}

.happy-mouse-instagram-feed #sb_instagram {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Siatka zgodna z dotychczasową stroną główną. */
.happy-mouse-instagram-feed #sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.happy-mouse-instagram-feed #sb_instagram #sbi_images > .sbi_item {
  display: block !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Na stronie głównej pokazujemy maksymalnie pięć najnowszych publikacji. */
.happy-mouse-instagram-feed #sb_instagram #sbi_images > .sbi_item:nth-child(n+6) {
  display: none !important;
}

.happy-mouse-instagram-feed #sb_instagram .sbi_photo_wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #eee9e2 !important;
  border: 1px solid rgba(229, 213, 194, 0.55) !important;
}

.happy-mouse-instagram-feed #sb_instagram .sbi_photo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  transition: transform 0.45s ease, filter 0.35s ease !important;
}

.happy-mouse-instagram-feed #sb_instagram .sbi_photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (hover: hover) {
  .happy-mouse-instagram-feed #sb_instagram .sbi_photo:hover {
    transform: scale(1.035) !important;
    filter: saturate(0.96) brightness(0.98) !important;
  }
}

.happy-mouse-instagram-follow {
  margin-top: 0 !important;
}

@media (max-width: 1000px) {
  .happy-mouse-instagram-feed #sb_instagram #sbi_images {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .happy-mouse-instagram-feed {
    margin-bottom: 16px;
  }

  .happy-mouse-instagram-feed #sb_instagram #sbi_images {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  /* Cztery równe kafle na telefonie, bez osamotnionego piątego zdjęcia. */
  .happy-mouse-instagram-feed #sb_instagram #sbi_images > .sbi_item:nth-child(n+5) {
    display: none !important;
  }
}

/* V3 — 10 postów i około 3 kafle widoczne na telefonie. */
@media (max-width: 720px) {
  .happy-mouse-instagram-feed {
    width: auto;
    margin-right: -15px;
    overflow: visible;
  }

  .happy-mouse-instagram-feed #sb_instagram,
  .happy-mouse-instagram-feed #sb_instagram .sbi_images,
  .happy-mouse-instagram-feed #sb_instagram #sbi_images {
    overflow: visible !important;
  }

  .happy-mouse-instagram-feed #sb_instagram #sbi_images {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 2px 15px 13px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    touch-action: pan-x pan-y !important;
  }

  .happy-mouse-instagram-feed #sb_instagram #sbi_images::-webkit-scrollbar {
    display: none !important;
  }

  .happy-mouse-instagram-feed #sb_instagram #sbi_images > .sbi_item,
  .happy-mouse-instagram-feed #sb_instagram #sbi_images > .sbi_item:nth-child(n+5),
  .happy-mouse-instagram-feed #sb_instagram #sbi_images > .sbi_item:nth-child(n+6) {
    display: block !important;
    float: none !important;
    flex: 0 0 calc((100% - 16px) / 3) !important;
    width: calc((100% - 16px) / 3) !important;
    max-width: calc((100% - 16px) / 3) !important;
    min-width: calc((100% - 16px) / 3) !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .happy-mouse-instagram-feed #sb_instagram .sbi_photo_wrap,
  .happy-mouse-instagram-feed #sb_instagram .sbi_photo {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }
}