/* ========================================================
   REALIZACJE - ARCHIVE (editorial layout)
   archive-realizacja.php - hero + stats + filters + grid + CTA
   ======================================================== */

/* --- STATS BAR pod hero --- */
.realizacje-archive__stats {
	background: var(--c-white);
	border-bottom: 1px solid var(--c-gray-100);
	padding: var(--s-8) 0;
}
.realizacje-archive__stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-6);
}
.realizacje-archive__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--s-2);
	position: relative;
}
.realizacje-archive__stat:not(:last-child)::after {
	content: '';
	position: absolute;
	right: calc(var(--s-6) * -0.5);
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: var(--c-gray-100);
}
.realizacje-archive__stat-num {
	font-family: var(--f-headline);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--fw-black);
	color: var(--c-primary);
	line-height: 1;
	margin-bottom: var(--s-2);
}
.realizacje-archive__stat-label {
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	color: var(--c-neutral-600);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	font-weight: var(--fw-semibold);
}
@media (max-width: 900px) {
	.realizacje-archive__stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
	.realizacje-archive__stat:not(:last-child)::after { display: none; }
	.realizacje-archive__stat { padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--c-gray-100); }
	.realizacje-archive__stat:nth-last-child(-n+2) { border-bottom: 0; }
}

/* --- ARCHIVE SECTION --- */
.realizacje-archive { background: var(--c-surface); padding: var(--s-16) 0; }

/* --- FILTRY (chipy) --- */
.realizacje-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-bottom: var(--s-10);
	padding-bottom: var(--s-6);
	border-bottom: 1px solid var(--c-gray-100);
}
.realizacje-archive__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	background: var(--c-white);
	border: 1px solid var(--c-gray-100);
	border-radius: var(--r-full);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-neutral-700);
	cursor: pointer;
	transition: all var(--tr-fast);
	white-space: nowrap;
}
.realizacje-archive__chip:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	transform: translateY(-2px);
	box-shadow: var(--sh-sm);
}
.realizacje-archive__chip.is-active {
	background: var(--c-neutral-900);
	border-color: var(--c-neutral-900);
	color: var(--c-white);
}
.realizacje-archive__chip.is-active .realizacje-archive__chip-count {
	background: rgba(255, 255, 255, 0.2);
	color: var(--c-white);
}
.realizacje-archive__chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--c-gray-100);
	color: var(--c-neutral-700);
	border-radius: var(--r-full);
	font-size: 0.7rem;
	font-weight: var(--fw-bold);
}

/* --- GRID (rowne kafle 3-kol / 2-kol / 1-kol) --- */
.realizacje-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6);
	align-items: stretch;
}
.realizacje-archive__card {
	position: relative;
	display: flex;
	min-width: 0;
}

.realizacje-archive__card-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--c-white);
	border: 1px solid var(--c-gray-100);
	border-radius: var(--r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		transform    400ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow   400ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 400ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.realizacje-archive__card-link:hover {
	transform: translateY(-6px);
	box-shadow: var(--sh-xl);
	border-color: var(--c-primary);
}

.realizacje-archive__card-media {
	position: relative;
	overflow: hidden;
	background: var(--c-gray-100);
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
}
.realizacje-archive__card-img,
.realizacje-archive__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	backface-visibility: hidden;
}
.realizacje-archive__card-link:hover .realizacje-archive__card-img,
.realizacje-archive__card-link:hover .realizacje-archive__card-media img { transform: scale(1.08); }

.realizacje-archive__card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--c-primary-50), var(--c-gray-100));
	color: var(--c-primary);
	font-family: var(--f-headline);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	text-align: center;
	padding: var(--s-4);
}

.realizacje-archive__card-photos {
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(15, 20, 35, 0.8);
	color: var(--c-white);
	border-radius: var(--r-full);
	font-family: var(--f-body);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	backdrop-filter: blur(6px);
}

.realizacje-archive__card-body {
	padding: var(--s-6);
	background: var(--c-white);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	flex: 1 1 auto;
}

.realizacje-archive__card-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	background: var(--c-primary-50);
	color: var(--c-primary);
	border-radius: var(--r-full);
	font-family: var(--f-body);
	font-size: 0.72rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
}

.realizacje-archive__card-title {
	font-family: var(--f-headline);
	font-size: var(--fs-xl);
	line-height: 1.2;
	margin: 0;
	color: var(--c-neutral-900);
	transition: color var(--tr-fast);
}
.realizacje-archive__card-link:hover .realizacje-archive__card-title { color: var(--c-primary); }

.realizacje-archive__card-excerpt {
	color: var(--c-neutral-700);
	line-height: 1.6;
	margin: 0;
	font-size: var(--fs-base);
}

