/*
 * KrokoDent — downloads.css
 * Style dla strony Do pobrania (page-do-pobrania.php).
 * Shortcodes: [kd_downloads_hero], [kd_downloads], [kd_downloads_cta]
 */


/* ════════════════════════════════════════════════════════════════
   HERO DO POBRANIA
═══════════════════════════════════════════════════════════════════ */

.hero-downloads {
	position: relative;
	min-height: 50vh;
	display: flex;
	align-items: center;
	padding: var(--space-8, 96px) 0 var(--space-7, 64px);
	overflow: hidden;
	background: #0a180c;
}

.hero-downloads-bg {
	position: absolute; inset: 0; z-index: 0;
}

.hero-downloads-bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 35%;
	opacity: .45;
}

.hero-downloads-overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(135deg, rgba(8,24,12,.82) 0%, rgba(10,28,15,.62) 55%, rgba(8,24,12,.80) 100%);
}

.hero-downloads-overlay::after {
	content: '';
	position: absolute; top: -50%; right: -20%;
	width: 80%; height: 150%;
	background: radial-gradient(circle, rgba(45,122,58,.18) 0%, transparent 70%);
	animation: hdGlow 8s ease-in-out infinite;
}

@keyframes hdGlow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.hero-downloads .container {
	position: relative; z-index: 2;
}

.hero-downloads-content { max-width: 720px; }

/* Breadcrumb */
.hero-downloads-content .breadcrumb-list {
	margin-bottom: var(--space-4, 24px);
}

/* Kicker */
.hero-downloads-kicker {
	font-size: 12px; font-weight: 700; letter-spacing: .15em;
	text-transform: uppercase; color: #7ecb8a;
	display: inline-block; margin-bottom: var(--space-3, 16px);
}

/* H1 */
.hero-downloads h1 {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(40px, 5.5vw, 66px);
	line-height: 1.12; font-weight: 700; letter-spacing: -.02em;
	margin: 0 0 var(--space-4, 24px); color: #fff;
}

/* Lead */
.hero-downloads-lead {
	font-size: 19px; line-height: 1.65;
	color: rgba(255,255,255,.80); margin: 0;
}

@media (max-width: 768px) {
	.hero-downloads { min-height: 38vh; padding: var(--space-7, 64px) 0; }
}


/* ════════════════════════════════════════════════════════════════
   DOCUMENTS GRID
═══════════════════════════════════════════════════════════════════ */

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

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

/* Card */
.doc-card {
	background: #fff;
	border: 1px solid rgba(45,122,58,.12);
	border-radius: var(--radius-lg, 24px);
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(26,46,28,.07);
	transition: all .3s cubic-bezier(.4,0,.2,1);
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	cursor: pointer;
	position: relative;
}

.doc-card::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, #143a1d, #2f7b3f);
	transform: scaleX(0); transform-origin: left;
	transition: transform .3s ease; z-index: 2;
}

.doc-card:hover                { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(26,46,28,.14); border-color: rgba(45,122,58,.26); }
.doc-card:hover::before        { transform: scaleX(1); }

/* Image */
.doc-card-image {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #eaf5ec, #deeee1);
}

.doc-card-image img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .5s ease;
}

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

.doc-card-image::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(8,20,10,.55) 100%);
}

/* PDF badge */
.doc-pdf-badge {
	position: absolute; bottom: 12px; left: 14px; z-index: 2;
	display: flex; align-items: center; gap: 6px;
	background: rgba(10,28,14,.72);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(45,122,58,.35);
	border-radius: var(--radius-full, 9999px);
	padding: 5px 12px;
}

