/**
 * Portfolio listing + gallery lightbox.
 *
 * Mobile-first. Uses the shared design tokens from variables.css. Cards show
 * only the featured image; month groups separate the feed; the lightbox is a
 * full-screen modal with a vertical thumbnail rail.
 */

/* Lock background scroll while the lightbox is open. */
.pf-lock {
	overflow: hidden;
}

.pf-section {
	padding-top: var(--jai-space-3xl);
}

/* --------------------------------------------------------------------------
 * Month groups
 * ---------------------------------------------------------------------- */

.pf-group {
	margin-bottom: var(--jai-space-3xl);
}

.pf-group:last-child {
	margin-bottom: 0;
}

.pf-group__head {
	display: flex;
	align-items: center;
	gap: var(--jai-space-lg);
	margin-bottom: var(--jai-space-xl);
}

.pf-group__line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--jai-color-border), transparent);
}

.pf-group__title {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--jai-font-heading);
	font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
	color: var(--jai-color-primary);
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: capitalize;
}

/* --------------------------------------------------------------------------
 * Card grid
 * ---------------------------------------------------------------------- */

.pf-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jai-space-lg);
}

@media (min-width: 640px) {
	.pf-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pf-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pf-card {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 1px solid var(--jai-color-border);
	border-radius: var(--jai-radius-lg);
	background: var(--jai-color-surface);
	box-shadow: var(--jai-shadow-soft);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	transition: transform var(--jai-transition), box-shadow var(--jai-transition), border-color var(--jai-transition);
}

.pf-card:hover,
.pf-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--jai-color-accent-soft);
	box-shadow: var(--jai-shadow-card);
}

.pf-card:focus-visible {
	outline: 2px solid var(--jai-color-accent-2);
	outline-offset: 3px;
}

.pf-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--jai-color-surface-strong);
}

.pf-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-card:hover .pf-card__image,
.pf-card:focus-visible .pf-card__image {
	transform: scale(1.06);
}

/* Hover overlay with a zoom glyph + image count. */
.pf-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--jai-space-sm);
	color: var(--jai-color-white);
	background: linear-gradient(180deg, rgba(16, 25, 66, 0) 35%, rgba(16, 25, 66, 0.55) 100%),
		rgba(31, 42, 110, 0.32);
	opacity: 0;
	transition: opacity var(--jai-transition);
}

.pf-card:hover .pf-card__overlay,
.pf-card:focus-visible .pf-card__overlay {
	opacity: 1;
}

.pf-card__zoom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: var(--jai-glass-blur);
	backdrop-filter: var(--jai-glass-blur);
	transform: scale(0.8);
	transition: transform var(--jai-transition);
}

.pf-card:hover .pf-card__zoom,
.pf-card:focus-visible .pf-card__zoom {
	transform: scale(1);
}

.pf-card__count {
	font-size: var(--jai-font-size-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * Infinite-scroll status + spinner
 * ---------------------------------------------------------------------- */

.pf-sentinel {
	width: 100%;
	height: 1px;
}

.pf-status {
	min-height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--jai-space-xl);
}

.pf-status[data-message]::after {
	content: attr(data-message);
	color: var(--jai-color-muted);
	font-size: var(--jai-font-size-sm);
}

.pf-spinner {
	display: inline-flex;
	gap: 0.4rem;
}

.pf-spinner[hidden] {
	display: none;
}

.pf-spinner__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--jai-color-accent);
	animation: pf-bounce 1.2s ease-in-out infinite;
}

.pf-spinner__dot:nth-child(2) {
	animation-delay: 0.15s;
}

.pf-spinner__dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes pf-bounce {
	0%, 80%, 100% {
		transform: scale(0.5);
		opacity: 0.4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */

.pf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 2vw, 2rem);
}

/* The [hidden] attribute must always win over display:flex, otherwise the
 * lightbox stays on top of the page and swallows every click. */
.pf-lightbox[hidden] {
	display: none;
}

.pf-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 13, 38, 0.86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 240ms ease;
}

.pf-lightbox.is-open .pf-lightbox__backdrop {
	opacity: 1;
}

.pf-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	/* Mobile: image area flexes, thumbnail rail is pinned to the bottom. */
	grid-template-rows: 1fr auto;
	gap: var(--jai-space-md);
	width: min(100%, var(--jai-container-wide));
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	transform: scale(0.96);
	opacity: 0;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}

.pf-lightbox.is-open .pf-lightbox__dialog {
	transform: scale(1);
	opacity: 1;
}

.pf-lightbox__close {
	position: fixed;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 4;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jai-color-white);
	color: var(--jai-color-primary);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	transition: background var(--jai-transition), color var(--jai-transition), transform 320ms ease, opacity 320ms ease, visibility 320ms ease;
}

.pf-lightbox__close svg {
	width: 1.35rem;
	height: 1.35rem;
	display: block;
}

.pf-lightbox__close:hover {
	background: var(--jai-color-accent);
	color: var(--jai-color-white);
	transform: rotate(90deg);
}

.pf-lightbox__close:focus-visible {
	outline: 2px solid var(--jai-color-white);
	outline-offset: 2px;
}

.pf-lightbox__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.pf-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--jai-space-sm);
	width: 100%;
	min-height: 0;
	max-height: 100%;
}

.pf-lightbox__image {
	max-width: 100%;
	/* Reserve vertical room for the bottom thumbnail rail, caption, and the
	 * dialog padding so the image never overlaps them on mobile. */
	max-height: calc(100vh - 9rem);
	max-height: calc(100dvh - 9rem);
	width: auto;
	height: auto;
	border-radius: var(--jai-radius-md);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 300ms ease, transform 300ms ease;
}

