/* ==========================================================================
   Aidem Image Gallery — frontend styles
   Scoped entirely under .aig-gallery. Uses container queries so each
   gallery instance responds to its own column width (not just the
   viewport), CSS custom properties for themeable values, and OKLCH
   for colour. Fully responsive at every breakpoint.
   ========================================================================== */

.aig-gallery {
	--aig-gap: 12px;
	--aig-radius: 10px;
	--aig-accent: oklch( 55% 0.18 250 );
	--aig-overlay-bg: linear-gradient( to top, rgb( 0 0 0 / 0.8 ), rgb( 0 0 0 / 0 ) 65% );
	--aig-duration: 0.35s;
	--aig-ease: cubic-bezier( 0.4, 0, 0.2, 1 );

	position: relative;
	container-type: inline-size;
	container-name: aig;
	margin: 1.5em 0;
}

.aig-gallery,
.aig-gallery * {
	box-sizing: border-box;
}

.aig-notice {
	padding: 12px 16px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 6px;
	color: #664d03;
	font-size: 0.9rem;
}

/* ---------- Shared item styles ---------- */

.aig-gallery .aig-item {
	all: unset;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var( --aig-radius );
	background: #eee;
	cursor: pointer;
}

.aig-gallery .aig-item:focus-visible {
	outline: 2px solid var( --aig-accent );
	outline-offset: 2px;
}

.aig-gallery .aig-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform var( --aig-duration ) var( --aig-ease ),
		filter var( --aig-duration ) var( --aig-ease ),
		opacity var( --aig-duration ) var( --aig-ease );
}

.aig-gallery .aig-item:hover .aig-thumb-img,
.aig-gallery .aig-item:focus-visible .aig-thumb-img {
	transform: scale( 1.04 );
}

.aig-gallery .aig-thumb-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 10px 12px;
	color: #fff;
	font-size: clamp( 0.8rem, 1.6cqi, 0.95rem );
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-shadow: 0 1px 3px rgb( 0 0 0 / 0.7 ), 0 2px 10px rgb( 0 0 0 / 0.5 );
	pointer-events: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Lightbox (shared by all three styles)
   Positioned against the viewport (not the gallery's own container),
   so breakpoints here use @media rather than container queries.
   ========================================================================== */

.aig-gallery .aig-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	background: oklch( 0% 0 0 / 0.92 );
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --aig-duration ) var( --aig-ease ), visibility 0s linear var( --aig-duration );
	padding:
		max( 16px, env( safe-area-inset-top ) )
		max( 16px, env( safe-area-inset-right ) )
		max( 16px, env( safe-area-inset-bottom ) )
		max( 16px, env( safe-area-inset-left ) );
}

.aig-gallery .aig-lightbox.aig-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

body.aig-no-scroll {
	overflow: hidden;
}

.aig-gallery .aig-lightbox-inner {
	--aig-thumbstrip-h: 76px;

	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1200px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.aig-gallery .aig-lb-stage {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aig-gallery .aig-lb-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var( --aig-duration ) var( --aig-ease );
}

/* Gated on .aig-lightbox.aig-open, not just .aig-active alone: the
   first slide always carries .aig-active by default (so it's ready
   the instant the lightbox opens), but without this the lightbox's
   own opacity:0 hides it from view while visibility:visible on this
   rule still makes it clickable — an invisible panel sitting over
   the whole gallery, silently swallowing clicks on the arrows/dots
   underneath, even while the lightbox is fully closed. */
.aig-gallery .aig-lightbox.aig-open .aig-lb-slide.aig-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.aig-gallery .aig-lb-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}

.aig-gallery .aig-lb-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 20px 18px;
	background: var( --aig-overlay-bg );
	color: #fff;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-radius: 0 0 4px 4px;
	pointer-events: none;
}

.aig-gallery .aig-lb-title {
	font-weight: 600;
	font-size: clamp( 0.95rem, 2vw, 1.1rem );
}

.aig-gallery .aig-lb-cap {
	font-size: clamp( 0.8rem, 1.6vw, 0.9rem );
	font-weight: 400;
	opacity: 0.85;
}