.doc-pdf-badge svg   { width: 14px; height: 14px; stroke: #7ecb8a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.doc-pdf-badge span  { font-size: 11px; font-weight: 700; letter-spacing: .10em; color: #a8e0b0; text-transform: uppercase; }

/* Card body */
.doc-card-body {
	padding: var(--space-5, 32px);
	flex: 1; display: flex; flex-direction: column; gap: var(--space-3, 16px);
}

.doc-category {
	font-size: 11px; font-weight: 700; letter-spacing: .10em;
	text-transform: uppercase; color: #2d7a3a;
}

.doc-card-title {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(17px, 1.8vw, 21px);
	font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
	color: var(--text-primary, #1a2e1c);
	margin: 0;
}

.doc-card-desc {
	font-size: 14px; line-height: 1.65;
	color: var(--text-secondary, rgba(26,46,28,.70));
	margin: 0; flex: 1;
}

/* Download button */
.doc-download-btn {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: auto;
	padding: 11px 22px;
	border-radius: var(--radius-full, 9999px);
	font-size: 14px; font-weight: 700; letter-spacing: .02em;
	background: linear-gradient(135deg, #184a22, #256531, #2f7440);
	color: #fff;
	border: 2px solid #2d7a3a;
	transition: all .25s ease;
	position: relative; overflow: hidden;
	align-self: flex-start;
	text-decoration: none;
}

.doc-download-btn::after {
	content: '';
	position: absolute; top: -50%; left: -100%;
	width: 100%; height: 200%;
	background: linear-gradient(90deg, transparent, rgba(200,230,205,.35), transparent);
	transform: skewX(-25deg);
	transition: left .5s ease;
}

.doc-card:hover .doc-download-btn::after { left: 100%; }
.doc-card:hover .doc-download-btn {
	background: linear-gradient(135deg, #256531, #3c8a4e);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(45,122,58,.28);
}

.doc-download-btn svg {
	width: 16px; height: 16px;
	stroke: currentColor; fill: none;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
	transition: transform .2s ease;
}

.doc-card:hover .doc-download-btn svg { transform: translateY(2px); }

.doc-download-btn--unavailable {
	background: rgba(45,122,58,.08);
	color: var(--text-muted, rgba(26,46,28,.45));
	border-color: rgba(45,122,58,.15);
	font-size: 13px; font-weight: 500;
}

@media (max-width: 900px) { .docs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .docs-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════
   CTA BANNER (downloads-specific)
═══════════════════════════════════════════════════════════════════ */

.cta-banner {
	background: linear-gradient(135deg, #0d3317 0%, #143a1d 40%, #1f5e2a 100%);
	border-top: 1px solid rgba(45,122,58,.28);
	border-bottom: 1px solid rgba(45,122,58,.28);
	padding: var(--space-8, 96px) 0;
	text-align: center;
	position: relative; overflow: hidden;
}

.cta-banner::before {
	content: '';
	position: absolute; top: -50%; right: -15%;
	width: 60%; height: 200%;
	background: radial-gradient(circle, rgba(45,122,58,.22) 0%, transparent 65%);
	pointer-events: none;
}

.cta-banner-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }

.cta-banner-kicker {
	font-size: 12px; font-weight: 700; letter-spacing: .15em;
	text-transform: uppercase; color: #7ecb8a;
	display: inline-block; margin-bottom: var(--space-3, 16px);
}

.cta-banner h2 {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 700; color: #fff;
	margin: 0 0 var(--space-3, 16px); letter-spacing: -.015em;
}

.cta-banner p {
	font-size: 18px; color: rgba(255,255,255,.75);
	margin: 0 auto var(--space-5, 32px); max-width: 52ch;
}

.cta-banner-btns {
	display: flex; gap: var(--space-3, 16px);
	justify-content: center; flex-wrap: wrap;
}

/* btn-ghost na ciemnym tle — własna klasa żeby nie kolidować z global.css */
.cta-banner-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 12px);
	padding: 16px 32px;
	border-radius: var(--radius-full, 9999px);
	font-family: var(--font-sans, 'Inter', sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	background: rgba(255,255,255,.15) !important;
	color: #ffffff !important;
	border: 2px solid rgba(255,255,255,.50) !important;
	transition: all .25s cubic-bezier(.4,0,.2,1);
}

.cta-banner-ghost:hover {
	background: rgba(255,255,255,.28) !important;
	border-color: rgba(255,255,255,.80) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
}

@media (max-width: 480px) {
	.cta-banner-btns { flex-direction: column; align-items: stretch; }
}


/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.hero-downloads-overlay::after,
	.doc-card, .doc-card-image img,
	.doc-download-btn, .doc-download-btn::after
	{ animation: none !important; transition-duration: .01ms !important; }
}