/* ==========================================================================
   page-kontakt — Kontakt page styles.

   Layout (top-to-bottom):
     - .kontakt-header     — compact intro: eyebrow + H1 + lead
     - .kontakt-grid       — 2-col on ≥900: LEFT col = person card +
                             .kontakt-boxes (grid of gray surface tiles
                             with eyebrow + icon + content), RIGHT col =
                             full inquiry form (embedded form-section).
                             Stacks vertically on mobile.

   Left column structure:
     .kontakt-person       — admin contact (avatar + role)
     .kontakt-boxes        — flex-column of contact tiles + 2-col phone/email row
       .kontakt-boxes__row — 2-col grid (Telefon | E-mail) on ≥640
       .kontakt-box        — single gray surface tile (Adres / Godziny / etc.)

   Form section reuses the global `.form-section` styles.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */
.kontakt-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 720px;
}

.kontakt-header__title {
	font-size: clamp(2rem, 5.5vw, 3rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-text);
	margin: 0;
}

.kontakt-header__lead {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-body);
	margin: 0;
}

/* -------------------------------------------------------------------------- */
/* 2-col grid: list + form                                                    */
/* -------------------------------------------------------------------------- */
.kontakt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

@media (min-width: 900px) {
	.kontakt-grid {
		/* 50/50 split — list + person card on the left, form on the right,
		 * equal-width columns with a 2rem gap between. */
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		align-items: stretch;
	}
}

/* -------------------------------------------------------------------------- */
/* Contact list — 40px circle icons + content stack. No uppercase labels;    */
/* the icon alone signals row type (phone / mail / pin / clock / FB).        */
/* The kontakt-boxes set sits below the person card. Each box is its own
 * gray surface card with eyebrow label + icon up top, then content body.
 * `.kontakt-boxes` grows to fill leftover height under person card so the
 * left column matches the form-section height on the right (grid
 * `align-items: stretch` + `flex: 1`).
 * -------------------------------------------------------------------------- */
.kontakt-boxes {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

/* Row 1 — phone + email side by side on ≥640, stacked below. */
.kontakt-boxes__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 640px) {
	.kontakt-boxes__row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Each contact box — white tile (sitting on the gray .kontakt-left-col
 * surface) with internal header (icon + eyebrow) and a body (main line +
 * optional sub line). */
.kontakt-box {
	background-color: var(--color-bg);
	border-radius: var(--radius-lg);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
@media (min-width: 900px) {
	.kontakt-box {
		padding: 22px 24px;
	}
}

.kontakt-box__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.kontakt-box__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
}
.kontakt-box__icon svg {
	width: 18px;
	height: 18px;
	display: block;
}
.kontakt-box__eyebrow {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
}

.kontakt-box__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-style: normal; /* reset <address> italics */
}
.kontakt-box__main {
	color: var(--color-text);
	font-size: 1.05rem;
	line-height: var(--lh-tight);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	word-break: break-word;
}
a.kontakt-box__main:hover {
	color: var(--color-brand);
}
.kontakt-box__sub {
	color: var(--color-text-soft);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	line-height: var(--lh-tight);
	text-decoration: none;
}
a.kontakt-box__sub:hover {
	color: var(--color-brand);
}

/* Hours box — dl with day:time rows, divider line between rows. */
.kontakt-box__hours {
	display: flex;
	flex-direction: column;
	margin: 0;
}
.kontakt-box__hours-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-md);
	padding: 8px 0;
}
.kontakt-box__hours-row:first-child {
	padding-top: 0;
}
.kontakt-box__hours-row:last-child {
	padding-bottom: 0;
}
.kontakt-box__hours-row dt,
.kontakt-box__hours-row dd {
	margin: 0;
	font-size: 1rem;
	line-height: var(--lh-tight);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}
.kontakt-box__hours-row.is-closed dt,
.kontakt-box__hours-row.is-closed dd {
	color: var(--color-text-soft);
	font-weight: var(--fw-regular);
}

/* -------------------------------------------------------------------------- */
/* Left column — gray surface card wrapping person card + contact boxes.     */
/* Inner items (.kontakt-person, .kontakt-box) are white tiles on the gray   */
/* surface; produces an inverted "card-in-card" look matching the design.    */
/* -------------------------------------------------------------------------- */
.kontakt-left-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background-color: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: 24px;
}

@media (min-width: 640px) {
	.kontakt-left-col {
		padding: 32px;
	}
}

@media (min-width: 900px) {
	.kontakt-left-col {
		padding: 50px;
	}
}

