/*
 * KrokoDent — oferta-archive.css
 * Style dla archive-kd_usluga.php (strona /oferta/).
 * Zależy od oferta.css (hero styles).
 */


/* ════════════════════════════════════════════════════════════════
   HERO BREADCRUMB (reuse z oferta.css + onas.css)
═══════════════════════════════════════════════════════════════════ */

.kd-archive-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.kd-archive-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.kd-archive-hero .container  { position: relative; z-index: 2; }

.kd-archive-hero .breadcrumb-list {
	list-style: none; padding: 0; margin: 0 0 var(--space-4, 24px);
	display: flex; align-items: center; flex-wrap: wrap;
}
.kd-archive-hero .breadcrumb-list li { font-size: 13px; color: rgba(255,255,255,.58); display: flex; align-items: center; }
.kd-archive-hero .breadcrumb-list a  { color: rgba(255,255,255,.72); }
.kd-archive-hero .breadcrumb-list a:hover { color: #fff; opacity: 1; }
.kd-archive-hero .breadcrumb-list .sep   { margin: 0 8px; opacity: .35; }

.kd-archive-hero .preheader {
	font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: #84b38c;
	display: inline-block; margin-bottom: var(--space-3, 16px);
}

.kd-archive-hero .h1       { color: #fff; margin-bottom: var(--space-3, 16px); }
.kd-archive-hero .lead-hero { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.84); max-width: 60ch; margin: 0; }

/* ════════════════════════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════════════════════════ */

.filter-bar {
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(45,122,58,.14);
	padding: var(--space-3, 16px) 0;
	position: sticky;
	top: 0;
	z-index: 50;
}

.filter-inner {
	display: flex;
	gap: var(--space-2, 12px);
	flex-wrap: wrap;
	align-items: center;
}

.filter-chip {
	padding: 8px 18px;
	border-radius: var(--radius-full, 9999px);
	font-size: 13px; font-weight: 600; letter-spacing: .02em;
	border: 1.5px solid rgba(45,122,58,.22);
	background: rgba(255,255,255,.80);
	color: var(--text-secondary, rgba(26,46,28,.70));
	cursor: pointer;
	white-space: nowrap;
	transition: all .2s ease;
}

.filter-chip:hover {
	border-color: rgba(45,122,58,.50);
	color: #1f5e2a;
	background: rgba(45,122,58,.06);
}

.filter-chip.active {
	background: linear-gradient(135deg, #184a22, #256531);
	color: #fff;
	border-color: #2d7a3a;
	box-shadow: 0 4px 12px rgba(45,122,58,.22);
}

@media (max-width: 640px) { .filter-inner { gap: 8px; } .filter-chip { font-size: 12px; padding: 7px 14px; } }


/* ════════════════════════════════════════════════════════════════
   SERVICES GRID
═══════════════════════════════════════════════════════════════════ */

.services-section { padding: var(--space-8, 96px) 0; }

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5, 32px);
}

.service-card {
	position: relative;
	display: block;
	border-radius: var(--radius-lg, 24px);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 4px 24px rgba(26,46,28,.10);
}

.service-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.4,0,.2,1);
	display: block;
}

.service-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,24,12,.08) 0%, rgba(8,24,12,.72) 70%, rgba(8,24,12,.92) 100%);
	transition: background .3s ease;
}

.service-card:hover .service-overlay {
	background: linear-gradient(180deg, rgba(8,24,12,.12) 0%, rgba(8,24,12,.80) 60%, rgba(8,24,12,.95) 100%);
}

.service-card:hover .service-img { transform: scale(1.06); }

.service-card.hidden { display: none; }

/* Category badge */
.service-cat {
	position: absolute; top: var(--space-4, 24px); left: var(--space-4, 24px);
	z-index: 2;
	font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--radius-full, 9999px);
	background: rgba(255,255,255,.20);
	border: 1px solid rgba(255,255,255,.35);
	color: rgba(255,255,255,.92);
	backdrop-filter: blur(6px);
	transition: background .2s ease;
}

.service-card:hover .service-cat {
	background: rgba(45,122,58,.50);
	border-color: rgba(45,122,58,.60);
	color: #fff;
}

/* Card body */
.service-body {
	position: absolute; bottom: 0; left: 0; right: 0;
	z-index: 2;
	padding: var(--space-5, 32px);
}

.service-name {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 var(--space-3, 16px);
	line-height: 1.2;
	letter-spacing: -.01em;
}

