/* ============================================================
   kontakt.css — Kontakt page styles scoped to .page-kontakt.
   .polaroid here is DIFFERENT from .page-preco-cv .polaroid
   (audit-flagged collision resolved via body class scoping).
   ============================================================ */

/* ============ HERO with Caveat signoff ============ */
.page-kontakt .hero { padding: 40px 0 60px; position: relative; }
.page-kontakt .hero h1 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 96px;
	line-height: 1.02;
	letter-spacing: -.02em;
	max-width: 1100px;
	color: var(--ink);
	text-wrap: balance;
}
.page-kontakt .hero h1 .i { font-style: italic; color: var(--forest); }
.page-kontakt .hero h1 .t { font-style: italic; color: var(--terra-text); }
.page-kontakt .hero-lead {
	margin-top: 30px;
	font-size: 21px;
	line-height: 1.6;
	color: var(--ink2);
	max-width: 780px;
	text-wrap: pretty;
}
.page-kontakt .hero-lead strong { color: var(--ink); font-weight: 600; }
.page-kontakt .hero-lead em { font-style: italic; color: var(--forest); }
.page-kontakt .hero .signoff {
	position: absolute;
	top: 60px;
	right: 60px;
	font-family: var(--font-script);
	font-size: 30px;
	color: var(--terra-text);
	transform: rotate(-5deg);
	line-height: 1.2;
	text-align: center;
	max-width: 200px;
}
.page-kontakt .hero .signoff .arr {
	display: block;
	font-size: 46px;
	line-height: .5;
	margin-top: 6px;
	margin-left: 40px;
}

/* ============ CONTACT MAIN — polaroid + form side by side ============ */
.page-kontakt .contact-main { padding: 30px 0 80px; }
.page-kontakt .cm-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: start;
}

/* Filip polaroid (distinct from preco-cv polaroid) */
.page-kontakt .polaroid {
	background: var(--cream3);
	padding: 34px 34px 40px;
	box-shadow:
		0 2px 0 rgba(31,26,23,.06),
		0 30px 70px -30px rgba(31,26,23,.3);
	transform: rotate(-1.4deg);
	position: relative;
	border: 1px solid rgba(31,26,23,.05);
}
.page-kontakt .polaroid::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%) rotate(-3deg);
	width: 160px;
	height: 28px;
	background: rgba(201,122,91,.32);
	border: 1px dashed rgba(201,122,91,.5);
}
.page-kontakt .polaroid .stamp {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: var(--font-script);
	font-size: 22px;
	color: var(--terra-text);
	transform: rotate(8deg);
}
.page-kontakt .avatar-row {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 14px;
}
.page-kontakt .avatar {
	width: 108px;
	height: 108px;
	border-radius: 50%;
	background: var(--terra);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 72px;
	color: var(--cream3);
	line-height: 1;
	box-shadow: 0 6px 20px -6px rgba(201,122,91,.4);
	flex-shrink: 0;
	overflow: hidden;
}
.page-kontakt .avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
.page-kontakt .avatar-row .nm h2 {
	font-family: var(--font-serif);
	font-size: 38px;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--ink);
}
.page-kontakt .avatar-row .nm h2 .i { font-style: italic; color: var(--forest); }
.page-kontakt .avatar-row .nm .role {
	margin-top: 6px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 17px;
	color: var(--terra-text);
}
.page-kontakt .bio {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed var(--dash);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 17px;
	color: var(--ink2);
	line-height: 1.55;
}
.page-kontakt .bio strong {
	color: var(--forest);
	font-style: normal;
	font-weight: 600;
	font-family: var(--font-sans);
}

/* Contact rows (email, phone, whatsapp) */
.page-kontakt .contacts {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-kontakt .ct-row {
	background: var(--cream);
	border: 1.5px solid rgba(31,26,23,.08);
	border-radius: 14px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: all .15s;
	cursor: pointer;
}
.page-kontakt .ct-row:hover {
	border-color: var(--terra);
	background: var(--terra-soft);
}
.page-kontakt .ct-row .ico {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--forest);
	color: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.page-kontakt .ct-row .info { flex: 1; }
.page-kontakt .ct-row .lbl {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--terra-text);
}
.page-kontakt .ct-row .val {
	margin-top: 3px;
	font-family: var(--font-serif);
	font-size: 20px;
	color: var(--ink);
	letter-spacing: -.005em;
}
.page-kontakt .ct-row .val .i { font-style: italic; color: var(--forest); }
.page-kontakt .ct-row .hrs {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 13px;
	color: var(--ink3);
	margin-top: 2px;
}
.page-kontakt .ct-row.primary {
	background: var(--forest);
	border-color: var(--forest);
}
.page-kontakt .ct-row.primary .ico {
	background: var(--terra);
	color: #fff;
}
.page-kontakt .ct-row.primary .lbl { color: var(--terra-l); }
.page-kontakt .ct-row.primary .val { color: var(--cream); }
.page-kontakt .ct-row.primary .val .i { color: var(--terra-l); }
.page-kontakt .ct-row.primary:hover { background: var(--forest2); }

