/**
 * Perspectives Grid — styles
 *
 * Typography follows the theme's existing system rather than approximating it:
 *   "goldenbook"  — display/headings, uppercase + letterspaced (as .main-navigation li a)
 *   "mrs-eaves"   — body copy and italic captions (as body, .entry-title)
 *   #0d2643       — the navy used for headings and nav throughout the theme
 * Both faces are already loaded by header.php via Typekit (use.typekit.net/udr6fdd.css).
 */

.perspectives-grid {
	--pg-display: "goldenbook", "Goldenbook", Georgia, serif;
	--pg-body: "mrs-eaves", Georgia, "Times New Roman", serif;
	--pg-navy: #0d2643;
	--pg-ink: #404040;
	--pg-muted: #9a9a9a;
	--pg-rule: #c7d0da;

	--pg-col-gap: 2.25rem;
	--pg-row-gap: 3.5rem;

	max-width: 1240px;
	margin: 0 auto;
	padding: 0 2rem 5rem;
	color: var(--pg-ink);
	font-family: var(--pg-body);
}

/* ---- Intro ---- */

.perspectives-grid__intro {
	max-width: 46em;
	margin: 0 auto 5rem;
	text-align: center;
	font-family: var(--pg-body);
	font-size: 1.15rem;
	line-height: 1.85;
	color: var(--pg-ink);
}

.perspectives-grid__placeholder {
	text-align: center;
	padding: 2.5rem;
	border: 1px dashed var(--pg-rule);
	color: var(--pg-muted);
	font-style: italic;
}

/* ---- Group header: ——— TITLE ——— / location / View Project ---- */

.perspectives-grid__group {
	margin-bottom: 5.5rem;
}

.perspectives-grid__group-header {
	text-align: center;
	margin-bottom: 2.75rem;
}

.perspectives-grid__group-title {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0 0 0.5rem;
	font-family: var(--pg-display);
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pg-navy);
	line-height: 1.2;
}

.perspectives-grid__group-title::before,
.perspectives-grid__group-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--pg-rule);
}

.perspectives-grid__group-location {
	margin: 0 0 0.5rem;
	font-family: var(--pg-body);
	font-style: italic;
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pg-navy);
}

.perspectives-grid__group-link {
	display: inline-block;
	font-family: var(--pg-body);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--pg-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		color 0.25s ease,
		border-color 0.25s ease;
}

.perspectives-grid__group-link:hover,
.perspectives-grid__group-link:focus-visible {
	color: var(--pg-navy);
	border-color: var(--pg-rule);
}

/* ---- Reel grid ---- */

.perspectives-grid__reels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--pg-col-gap);
	row-gap: var(--pg-row-gap);
}

.perspectives-grid__reel {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.perspectives-grid__reel-media {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	/* aspect-ratio: 3 / 4; */
	aspect-ratio: 5 / 7;
	overflow: hidden;
	background: #eef1f4;
	line-height: 0;
}

button.perspectives-grid__reel-media {
	cursor: pointer;
	appearance: none;
	background: #eef1f4;
}

.perspectives-grid__reel-poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1),
		opacity 0.35s ease;
}

.perspectives-grid__reel-trigger:hover .perspectives-grid__reel-poster,
.perspectives-grid__reel-trigger:focus-visible .perspectives-grid__reel-poster {
	transform: scale(1.035);
	opacity: 0.92;
}

/* Play affordance — restrained, so the photography stays the subject. */
.perspectives-grid__reel-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.25rem;
	height: 3.25rem;
	margin: -1.625rem 0 0 -1.625rem;
	color: #fff;
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
	pointer-events: none;
}

.perspectives-grid__reel-play svg {
	width: 100%;
	height: 100%;
	display: block;
}

.perspectives-grid__reel-trigger:hover .perspectives-grid__reel-play,
.perspectives-grid__reel-trigger:focus-visible .perspectives-grid__reel-play {
	opacity: 1;
	transform: scale(1);
}