.pf-lightbox__image.is-loaded {
	opacity: 1;
	transform: scale(1);
}

.pf-lightbox__caption {
	display: flex;
	align-items: center;
	gap: var(--jai-space-sm);
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--jai-font-size-sm);
	text-align: center;
}

.pf-lightbox__counter {
	color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
 * Auto-hide chrome: controls fade/slide away after a few idle seconds and
 * return on pointer move, navigation, key press, or tap. Driven by the
 * .is-idle class toggled in portfolio.js.
 * ---------------------------------------------------------------------- */

.pf-lightbox__close,
.pf-lightbox__nav,
.pf-lightbox__rail,
.pf-lightbox__counter {
	transition: opacity 320ms ease, transform 320ms ease, visibility 320ms ease;
}

.pf-lightbox.is-idle {
	cursor: none;
}

.pf-lightbox.is-idle .pf-lightbox__close,
.pf-lightbox.is-idle .pf-lightbox__nav,
.pf-lightbox.is-idle .pf-lightbox__rail,
.pf-lightbox.is-idle .pf-lightbox__counter {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pf-lightbox.is-idle .pf-lightbox__close {
	transform: translateY(-120%);
}

.pf-lightbox.is-idle .pf-lightbox__nav--prev {
	transform: translateY(-50%) translateX(-120%);
}

.pf-lightbox.is-idle .pf-lightbox__nav--next {
	transform: translateY(-50%) translateX(120%);
}

.pf-lightbox.is-idle .pf-lightbox__rail {
	transform: translateY(120%);
}

.pf-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	min-height: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	background: rgba(16, 25, 66, 0.55);
	color: var(--jai-color-white);
	cursor: pointer;
	-webkit-backdrop-filter: var(--jai-glass-blur);
	backdrop-filter: var(--jai-glass-blur);
	transition: background var(--jai-transition), transform 320ms ease, opacity 320ms ease, visibility 320ms ease;
}

.pf-lightbox__nav:hover {
	background: var(--jai-color-accent);
}

.pf-lightbox__nav--prev {
	left: 0.25rem;
}

.pf-lightbox__nav--next {
	right: 0.25rem;
}

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

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

/* Thumbnail rail: pinned to the bottom on mobile, vertical on the right ≥1024px. */
.pf-lightbox__rail {
	list-style: none;
	margin: 0;
	padding: 0;
	align-self: end;
	display: flex;
	justify-content: safe center;
	gap: var(--jai-space-xs);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	padding-bottom: var(--jai-space-2xs);
}

.pf-thumb {
	flex: 0 0 auto;
}

.pf-thumb__btn {
	display: block;
	width: 4.5rem;
	height: 3.5rem;
	min-height: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--jai-radius-sm);
	background: rgba(255, 255, 255, 0.06);
	cursor: pointer;
	overflow: hidden;
	opacity: 0.55;
	transition: opacity var(--jai-transition), border-color var(--jai-transition), transform var(--jai-transition);
}

.pf-thumb__btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pf-thumb__btn:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.pf-thumb__btn.is-active {
	opacity: 1;
	border-color: var(--jai-color-accent-2);
}

.pf-thumb__btn:focus-visible {
	outline: 2px solid var(--jai-color-accent-2);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.pf-lightbox__dialog {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto;
		grid-template-areas: "stage rail";
		height: auto;
		align-items: center;
	}

	.pf-lightbox__stage {
		grid-area: stage;
	}

	.pf-lightbox__rail {
		grid-area: rail;
		align-self: center;
		justify-content: safe start;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 78vh;
		width: 6rem;
		padding-right: var(--jai-space-2xs);
	}

	.pf-thumb__btn {
		width: 100%;
		height: 4rem;
	}

	.pf-lightbox__image {
		max-height: 78vh;
	}
}

/* Short / landscape viewports (e.g. phones held sideways): keep the image,
 * thumbnail rail, and counter all on screen without vertical overflow. */
@media (max-height: 560px) {
	.pf-lightbox__image {
		max-height: 56vh;
		max-height: 56dvh;
	}

	.pf-lightbox__rail {
		max-height: 18vh;
	}

	.pf-thumb__btn {
		width: 3.5rem;
		height: 2.75rem;
	}
}

/* --------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pf-card,
	.pf-card__image,
	.pf-card__zoom,
	.pf-card__overlay,
	.pf-lightbox__backdrop,
	.pf-lightbox__dialog,
	.pf-lightbox__image,
	.pf-lightbox__close,
	.pf-lightbox__nav,
	.pf-thumb__btn {
		transition: none;
	}

	.pf-spinner__dot {
		animation: none;
	}

	.pf-card:hover .pf-card__image,
	.pf-card:focus-visible .pf-card__image {
		transform: none;
	}

	.pf-lightbox__close,
	.pf-lightbox__nav,
	.pf-lightbox__rail,
	.pf-lightbox__counter {
		transition: opacity 200ms ease, visibility 200ms ease;
	}

	/* Hide by fade only — no slide — when motion is reduced. */
	.pf-lightbox.is-idle .pf-lightbox__close,
	.pf-lightbox.is-idle .pf-lightbox__nav--prev,
	.pf-lightbox.is-idle .pf-lightbox__nav--next,
	.pf-lightbox.is-idle .pf-lightbox__rail {
		transform: none;
	}

	.pf-lightbox.is-idle .pf-lightbox__nav--prev,
	.pf-lightbox.is-idle .pf-lightbox__nav--next {
		transform: translateY(-50%);
	}
}