/**
 * Inspiration Gallery page.
 * Reuses the General Info Page template (see policy-pages.css: full-width
 * resets, centered .entry-title, .ac-policy-page body class) and adds the
 * masonry image grid rendered by the ac/inspiration-gallery block, plus a
 * centered intro paragraph to match the Figma export.
 */

.ac-inspiration-gallery-page .entry-content > p:first-child {
	text-align   : center;
	width        : 60%;
	margin-left  : auto !important;
	margin-right : auto !important;
}

/* ── ac/inspiration-gallery: full-bleed, matching the Figma export ──────
   The General Info Page template constrains every top-level block to the
   1120px text column (160px side padding — see policy-pages.css's
   `.entry-content > *:not(.ac-contact-double-cta)` rule); the gallery grid
   is full-width in the Figma export, so break it out the same way that
   rule already carves an exception for .ac-contact-double-cta. */
.ac-policy-page .entry-content > .ac-inspiration-gallery {
	width         : 100vw !important;
	max-width     : 100vw !important;
	margin-left   : calc(50% - 50vw) !important;
	margin-right  : calc(50% - 50vw) !important;
	padding-left  : 20px !important;
	padding-right : 20px !important;
	box-sizing    : border-box;
}

/* CSS-columns masonry (not a row-based grid), so images of different
   heights stack continuously down each column instead of leaving ragged
   row gaps. Gap and flush (non-rounded) corners match the Figma export. */
.ac-inspiration-gallery {
	column-count : 4;
	column-gap   : 16px;
}

.ac-inspiration-gallery__item {
	break-inside  : avoid;
	margin-bottom : 16px;
}

/* Reset the <button> wrapping each thumbnail (see render_callback in
   inc/inspiration-gallery.php) back to a plain, borderless image tile —
   it exists only so the lightbox trigger is a real, focusable control. */
.ac-inspiration-gallery__trigger {
	all     : unset;
	display : block;
	width   : 100%;
	height  : 100%;
	cursor  : pointer;
}

/* Force a portrait crop on every tile — the source photos are mostly
   landscape, but the Figma export's tiles are all taller than they are
   wide (338x423 / 338x507, alternating ~4:5 and ~2:3). object-fit:cover
   crops each photo to that shape instead of showing its native (wide)
   aspect ratio, which is what made the grid read as horizontal rectangles. */
.ac-inspiration-gallery__item img {
	width       : 100%;
	height      : 100%;
	display     : block;
	object-fit  : cover;
	aspect-ratio: 4 / 5;
}

.ac-inspiration-gallery__item:nth-child(even) img {
	aspect-ratio: 2 / 3;
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */

/* Always display:flex (never display:none) so js/inspiration-gallery.js can
   measure .ac-lightbox__image's laid-out size/position at any time — that
   measurement is what lets the image "grow" from the clicked thumbnail's
   exact position instead of just snapping into view. opacity/visibility
   (not display) is what actually shows/hides it; the visibility transition
   is delayed to the end of the fade so it doesn't intercept clicks while
   invisible, and jumps back instantly when opening. */
.ac-lightbox {
	display         : flex;
	position        : fixed;
	inset           : 0;
	z-index         : 9999;
	background      : rgba(43, 42, 41, .92);
	align-items     : center;
	justify-content : center;
	opacity         : 0;
	visibility      : hidden;
	transition      : opacity .3s ease, visibility 0s linear .3s;
}

.ac-lightbox.is-open {
	opacity    : 1;
	visibility : visible;
	transition : opacity .3s ease, visibility 0s linear 0s;
}

.ac-lightbox__image {
	max-width  : 88vw;
	max-height : 85vh;
	object-fit : contain;
	display    : block;
	transition : transform .35s cubic-bezier(.22, .68, 0, 1);
}

.ac-lightbox__close,
.ac-lightbox__prev,
.ac-lightbox__next {
	all             : unset;
	position        : absolute;
	cursor          : pointer;
	color           : var(--ac-cream, #F7F3EE);
	display         : flex;
	align-items     : center;
	justify-content : center;
	line-height     : 1;
}

.ac-lightbox__close {
	top       : 24px;
	right     : 32px;
	font-size : 36px;
}

.ac-lightbox__prev,
.ac-lightbox__next {
	top       : 50%;
	transform : translateY(-50%);
	font-size : 48px;
	padding   : 12px;
}

.ac-lightbox__prev { left: 16px; }
.ac-lightbox__next { right: 16px; }

@media (max-width: 700px) {
	.ac-lightbox__prev,
	.ac-lightbox__next { font-size: 32px; padding: 8px; }
	.ac-lightbox__close { font-size: 28px; top: 12px; right: 16px; }
}

@media (max-width: 1100px) {
	.ac-inspiration-gallery { column-count: 3; }
}

@media (max-width: 700px) {
	.ac-inspiration-gallery { column-count: 2; }
	.ac-policy-page .entry-content > .ac-inspiration-gallery { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 400px) {
	.ac-inspiration-gallery { column-count: 1; }
}

@media (max-width: 600px) {
	.ac-inspiration-gallery-page .entry-content > p:first-child { width: 80%; }
}