/*
 * KrokoDent — kontakt.css
 * Style podstrony Kontakt (page-kontakt.php).
 * Ładowane warunkowo przez is_page_template('page-kontakt.php').
 */

/* ════════════════════════════════════════════════════════════════
   HERO KONTAKT
═══════════════════════════════════════════════════════════════════ */

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

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

.kd-contact-hero .hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .45;
}

.kd-contact-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(8,24,12,.88) 0%, rgba(10,28,15,.65) 55%, rgba(8,24,12,.82) 100%);
	z-index: 1;
}

.kd-contact-hero::before {
	content: '';
	position: absolute;
	top: -50%; right: -20%;
	width: 80%; height: 150%;
	background: radial-gradient(circle, rgba(45,122,58,.18) 0%, transparent 70%);
	animation: kdContactGlow 8s ease-in-out infinite;
	z-index: 1;
}

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

.kd-contact-hero .hero-content {
	position: relative;
	z-index: 2;
	max-width: 680px;
}

.kd-contact-hero .breadcrumb-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4, 24px);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.kd-contact-hero .breadcrumb-list li  { font-size: 13px; color: rgba(255,255,255,.55); display: flex; align-items: center; }
.kd-contact-hero .breadcrumb-list a   { color: rgba(255,255,255,.72); }
.kd-contact-hero .breadcrumb-list a:hover { color: #fff; opacity: 1; }
.kd-contact-hero .breadcrumb-list .sep { margin: 0 8px; opacity: .35; }

.kd-contact-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-contact-hero .h1   { color: #fff; margin-bottom: var(--space-4, 24px); }
.lead-hero             { font-size: 19px; line-height: 1.65; color: rgba(255,255,255,.84); max-width: 60ch; margin: 0 0 var(--space-6, 48px); }


/* ════════════════════════════════════════════════════════════════
   QUICK CONTACT STRIP
═══════════════════════════════════════════════════════════════════ */

.quick-contact {
	background: linear-gradient(135deg, #0d3317 0%, #184a22 100%);
	border-bottom: 1px solid rgba(45,122,58,.28);
	padding: var(--space-5, 32px) 0;
}

.quick-contact-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4, 24px);
}

.qc-item {
	display: flex;
	gap: var(--space-3, 16px);
	align-items: flex-start;
}

.qc-icon {
	width: 40px; height: 40px; flex-shrink: 0;
	display: grid; place-items: center;
	border-radius: var(--radius-md, 16px);
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.18);
}