.aig-gallery .aig-lb-close,
.aig-gallery .aig-lb-prev,
.aig-gallery .aig-lb-next {
	all: unset;
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb( 255 255 255 / 0.12 );
	color: #fff;
	cursor: pointer;
	z-index: 2;
	transition: background var( --aig-duration ) var( --aig-ease );
}

.aig-gallery .aig-lb-close:hover,
.aig-gallery .aig-lb-close:focus-visible,
.aig-gallery .aig-lb-prev:hover,
.aig-gallery .aig-lb-prev:focus-visible,
.aig-gallery .aig-lb-next:hover,
.aig-gallery .aig-lb-next:focus-visible {
	background: rgb( 255 255 255 / 0.25 );
}

.aig-gallery .aig-lb-close {
	top: 12px;
	right: 12px;
}

.aig-gallery .aig-lb-prev {
	left: 12px;
	/* Vertically centred on the image area above the thumbnail strip,
	   not the full inner box (which now includes that strip). */
	top: calc( 50% - ( var( --aig-thumbstrip-h, 0px ) / 2 ) );
	transform: translateY( -50% );
}

.aig-gallery .aig-lb-next {
	right: 12px;
	top: calc( 50% - ( var( --aig-thumbstrip-h, 0px ) / 2 ) );
	transform: translateY( -50% );
}

.aig-gallery .aig-lb-counter {
	position: absolute;
	top: 16px;
	left: 16px;
	color: #fff;
	font-size: 0.85rem;
	background: rgb( 255 255 255 / 0.12 );
	padding: 4px 10px;
	border-radius: 999px;
}

/* ---------- Lightbox thumbnail strip ---------- */

