/**
 * Vestergårds Mediaplugin Gutenberg – frontend.css  v1.4.3
 *
 * 1. Lightbox-overlay
 * 2. Gallerivarianter  (Masonry · Mosaik)
 * 3. Bildutseende      (Höjd · Proportion · Avstånd · Hörn · Hover)
 * 4. Responsiva kolumn-overrides (Mobil · Surfplatta)
 */

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════════ */
#egb-lb-overlay {
	position:        fixed;
	inset:           0;
	z-index:         99999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      rgba( 0, 0, 0, 0.93 );
	opacity:         0;
	visibility:      hidden;
	transition:      opacity 0.22s ease, visibility 0.22s ease;
	-webkit-user-select: none;
	user-select:     none;
}

#egb-lb-overlay.egb-lb-visible {
	opacity:    1;
	visibility: visible;
}

.egb-lb-wrap {
	position:       relative;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	max-width:      92vw;
	max-height:     92vh;
}

.egb-lb-img {
	display:       block;
	max-width:     92vw;
	max-height:    86vh;
	width:         auto;
	height:        auto;
	object-fit:    contain;
	border-radius: 3px;
	box-shadow:    0 12px 48px rgba( 0, 0, 0, 0.7 );
	transition:    opacity 0.18s ease;
}

.egb-lb-caption {
	color:       rgba( 255, 255, 255, 0.8 );
	font-size:   0.85rem;
	line-height: 1.4;
	text-align:  center;
	margin:      0.6rem 0 0;
	max-width:   640px;
}

/* ── Knappar ─────────────────────────────────────────────── */
.egb-lb-btn {
	position:        fixed;
	z-index:         1;
	background:      rgba( 255, 255, 255, 0.13 );
	border:          none;
	color:           #fff;
	font-size:       1.4rem;
	line-height:     1;
	cursor:          pointer;
	border-radius:   50%;
	width:           50px;
	height:          50px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.18s, transform 0.15s;
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter:         blur( 6px );
}

.egb-lb-btn:hover        { background: rgba( 255, 255, 255, 0.28 ); }
.egb-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.egb-lb-close { top: 1rem; right: 1rem; }
.egb-lb-prev  { top: 50%; left: 1rem;  transform: translateY( -50% ); }
.egb-lb-next  { top: 50%; right: 1rem; transform: translateY( -50% ); }
.egb-lb-prev:hover { transform: translateY( -50% ) scale( 1.1 ); }
.egb-lb-next:hover { transform: translateY( -50% ) scale( 1.1 ); }

/* ── Spinner ─────────────────────────────────────────────── */
.egb-lb-spinner {
	display:   none;
	position:  absolute;
	top:  50%; left: 50%;
	transform: translate( -50%, -50% );
}

.egb-lb-spinner div {
	display:       inline-block;
	width:  10px; height: 10px;
	border-radius: 50%;
	background:    #fff;
	margin:        0 3px;
	animation:     egb-bounce 1.1s ease-in-out infinite;
}

.egb-lb-spinner div:nth-child(1) { animation-delay: 0s;    }
.egb-lb-spinner div:nth-child(2) { animation-delay: 0.18s; }
.egb-lb-spinner div:nth-child(3) { animation-delay: 0.36s; }
.egb-lb-spinner div:nth-child(4) { animation-delay: 0.54s; }

@keyframes egb-bounce {
	0%, 80%, 100% { transform: scale( 0 ); opacity: 0.3; }
	40%           { transform: scale( 1 ); opacity: 1;   }
}

