/**
 * Page Sections: Image Gallery.
 *
 * Three layouts — grid_3, grid_4, masonry (bento).
 * Uses brand tokens defined in theme.css.
 */

.ps-gallery .section__head { margin-bottom: 24px; }
.ps-gallery .section__head h2 {
	font-family: var(--font-heading);
	color: var(--teal);
	margin: 0;
}

.ps-gallery__grid {
	display: grid;
	gap: var(--gap, 32px);
}

/* ---- Items: shared shell ---- */
.ps-gallery__item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg, 10px);
	background: var(--sand);
	box-shadow: var(--shadow-card);
	aspect-ratio: 4 / 3;
	line-height: 0; /* kill img baseline gap */
	transition: transform .35s ease, box-shadow .35s ease;
}
.ps-gallery__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 14px 32px rgba(24,60,66,.12);
}
.ps-gallery__item:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
}
.ps-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.ps-gallery__item:hover .ps-gallery__img { transform: scale(1.04); }

/* ---- Layout: 3-column grid ---- */
.ps-gallery--grid_3 .ps-gallery__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ps-gallery--grid_3 .ps-gallery__item { aspect-ratio: 1; }

/* ---- Layout: 4-column grid ---- */
.ps-gallery--grid_4 .ps-gallery__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ps-gallery--grid_4 .ps-gallery__item { aspect-ratio: 1; }

/* ---- Layout: Masonry / bento ---- */
.ps-gallery--masonry .ps-gallery__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(180px, auto);
	grid-auto-flow: dense;
}
.ps-gallery--masonry .ps-gallery__item { aspect-ratio: auto; height: 100%; min-height: 180px; }
.ps-gallery--masonry .ps-gallery__item--lead {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 380px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	.ps-gallery--grid_4 .ps-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ps-gallery--masonry .ps-gallery__grid {
		grid-auto-rows: minmax(160px, auto);
	}
	.ps-gallery--masonry .ps-gallery__item--lead { min-height: 340px; }
}

@media (max-width: 767px) {
	.ps-gallery__grid { gap: 16px; }
	.ps-gallery--grid_3 .ps-gallery__grid,
	.ps-gallery--grid_4 .ps-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ps-gallery--masonry .ps-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(140px, auto);
	}
	.ps-gallery--masonry .ps-gallery__item--lead {
		grid-column: span 2;
		grid-row: span 2;
		min-height: 280px;
	}
}

@media (max-width: 479px) {
	.ps-gallery--grid_3 .ps-gallery__grid,
	.ps-gallery--grid_4 .ps-gallery__grid {
		grid-template-columns: 1fr;
	}
	/* Masonry keeps 2-col with lead spanning both. */
}

/* Tablet portrait/landscape — keep grid_3 readable, give masonry a bit more height.
   Starts at 768px so the 768–859px window doesn't fall back to the 32px base gap
   (16px below it, 24px above it). */
@media (min-width: 768px) and (max-width: 1023px) {
	.ps-gallery__grid { gap: 24px; }
	.ps-gallery--masonry .ps-gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(170px, auto);
	}
	.ps-gallery--masonry .ps-gallery__item--lead { min-height: 360px; }
}

/* Desktop — let the gallery breathe with a wider gap and a touch more height. */
@media (min-width: 1024px) {
	.ps-gallery__grid { gap: 28px; }
	.ps-gallery--masonry .ps-gallery__grid {
		grid-auto-rows: minmax(180px, auto);
	}
	.ps-gallery--masonry .ps-gallery__item--lead { min-height: 380px; }
}

/* Wide desktop — push the masonry into a richer 5-column layout so lead tile pops. */
@media (min-width: 1440px) {
	.ps-gallery__grid { gap: 40px; }
	.ps-gallery--masonry .ps-gallery__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-auto-rows: minmax(220px, auto);
	}
	.ps-gallery--masonry .ps-gallery__item--lead {
		grid-column: span 2;
		grid-row: span 2;
		min-height: 460px;
	}
	.ps-gallery .section__head { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.ps-gallery__item,
	.ps-gallery__img { transition: none; }
	.ps-gallery__item:hover { transform: none; }
	.ps-gallery__item:hover .ps-gallery__img { transform: none; }
}