.aig-gallery .aig-lb-thumbs {
	flex: 0 0 auto;
	height: var( --aig-thumbstrip-h );
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.aig-gallery .aig-lb-thumbs::-webkit-scrollbar {
	display: none;
}

.aig-gallery .aig-lb-thumb {
	all: unset;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	box-shadow: 0 0 0 2px transparent;
	transition: opacity var( --aig-duration ) var( --aig-ease ), box-shadow var( --aig-duration ) var( --aig-ease );
}

.aig-gallery .aig-lb-thumb:hover,
.aig-gallery .aig-lb-thumb:focus-visible {
	opacity: 0.85;
}

.aig-gallery .aig-lb-thumb.aig-active {
	opacity: 1;
	box-shadow: 0 0 0 2px #fff;
}

.aig-gallery .aig-lb-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( max-width: 640px ) {
	.aig-gallery .aig-lb-prev,
	.aig-gallery .aig-lb-next,
	.aig-gallery .aig-lb-close {
		width: 38px;
		height: 38px;
	}

	.aig-gallery .aig-lb-prev { left: 6px; }
	.aig-gallery .aig-lb-next { right: 6px; }
	.aig-gallery .aig-lb-close { top: 6px; right: 6px; }

	.aig-gallery .aig-lb-caption {
		padding: 24px 14px 14px;
	}

	.aig-gallery .aig-lightbox-inner {
		--aig-thumbstrip-h: 60px;
	}

	.aig-gallery .aig-lb-thumb {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   Style 1: Carousel — native scroll-snap track. The centred item is
   colour + full scale; neighbours are greyscale + slightly dimmed.
   Sizes use container query units (cqi) so it adapts to the column
   it's placed in, not just the viewport.
   ========================================================================== */

.aig-gallery.aig-style-carousel {
	position: relative;
}

.aig-gallery.aig-style-carousel .aig-grid {
	display: flex;
	gap: var( --aig-gap );
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-inline: 50%;
}

.aig-gallery.aig-style-carousel .aig-grid::-webkit-scrollbar {
	display: none;
}

.aig-gallery.aig-style-carousel .aig-item {
	flex: 0 0 auto;
	width: 78cqi;
	aspect-ratio: 4 / 3;
	scroll-snap-align: center;
	transform: scale( 0.92 );
	filter: grayscale( 1 ) brightness( 0.75 );
	opacity: 0.85;
	transition:
		transform var( --aig-duration ) var( --aig-ease ),
		filter var( --aig-duration ) var( --aig-ease ),
		opacity var( --aig-duration ) var( --aig-ease );
}

.aig-gallery.aig-style-carousel .aig-item.aig-active {
	transform: scale( 1 );
	filter: grayscale( 0 ) brightness( 1 );
	opacity: 1;
}

@container aig ( min-width: 480px ) {
	.aig-gallery.aig-style-carousel .aig-item { width: 60cqi; }
}

@container aig ( min-width: 700px ) {
	.aig-gallery.aig-style-carousel .aig-item { width: 42cqi; }
}

@container aig ( min-width: 1000px ) {
	.aig-gallery.aig-style-carousel .aig-item { width: 32cqi; }
}

.aig-gallery.aig-style-carousel .aig-nav {
	all: unset;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: oklch( 100% 0 0 / 0.85 );
	color: oklch( 20% 0 0 );
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 10px rgb( 0 0 0 / 0.15 );
	z-index: 2;
	transition: background var( --aig-duration ) var( --aig-ease );
}

.aig-gallery.aig-style-carousel .aig-nav:hover,
.aig-gallery.aig-style-carousel .aig-nav:focus-visible {
	background: oklch( 100% 0 0 );
}

.aig-gallery.aig-style-carousel .aig-prev { left: 4px; }
.aig-gallery.aig-style-carousel .aig-next { right: 4px; }

.aig-gallery.aig-style-carousel .aig-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.aig-gallery.aig-style-carousel .aig-dot {
	all: unset;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: oklch( 80% 0 0 );
	cursor: pointer;
	transition: background var( --aig-duration ) var( --aig-ease ), transform var( --aig-duration ) var( --aig-ease );
}

.aig-gallery.aig-style-carousel .aig-dot.aig-active {
	background: var( --aig-accent );
	transform: scale( 1.3 );
}

/* ==========================================================================
   Style 2: Tiles — simple responsive grid, column count scales with
   the gallery's own container width.
   ========================================================================== */

.aig-gallery.aig-style-tiles .aig-grid {
	display: grid;
	gap: var( --aig-gap );
	grid-template-columns: repeat( 2, 1fr );
}

.aig-gallery.aig-style-tiles .aig-item {
	aspect-ratio: 1 / 1;
}

@container aig ( min-width: 480px ) {
	.aig-gallery.aig-style-tiles .aig-grid { grid-template-columns: repeat( 3, 1fr ); }
}

@container aig ( min-width: 700px ) {
	.aig-gallery.aig-style-tiles .aig-grid { grid-template-columns: repeat( 4, 1fr ); }
}

@container aig ( min-width: 1000px ) {
	.aig-gallery.aig-style-tiles .aig-grid { grid-template-columns: repeat( 5, 1fr ); }
}

/* ==========================================================================
   Style 3: Bento Grid — repeating span pattern (every 6 items) so it
   works for any image count with no JS layout engine. Degrades to a
   plain uniform grid below 500px container width, where varied spans
   would feel cramped.
   ========================================================================== */

.aig-gallery.aig-style-bento .aig-grid {
	display: grid;
	gap: var( --aig-gap );
	grid-auto-flow: dense;
	grid-template-columns: repeat( 2, 1fr );
	grid-auto-rows: 140px;
}

@container aig ( min-width: 500px ) {
	.aig-gallery.aig-style-bento .aig-grid {
		grid-template-columns: repeat( 4, 1fr );
		grid-auto-rows: 130px;
	}

	.aig-gallery.aig-style-bento .aig-item:nth-child( 6n + 1 ) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.aig-gallery.aig-style-bento .aig-item:nth-child( 6n + 4 ) {
		grid-column: span 2;
	}
}

@container aig ( min-width: 800px ) {
	.aig-gallery.aig-style-bento .aig-grid {
		grid-template-columns: repeat( 6, 1fr );
		grid-auto-rows: 120px;
	}

	.aig-gallery.aig-style-bento .aig-item:nth-child( 6n + 1 ) {
		grid-column: span 3;
		grid-row: span 2;
	}

	.aig-gallery.aig-style-bento .aig-item:nth-child( 6n + 4 ) {
		grid-column: span 2;
	}

	.aig-gallery.aig-style-bento .aig-item:nth-child( 6n + 6 ) {
		grid-column: span 1;
		grid-row: span 2;
	}
}

/* ---------- Reduced motion ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.aig-gallery *,
	.aig-gallery .aig-lightbox * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}