.perspectives-grid__reel-trigger:focus-visible {
	outline: 2px solid var(--pg-navy);
	outline-offset: 3px;
}

.perspectives-grid__reel-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--pg-body);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--pg-muted);
	text-decoration: none;
	border: 1px solid var(--pg-rule);
	line-height: 1.4;
	text-align: center;
}

/* ---- Caption + date ---- */

.perspectives-grid__reel-caption {
	margin: 1.15rem 0 0;
}

.perspectives-grid__reel-caption-text {
	margin: 0;
	font-family: var(--pg-body);
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.4;
	color: var(--pg-ink);

	/* The mockup shows a consistent two-line caption across the row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Only captions that actually overflow become interactive — JS adds this. */
.perspectives-grid__reel-caption-text {
	transition: color 0.2s ease;
}

.perspectives-grid__reel-caption-text.is-clampable {
	cursor: pointer;
}

.perspectives-grid__reel-caption-text.is-clampable:hover,
.perspectives-grid__reel-caption-text.is-clampable:focus-visible {
	color: var(--pg-navy);
}

.perspectives-grid__reel-caption-text.is-expanded {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

/* A quiet "more" marker, so a clipped caption reads as clickable rather than
   as text that simply ran out. */
.perspectives-grid__reel-caption-more {
	display: none;
	margin: 0.35rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--pg-body);
	font-style: italic;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--pg-muted);
	cursor: pointer;
	transition: color 0.2s ease;
}

.perspectives-grid__reel-caption.has-more .perspectives-grid__reel-caption-more {
	display: inline-block;
}

.perspectives-grid__reel-caption-more:hover,
.perspectives-grid__reel-caption-more:focus-visible {
	color: var(--pg-navy);
}

.perspectives-grid__reel-date {
	margin: 0.7rem 0 0;
	font-family: var(--pg-body);
	font-size: 0.9rem;
	letter-spacing: 0.025em;
	color: var(--pg-muted);
}

/* Admin-only diagnostic shown on a tile that could not resolve its media. */
.perspectives-grid__reel-error {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 8px 10px;
	background: rgba(178, 34, 34, 0.92);
	color: #fff;
	font-family: var(--pg-body);
	font-size: 11px;
	line-height: 1.45;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
	.perspectives-grid {
		padding: 0 1.5rem 3.5rem;
		--pg-row-gap: 2.75rem;
	}

	.perspectives-grid__reels {
		grid-template-columns: repeat(2, 1fr);
	}

	.perspectives-grid__group-title {
		font-size: 1.15rem;
		gap: 1rem;
	}

	.perspectives-grid__intro {
		font-size: 1.05rem;
		margin-bottom: 3rem;
	}
}

@media (max-width: 560px) {
	.perspectives-grid__reels {
		grid-template-columns: 1fr;
	}

	.perspectives-grid__group-title {
		font-size: 1rem;
		letter-spacing: 0.08em;
	}
}

/* =========================================================================
   Lightbox
   ========================================================================= */

.pg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pg-body, "mrs-eaves", Georgia, serif);
	opacity: 0;
	transform: scale(0);
	transition:
		opacity 0.3s ease,
		transform 0s 0.3s;
}

.pg-lightbox.is-open {
	opacity: 1;
	transform: scale(1);
	transition:
		opacity 0.3s ease,
		transform 0s;
}

.pg-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: #0d2643;
	cursor: pointer;
}

/* ---- Top bar ---- */

.pg-lightbox__bar {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 2rem;
	color: rgba(255, 255, 255, 0.85);
}

.pg-lightbox__bar--top {
	top: 0;
	left: auto;
}

.pg-lightbox__bar-right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
}

.pg-lightbox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.25s ease;
}

.pg-lightbox__icon:hover,
.pg-lightbox__icon:focus-visible {
	opacity: 1;
}

.pg-lightbox__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* The slash shows only while muted; the waves only while audible. */
.pg-lightbox__icon [data-pg-mute-waves] {
	display: none;
}