.page-kontakt .sig {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px dashed var(--dash);
	font-family: var(--font-script);
	font-size: 32px;
	color: var(--terra-text);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.page-kontakt .sig .time {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	color: var(--ink3);
}

/* ============ FORM CARD ============ */
.page-kontakt .form-card {
	background: var(--cream3);
	border-radius: 24px;
	padding: 44px 42px;
	border: 1px solid rgba(31,26,23,.05);
	box-shadow:
		0 1px 0 rgba(31,26,23,.04),
		0 16px 40px -22px rgba(31,26,23,.18);
}
.page-kontakt .form-card .kicker { margin-bottom: 14px; }
.page-kontakt .form-card h3 {
	font-family: var(--font-serif);
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--ink);
	text-wrap: balance;
}
.page-kontakt .form-card h3 .i { font-style: italic; color: var(--forest); }
.page-kontakt .form-card > p.intro {
	margin-top: 12px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--ink2);
	line-height: 1.55;
}
.page-kontakt .form {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.page-kontakt .f-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.page-kontakt .f-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.page-kontakt .f-field.full { grid-column: 1 / -1; }
.page-kontakt .f-field label {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terra-text);
}
.page-kontakt .f-field label .opt {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 11px;
	font-weight: 400;
	color: var(--ink3);
	text-transform: none;
	letter-spacing: 0;
	margin-left: 6px;
}
.page-kontakt .f-field input,
.page-kontakt .f-field select,
.page-kontakt .f-field textarea {
	background: var(--cream);
	border: 1.5px solid rgba(31,26,23,.12);
	border-radius: 12px;
	padding: 13px 16px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--ink);
	outline: none;
	transition: border .15s;
	width: 100%;
}
.page-kontakt .f-field input:focus,
.page-kontakt .f-field select:focus,
.page-kontakt .f-field textarea:focus {
	border-color: var(--terra);
	background: var(--cream3);
}
.page-kontakt .f-field select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23C97A5B' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 42px;
	cursor: pointer;
}
.page-kontakt .f-field textarea {
	resize: vertical;
	min-height: 120px;
	font-family: var(--font-sans);
	line-height: 1.6;
}
.page-kontakt .f-field input::placeholder,
.page-kontakt .f-field textarea::placeholder {
	color: var(--ink3);
	font-family: var(--font-serif);
	font-style: italic;
}
.page-kontakt .check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--terra-soft);
	border-radius: 12px;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: all .15s;
}
.page-kontakt .check:hover { border-color: var(--terra); }
.page-kontakt .check input {
	appearance: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--terra);
	border-radius: 6px;
	background: var(--cream3);
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 1px;
	position: relative;
	transition: all .15s;
}
.page-kontakt .check input:checked { background: var(--terra); }
.page-kontakt .check input:checked::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
.page-kontakt .check span {
	font-family: var(--font-serif);
	font-size: 16px;
	color: var(--ink);
	line-height: 1.5;
}
.page-kontakt .check span .i { font-style: italic; color: var(--forest); }
.page-kontakt .submit-row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.page-kontakt .submit-row button {
	background: var(--forest);
	color: var(--cream);
	border: none;
	border-radius: 999px;
	padding: 16px 32px;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 0 var(--forest2);
	transition: all .15s;
}
.page-kontakt .submit-row button:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--forest2);
}
.page-kontakt .micro {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 15px;
	color: var(--ink3);
	line-height: 1.4;
}
.page-kontakt .micro strong {
	color: var(--forest);
	font-style: normal;
	font-weight: 600;
	font-family: var(--font-sans);
}

/* ============ SECTION OVERRIDE ============ */
.page-kontakt .section { padding: 30px 0 80px; }
.page-kontakt .sec-head { max-width: 900px; margin-bottom: 44px; }
.page-kontakt .sec-title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--ink);
	text-wrap: balance;
}