.service-read-more {
	font-size: 13px; font-weight: 600; letter-spacing: .06em;
	color: rgba(255,255,255,.80);
	display: flex; align-items: center; gap: 6px;
	transition: color .2s ease, gap .2s ease;
}

.service-card:hover .service-read-more { color: #84b38c; gap: 10px; }
.arrow { transition: transform .2s ease; }
.service-card:hover .arrow { transform: translateX(4px); }

@media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .services-grid { grid-template-columns: 1fr; gap: var(--space-4, 24px); } .service-card { aspect-ratio: 3 / 2; } }


/* ════════════════════════════════════════════════════════════════
   RESULTS STRIP (2 kolumny: tekst + slider)
═══════════════════════════════════════════════════════════════════ */

.results-section { padding: var(--space-8, 96px) 0; }

.results-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7, 64px);
	align-items: center;
}

.results-text .kicker { display: inline-block; margin-bottom: var(--space-2, 12px); }
.results-text .h2     { margin-bottom: var(--space-4, 24px); }
.results-text p       { font-size: 16px; line-height: 1.75; color: var(--text-secondary, rgba(26,46,28,.70)); margin: 0 0 var(--space-5, 32px); }

/* Slider */
.results-slider {
	position: relative;
	border-radius: var(--radius-xl, 32px);
	overflow: hidden;
	box-shadow: 0 6px 32px rgba(26,46,28,.14);
}

.slider-track {
	display: flex;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
	will-change: transform;
}

.slider-slide         { min-width: 100%; }
.slider-slide img     { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.slider-btns {
	position: absolute; bottom: var(--space-4, 24px);
	left: 50%; transform: translateX(-50%);
	display: flex; gap: var(--space-2, 12px);
	z-index: 3;
}

.slider-btn {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	background: rgba(255,255,255,.20);
	backdrop-filter: blur(8px);
	border: 2px solid rgba(255,255,255,.80);
	border-radius: 50%;
	color: #fff; font-size: 20px;
	cursor: pointer;
	transition: all .25s ease;
}

.slider-btn:hover { background: rgba(255,255,255,.35); transform: scale(1.07); }

.slider-dots {
	position: absolute; bottom: var(--space-4, 24px);
	right: var(--space-4, 24px);
	display: flex; gap: 6px; z-index: 3;
}

.slider-dot {
	width: 8px; height: 8px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.60);
	background: rgba(255,255,255,.30);
	cursor: pointer; transition: all .2s ease;
	padding: 0;
}

.slider-dot.active { background: #fff; border-color: #fff; }

@media (max-width: 900px) {
	.results-layout { grid-template-columns: 1fr; }
	.results-slider { max-width: 600px; }
}


/* ════════════════════════════════════════════════════════════════
   ABOUT STRIP
═══════════════════════════════════════════════════════════════════ */

.about-strip {
	background: var(--bg-teal, #eaf2ec);
	border-top: 1px solid rgba(45,122,58,.16);
	border-bottom: 1px solid rgba(45,122,58,.16);
	padding: var(--space-8, 96px) 0;
	overflow: hidden;
}

.about-strip-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7, 64px);
	align-items: center;
}

.about-strip-img {
	position: relative;
	border-radius: var(--radius-xl, 32px);
	overflow: hidden;
}

.about-strip-img img {
	width: 100%; display: block;
	object-fit: cover;
	transition: transform .5s ease;
}

.about-strip:hover .about-strip-img img { transform: scale(1.02); }

.about-strip-text .kicker { color: #2d7a3a; display: inline-block; margin-bottom: var(--space-3, 16px); }

.about-strip-text h2 {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
	color: var(--text-primary, #1a2e1c);
	margin: 0 0 var(--space-4, 24px);
}

.about-strip-text h2 span {
	color: #2d7a3a;
	font-size: .7em;
}

.about-strip-text p {
	font-size: 16px; line-height: 1.75;
	color: var(--text-secondary, rgba(26,46,28,.70));
	margin: 0 0 var(--space-5, 32px);
}

.about-strip-btns {
	display: flex; gap: var(--space-3, 16px); flex-wrap: wrap;
}

.about-strip .btn-outline {
	background: transparent;
	color: #2d7a3a;
	border: 2px solid #2d7a3a;
}

.about-strip .btn-outline:hover {
	background: linear-gradient(135deg, #184a22, #2f7440);
	color: #fff; border-color: #3d8f4a;
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.about-strip-inner { grid-template-columns: 1fr; }
	.about-strip-img   { max-width: 480px; margin: 0 auto; }
}