/* ==========================================================================
   Yards Archive - full-screen frame layout
   Active only on body.yards-frame-page (see functions.php)
   ========================================================================== */

body.yards-frame-page,
body.yards-frame-page html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100dvh;
	width: 100vw;
	background: #f7f7f7; /* placeholder, customize freely */

	@media (max-width: 600px) {
		overflow: auto; /* allow scrolling on small screens */
	}
}

.yards-frame {
	position: relative;
	width: 100vw;
	height: 100dvh;
	overflow: hidden;

	@media (max-width: 600px) {
		height: calc(100dvh - 44px); /* leave space for the fixed bottom nav */
	}
}

/* Frame chrome (logo, bottom nav, Collections submenu) lives in nav.css. */

/* --- Center title ---------------------------------------------------------- */

.yards-frame__title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	text-align: center;
	z-index: 5; /* above the grid */
	pointer-events: none; /* doesn't block clicks on the images underneath */
	font-size: clamp(1.2rem, 4vw, 2.5rem);
	max-width: 40vw;
}

/* --- Grid + reveal area ---------------------------------------------------- */

.yards-frame__stage {
	position: absolute;
	inset: 0;
}

/*
 * Grid size and reserved center area (for the title) are computed in
 * grid.js from PHP config (functions.php: gridCols/gridRows), so this
 * stays correct whatever the dimensions are — see RESERVED_CELLS there.
 */
.yards-frame__grid {
	position: absolute;
	inset: 0;
	display: grid;
	/* --yards-grid-cols / --yards-grid-rows are set by grid.js from the
	   PHP-side config (functions.php: gridCols/gridRows), so the two
	   always stay in sync. Fallback 4x4 only applies before JS runs. */
	grid-template-columns: repeat(var(--yards-grid-cols, 4), 1fr);
	grid-template-rows: repeat(var(--yards-grid-rows, 4), 1fr);
	gap: clamp(0.5rem, 1vw, 1rem);
	/* Same inset as the logo/bottom nav (assets/nav.css), so the grid's
	   cells line up with them on the same edge — the top-left cell itself
	   is also permanently reserved (see RESERVED_CELLS in grid.js), since
	   it would otherwise sit right under the logo regardless of padding. */
	padding: var(--yards-frame-inset, clamp(1rem, 3vw, 2rem));
	box-sizing: border-box;
	height: calc(100% - 45px);
}

.yards-frame__grid-item {
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.35s ease, transform 0.35s ease;
	cursor: pointer;
}

.yards-frame__grid-item.is-visible {
	opacity: 1;
	transform: scale(1);
}

.yards-frame__grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The reserved center block: never populated via JS (see RESERVED_CELLS in grid.js) */

/* --- Reveal view: few images, free position and size ---------------------- */

.yards-frame__reveal {
	position: absolute;
	inset: 0;
}

.yards-frame__reveal[hidden] {
	display: none;
}

.yards-frame__reveal-item {
	position: absolute;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.4s ease, transform 0.4s ease;
	cursor: pointer;
	z-index: 4; /* below the title, above the hidden grid */
}

.yards-frame__reveal-item.is-visible {
	opacity: 1;
	transform: scale(1);
}

.yards-frame__reveal-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Loading skeleton (softens the brief moment before the first fetch resolves) --- */

.yards-frame__grid-item {
	background: linear-gradient( 100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 70% );
	background-size: 200% 100%;
	animation: yards-skeleton-pulse 1.6s ease-in-out infinite;
}

.yards-frame__grid-item.is-visible {
	animation: none;
	background: none;
}

/* Set on every cell except the clicked one when the reveal is open — the
   clicked cell stays exactly as it was (see openReveal in grid.js).
   Placed after every .is-visible rule above so it always wins, regardless
   of which other state classes a cell still carries. */
.yards-frame__grid-item.is-hidden {
	opacity: 0;
	pointer-events: none;
}

@keyframes yards-skeleton-pulse {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* --- Info popup (desktop only: hover/focus on a reveal image) -------------- */

.yards-frame__info-popup {
	position: fixed;
	left: 50%;
	/* right: 0; */
	bottom: 50px;
	z-index: 7; /* above the bottom nav */
	padding: var(--yards-frame-inset, clamp(1rem, 3vw, 2rem));
	background: white;
	color: black;
	transform: translate(-50%, 100%);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
	pointer-events: none; /* purely informational, never blocks clicks */
}

.yards-frame__info-popup.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
}

.yards-frame__info-popup__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
}

.yards-frame__info-popup__meta {
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.75;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.yards-frame__info-popup__excerpt {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	max-width: 60ch;
}