/**
 * PackPlus V2 — Section 06: Packaging in the Wild (Sprint 3R)
 *
 * A real product gallery built from the approved PackPlus bag
 * photography — replaces the Sprint 3A fake editorial case studies
 * (no invented client names, no invented metrics). A deliberate CSS
 * Grid with fixed spans, not fragile absolute-positioned masonry, so
 * reading order stays predictable at every viewport. Captions stay
 * visible by default (not hover-gated, so there is no focusable
 * non-interactive element and no hover-only content); hover/focus only
 * adds a restrained image scale as desktop polish.
 */

.pp-work {
	background: var(--pp-white);
	color: var(--pp-text);
}

.pp-work .pp-eyebrow {
	color: var(--pp-green-dark);
}

.pp-gallery {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: clamp(9rem, 18vw, 14rem);
	gap: var(--pp-space-md);
	margin-top: var(--pp-space-xl);
}

.pp-gallery__item {
	position: relative;
	margin: 0;
}

.pp-gallery__item--01 { grid-column: 1 / 6; grid-row: 1 / 4; }
.pp-gallery__item--02 { grid-column: 6 / 10; grid-row: 1 / 3; }
.pp-gallery__item--03 { grid-column: 10 / 13; grid-row: 1 / 3; }
.pp-gallery__item--04 { grid-column: 6 / 10; grid-row: 3 / 4; }
.pp-gallery__item--05 { grid-column: 10 / 13; grid-row: 3 / 4; }
.pp-gallery__item--06 { grid-column: 1 / 13; grid-row: 4 / 5; }

.pp-gallery__item .pp-media {
	height: 100%;
}

@media (hover: hover) {
	.pp-gallery__item:hover img,
	.pp-gallery__item:focus-within img {
		transform: scale(1.035);
	}
}

.pp-gallery__item img {
	transition: transform var(--pp-duration-medium) var(--pp-ease-standard);
}

.pp-gallery__caption {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	margin: 0;
	padding: 0.4rem 0.7rem;
	background: color-mix(in srgb, var(--pp-white) 90%, transparent);
	color: var(--pp-text);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}