/* ============ CONSULTATION CTA (huge "30" bg number) ============ */
.page-kontakt .consult {
	background: var(--cream3);
	border-radius: 28px;
	padding: 52px 56px;
	border: 1px solid rgba(31,26,23,.06);
	box-shadow:
		0 1px 0 rgba(31,26,23,.04),
		0 16px 40px -20px rgba(31,26,23,.15);
	display: grid;
	grid-template-columns: 1.3fr .9fr;
	gap: 56px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.page-kontakt .consult::before {
	content: "30";
	position: absolute;
	right: -40px;
	top: -60px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 340px;
	color: var(--terra-soft);
	line-height: .8;
	letter-spacing: -.04em;
	z-index: 0;
}
.page-kontakt .consult::after {
	content: "min · zdarma";
	position: absolute;
	right: 120px;
	top: 160px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 32px;
	color: var(--terra-soft);
	z-index: 0;
}
.page-kontakt .consult > * { position: relative; z-index: 1; }
.page-kontakt .consult h3 {
	font-family: var(--font-serif);
	font-size: 50px;
	line-height: 1.06;
	color: var(--ink);
	letter-spacing: -.01em;
	text-wrap: balance;
	max-width: 580px;
}
.page-kontakt .consult h3 .i { font-style: italic; color: var(--terra-text); }
.page-kontakt .consult p {
	margin-top: 18px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink2);
	max-width: 540px;
}
.page-kontakt .consult p em { font-style: italic; color: var(--forest); }
.page-kontakt .consult .act {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
.page-kontakt .consult .act .note {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	color: var(--ink3);
}

/* ============ EXPECTATIONS — 4 cards ============ */
.page-kontakt .exp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.page-kontakt .exp {
	background: var(--cream3);
	border-radius: 18px;
	padding: 28px 26px;
	border: 1px solid rgba(31,26,23,.05);
	box-shadow: 0 1px 0 rgba(31,26,23,.04);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.page-kontakt .exp .ico-big {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--terra-soft);
	color: var(--terra-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
}
.page-kontakt .exp h4 {
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.2;
	color: var(--ink);
	letter-spacing: -.005em;
}
.page-kontakt .exp h4 .i { font-style: italic; color: var(--forest); }
.page-kontakt .exp p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink2);
}
.page-kontakt .exp p strong { color: var(--ink); font-weight: 600; }

/* ============ COMPANY INFO BOX ============ */
.page-kontakt .company {
	background: var(--cream2);
	border-radius: 20px;
	padding: 32px 36px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 40px;
	align-items: center;
	border: 1px dashed rgba(31,26,23,.18);
}
.page-kontakt .company .ct h5 {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 22px;
	color: var(--terra-text);
	margin-bottom: 10px;
}
.page-kontakt .company .ct .info {
	font-family: var(--font-serif);
	font-size: 18px;
	color: var(--ink);
	line-height: 1.5;
}
.page-kontakt .company .ct .info strong {
	font-style: normal;
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--ink);
}
.page-kontakt .company .ct .info .dt {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--ink3);
	font-size: 15px;
	margin-top: 8px;
}
.page-kontakt .company .links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
.page-kontakt .doc-link {
	background: var(--cream3);
	border: 1.5px solid rgba(31,26,23,.1);
	padding: 10px 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--ink2);
	transition: all .15s;
}
.page-kontakt .doc-link:hover {
	border-color: var(--terra);
	color: var(--terra-text);
	background: var(--terra-soft);
}
.page-kontakt .doc-link .pdf {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--terra-text);
	font-size: 13px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.page-kontakt .hero h1 { font-size: 64px; }
	.page-kontakt .hero .signoff { display: none; }
	.page-kontakt .cm-grid { grid-template-columns: 1fr; }
	.page-kontakt .consult { grid-template-columns: 1fr; padding: 40px 36px; }
	.page-kontakt .consult::before { font-size: 240px; top: -40px; right: -60px; }
	.page-kontakt .consult::after { display: none; }
	.page-kontakt .exp-grid { grid-template-columns: repeat(2, 1fr); }
	.page-kontakt .company { grid-template-columns: 1fr; }
	.page-kontakt .company .links { justify-content: flex-start; }
}
@media (max-width: 640px) {
	.page-kontakt .hero h1 { font-size: 44px; }
	.page-kontakt .exp-grid { grid-template-columns: 1fr; }
	.page-kontakt .f-row { grid-template-columns: 1fr; }
	.page-kontakt .consult h3 { font-size: 32px; }
	.page-kontakt .avatar-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}