/**
 * V6.27 — the home project showcase rails.
 *
 * No new font, no new colour, no new radius: the type scale, the shell width and the pink accent
 * are the ones front-page.php and theme-overrides.css already use. The rail is CSS scroll-snap —
 * no slider library was added, because none was needed.
 */

.lp-showcase {
	position: relative;
	padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 4vw, 48px);
}

.lp-showcase__group + .lp-showcase__group { margin-top: clamp(40px, 5vw, 72px); }

.lp-showcase__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: clamp(16px, 2vw, 28px);
}

/* Secondary hierarchy, exactly as the brief asks: the label sits under the project title in
   weight, and well under the image in presence. */
.lp-showcase__label {
	margin: 0;
	font-size: clamp(.72rem, .66rem + .22vw, .84rem);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.lp-showcase__all {
	font-size: .8rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}

.lp-showcase__all:hover,
.lp-showcase__all:focus-visible { color: #fff; }

.lp-showcase__viewport { position: relative; }

/* The rail itself. grid-auto-flow:column is what keeps a growing project list on ONE line —
   flex would wrap unless told not to, and this cannot wrap by construction. */
.lp-showcase__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(230px, 30vw, 420px);
	gap: clamp(12px, 1.6vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* V6.28 — the scrollbar is hidden by request. It was taking 11px of layout height under
	   every rail. Scrolling itself is untouched: wheel, trackpad, touch swipe, keyboard and the
	   arrow buttons all still work — only the bar is not painted. The affordance is carried by
	   the arrows on pointer devices and by the deliberately part-visible next card everywhere. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lp-showcase__rail::-webkit-scrollbar { display: none; }

/* The rail is focusable (tabindex=0) so a keyboard user can scroll it with the arrow keys, but
   it had no focus ring — a WCAG 2.4.7 failure found in the design audit. */
.lp-showcase__rail:focus-visible {
	outline: 2px solid var(--lp-mint, #7fe3b0);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Only the rail scrolls. The page must never gain a horizontal scrollbar because of it. */
.lp-showcase { overflow: hidden; }

.lp-showcase__item { scroll-snap-align: start; min-width: 0; }


/* Arrows are shown only where a pointer can use them; touch swipes instead. */
.lp-showcase__nav {
	position: absolute;
	top: calc(50% - 28px);
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--lp-edge, rgba(255,255,255,.18));
	background: rgba(16,16,20,.82);
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

.lp-showcase__nav:hover { background: rgba(30,30,36,.94); border-color: rgba(255,255,255,.34); }
.lp-showcase__nav:focus-visible { outline: 2px solid var(--lp-mint, #7fe3b0); outline-offset: 2px; }
.lp-showcase__nav[disabled] { opacity: .3; cursor: default; }
.lp-showcase__nav--prev { left: -6px; }
.lp-showcase__nav--next { right: -6px; }

@media (hover: none) {
	.lp-showcase__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lp-showcase__rail { scroll-behavior: auto; }
	.lp-showcase__all, .lp-showcase__nav { transition: none; }
}

/* A sliver of the next card is deliberate on narrow screens: it is the affordance that says the
   row moves, without adding an instruction anyone has to read. */
@media (max-width: 767px) {
	.lp-showcase__rail { grid-auto-columns: 78vw; }
}

/* V6.28 — capped at the desktop maximum. Measured in the design audit: the bare 42vw made a
   card 537px wide at 1279px, while the desktop rule capped it at 420px from 1280px up — so cards
   SHRANK by 153px as the window got WIDER, and the visible count jumped from ~2.4 to ~3.3 at a
   single pixel. The cap keeps the step small and the direction monotonic. */
@media (min-width: 768px) and (max-width: 1279px) {
	/* The cap is 384px and not 420px because 384px is exactly what the desktop rule
	   (clamp(230px, 30vw, 420px)) produces at 1280px. Capping any higher reinstates the
	   inversion this rule exists to remove: at 1279px the card would be 420px and at 1280px
	   384px, so widening the window would NARROW the cards. With both sides meeting at 384px
	   the card width now only ever grows: 322px at 768px, 384px from 915px to 1280px, then up
	   to 420px by 1400px. */
	.lp-showcase__rail { grid-auto-columns: clamp(300px, 42vw, 384px); }
}

/* ---- The rail's own card -------------------------------------------------------------------
   Image, then title. The type scale, the pink accent and the shell are the theme's; nothing new
   is introduced. One aspect ratio across every card gives the row a single rhythm, and because
   this markup is the rail's own there is no absolutely-positioned body to fight. */
.lp-showcase__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.lp-showcase__frame {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 10px;
	background: var(--lp-glass, rgba(255,255,255,.045));
	border: 1px solid var(--lp-edge, rgba(255,255,255,.10));
}

.lp-showcase__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.lp-showcase__card:hover .lp-showcase__frame img,
.lp-showcase__card:focus-visible .lp-showcase__frame img { transform: scale(1.04); }

/* Stronger than the section label above it, quieter than the image it sits under — the
   hierarchy the brief asks for. */
.lp-showcase__title {
	display: block;
	margin-top: 12px;
	/* V6.28 — reduced 20% by request: was clamp(.95rem, .88rem + .3vw, 1.12rem). */
	font-size: clamp(.76rem, .70rem + .24vw, .9rem);
	line-height: 1.3;
	color: rgba(255,255,255,.92);
	transition: color .2s ease;
}

.lp-showcase__card:hover .lp-showcase__title { color: #fff; }

.lp-showcase__card:focus-visible {
	outline: 2px solid var(--lp-mint, #7fe3b0);
	outline-offset: 4px;
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.lp-showcase__frame img, .lp-showcase__title { transition: none; }
	.lp-showcase__card:hover .lp-showcase__frame img { transform: none; }
}

/* V6.91 — Cinema project pages reuse the real premium portfolio card inside the horizontal
   category rail immediately before Prev/Next. The selectors are deliberately route- and
   component-scoped: archive cards keep their original editorial grid, while only this rail gets
   the rounded, always-readable overlay treatment approved for related work. */
body.single-leopati_project .lp-related-showcase {
	padding: clamp(64px, 7vw, 96px) 0 clamp(56px, 6vw, 80px);
	background: transparent;
}

.lp-related-showcase__eyebrow {
	margin: 0 0 8px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.48);
}

.lp-related-showcase__title {
	margin: 0;
	font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.35rem);
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -.025em;
	color: rgba(255,255,255,.96);
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .lp-showcase__rail {
	grid-auto-columns: clamp(380px, 42vw, 560px);
	gap: clamp(18px, 2vw, 28px);
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .lp-project-card.lp-project-card--related {
	--lp-card-ratio: 19 / 20 !important;
	display: block;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: none !important;
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card {
	width: 100%;
	height: auto;
	aspect-ratio: var(--lp-card-ratio);
	overflow: hidden;
	border: 1px solid rgba(191, 205, 225, .28) !important;
	border-radius: 28px !important;
	background: rgba(255, 255, 255, .035) !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .2) !important;
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto !important;
	border-radius: inherit;
	background: transparent !important;
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__image::after {
	background: linear-gradient(180deg, rgba(4, 6, 9, .03) 22%, rgba(4, 6, 9, .18) 48%, rgba(4, 6, 9, .94) 100%);
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__body {
	inset: auto clamp(26px, 2.4vw, 36px) clamp(26px, 2.4vw, 34px) !important;
	gap: clamp(12px, 1.2vw, 17px);
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__meta {
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .42);
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__body strong,
body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .lp-project-card:not(:nth-child(6n + 1)) .leopati-archive-card__body strong {
	max-width: 15ch;
	font-size: clamp(1.9rem, 2.6vw, 3.15rem) !important;
	line-height: .97 !important;
	letter-spacing: -.045em !important;
	overflow-wrap: anywhere;
}

body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__cta {
	display: flex !important;
	max-height: 28px !important;
	overflow: visible;
	opacity: 1 !important;
	transform: none !important;
}

@media (max-width: 767px) {
	body.single-leopati_project .lp-related-showcase { padding: 48px 0 56px; }
	.lp-related-showcase__title { font-size: clamp(1.35rem, 6.8vw, 1.8rem); }
	body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .lp-showcase__rail {
		grid-auto-columns: 82vw;
		gap: 14px;
	}
	body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .lp-project-card.lp-project-card--related {
		--lp-card-ratio: 4 / 5 !important;
	}
	body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card {
		border-radius: 22px !important;
	}
	body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__body {
		inset: auto 20px 20px !important;
		gap: 11px;
	}
	body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .leopati-archive-card__body strong,
	body.leopati-portfolio-experience.single-leopati_project .lp-related-showcase .lp-project-card:not(:nth-child(6n + 1)) .leopati-archive-card__body strong {
		font-size: clamp(1.55rem, 7.2vw, 2.15rem) !important;
	}
}