/* ==========================================
   Big / Small Gallery (core Gallery) — kompatibel med has-nested-images
   Krav: Gallery-blocket har extra klass: bsg-gallery
   JS skapar: .bsg-wrap + .bsg-main + .bsg-mainImg
   ========================================== */

/* Wrapper som JS skapar */
.bsg-wrap {
  width: 100%;
  margin-bottom: 2rem;
}

/* ===== Stor bild ===== */
.bsg-main {
  margin-bottom: 12px;
}

.bsg-mainImg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 1.5;
}

/* Skydd mot WP auto-sizes-regeln på storbilden */
.bsg-mainImg:is([sizes="auto" i],[sizes^="auto," i]) {
  contain-intrinsic-size: auto !important;
}

/* ===== Thumbnails ===== */
/* Vi tar kontroll över layouten men bara för vår klass */
.wp-block-gallery.bsg-gallery {
  margin: 0;
  padding: 0;
}

/* Viktigt: WP kan sätta flex-layout på has-nested-images.
   Vi ersätter med grid för thumbnail-raden. */
.wp-block-gallery.bsg-gallery,
.wp-block-gallery.bsg-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

/* WP:s nested gallery har barn som ofta är figure.wp-block-image.
   Nolla flex-beteende och bredder som WP kan injicera. */
.wp-block-gallery.bsg-gallery.has-nested-images > figure,
.wp-block-gallery.bsg-gallery.has-nested-images > .wp-block-image,
.wp-block-gallery.bsg-gallery > figure,
.wp-block-gallery.bsg-gallery > .wp-block-image {
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  flex: none !important;
  max-width: none !important;
}

/* Om temat/WP lägger in en extra wrapper (ovanligt men händer) */
.wp-block-gallery.bsg-gallery.has-nested-images > div > figure {
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  flex: none !important;
  max-width: none !important;
}

/* Själva thumb-bilden
   Vi tvingar en stabil thumb-höjd så de inte krymper till 12x8px. */
.wp-block-gallery.bsg-gallery img {
  display: block;
  width: 100% !important;
  height: 80px !important;
  max-width: 100% !important;
  object-fit: cover;
  cursor: pointer;
}

/* Ibland lägger WP/tema inline height/width på själva IMG */
.wp-block-gallery.bsg-gallery img[width],
.wp-block-gallery.bsg-gallery img[height] {
  height: 80px !important;
  width: 100% !important;
}

/* Aktiv thumbnail-markering */
.wp-block-gallery.bsg-gallery .bsg-thumb.is-active img {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}