/* ASD Galería — mobile-first responsive gallery
   Columns driven by --asd-gal-cols / --asd-gal-gap (set inline per instance).
   Mobile-first: base is 1 column, columns scale up at wider breakpoints. */

.asd-gal {
	--asd-gal-cols: 3;
	--asd-gal-gap: 12px;
	margin: 0;
}

.asd-gal__item {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: rgba( 0, 0, 0, 0.04 );
}

.asd-gal__link {
	display: block;
	line-height: 0;
}

.asd-gal__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 300ms ease, opacity 300ms ease;
}

.asd-gal--lightbox .asd-gal__link {
	cursor: zoom-in;
}

.asd-gal--lightbox .asd-gal__item:hover .asd-gal__img {
	transform: scale( 1.04 );
}

/* Grid layout — mobile-first: 1 col, then 2, then full columns */
.asd-gal--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --asd-gal-gap );
}

.asd-gal--grid .asd-gal__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media ( min-width: 480px ) {
	.asd-gal--grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 782px ) {
	.asd-gal--grid {
		grid-template-columns: repeat( var( --asd-gal-cols ), 1fr );
	}
}

/* Masonry layout — CSS columns; mobile-first: 1 col, then 2, then full */
.asd-gal--masonry {
	column-count: 1;
	column-gap: var( --asd-gal-gap );
}

.asd-gal--masonry .asd-gal__item {
	margin-bottom: var( --asd-gal-gap );
	break-inside: avoid;
}

@media ( min-width: 480px ) {
	.asd-gal--masonry {
		column-count: 2;
	}
}

@media ( min-width: 782px ) {
	.asd-gal--masonry {
		column-count: var( --asd-gal-cols );
	}
}

/* Respect reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.asd-gal__img {
		transition: none;
	}

	.asd-gal--lightbox .asd-gal__item:hover .asd-gal__img {
		transform: none;
	}
}