@media ( max-width: 480px ) {
	.egb-lb-btn  { width: 42px; height: 42px; font-size: 1.1rem; }
	.egb-lb-prev { left: 0.3rem;  }
	.egb-lb-next { right: 0.3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   GALLERIVARIANTER
═══════════════════════════════════════════════════════════════ */

/* ── Masonry ─────────────────────────────────────────────── */
.wp-block-gallery.egb-variant-masonry.has-nested-images {
	display:    block !important;
	column-gap: var( --egb-gap, var( --wp--style--gallery-gap-default, 0.5em ) );
}

.wp-block-gallery.egb-variant-masonry.columns-1         { column-count: 1; }
.wp-block-gallery.egb-variant-masonry.columns-2         { column-count: 2; }
.wp-block-gallery.egb-variant-masonry.columns-3,
.wp-block-gallery.egb-variant-masonry.columns-default   { column-count: 3; }
.wp-block-gallery.egb-variant-masonry.columns-4         { column-count: 4; }
.wp-block-gallery.egb-variant-masonry.columns-5         { column-count: 5; }
.wp-block-gallery.egb-variant-masonry.columns-6         { column-count: 6; }

.wp-block-gallery.egb-variant-masonry.has-nested-images > figure {
	display:           inline-block;
	width:             100%;
	margin-bottom:     var( --egb-gap, var( --wp--style--gallery-gap-default, 0.5em ) );
	break-inside:      avoid;
	page-break-inside: avoid;
}

.wp-block-gallery.egb-variant-masonry.has-nested-images > figure img {
	display: block;
	width:   100%;
	height:  auto;
}

@supports ( grid-template-rows: masonry ) {
	.wp-block-gallery.egb-variant-masonry.has-nested-images {
		display:               grid !important;
		grid-template-columns: repeat( 3, 1fr );
		grid-template-rows:    masonry;
		gap: var( --egb-gap, var( --wp--style--gallery-gap-default, 0.5em ) );
	}
	.wp-block-gallery.egb-variant-masonry.columns-1 { grid-template-columns: 1fr; }
	.wp-block-gallery.egb-variant-masonry.columns-2 { grid-template-columns: repeat( 2, 1fr ); }
	.wp-block-gallery.egb-variant-masonry.columns-4 { grid-template-columns: repeat( 4, 1fr ); }
	.wp-block-gallery.egb-variant-masonry.columns-5 { grid-template-columns: repeat( 5, 1fr ); }
	.wp-block-gallery.egb-variant-masonry.columns-6 { grid-template-columns: repeat( 6, 1fr ); }
	.wp-block-gallery.egb-variant-masonry.has-nested-images > figure { display: block; margin-bottom: 0; }
}

/* ── Mosaik ──────────────────────────────────────────────── */
.wp-block-gallery.egb-variant-mosaic.has-nested-images {
	display:               grid !important;
	grid-template-columns: repeat( 3, 1fr );
	grid-auto-rows:        240px;
	gap: var( --egb-gap, var( --wp--style--gallery-gap-default, 0.5em ) );
}

.wp-block-gallery.egb-variant-mosaic.has-nested-images > figure {
	overflow: hidden;
	margin:   0;
}

.wp-block-gallery.egb-variant-mosaic.has-nested-images > figure:first-child {
	grid-column: span 2;
	grid-row:    span 2;
}

.wp-block-gallery.egb-variant-mosaic.has-nested-images > figure img,
.wp-block-gallery.egb-variant-mosaic.has-nested-images > figure a {
	display: block;
	width:   100%;
	height:  100%;
}

.wp-block-gallery.egb-variant-mosaic.has-nested-images > figure img {
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   BILDUTSEENDE – CSS custom properties
═══════════════════════════════════════════════════════════════ */

/* ── Avstånd ─────────────────────────────────────────────── */
.wp-block-gallery.egb-has-gap.has-nested-images {
	gap: var( --egb-gap ) !important;
	/* Synka WPs flex-basis-beräkning med vårt gap-värde,
	   annars beräknas flex-basis fel och bilder radbryts. */
	--wp--style--gallery-gap-default: var( --egb-gap );
}

/* ── Hörn-rundning ───────────────────────────────────────── */
.wp-block-gallery.egb-has-radius > figure {
	border-radius: var( --egb-radius, 0 );
	overflow:      hidden;
}

.wp-block-gallery.egb-has-radius > figure img {
	border-radius: var( --egb-radius, 0 );
}

/* ── Bildproportion ──────────────────────────────────────── */
.wp-block-gallery.egb-has-ratio > figure {
	aspect-ratio: var( --egb-ratio );
	overflow:     hidden;
}

.wp-block-gallery.egb-has-ratio > figure img,
.wp-block-gallery.egb-has-ratio > figure a {
	display: block;
	width:   100%;
	height:  100%;
}

.wp-block-gallery.egb-has-ratio > figure img {
	object-fit: cover;
}

/* ── Fast bildhöjd ───────────────────────────────────────── */
.wp-block-gallery[style*='--egb-img-height'] > figure {
	overflow: hidden;
}

.wp-block-gallery[style*='--egb-img-height'] > figure img {
	height:     var( --egb-img-height );
	width:      100%;
	object-fit: cover;
	display:    block;
}

/* ── Hover-effekter ──────────────────────────────────────── */
.wp-block-gallery.egb-hover-zoom > figure img,
.wp-block-gallery.egb-hover-darken > figure img,
.wp-block-gallery.egb-hover-lighten > figure img,
.wp-block-gallery.egb-hover-zoom-darken > figure img {
	transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

.wp-block-gallery.egb-hover-zoom > figure       { overflow: hidden; }
.wp-block-gallery.egb-hover-zoom > figure:hover img { transform: scale( 1.07 ); }

.wp-block-gallery.egb-hover-darken > figure:hover img  { filter: brightness( 0.7 ); }
.wp-block-gallery.egb-hover-lighten > figure:hover img { filter: brightness( 1.25 ); }

.wp-block-gallery.egb-hover-zoom-darken > figure       { overflow: hidden; }
.wp-block-gallery.egb-hover-zoom-darken > figure:hover img {
	transform: scale( 1.07 );
	filter:    brightness( 0.7 );
}

/* Lightbox-cursor */
.wp-block-gallery.egb-lightbox > figure img {
	cursor: zoom-in;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVA KOLUMN-OVERRIDES  (egbMobileCols / egbTabletCols)
═══════════════════════════════════════════════════════════════ */

/* ── Mobil (< 600 px) ────────────────────────────────────── */
@media ( max-width: 600px ) {

	/* 1 kolumn – alla varianter */
	.wp-block-gallery.egb-mobile-cols-1.has-nested-images {
		display:        flex !important;
		flex-direction: column !important;
		flex-wrap:      nowrap !important;
	}
	.wp-block-gallery.egb-mobile-cols-1.has-nested-images > figure {
		width:      100% !important;
		flex-basis: 100% !important;
		max-width:  100% !important;
	}
	.wp-block-gallery.egb-variant-masonry.egb-mobile-cols-1 {
		display:      block !important;
		column-count: 1 !important;
	}
	.wp-block-gallery.egb-variant-mosaic.egb-mobile-cols-1.has-nested-images {
		display:               grid !important;
		grid-template-columns: 1fr !important;
		grid-auto-rows:        200px !important;
	}
	.wp-block-gallery.egb-variant-mosaic.egb-mobile-cols-1.has-nested-images > figure:first-child {
		grid-column: auto !important;
		grid-row:    auto !important;
	}

	/* 2 kolumner – alla varianter */
	.wp-block-gallery.egb-mobile-cols-2.has-nested-images {
		display:               grid !important;
		grid-template-columns: 1fr 1fr !important;
	}
	.wp-block-gallery.egb-variant-masonry.egb-mobile-cols-2 {
		display:      block !important;
		column-count: 2 !important;
	}
	.wp-block-gallery.egb-variant-mosaic.egb-mobile-cols-2.has-nested-images {
		grid-template-columns: 1fr 1fr !important;
		grid-auto-rows:        140px !important;
	}
	.wp-block-gallery.egb-variant-mosaic.egb-mobile-cols-2.has-nested-images > figure:first-child {
		grid-column: auto !important;
		grid-row:    auto !important;
	}
}

/* ── Surfplatta (601–900 px) ─────────────────────────────── */
@media ( min-width: 601px ) and ( max-width: 900px ) {

	/* 1 kolumn */
	.wp-block-gallery.egb-tablet-cols-1.has-nested-images {
		display:        flex !important;
		flex-direction: column !important;
	}
	.wp-block-gallery.egb-tablet-cols-1.has-nested-images > figure {
		width:      100% !important;
		flex-basis: 100% !important;
		max-width:  100% !important;
	}
	.wp-block-gallery.egb-variant-masonry.egb-tablet-cols-1 {
		display:      block !important;
		column-count: 1 !important;
	}
	.wp-block-gallery.egb-variant-mosaic.egb-tablet-cols-1.has-nested-images {
		grid-template-columns: 1fr !important;
	}
	.wp-block-gallery.egb-variant-mosaic.egb-tablet-cols-1.has-nested-images > figure:first-child {
		grid-column: auto !important;
		grid-row:    auto !important;
	}

	/* 2 kolumner */
	.wp-block-gallery.egb-tablet-cols-2.has-nested-images {
		display:               grid !important;
		grid-template-columns: 1fr 1fr !important;
	}
	.wp-block-gallery.egb-variant-masonry.egb-tablet-cols-2 { column-count: 2 !important; }
	.wp-block-gallery.egb-variant-mosaic.egb-tablet-cols-2.has-nested-images {
		grid-template-columns: 1fr 1fr !important;
		grid-auto-rows:        180px !important;
	}

	/* 3 kolumner */
	.wp-block-gallery.egb-tablet-cols-3.has-nested-images {
		display:               grid !important;
		grid-template-columns: repeat( 3, 1fr ) !important;
	}
	.wp-block-gallery.egb-variant-masonry.egb-tablet-cols-3 { column-count: 3 !important; }
	.wp-block-gallery.egb-variant-mosaic.egb-tablet-cols-3.has-nested-images {
		grid-template-columns: repeat( 3, 1fr ) !important;
	}

	/* 4 kolumner */
	.wp-block-gallery.egb-tablet-cols-4.has-nested-images {
		display:               grid !important;
		grid-template-columns: repeat( 4, 1fr ) !important;
	}
	.wp-block-gallery.egb-variant-masonry.egb-tablet-cols-4 { column-count: 4 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVITET – standardinställningar (befintlig kod)
═══════════════════════════════════════════════════════════════ */
@media ( max-width: 600px ) {
	.wp-block-gallery.egb-variant-masonry.columns-3,
	.wp-block-gallery.egb-variant-masonry.columns-4,
	.wp-block-gallery.egb-variant-masonry.columns-5,
	.wp-block-gallery.egb-variant-masonry.columns-6,
	.wp-block-gallery.egb-variant-masonry.columns-default { column-count: 1; }

	.wp-block-gallery.egb-variant-mosaic.has-nested-images {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows:        140px;
	}

	.wp-block-gallery.egb-variant-mosaic.has-nested-images > figure:first-child {
		grid-column: 1 / -1;
		grid-row:    auto;
	}
}

@media ( min-width: 601px ) and ( max-width: 900px ) {
	.wp-block-gallery.egb-variant-masonry.columns-4,
	.wp-block-gallery.egb-variant-masonry.columns-5,
	.wp-block-gallery.egb-variant-masonry.columns-6 { column-count: 2; }

	.wp-block-gallery.egb-variant-mosaic.has-nested-images { grid-auto-rows: 180px; }
}