/**
 * blocks/project-detail/project-detail.css — Projekt aloldal (a bundle detail-page-éből).
 * Minimalista: vissza-link + eyebrow (év — típus) + cím + lead + főkép + galéria + pager.
 * (A spec/leírás tárolt, de a designban szándékosan rejtett — lásd PROJECT_BRIEF döntés B.)
 */

.detail { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* --- fejléc --- */
.detail__head { padding: var(--space-8) 0 var(--space-7); }
.detail__back {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: lowercase;
	color: var(--fg-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
	margin-bottom: var(--space-6); transition: color var(--dur-fast) var(--ease);
}
.detail__back .ar-l { display: inline-block; transition: transform var(--dur) var(--ease); }
.detail__back:hover { color: var(--ink); }
.detail__back:hover .ar-l { transform: translateX(-4px); }
.detail__dot { width: 24px; height: 24px; flex: none; display: inline-block; flex-shrink: 0; }
.detail__title {
	font-family: var(--font-display); font-weight: var(--w-bold);
	font-size: clamp(2.25rem, 0.4rem + 4.7vw, 4.5rem); letter-spacing: -0.03em; line-height: 0.98;
	margin: 0 0 var(--space-5);
	display: flex; align-items: center; gap: 14px;
}
.detail__lead {
	font-family: var(--font-body); font-weight: var(--w-light); font-size: var(--text-lg);
	line-height: 1.6; color: var(--fg-muted); max-width: 52ch; margin: 0;
}

/* --- kattintható kép-trigger (főkép + galéria): button-reset --- */
.detail__hero,
.detail__shot {
	-webkit-appearance: none; appearance: none; border: 0; margin: 0; padding: 0;
	background: none; font: inherit; color: inherit; text-align: inherit;
	display: block; cursor: zoom-in; overflow: hidden;
}
.detail__hero:focus-visible,
.detail__shot:focus-visible {
	outline: 3px solid var(--ink); outline-offset: 3px;
}

/* --- főkép --- */
.detail__hero { width: 100%; aspect-ratio: 16 / 9; }

/* --- galéria --- */
.detail__gallery {
	padding: var(--space-7) 0 var(--space-9);
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
}
.detail__shot { width: 100%; aspect-ratio: 4 / 3; }
.detail__shot--wide { grid-column: 1 / -1; aspect-ratio: 3 / 2; }

/* --- prev/next pager --- */
.detail__pager {
	grid-column: 1 / -1; border-top: 1px solid var(--line);
	margin-top: var(--space-4); padding-top: var(--space-5);
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
}
.detail__pager-item { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; cursor: pointer; }
.detail__pager-item--prev { align-items: flex-start; text-align: left; }
.detail__pager-item--next { align-items: flex-end; text-align: right; }
.detail__pager-k {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--fg-muted); display: inline-flex; align-items: center; gap: 8px;
}
.detail__pager-title {
	font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--text-xl);
	letter-spacing: -0.01em; color: var(--ink); transition: color var(--dur-fast) var(--ease);
}
.detail__pager-item:hover .detail__pager-title { color: var(--yellow-press); }
.detail__pager-item .ar-l, .detail__pager-item .ar { display: inline-block; transition: transform var(--dur) var(--ease); }
.detail__pager-item--prev:hover .ar-l { transform: translateX(-4px); }
.detail__pager-item--next:hover .ar { transform: translateX(4px); }

@media (max-width: 760px) {
	.detail__head { padding-top: 24px; }
	.detail__gallery { grid-template-columns: 1fr; }
	.detail__shot--wide { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* --- lightbox (képnézegető) --- */
.detail__lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: grid; align-items: center; justify-items: center;
	grid-template-columns: auto 1fr auto;
	padding: var(--space-6);
}
.detail__lightbox[hidden] { display: none; }
.detail__lightbox-backdrop {
	position: absolute; inset: 0; background: rgba(17, 17, 17, 0.94);
	border: 0; cursor: zoom-out;
}
.detail__lightbox-figure {
	position: relative; grid-column: 2; margin: 0;
	display: flex; align-items: center; justify-content: center;
	max-width: 100%; max-height: 100%;
}
.detail__lightbox-img {
	display: block; max-width: 100%; max-height: calc(100vh - var(--space-8));
	width: auto; height: auto; object-fit: contain;
	background: var(--ink);
}
/* állapot: az animáció a megnyitáskor */
.detail__lightbox.is-open .detail__lightbox-figure {
	animation: mondrian-lb-in var(--dur) var(--ease);
}
@keyframes mondrian-lb-in {
	from { opacity: 0; transform: scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* vezérlők (zárás + nyilak) */
.detail__lightbox-close,
.detail__lightbox-nav {
	position: relative; z-index: 1;
	-webkit-appearance: none; appearance: none;
	background: transparent; border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--paper); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.detail__lightbox-close {
	position: absolute; top: var(--space-5); right: var(--space-5);
	width: 48px; height: 48px; font-size: 28px; line-height: 1;
}
.detail__lightbox-nav {
	width: 56px; height: 56px; font-size: 22px; align-self: center;
}
.detail__lightbox-nav--prev { grid-column: 1; }
.detail__lightbox-nav--next { grid-column: 3; }
.detail__lightbox-close:hover,
.detail__lightbox-nav:hover {
	background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.detail__lightbox-close:focus-visible,
.detail__lightbox-nav:focus-visible {
	outline: 3px solid var(--yellow); outline-offset: 2px;
}
.detail__lightbox-nav .ar-l,
.detail__lightbox-nav .ar { display: inline-block; transition: transform var(--dur) var(--ease); }
.detail__lightbox-nav--prev:hover .ar-l { transform: translateX(-4px); }
.detail__lightbox-nav--next:hover .ar { transform: translateX(4px); }

/* számláló */
.detail__lightbox-counter {
	position: absolute; left: 0; right: 0; bottom: var(--space-5); z-index: 1;
	margin: 0; text-align: center;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.7); font-feature-settings: 'tnum' 1;
}

/* nincs scroll a háttéren, amíg a lightbox nyitva */
body.detail-lightbox-open { overflow: hidden; }

@media (max-width: 760px) {
	.detail__lightbox { padding: var(--space-4); }
	.detail__lightbox-nav { width: 44px; height: 44px; font-size: 18px; }
	.detail__lightbox-close { top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; }
	/* mobilon a nyilak a kép alá/fölé ne tolják — a kép full-width, a nyilak alul */
	.detail__lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
	.detail__lightbox-figure { grid-column: 1 / -1; grid-row: 1; }
	.detail__lightbox-img { max-height: calc(100vh - 7rem); }
	.detail__lightbox-nav--prev { grid-column: 1; grid-row: 2; justify-self: start; }
	.detail__lightbox-nav--next { grid-column: 2; grid-row: 2; justify-self: end; }
	.detail__lightbox-counter { bottom: auto; top: var(--space-4); left: var(--space-4); right: auto; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.detail__lightbox.is-open .detail__lightbox-figure { animation: none; }
	.detail__lightbox-nav .ar-l,
	.detail__lightbox-nav .ar { transition: none; }
}