.pg-lightbox.is-unmuted .pg-lightbox__icon [data-pg-mute-slash] {
	display: none;
}

.pg-lightbox.is-unmuted .pg-lightbox__icon [data-pg-mute-waves] {
	display: block;
}

.pg-lightbox__volume {
	width: 6.5rem;
	accent-color: #fff;
	cursor: pointer;
}

.pg-lightbox__close {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-style: italic;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.25s ease;
}

.pg-lightbox__close:hover,
.pg-lightbox__close:focus-visible {
	opacity: 1;
}

/* ---- Stage ---- */

.pg-lightbox__stage {
	position: relative;
	z-index: 2;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 2rem 2rem 3rem;
}

/* The mockup runs the reel edge to edge vertically, so height leads and the
   9:16 ratio derives the width. */
.pg-lightbox__video {
	display: block;
	width: auto;
	height: 100vh;
	max-height: calc(100vh - 5rem);
	max-width: 100vw;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: #000;
}
.pg-lightbox__video:focus {
	outline: none;
}

@media screen and (min-aspect-ratio: 2 / 1) {
	.pg-lightbox__stage {
		padding: 0;
	}
	.pg-lightbox__video {
		max-height: 100vh;
	}
}

/* ---- Prev / next ---- */

.pg-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	transition:
		color 0.25s ease,
		transform 0.25s ease,
		opacity 0.25s ease;
}

.pg-lightbox__nav svg {
	width: 100%;
	height: 100%;
	display: block;
	transform: scale(0.5);
}

.pg-lightbox__nav--prev {
	left: max(1.5rem, 3vw);
}

.pg-lightbox__nav--next {
	right: max(1.5rem, 3vw);
}

.pg-lightbox__nav:hover,
.pg-lightbox__nav:focus-visible {
	color: #fff;
}

.pg-lightbox__nav--prev:hover {
	transform: translateY(-50%) translateX(-3px);
}

.pg-lightbox__nav--next:hover {
	transform: translateY(-50%) translateX(3px);
}

.pg-lightbox__nav[disabled] {
	opacity: 0.2;
	cursor: default;
	transform: translateY(-50%);
}

/* Position, title and INFO read as one cluster — INFO belongs to the title it
   describes, not to the far edge of the screen. Centred by default; the
   ultrawide rule below moves the whole cluster left rather than breaking it up. */
.pg-lightbox__counter {
	position: absolute;
	bottom: 1rem;
	left: 2rem;
	right: 2rem;
	z-index: 3;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
}

@media screen and (min-aspect-ratio: 2 / 1) {
	.pg-lightbox__counter {
		bottom: 1.35rem;
		justify-content: flex-start;
	}
}

.pg-lightbox__counter-project {
	font-family: var(--pg-display, "goldenbook", Georgia, serif);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.pg-lightbox__counter-pos {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.4);
}

/* Native fullscreen: the stage fills the screen, chrome stays reachable. */
.pg-lightbox:fullscreen {
	background: #0d2643;
}

.pg-lightbox:fullscreen .pg-lightbox__video {
	height: 100vh;
	max-width: 100vw;
}

