/*
 * agency/showcase — STRUKTURA, cała mechanika paneli (`:has()`) i kolory.
 *
 * Skąd: sekcja „Projekty” PlanMax (AC §5.3; `Strona glowna.dc.html` reguły
 * L191–197, markup L372) — reguła po regule z sites/planmax/blocks/projekty/
 * style.css (struktura) i sites/planmax/css/site-projekty.css (kolory, obrysy,
 * tła), klasy `s-projekty__*` → `s-showcase__*` (spec chrome-wspolny D16).
 *
 * Bez :where() (spec D16, jak arkusze chrome — D3): skóra stoi w kaskadzie
 * później i ma `a { color }`, `a:hover { color }` oraz reguły `img`; pod
 * :where() (specyficzność 0) wygrałyby z `.s-showcase__more`, `__item`
 * i `__img { max-width: none; height: 100% }` i rozbiły panel. Klasa bloku
 * (0,1,0) bije selektor elementu, a skóra nadal nadpisuje blok tym samym
 * selektorem, bo stoi później.
 *
 * Próg 64rem, nie 820px PlanMax: punkty załamania definiuje wyłącznie
 * base-theme/css/base.css (docs/CONVENTIONS.md, Dodatek). Widoki kryterium
 * (1440, 390) wychodzą tak samo; różnica tylko na 821–1024 px, gdzie panele
 * stoją już w kolumnie (decyzja autora 2026-09-27 (3)).
 *
 * Pismo (font-size, font-weight, letter-spacing, line-height) i rytm sekcji
 * (padding, szerokość kontenera) zostają w skórze strony — w bazie sekcję
 * niosą `s-section` / `s-container` (spec D1, lint noBrandValues).
 *
 * Kolor stoi w tokenie — `--s-showcase-*` (nieprzezroczyste, docs/tokens.md §2
 * „Tokeny bloku showcase”) dla tego, co leży na zdjęciu i nie podąża za
 * tonem; `--s-ink` i `--s-line-strong` dla tego, co leży na tle sekcji.
 * Krycie w tym arkuszu: color-mix(in srgb, var(--s-…) N%, transparent) — to
 * samo co dawne rgba() (docs/tokens.md, „Stopnie krycia”). Geometria i ruch
 * literałem (spec D4).
 */

.s-showcase {
	position: relative;
}

.s-showcase__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 30px;
}

/* Cel dotyku ≥ 44 px (bramka mobile.tapTargets) bez zmiany układu: pionowy
   padding zjadany ujemnym marginesem. */
.s-showcase__more {
	display: inline-block;
	margin: -13px 0;
	padding: 13px 0;
	color: var(--s-showcase-link);
}

.s-showcase__more:hover {
	color: var(--s-ink);
}

.s-showcase__list {
	display: flex;
	height: clamp(440px, 44vw, 520px);
	margin: 0 -6px;
}

.s-showcase__item {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 0 6px;
	transition: flex 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-showcase__item,
.s-showcase__item:hover {
	color: inherit;
}

.s-showcase__item:focus-visible {
	outline: none;
}

.s-showcase__item:focus-visible .s-showcase__frame {
	outline: 2px solid var(--s-showcase-link);
	outline-offset: 2px;
}

.s-showcase__frame {
	position: relative;
	height: 100%;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--s-ink) 14%, transparent);
	border-radius: 28px;
	background: var(--s-showcase-frame);
	transition: border-color 0.4s;
}

.s-showcase__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.s-showcase__img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}

/* Cieniowanie: krycie 38/255 i 242/255 (14.90196 %, 94.90196 %), nie 15 % i 95 %,
   oraz `in srgb` — tak Chrome maluje gradient z dawnego rgba(…, 0.15 / 0.95):
   alfa składni legacy jest kwantyzowana do 8 bitów i interpolowana w sRGB,
   color-mix() niesie alfę zmiennoprzecinkową i bez `in srgb` interpoluje
   w oklab. Z okrągłymi procentami panel różnił się o 1/255 na ~1 % strony
   głównej PlanMax (zmierzone 2026-09-27, zrzuty przed/po Zadania 8b).
   Kolory jednolite (obrys, chip, tekst) kwantyzuje malowanie — tam bez zmian. */