.qc-icon svg {
	width: 18px; height: 18px;
	stroke: rgba(255,255,255,.90);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.qc-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.qc-value { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.45; }
.qc-value a { color: #fff; }
.qc-value a:hover { opacity: .8; }

@media (max-width: 900px) { .quick-contact-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .quick-contact-inner { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════
   LAYOUT FORMULARZ + SIDEBAR
═══════════════════════════════════════════════════════════════════ */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: var(--space-7, 64px);
	padding: var(--space-8, 96px) 0;
	align-items: start;
}

@media (max-width: 1100px) {
	.contact-layout { grid-template-columns: 1fr; gap: var(--space-6, 48px); }
}


/* ════════════════════════════════════════════════════════════════
   KARTA FORMULARZA
═══════════════════════════════════════════════════════════════════ */

.form-card {
	background: #fff;
	border: 1px solid rgba(45,122,58,.14);
	border-radius: var(--radius-xl, 32px);
	padding: var(--space-7, 64px);
	box-shadow: 0 4px 24px rgba(26,46,28,.09);
}

.form-header { margin-bottom: var(--space-6, 48px); }

.form-title {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 700;
	color: var(--text-primary, #1a2e1c);
	margin: var(--space-2, 12px) 0 var(--space-3, 16px);
	letter-spacing: -0.015em;
}

.form-subtitle {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-secondary, rgba(26,46,28,.70));
	margin: 0;
}

/* ── CF7 override ── */
.form-card .wpcf7-form .form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4, 24px);
}

@media (max-width: 640px) { .form-card .wpcf7-form .form-row { grid-template-columns: 1fr; gap: 0; } }

.form-card .wpcf7-form .form-group           { display: block; width: 100%; margin-bottom: var(--space-4, 24px); }
.form-card .wpcf7-form-control-wrap           { display: block; width: 100%; }
.form-card .wpcf7-form .form-label           { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary, #1a2e1c); margin-bottom: var(--space-2, 12px); letter-spacing: .01em; }
.form-card .wpcf7-form .form-label .req      { color: #c0392b; }
.form-card .wpcf7-form .form-note            { font-size: 13px; color: var(--text-muted, rgba(26,46,28,.45)); margin-top: var(--space-4, 24px); }

.form-card .wpcf7-form input[type="text"],
.form-card .wpcf7-form input[type="email"],
.form-card .wpcf7-form input[type="tel"],
.form-card .wpcf7-form input[type="date"],
.form-card .wpcf7-form select,
.form-card .wpcf7-form textarea {
	width: 100%;
	padding: var(--space-3, 16px) var(--space-4, 24px);
	background: rgba(248,249,247,.8);
	border: 1.5px solid rgba(45,122,58,.20);
	border-radius: var(--radius-md, 16px);
	color: #1a2e1c;
	font-family: var(--font-sans, 'Inter', sans-serif);
	font-size: 15px;
	line-height: 1.5;
	transition: all .22s ease;
	appearance: none;
	box-sizing: border-box;
}

.form-card .wpcf7-form input::placeholder,
.form-card .wpcf7-form textarea::placeholder { color: rgba(26,46,28,.36); }

.form-card .wpcf7-form input:focus,
.form-card .wpcf7-form select:focus,
.form-card .wpcf7-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: #2d7a3a;
	box-shadow: 0 0 0 3px rgba(45,122,58,.15);
}

.form-card .wpcf7-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7a3a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 40px;
	cursor: pointer;
}

.form-card .wpcf7-form textarea { resize: vertical; height: 96px; min-height: 96px; }

.form-card .wpcf7-form .form-consent { margin: 0 0 var(--space-4, 24px); }
.form-card .wpcf7-form .form-consent .wpcf7-list-item { margin: 0; }
.form-card .wpcf7-form .form-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
}
.form-card .wpcf7-form .form-consent input[type="checkbox"] {
	appearance: auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #2d7a3a;
}
.form-card .wpcf7-form .form-consent a { color: #165224; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.form-card .wpcf7-form input[type="submit"] {
	width: 100%;
	padding: 18px 32px;
	font-size: 16px;
	border-radius: var(--radius-full, 9999px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 12px);
	font-family: var(--font-sans, 'Inter', sans-serif);
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
	border: 2px solid #2d7a3a;
	background: linear-gradient(135deg, #184a22, #256531, #2f7440);
	color: #fff;
	transition: all .25s ease;
	box-shadow: 0 0 22px rgba(45,122,58,.26), 0 6px 18px rgba(0,0,0,.22);
	margin-top: var(--space-2, 12px);
}

.form-card .wpcf7-form input[type="submit"]:hover {
	background: linear-gradient(135deg, #256531, #3c8a4e);
	border-color: #3d8f4a;
	transform: translateY(-2px);
	box-shadow: 0 0 36px rgba(45,122,58,.38), 0 10px 28px rgba(0,0,0,.28);
}

/* CF7 response messages */
.form-card .wpcf7-response-output {
	border: none !important;
	border-radius: var(--radius-md, 16px) !important;
	padding: var(--space-4, 24px) !important;
	margin-top: var(--space-4, 24px) !important;
	font-size: 15px !important;
}

.form-card .wpcf7-mail-sent-ok    { background: rgba(45,122,58,.10) !important; color: #1f5e2a !important; }
.form-card .wpcf7-validation-errors,
.form-card .wpcf7-mail-sent-ng    { background: rgba(192,57,43,.08) !important; color: #c0392b !important; }

.form-card .wpcf7-not-valid-tip   { color: #c0392b; font-size: 12px; margin-top: 4px; display: block; }
.form-card .wpcf7-not-valid       { border-color: #c0392b !important; }


/* ════════════════════════════════════════════════════════════════
   SIDEBAR — kontenery widgetów
═══════════════════════════════════════════════════════════════════ */

.contact-sidebar { display: flex; flex-direction: column; gap: var(--space-4, 24px); }

/* info-card */
.info-card { background: #fff; border: 1px solid rgba(45,122,58,.13); border-radius: var(--radius-xl, 32px); overflow: hidden; box-shadow: 0 2px 14px rgba(26,46,28,.07); }
.info-card-header { background: linear-gradient(135deg, #0d3317 0%, #1f5e2a 100%); padding: var(--space-5, 32px) var(--space-6, 48px); position: relative; overflow: hidden; }
.info-card-header::before { content: ''; position: absolute; top: -40%; right: -20%; width: 65%; height: 160%; background: radial-gradient(circle, rgba(45,122,58,.30) 0%, transparent 65%); pointer-events: none; }
.info-card-header .kicker { color: #84b38c; position: relative; z-index: 1; }
.info-card-header h2 { font-family: var(--font-serif, 'Playfair Display', serif); font-size: 22px; font-weight: 700; color: #fff; margin: 0; position: relative; z-index: 1; }
.info-card-body { padding: var(--space-5, 32px) var(--space-6, 48px); }

.contact-item { display: flex; gap: var(--space-4, 24px); align-items: flex-start; padding: var(--space-4, 24px) 0; border-bottom: 1px solid rgba(45,122,58,.09); }
.contact-item:last-child  { border-bottom: none; padding-bottom: 0; }
.contact-item:first-child { padding-top: 0; }

.ci-icon { width: 44px; height: 44px; border-radius: var(--radius-md, 16px); background: linear-gradient(135deg, #eaf5ec, #d4ecda); border: 1px solid rgba(45,122,58,.20); display: grid; place-items: center; flex-shrink: 0; }
.ci-icon svg { width: 20px; height: 20px; stroke: #1f5e2a; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ci-label  { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, rgba(26,46,28,.45)); margin-bottom: 4px; }
.ci-value  { font-size: 15px; font-weight: 600; color: var(--text-primary, #1a2e1c); line-height: 1.45; }
.ci-value a { color: var(--text-primary, #1a2e1c); }
.ci-value a:hover { color: var(--green-light, #1f5e2a); opacity: 1; }
.ci-value small { font-size: 13px; font-weight: 400; color: var(--text-secondary, rgba(26,46,28,.70)); display: block; margin-top: 2px; }

.hours-grid  { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2, 12px) var(--space-5, 32px); margin-top: var(--space-2, 12px); }
.hours-day   { font-size: 14px; font-weight: 600; color: var(--text-primary, #1a2e1c); }
.hours-time  { font-size: 14px; color: var(--text-secondary, rgba(26,46,28,.70)); }

/* social-card */
.social-card { background: #fff; border: 1px solid rgba(45,122,58,.13); border-radius: var(--radius-xl, 32px); padding: var(--space-5, 32px) var(--space-6, 48px); box-shadow: 0 2px 14px rgba(26,46,28,.07); }
.social-card h3 { font-family: var(--font-serif, 'Playfair Display', serif); font-size: 20px; color: var(--text-primary, #1a2e1c); margin: var(--space-3, 16px) 0 var(--space-4, 24px); }
.social-links   { display: flex; flex-direction: column; gap: var(--space-3, 16px); }

.social-link { display: flex; align-items: center; gap: var(--space-3, 16px); padding: var(--space-3, 16px) var(--space-4, 24px); border-radius: var(--radius-lg, 24px); border: 1.5px solid rgba(45,122,58,.16); background: rgba(248,249,247,.8); transition: all .22s ease; font-weight: 600; font-size: 14px; color: var(--text-primary, #1a2e1c); }
.social-link:hover { background: #fff; border-color: rgba(45,122,58,.32); transform: translateX(4px); opacity: 1; }
.social-link-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.social-link-icon svg { width: 18px; height: 18px; fill: currentColor; }
.sl-fb .social-link-icon { background: #1877f2; color: #fff; }
.sl-ig .social-link-icon { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.sl-arrow { margin-left: auto; color: var(--text-muted, rgba(26,46,28,.45)); }

/* cta-card-dark */
.cta-card-dark { background: linear-gradient(135deg, #0d3317, #1f5e2a); border-radius: var(--radius-xl, 32px); padding: var(--space-6, 48px); text-align: center; position: relative; overflow: hidden; }
.cta-card-glow { position: absolute; top: -40%; right: -20%; width: 70%; height: 150%; background: radial-gradient(circle, rgba(45,122,58,.28) 0%, transparent 65%); pointer-events: none; }
.cta-card-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #84b38c; display: block; margin-bottom: var(--space-2, 12px); position: relative; z-index: 1; }
.cta-card-title { font-family: var(--font-serif, 'Playfair Display', serif); font-size: 22px; color: #fff; margin: 0 0 var(--space-3, 16px); position: relative; z-index: 1; line-height: 1.25; }
.cta-card-text  { font-size: 14px; color: rgba(255,255,255,.74); margin: 0 0 var(--space-5, 32px); line-height: 1.65; position: relative; z-index: 1; }
.cta-card-btn   { width: 100%; justify-content: center; position: relative; z-index: 1; }


/* ════════════════════════════════════════════════════════════════
   MAPA
═══════════════════════════════════════════════════════════════════ */

.map-section { padding: 0; }

.map-header {
	background: #fff;
	border-left: 1px solid rgba(45,122,58,.13);
	border-right: 1px solid rgba(45,122,58,.13);
	padding: var(--space-6, 48px) var(--space-8, 96px);
}

.map-header-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.map-header-inner p { font-size: 16px; color: var(--text-secondary, rgba(26,46,28,.70)); margin: 0; }

.map-address-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 12px);
	padding: 10px 22px;
	border-radius: var(--radius-full, 9999px);
	background: rgba(45,122,58,.10);
	border: 1px solid rgba(45,122,58,.22);
	font-size: 14px;
	font-weight: 600;
	color: #1f5e2a;
	margin-top: var(--space-3, 16px);
}

.map-address-pill svg { width: 15px; height: 15px; stroke: #2d7a3a; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.map-wrap { border-radius: var(--radius-xl, 32px) var(--radius-xl, 32px) 0 0; overflow: hidden; box-shadow: 0 -4px 24px rgba(26,46,28,.10); position: relative; }
.map-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #143a1d, #2f7b3f, #143a1d); z-index: 2; }
.map-wrap iframe   { display: block; border: none; }


/* ════════════════════════════════════════════════════════════════
   MOBILE — szerokości formularza, sidebara i mapy
═══════════════════════════════════════════════════════════════════ */

.contact-layout > *,
.form-card,
.contact-sidebar,
.contact-sidebar .widget,
.info-card,
.social-card,
.cta-card-dark,
.map-header,
.map-header-inner,
.map-wrap {
	min-width: 0;
	max-width: 100%;
}

.ci-value,
.ci-value a,
.social-link,
.form-consent {
	overflow-wrap: anywhere;
	word-break: normal;
}

@media (max-width: 640px) {
	.contact-layout {
		width: 100%;
		gap: var(--space-5, 32px);
		padding: var(--space-6, 48px) 0;
	}

	.form-card {
		width: 100%;
		padding: var(--space-4, 24px);
		border-radius: var(--radius-lg, 24px);
	}

	.form-header {
		margin-bottom: var(--space-5, 32px);
	}

	.contact-sidebar {
		width: 100%;
		gap: var(--space-3, 16px);
	}

	.info-card,
	.social-card,
	.cta-card-dark {
		width: 100%;
		border-radius: var(--radius-lg, 24px);
	}

	.info-card-header,
	.info-card-body,
	.social-card,
	.cta-card-dark {
		padding: var(--space-4, 24px);
	}

	.contact-item {
		gap: var(--space-3, 16px);
		padding: var(--space-3, 16px) 0;
	}

	.contact-item > div:last-child {
		flex: 1 1 auto;
		min-width: 0;
	}

	.hours-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.hours-time:not(:last-child) {
		margin-bottom: var(--space-2, 12px);
	}

	.map-header {
		width: 100%;
		padding: var(--space-6, 48px) var(--space-4, 24px);
	}

	.map-header-inner {
		width: 100%;
	}

	.map-address-pill {
		max-width: 100%;
		white-space: normal;
		text-align: left;
	}

	.map-address-pill svg {
		flex: 0 0 auto;
	}

	.map-wrap {
		width: 100%;
		border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0;
	}

	.map-wrap iframe {
		width: 100%;
		height: 380px;
	}
}


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

@media (prefers-reduced-motion: reduce) {
	.kd-contact-hero,
	.kd-contact-hero::before,
	.social-link,
	.form-card .wpcf7-form input[type="submit"] {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}

/* Galeria ułatwiająca rozpoznanie lokalizacji. */
.kd-contact-location-gallery {
	padding: clamp(56px, 8vw, 104px) 0;
	background: #f4f8f4;
}

.kd-location-gallery-heading {
	max-width: 760px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.kd-location-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.8vw, 24px);
}

.kd-location-gallery-grid figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg, 24px);
	box-shadow: 0 16px 38px rgba(18, 56, 28, .14);
	aspect-ratio: 4 / 5;
}

.kd-location-gallery-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.kd-location-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.kd-location-gallery-grid { grid-template-columns: 1fr; }
	.kd-location-gallery-grid figure { aspect-ratio: 4 / 3; }
}