@media (max-width: 720px) {
	.pg-lightbox__bar {
		padding: 1rem;
	}

	.pg-lightbox__volume {
		display: none; /* volume is a hardware control on touch devices */
	}

	.pg-lightbox__nav {
		width: 2.25rem;
		height: 2.25rem;
	}

	.pg-lightbox__nav--prev {
		left: 0;
	}

	.pg-lightbox__nav--next {
		right: 0;
	}

	.pg-lightbox__video {
		max-width: 100%;
	}

	.pg-lightbox__counter {
		left: 1rem;
		bottom: 1rem;
		gap: 0.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.perspectives-grid__reel-poster,
	.perspectives-grid__reel-play,
	.pg-lightbox,
	.pg-lightbox__nav {
		transition: none;
	}

	.perspectives-grid__reel-trigger:hover .perspectives-grid__reel-poster {
		transform: none;
	}
}

/* The page must not scroll behind an open lightbox. */
body.pg-lightbox-open {
	overflow: hidden;
}

/* Tile whose poster survived but whose playable URL did not (API outage, or an
   expired Instagram CDN signature). Keeps the image, sends the click offsite. */
.perspectives-grid__reel-offsite {
	display: block;
	text-decoration: none;
}

.perspectives-grid__reel-offsite-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 0.9rem;
	background: linear-gradient(to top, rgba(13, 38, 67, 0.85), rgba(13, 38, 67, 0));
	color: #fff;
	font-family: var(--pg-body);
	font-style: italic;
	font-size: 0.9rem;
	line-height: 1.3;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.perspectives-grid__reel-offsite:hover .perspectives-grid__reel-offsite-label,
.perspectives-grid__reel-offsite:focus-visible .perspectives-grid__reel-offsite-label {
	opacity: 1;
}

/* Shown only when a reel's signed video URL has expired mid-session. */
.pg-lightbox__error {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 1rem 1.25rem;
	max-width: 22rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.9);
	font-style: italic;
	line-height: 1.6;
}

.pg-lightbox.has-error .pg-lightbox__error {
	display: block;
}

.pg-lightbox.has-error .pg-lightbox__video {
	opacity: 0.15;
}

.pg-lightbox__error a {
	color: #fff;
	text-decoration: underline;
}

/* ---- Lightbox: video frame + info panel ---- */

/* The frame matches the video's box exactly, so the info panel can sit over
   the bottom of the reel rather than the bottom of the viewport. */
.pg-lightbox__frame {
	position: relative;
	/* height: 100vh; */
	height: 100%;
	max-height: 100vh;
	aspect-ratio: 9 / 16;
	max-width: 100vw;
	overflow: hidden;
}

.pg-lightbox__frame .pg-lightbox__video {
	width: 100%;
	height: 100%;
}

.pg-lightbox__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	max-height: 58%;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Bottom padding clears two things that live at the foot of the reel: the
	   browser's own video control strip, and the project/counter/INFO row. */
	padding: 4.5rem 1.5rem 3rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	opacity: 0;
	transform: translateY(0.75rem);
	transition:
		opacity 0.28s ease,
		transform 0.28s ease;
}

.pg-lightbox.is-info-open .pg-lightbox__info {
	opacity: 1;
	transform: translateY(0);
}

.pg-lightbox__info-text {
	margin: 0;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.65;
	white-space: pre-line; /* Instagram captions carry their own line breaks */
}

.pg-lightbox__info-date {
	margin: 0.8rem 0 0;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.6);
}

/* ---- Info toggle, alongside the project name and counter ---- */

.pg-lightbox__info-toggle {
	padding: 0;
	/* Reserve the width of the longer label, so swapping INFO for CLOSE does
	   not nudge the centred cluster sideways. */
	min-width: 3.5rem;
	text-align: center;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--pg-display, "goldenbook", Georgia, serif);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s ease;
}

.pg-lightbox__info-toggle:hover,
.pg-lightbox__info-toggle:focus-visible {
	color: #fff;
}

@media (max-width: 720px) {
	.pg-lightbox__frame {
		width: 100vw;
		height: auto;
		max-height: 100vh;
	}

	.pg-lightbox__info {
		/* Captions run long and the screen is short — give them more room. */
		max-height: 66%;
		padding: 3.5rem 1rem 4.5rem;
	}

	/* Not enough width for one line, so stack: title first, then the counter
	   and INFO paired together beneath it. */
	.pg-lightbox__counter {
		gap: 0.4rem 1.25rem;
	}

	.pg-lightbox__counter-project {
		order: 1;
		flex: 0 0 100%;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pg-lightbox__counter-pos {
		order: 2;
	}

	.pg-lightbox__info-toggle {
		order: 3;
	}

	.pg-lightbox__counter-pos,
	.pg-lightbox__info-toggle {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}