/*
 * Realizacje PDM: lista (Figma 31:2, spec-podstrony F), karta realizacji z galerią i lightboxem (31:172, G1 do G3),
 * sekcja „Zobacz realizacje” i „Inne realizacje” (20:2 i 31:231, blok avg/realizacje). Jedna karta dla wszystkich.
 * Ładowany po podstrony.css (inc/pdm.php), także w kanwie edytora. Tylko role kolorów z tokens.css.
 * Zero cieni, zero gradientów poza kreską linku (jak .c-more), promień 12 na zdjęciach i 8 na przyciskach.
 * Selektory z dwiema klasami tam, gdzie treść z edytora (.c-content ul, li + li, img) ma swoje reguły.
 */

@layer components {

	/* ---------- Sekcje: wcięcie jak pasy is-style-s-* (1376 na środku, margines 32 / 16) ---------- */
	.c-realizacje,
	.c-galeria,
	.c-realizacja-opis {
		padding: var(--section-space) max(var(--gutter), (100% - var(--wrap-wide)) / 2);
	}
	.c-realizacje--tlo { background: var(--c-wash-2); }   /* Figma 20:2 i 31:231: tło sekcji primary-100 */

	/* Nagłówek, karty, przycisk: na komputerze przycisk w rzędzie nagłówka, na telefonie pod kartami. */
	.c-realizacje--sekcja {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "tytul przycisk" "lista lista";
		align-items: end;
		gap: 3.5rem 2rem;
	}
	.c-realizacje__tytul { grid-area: tytul; max-width: 41.5rem; color: var(--c-text); }
	.c-realizacje--sekcja .c-realizacje__lista { grid-area: lista; }
	.c-realizacje__przycisk { grid-area: przycisk; justify-self: end; }

	/* ---------- Siatka kart: 2 kolumny po 680, odstęp 16, rzędy co 56 (Figma CS-02) ---------- */
	.c-realizacje .c-realizacje__lista {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.5rem 1rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.c-realizacje .c-realizacja { margin: 0; }

	/* ---------- Karta ---------- */
	.c-realizacja__link {
		display: grid;
		gap: 1.25rem;
		color: var(--c-text);
		text-decoration: none;
		border-radius: var(--radius);
	}
	.c-realizacja__link:focus-visible { outline: 2px solid var(--c-fokus-na-tle, var(--c-text)); outline-offset: 4px; }
	.c-realizacja__media {
		display: block;
		overflow: hidden;
		aspect-ratio: 680 / 442;
		border-radius: var(--radius);
		background: var(--primary-200);
	}
	.c-realizacja .c-realizacja__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease-out;
	}
	.c-realizacja__link:hover .c-realizacja__img { transform: scale(1.04); }
	.c-realizacja__podpis {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1.5rem;
	}
	.c-realizacja .c-realizacja__tytul {
		margin: 0;
		color: var(--c-text);
		font-size: var(--heading-h4);
		line-height: var(--leading-h4);
		letter-spacing: var(--track-h4);
	}
	/* „Zobacz realizację”: tekst w odnośniku karty z kreską jak .c-more (Avenir cta_tertiary, base.css): kreska jako
	   ::before (nie gradient w tle: detektor antywzorców brał go za kolor tła), przejazd przy najechaniu na kartę. */
	.c-realizacja__wiecej {
		position: relative;
		flex: none;
		display: inline-flex;
		align-items: center;
		min-height: 2rem;
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.25;
		white-space: nowrap;
	}
	.c-realizacja__wiecej::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0.125rem;
		height: 1px;
		background: currentColor;
		transform-origin: right;
	}
	.c-realizacja__link:hover .c-realizacja__wiecej::before { animation: kreska-przejazd 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

	/* ---------- Opis realizacji (tylko gdy wypełniony w panelu) ---------- */
	.c-realizacja-opis { padding-block-end: 0; }
	.c-realizacja-opis > * { max-width: var(--wrap-text); }
	.c-realizacja-opis p { color: var(--c-text-2); font-size: var(--txt-lead); line-height: var(--leading-lead); }

	/* ---------- Galeria (Figma 31:211): 900 + kolumna 460, potem rzędy po trzy 448 x 320 ---------- */
	.c-galeria__naglowek {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1rem 2rem;
		padding-block-end: 2.5rem;
	}
	.c-galeria__licznik { color: var(--c-text-2); font-size: var(--txt-lead); line-height: var(--leading-lead); }   /* 78%: 5,51 (spec A3) */
	.c-galeria .c-galeria__siatka {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 1rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.c-galeria .c-galeria__el { grid-column: span 2; aspect-ratio: 448 / 320; margin: 0; }
	.c-galeria .c-galeria__el[hidden] { display: none; }
	.c-galeria .c-galeria__el:nth-child(1) { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
	.c-galeria .c-galeria__el:is(:nth-child(2), :nth-child(3)) { aspect-ratio: 460 / 292; }
	.c-galeria .c-galeria__el--pol { grid-column: span 3; aspect-ratio: 680 / 320; }
	.c-galeria .c-galeria__el--pelny { grid-column: 1 / -1; aspect-ratio: 1376 / 440; }
	/* Jedno albo dwa zdjęcia: jedno duże 1376 x 600 albo dwa po 680 x 600. */
	.c-galeria--n1 .c-galeria__el:nth-child(1) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1376 / 600; }
	.c-galeria--n2 .c-galeria__el:is(:nth-child(1), :nth-child(2)) { grid-column: span 3; grid-row: auto; aspect-ratio: 680 / 600; }

	/* Zdjęcie leży absolutnie: wysokość pola daje siatka i proporcje, nie rozmiar pliku (inaczej pierwsze zdjęcie
	   rozpycha dwa rzędy i w prawej kolumnie robi się dziura). */
	.c-galeria__link {
		position: relative;
		display: block;
		overflow: hidden;
		height: 100%;
		border-radius: var(--radius);
		background: var(--primary-200);
	}
	.c-galeria__link:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
	.c-galeria .c-galeria__img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease-out;
	}
	.c-galeria__link:hover .c-galeria__img { transform: scale(1.04); }
	.c-galeria__wiecej { display: flex; justify-content: center; padding-block-start: 2.5rem; }
	.c-galeria__wiecej--tylko-m { display: none; }

	/* ---------- Lightbox: natywny <dialog> (spec G2) ---------- */
	html:has(.c-lightbox[open]) { overflow: hidden; }
	.c-lightbox {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: 1.5rem 2rem;
		color: var(--c-on-dark);
		background: transparent;
		border: 0;
		overscroll-behavior: contain;
	}
	.c-lightbox[open] {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr) 3rem;
		grid-template-rows: 3rem minmax(0, 1fr);
		grid-template-areas: "licznik licznik zamknij" "wstecz kadr dalej";
		align-items: center;
		gap: 1.5rem 2rem;
	}
	.c-lightbox::backdrop { background: rgb(38 38 69 / 0.98); }   /* 0,94 przepuszczało belkę pod licznikiem (recenzja H5) */
	.c-lightbox__licznik {
		grid-area: licznik;
		color: var(--c-on-dark-2);   /* 72%, na granacie 900 przy 94% kryciu ponad 7:1 */
		font-size: var(--txt-body-2);
		line-height: 1.43;
		font-variant-numeric: tabular-nums;
	}
	.c-lightbox__kadr {
		grid-area: kadr;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 0;
		margin: 0;
	}
	.c-lightbox .c-lightbox__img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		/* Bez pan-y ze spec G2: przy pan-y przeglądarka przejmuje ruch w pionie (pointercancel) i gest „w dół zamyka” nie działa. */
		touch-action: pinch-zoom;
		user-select: none;
	}
	.c-lightbox__przycisk {
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		padding: 0;
		color: var(--c-on-dark);
		background: rgb(255 255 255 / 0.08);
		border: 1px solid rgb(255 255 255 / 0.3);
		border-radius: var(--radius-ui);
		cursor: pointer;
		transition: background-color 0.2s ease-out;
	}
	.c-lightbox__przycisk svg { width: 1.5rem; height: 1.5rem; }
	.c-lightbox__przycisk:hover { background: rgb(255 255 255 / 0.18); }
	.c-lightbox__przycisk:focus-visible { outline: 2px solid var(--brand-white); outline-offset: 2px; }
	.c-lightbox__zamknij { grid-area: zamknij; }
	.c-lightbox__nav--wstecz { grid-area: wstecz; }
	.c-lightbox__nav--dalej { grid-area: dalej; }

	@media (prefers-reduced-motion: reduce) {
		.c-realizacja .c-realizacja__img,
		.c-galeria .c-galeria__img { transition: none; }
		.c-realizacja__link:hover .c-realizacja__img,
		.c-galeria__link:hover .c-galeria__img { transform: none; }
		.c-realizacja__link:hover .c-realizacja__wiecej::before { animation: none; }
	}

	/* ---------- Telefon (projekt, spec F 390, G 390, E8 390) ---------- */
	@media (max-width: 47.999em) {
		.c-realizacje--sekcja {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "tytul" "lista" "przycisk";
			gap: 2rem;
		}
		.c-realizacje__przycisk { justify-self: stretch; }
		.c-realizacje .c-realizacje__lista { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
		.c-realizacja__link { gap: 1rem; }
		.c-realizacja__media { aspect-ratio: 4 / 3; }
		.c-realizacja__podpis { flex-direction: column; align-items: flex-start; }
		.c-realizacja__wiecej { min-height: 1.75rem; }

		.c-galeria__naglowek { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-block-end: 2rem; }
		.c-galeria__licznik { font-size: 1rem; line-height: 1.5; }
		.c-galeria .c-galeria__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.c-galeria .c-galeria__el,
		.c-galeria .c-galeria__el:is(:nth-child(2), :nth-child(3)),
		.c-galeria .c-galeria__el:is(.c-galeria__el--pol, .c-galeria__el--pelny) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
		.c-galeria .c-galeria__el:nth-child(1),
		.c-galeria--n1 .c-galeria__el:nth-child(1),
		.c-galeria--n2 .c-galeria__el:is(:nth-child(1), :nth-child(2)) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
		.c-galeria .c-galeria__el.c-galeria__el--m-pelny { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
		.c-galeria .c-galeria__el.c-galeria__el--m-ukryty { display: none; }
		.c-galeria__wiecej,
		.c-galeria__wiecej--tylko-m { display: block; padding-block-start: 2rem; }

		/* Lightbox: zdjęcie na całą szerokość, strzałki i licznik w dolnym pasku w zasięgu kciuka. */
		.c-lightbox { padding: 0.75rem; }
		.c-lightbox[open] {
			grid-template-columns: 3rem minmax(0, 1fr) 3rem;
			grid-template-rows: 3rem minmax(0, 1fr) 3rem;
			grid-template-areas: ". . zamknij" "kadr kadr kadr" "wstecz licznik dalej";
			gap: 0.75rem;
		}
		.c-lightbox__kadr { margin-inline: -0.75rem; }
		.c-lightbox__licznik { text-align: center; }
	}
}