/* -------------------------------------------------------------------------- */
/* Form slot (right column on ≥900, stacked below on mobile).                 */
/*                                                                            */
/* On mobile (<900) the form-slot gets the same gray surface + padding ladder */
/* as .kontakt-left-col so both stacked columns share a consistent card-look  */
/* instead of the form floating edge-to-edge while the info card has padding. */
/* On desktop (≥900) the form sits in its own form-section--embedded mode     */
/* (no surface, no extra padding) — the slot becomes a transparent grid cell. */
/* -------------------------------------------------------------------------- */
.kontakt-form-slot {
	display: flex;
	background-color: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: 24px;
}
.kontakt-form-slot > * {
	flex: 1; /* embedded form-section fills the slot edge-to-edge */
}

@media (min-width: 640px) {
	.kontakt-form-slot {
		padding: 32px;
	}
}

@media (min-width: 900px) {
	/* Desktop: form sits in its own form-section flow — drop the wrapper bg/
	 * padding so we don't double-surface (the form-section already has its
	 * own design language). */
	.kontakt-form-slot {
		background-color: transparent;
		border-radius: 0;
		padding: 0;
	}
}

/* No max-width override needed — the 50/50 grid already narrows the form
 * to half the container; an extra cap would shrink it past readable form
 * dimensions. */

/* Embedded form-section override — drops the row-layout-with-illustration
 * mode the default form-section has from 640px up. Without the illustration
 * child there's nothing to lay out next to the copy, so stay column. Also
 * lift the copy's max-width so the form fields use the full slot width. */
.form-section.form-section--embedded {
	flex-direction: column;
	gap: 0;
}
.form-section.form-section--embedded .form-section__copy {
	max-width: none;
	flex-shrink: 1;
}

/* -------------------------------------------------------------------------- */
/* Person card — white tile inside the gray left-col wrapper.                 */
/* -------------------------------------------------------------------------- */
.kontakt-person {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	background-color: var(--color-bg);
	border-radius: var(--radius-lg);
}

.kontakt-person__avatar {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	/* Avatar circle on white person card — soft gray so the photo/initials read
	 * cleanly even before the <img> is loaded. */
	background-color: var(--color-surface);
	color: var(--color-text-muted);
}
.kontakt-person__avatar svg {
	width: 40px;
	height: 40px;
	display: block;
}

/* Photo variant — <img> fills the circle edge-to-edge instead of an inset
 * icon. Drop the icon-tint bg + color and clip the image to the radius.
 * Belt-and-braces: overflow:hidden on parent + border-radius:50% on img so
 * the photo is round regardless of inline-flex / object-fit quirks. */
.kontakt-person__avatar--photo {
	background-color: transparent;
	overflow: hidden;
	padding: 0;
}
.kontakt-person__avatar--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.kontakt-person__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kontakt-person__eyebrow {
	color: var(--color-brand);
	font-size: var(--fs-xs, 0.72rem);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: var(--lh-tight);
}

.kontakt-person__name {
	font-size: 1.05rem;
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	line-height: var(--lh-tight);
}

.kontakt-person__role {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-tight);
}

/* -------------------------------------------------------------------------- */
/* Inquiry form — full contact form variant (name + phone + email + message). */
/* Adds email + textarea field styling (mirroring text/tel rules from         */
/* components.css) plus a 2-col field row for phone+email side-by-side.      */
/* -------------------------------------------------------------------------- */
.form-section--inquiry .form-field input[type="email"],
.form-section--inquiry .form-field textarea {
	width: 100%;
	padding: 14px 18px;
	border: 1.5px solid var(--color-border);
	border-radius: 10px;
	font-size: 1rem;
	font-family: var(--font-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	outline: none;
	transition: border-color var(--transition-fast);
}
.form-section--inquiry .form-field input[type="email"] {
	height: 50px;
	padding: 0 18px;
}
.form-section--inquiry .form-field textarea {
	min-height: 120px;
	line-height: 1.5;
	resize: vertical;
}
.form-section--inquiry .form-field input[type="email"]:focus,
.form-section--inquiry .form-field input[type="email"]:focus-visible,
.form-section--inquiry .form-field textarea:focus,
.form-section--inquiry .form-field textarea:focus-visible {
	border-color: var(--color-brand);
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
.form-section--inquiry .form-field input[type="email"]::placeholder,
.form-section--inquiry .form-field textarea::placeholder {
	color: var(--color-text-muted);
}

.form-fields__row--two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 640px) {
	.form-fields__row--two-col {
		grid-template-columns: 1fr 1fr;
	}
}

.form-section--inquiry .form-fields {
	gap: 14px;
}

/* Heading cap: clamp top at 2rem instead of the global 2.5rem so the
 * "Formularz kontaktowy" title doesn't get oversized on wide viewports
 * (specificity 0,2,0 beats the base .form-section__heading rule). */
.form-section--inquiry .form-section__heading {
	font-size: clamp(1.5rem, 4vw, 2rem);
}

/* -------------------------------------------------------------------------- */
/* Mobile polish                                                              */
/* -------------------------------------------------------------------------- */
@media (max-width: 639px) {
	.kontakt-box {
		padding: 16px 18px;
	}
	.kontakt-box__main {
		font-size: 1rem;
	}
}