.realizacje-archive__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin: 0;
	padding-top: var(--s-2);
	border-top: 1px dashed var(--c-gray-100);
}
.realizacje-archive__card-meta > div {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.realizacje-archive__card-meta dt {
	display: inline-flex;
	color: var(--c-primary);
	margin: 0;
}
.realizacje-archive__card-meta dd {
	margin: 0;
	font-family: var(--f-body);
	font-size: 0.85rem;
	color: var(--c-neutral-700);
	font-weight: var(--fw-medium);
}

.realizacje-archive__card-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--s-2);
	color: var(--c-primary);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	transition: gap var(--tr-fast);
}
.realizacje-archive__card-link:hover .realizacje-archive__card-arrow { gap: 12px; }

/* Responsive grid */
@media (max-width: 1100px) {
	.realizacje-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.realizacje-archive__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* --- Pusto state (filtr nic nie znalazl) --- */
.realizacje-archive__empty {
	text-align: center;
	padding: var(--s-16) var(--s-6);
	max-width: 500px;
	margin: 0 auto;
}
.realizacje-archive__empty p {
	font-family: var(--f-body);
	font-size: var(--fs-lg);
	color: var(--c-neutral-600);
	margin-bottom: var(--s-3);
}
.realizacje-archive__empty p strong { color: var(--c-neutral-800); font-size: var(--fs-xl); font-family: var(--f-headline); font-weight: var(--fw-black); display: block; margin-bottom: var(--s-2); }
.realizacje-archive__empty .btn { margin-top: var(--s-4); }

/* --- PAGINATION --- */
.realizacje-archive__pagination {
	margin-top: var(--s-12);
	display: flex;
	justify-content: center;
	gap: var(--s-2);
	flex-wrap: wrap;
}
.realizacje-archive__pagination .page-numbers,
.realizacje-archive__pagination .nav-links > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--s-4);
	background: var(--c-white);
	border: 1px solid var(--c-gray-100);
	border-radius: var(--r-md);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--c-neutral-800);
	text-decoration: none;
	transition: all var(--tr-fast);
}
.realizacje-archive__pagination .page-numbers:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	transform: translateY(-2px);
}
.realizacje-archive__pagination .page-numbers.current {
	background: var(--c-primary);
	color: var(--c-white);
	border-color: var(--c-primary);
}
.realizacje-archive__pagination .page-numbers.dots { background: transparent; border: 0; }

/* --- CTA BAND KOŃCOWA --- */
.realizacje-archive__cta {
	background: linear-gradient(135deg, var(--c-neutral-900) 0%, var(--c-neutral-800, #1e293b) 100%);
	color: var(--c-white);
	padding: var(--s-16) 0;
	position: relative;
	overflow: hidden;
}
.realizacje-archive__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 50%, rgba(255, 182, 39, 0.15) 0%, transparent 40%),
		radial-gradient(circle at 80% 20%, rgba(242, 124, 31, 0.1) 0%, transparent 40%);
	pointer-events: none;
}
.realizacje-archive__cta-inner {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.realizacje-archive__cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	color: var(--c-accent, #FFB627);
}
.realizacje-archive__cta-eyebrow-line {
	display: inline-block;
	width: 40px;
	height: 2px;
	background: var(--c-accent, #FFB627);
	border-radius: 2px;
}
.realizacje-archive__cta-title {
	font-family: var(--f-headline);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--fw-black);
	line-height: 1.15;
	margin: 0 0 var(--s-4);
	color: var(--c-white);
}
.realizacje-archive__cta-title-mark {
	position: relative;
	display: inline-block;
	color: var(--c-accent, #FFB627);
}
.realizacje-archive__cta-title-mark::before {
	content: '';
	position: absolute;
	left: -4px;
	right: -4px;
	bottom: 4px;
	height: 30%;
	background: rgba(255, 182, 39, 0.25);
	border-radius: 6px;
	z-index: -1;
	transform: skew(-4deg, -1deg);
}
.realizacje-archive__cta-text {
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--s-8);
}
.realizacje-archive__cta-actions {
	display: inline-flex;
	gap: var(--s-4);
	flex-wrap: wrap;
	justify-content: center;
}
.realizacje-archive__cta .btn--outline {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--c-white);
	background: transparent;
}
.realizacje-archive__cta .btn--outline:hover {
	border-color: var(--c-white);
	background: rgba(255, 255, 255, 0.1);
	color: var(--c-white);
}


/* ========================================================
   Realizacje - LISTING (page-realizacje.php + archive-realizacja.php)
   ======================================================== */
.realizacje-lista { background: var(--c-surface); }

/* Grid - 3 kolumny na desktop, 2 na tablet, 1 na mobile */
.realizacje-lista__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 320px;
	gap: var(--s-6);
}
@media (max-width: 900px) { .realizacje-lista__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .realizacje-lista__grid { grid-template-columns: 1fr; grid-auto-rows: 280px; } }

/* Realizacja-card w archive - taki sam jak w home ale bez featured */
.realizacje-lista .realizacja-card { grid-column: span 1; grid-row: span 1; }

