/*
 * gallery-patterns.css
 * Drop in your theme's assets/css/ and enqueue via functions.php.
 * Covers all four gallery block patterns.
 *
 * Strategy: never override display on the gallery wrapper.
 * WP's gallery block inlines width on each figure via JS/PHP;
 * we only override properties that don't conflict with that.
 */

/* ─────────────────────────────────────────────
   Shared base
───────────────────────────────────────────── */
.gallery-pattern {
	--gallery-gap: 6px;
	--gallery-row-height: 260px;
	--gallery-row-height-mobile: 160px;

	/* Tell WP's gap calc to use our value */
	--wp--style--unstable-gallery-gap: var(--gallery-gap);
}

/* ─────────────────────────────────────────────
   1. Masonry
   Uses CSS columns on the wrapper; WP's inline width
   is overridden per-item with width:100% so each column
   cell fills its column correctly.
───────────────────────────────────────────── */
.gallery-masonry .wp-block-gallery.is-style-masonry {
	column-count: 3;
	column-gap: var(--gallery-gap);
	/* Keep display:block so CSS columns work */
	display: block !important;
	gap: unset !important; /* gap is meaningless on block; use column-gap + margin-bottom below */
}

.gallery-masonry .wp-block-gallery.is-style-masonry .wp-block-image {
	break-inside: avoid;
	display: block !important;
	/* Override WP's inline width so the item fills its column */
	width: 100% !important;
	margin: 0 0 var(--gallery-gap) 0 !important;
}

.gallery-masonry .wp-block-gallery.is-style-masonry .wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto;
}

@media (max-width: 768px) {
	.gallery-masonry .wp-block-gallery.is-style-masonry { column-count: 2; }
}
@media (max-width: 480px) {
	.gallery-masonry .wp-block-gallery.is-style-masonry { column-count: 1; }
}

/* ─────────────────────────────────────────────
   2. Strict Grid
   WP outputs flex with inline widths per figure.
   We switch to CSS grid on the wrapper and force
   each figure to fill its cell.
───────────────────────────────────────────── */
.gallery-strict-grid .wp-block-gallery.is-style-strict-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gallery-gap) !important;
}

.gallery-strict-grid .wp-block-gallery.is-style-strict-grid .wp-block-image {
	/* Override WP's inline width — grid handles sizing */
	width: 100% !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin: 0 !important;
}

.gallery-strict-grid .wp-block-gallery.is-style-strict-grid .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.3s ease;
}

.gallery-strict-grid .wp-block-gallery.is-style-strict-grid .wp-block-image:hover img {
	transform: scale(1.04);
}

@media (max-width: 768px) {
	.gallery-strict-grid .wp-block-gallery.is-style-strict-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.gallery-strict-grid .wp-block-gallery.is-style-strict-grid {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────
   3. Lightbox Carousel (thumbnail strip)
───────────────────────────────────────────── */
.gallery-lightbox-carousel .wp-block-gallery.is-style-lightbox-strip {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: var(--gallery-gap) !important;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.gallery-lightbox-carousel .wp-block-gallery.is-style-lightbox-strip .wp-block-image {
	flex: 0 0 120px !important;
	width: 120px !important;
	margin: 0 !important;
}

.gallery-lightbox-carousel .wp-block-gallery.is-style-lightbox-strip .wp-block-image img {
	width: 120px !important;
	height: 90px !important;
	object-fit: cover;
	display: block;
	cursor: pointer;
	transition: opacity 0.2s;
}

.gallery-lightbox-carousel .wp-block-gallery.is-style-lightbox-strip .wp-block-image:hover img {
	opacity: 0.8;
}

/* ─────────────────────────────────────────────
   4. Justified Rows (Flickr-style)
───────────────────────────────────────────── */
.gallery-justified .wp-block-gallery.is-style-justified {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--gallery-gap) !important;
	width: 100%;
}

.gallery-justified .wp-block-gallery.is-style-justified .wp-block-image {
	flex-grow: 1 !important;
	/* Override WP's fixed inline width so flex-grow can work */
	width: auto !important;
	margin: 0 !important;
}

.gallery-justified .wp-block-gallery.is-style-justified .wp-block-image img {
	display: block;
	height: var(--gallery-row-height);
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.gallery-justified .wp-block-gallery.is-style-justified .wp-block-image:last-child {
	flex-grow: 0;
}

@media (max-width: 600px) {
	.gallery-justified .wp-block-gallery.is-style-justified .wp-block-image img {
		height: var(--gallery-row-height-mobile);
	}
}