.s-showcase__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg in srgb, color-mix(in srgb, var(--s-showcase-shade) 14.90196%, transparent) 30%, color-mix(in srgb, var(--s-showcase-shade) 94.90196%, transparent) 100%);
}

.s-showcase__label {
	position: absolute;
	right: 0;
	bottom: 26px;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transition: opacity 0.25s ease;
}

.s-showcase__vname {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--s-showcase-media-ink);
}

.s-showcase__caption {
	position: absolute;
	bottom: 26px;
	left: 28px;
	width: 420px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.s-showcase__tag {
	margin-bottom: 12px;
}

.s-showcase__chip {
	padding: 6px 12px;
	border-radius: var(--s-radius-pill);
	background: color-mix(in srgb, var(--s-showcase-media-ink) 92%, transparent);
	color: var(--s-showcase-chip-ink);
}

.s-showcase__name {
	color: var(--s-showcase-media-ink);
}

.s-showcase__text {
	margin-top: 6px;
	color: color-mix(in srgb, var(--s-showcase-media-ink) 78%, transparent);
}

.s-showcase__action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 18px;
}

.s-showcase__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--s-accent);
	color: var(--s-ink-on-accent);
}

/* Panel aktywny: pod kursorem, z fokusem klawiatury, a gdy żadnego — pierwszy. */
.s-showcase__list:not(:has(> .s-showcase__item:hover)):not(:has(> .s-showcase__item:focus-visible)) > .s-showcase__item:first-child,
.s-showcase__list > .s-showcase__item:hover,
.s-showcase__list > .s-showcase__item:focus-visible {
	flex: 3.4;
}

.s-showcase__list:not(:has(> .s-showcase__item:hover)):not(:has(> .s-showcase__item:focus-visible)) > .s-showcase__item:first-child .s-showcase__caption,
.s-showcase__list > .s-showcase__item:hover .s-showcase__caption,
.s-showcase__list > .s-showcase__item:focus-visible .s-showcase__caption {
	opacity: 1;
	transform: none;
	transition: opacity 0.3s ease 0.38s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.38s;
}

.s-showcase__list:not(:has(> .s-showcase__item:hover)):not(:has(> .s-showcase__item:focus-visible)) > .s-showcase__item:first-child .s-showcase__label,
.s-showcase__list > .s-showcase__item:hover .s-showcase__label,
.s-showcase__list > .s-showcase__item:focus-visible .s-showcase__label {
	opacity: 0;
}

.s-showcase__list:not(:has(> .s-showcase__item:hover)):not(:has(> .s-showcase__item:focus-visible)) > .s-showcase__item:first-child .s-showcase__frame,
.s-showcase__list > .s-showcase__item:hover .s-showcase__frame,
.s-showcase__list > .s-showcase__item:focus-visible .s-showcase__frame {
	border-color: var(--s-line-strong);
}

@media (max-width: 64rem) {
	.s-showcase__list {
		flex-direction: column;
		gap: 14px;
		height: auto;
	}

	.s-showcase__list > .s-showcase__item,
	.s-showcase__list > .s-showcase__item:hover,
	.s-showcase__list > .s-showcase__item:focus-visible,
	.s-showcase__list:not(:has(> .s-showcase__item:hover)):not(:has(> .s-showcase__item:focus-visible)) > .s-showcase__item:first-child {
		flex: none;
		padding: 0;
	}

	.s-showcase__frame {
		height: auto;
	}

	.s-showcase__media {
		position: relative;
		inset: auto;
		height: 220px;
	}

	.s-showcase__label,
	.s-showcase__name,
	.s-showcase__text {
		display: none;
	}

	.s-showcase__caption,
	.s-showcase__list > .s-showcase__item .s-showcase__caption {
		right: 16px;
		bottom: 16px;
		left: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: auto;
		opacity: 1;
		transform: none;
	}

	.s-showcase__tag,
	.s-showcase__action {
		margin: 0;
	}
}