/* Pagination */
.realizacje-lista__pagination {
	margin-top: var(--s-12);
	display: flex;
	justify-content: center;
	gap: var(--s-2);
	flex-wrap: wrap;
}
.realizacje-lista__pagination .page-numbers,
.realizacje-lista__pagination .nav-links > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--s-4);
	background: var(--c-white);
	border: 1px solid var(--c-neutral-100);
	border-radius: var(--r-md);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--c-neutral-800);
	text-decoration: none;
	transition: all var(--tr-fast);
}
.realizacje-lista__pagination .page-numbers:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	transform: translateY(-2px);
}
.realizacje-lista__pagination .page-numbers.current {
	background: var(--c-primary);
	color: var(--c-white);
	border-color: var(--c-primary);
}
.realizacje-lista__pagination .page-numbers.dots {
	background: transparent;
	border: 0;
}

/* Notice - gdy brak wpisow, pokazuje sample */
.realizacje-lista__notice {
	padding: var(--s-4) var(--s-6);
	background: rgba(242, 124, 31, 0.08);
	border: 1px solid rgba(242, 124, 31, 0.2);
	border-radius: var(--r-md);
	margin-bottom: var(--s-8);
	color: var(--c-neutral-600);
	font-family: var(--f-body);
	font-size: var(--fs-sm);
}
.realizacje-lista__notice strong { color: var(--c-primary); }

/* Empty state - archive gdy nic */
.realizacje-lista__empty {
	text-align: center;
	padding: var(--s-16) var(--s-6);
	max-width: 500px;
	margin: 0 auto;
}
.realizacje-lista__empty p {
	font-family: var(--f-body);
	font-size: var(--fs-lg);
	color: var(--c-neutral-600);
	margin-bottom: var(--s-4);
}
.realizacje-lista__empty p strong { color: var(--c-neutral-800); font-size: var(--fs-xl); font-family: var(--f-headline); font-weight: var(--fw-black); }
.realizacje-lista__empty .btn { margin-top: var(--s-4); }

/* Realizacje single */
.realizacja-hero {
	background: linear-gradient(135deg, var(--c-primary-50) 0%, var(--c-gray-50) 100%);
	padding: var(--s-16) 0 var(--s-12) !important;
}
.realizacja-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-10); align-items: center; }
@media (max-width: 900px) { .realizacja-hero__grid { grid-template-columns: 1fr; } }

.realizacja-hero__badge {
	display: inline-block;
	max-width: 100%;
	padding: 8px 16px;
	background: var(--c-primary);
	color: var(--c-white);
	border-radius: var(--r-full);
	font-family: var(--f-body);
	font-size: 0.72rem;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.3;
	margin-bottom: var(--s-4);
	white-space: normal;
	word-break: break-word;
}
.realizacja-hero__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--s-6); }

.realizacja-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .realizacja-hero__facts { grid-template-columns: 1fr; } }
.realizacja-hero__facts > div { padding: var(--s-4); background: var(--c-white); border: 1px solid var(--c-gray-100); border-radius: var(--r-md); }
.realizacja-hero__facts dt { font-size: var(--fs-xs); color: var(--c-gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--s-1); }
.realizacja-hero__facts dd { color: var(--c-primary); font-weight: var(--fw-semibold); margin: 0; }

.realizacja-hero__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.realizacja-hero__excerpt { font-size: var(--fs-lg); line-height: 1.6; color: var(--c-neutral-700); margin: var(--s-4) 0 var(--s-6); }
.realizacja-hero__cta { margin-top: var(--s-6); }

/* ========================================================
   REALIZACJA - GALERIA (prosty grid wszystkich zdjec, bez podpisow)
   ======================================================== */
.realizacja-galeria { background: var(--c-gray-50); padding: var(--s-12) 0 var(--s-16); }

.realizacja-galeria__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--s-4);
}

.realizacja-galeria__item {
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	box-shadow: var(--sh-sm);
	background: var(--c-gray-100);
	aspect-ratio: 4 / 3;
	transition:
		transform  400ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.realizacja-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	backface-visibility: hidden;
}
.realizacja-galeria__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-lg);
}
.realizacja-galeria__item:hover img { transform: scale(1.06); }

/* ========================================================
   REALIZACJA - RELATED USŁUGA (mala karta na dole)
   ======================================================== */
.realizacja-related { background: var(--c-white); padding: var(--s-12) 0 var(--s-16); }
.realizacja-related__card {
	background: linear-gradient(135deg, var(--c-primary-50) 0%, var(--c-surface) 100%);
	border: 1px solid var(--c-gray-100);
	border-radius: var(--r-lg);
	padding: var(--s-8);
	text-align: center;
}
.realizacja-related__eyebrow {
	display: inline-block;
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	color: var(--c-primary);
	text-transform: uppercase;
	letter-spacing: var(--ls-widest);
	margin-bottom: var(--s-3);
}
.realizacja-related__title { font-size: var(--fs-xl); margin: 0 0 var(--s-5); }
.realizacja-related__title a { color: var(--c-neutral-900); text-decoration: none; }
.realizacja-related__title a:hover { color: var(--c-primary); }