/**
 * "Kontakt" page — 1:1 with design/BOZPOshop kontakt.html.
 *
 * Layers, top to bottom: the light hero band with its quick-contact buttons,
 * the contact-card column beside the form panel, the store photo mosaic with
 * its lightbox, and the map row. The base — buttons (.btn), form controls
 * (.field/.form-row/.form-consent) and the form panel (.inquiry__form) — is
 * reused from pages/page-namieru.css (enqueued alongside this file).
 *
 * Mobile-first; the mockup is the spec from 981px up, narrower widths are
 * derived (single column, four-column mosaic collapsing to two then one).
 *
 * @package Bozpo_Custom
 */

/* ============================== Hero band =============================== */
.kontakt-hero {
	background: var(--c-hero-band);
	border-bottom: 1px solid var(--c-hero-line);
	color: var(--c-hero-ink);
}

.kontakt-hero__inner {
	padding-top: var(--space-18);
	padding-bottom: var(--space-24);
}

.kontakt-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
	margin: 0;
	font-size: var(--text-12-5);
	color: var(--c-hero-muted);
}

.kontakt-hero__crumbs a {
	color: var(--c-hero-muted);
	text-decoration: none;
}

.kontakt-hero__crumbs a:hover {
	color: var(--c-hero-ink);
}

.kontakt-hero__crumb-sep {
	color: var(--c-hero-muted);
}

.kontakt-hero__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-20);
	align-items: end;
	margin-top: var(--space-12);
}

.kontakt-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-5) var(--space-11);
	background: var(--c-hero-ink);
	border-radius: var(--radius-6);
	color: var(--c-white);
	font-size: var(--text-10-5);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.kontakt-hero__title {
	margin: var(--space-12) 0 var(--space-10);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-32);
	line-height: 1;
	color: var(--c-hero-ink);
}

.kontakt-hero__lead {
	margin: 0;
	max-width: 60ch;
	font-size: var(--text-14-5);
	line-height: var(--leading-165);
	color: var(--c-hero-body);
}

.kontakt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.kontakt-quick {
	display: inline-flex;
	align-items: center;
	gap: var(--space-9);
	padding: var(--space-11) var(--space-16);
	background: var(--surface);
	border: 1px solid var(--c-hero-line);
	border-radius: var(--radius-10);
	color: var(--c-hero-ink);
	font-size: var(--text-13-5);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}

.kontakt-quick svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.kontakt-quick:hover {
	border-color: var(--color-primary);
}

.kontakt-quick--dark {
	background: var(--c-hero-ink);
	border-color: var(--c-hero-ink);
	color: var(--c-white);
}

.kontakt-quick--dark:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--c-white);
}

/* ==================== Contact cards + message form ====================== */
.kontakt-contact {
	padding-top: var(--space-28);
}

.kontakt-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-22);
	align-items: start;
}

.contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-item {
	display: flex;
	gap: var(--space-14);
	padding: var(--space-16) var(--space-18);
	background: var(--surface);
	border: 1px solid var(--c-hero-card-line);
	border-radius: var(--radius-12);
}

.contact-item__icon {
	flex: none;
	margin-top: var(--space-2);
	line-height: 0;
	color: var(--color-primary);
}

.contact-item__icon svg {
	width: 19px;
	height: 19px;
}

.contact-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.contact-item__label {
	font-size: var(--text-11-5);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-hero-muted);
}

.contact-item__value {
	font-size: var(--text-15);
	font-weight: 600;
	color: var(--c-hero-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.contact-item__value:hover {
	color: var(--color-primary);
}

/* The mockup's last card (opening hours) sits on the dark surface. */
.contact-item--dark {
	background: var(--c-hero-ink);
	border-color: var(--c-hero-ink);
}

.contact-item--dark .contact-item__label {
	color: var(--c-on-dark-50);
}

.contact-item--dark .contact-item__value {
	color: var(--c-white);
}

.kontakt-form {
	padding: var(--space-22);
	background: var(--c-hero-band);
	border-radius: var(--radius-16);
}

.kontakt-form__title {
	margin: 0 0 var(--space-20);
	font-family: var(--font-display);
	font-size: var(--text-24);
	font-weight: 700;
	line-height: 1;
	color: var(--c-hero-ink);
}

/*
 * The form panel is reused from pages/page-namieru.css, where it sits on a
 * white card inside a grey band. Here the panel itself is the grey band, so the
 * controls flip to white to keep the design's contrast.
 */
.kontakt-form .field input,
.kontakt-form .field select,
.kontakt-form .field textarea {
	background: var(--surface);
	border-color: var(--c-hero-line);
	border-radius: var(--radius-9);
}

/* ============================ Photo mosaic ============================== */
.kontakt-gallery {
	--photo-row: 190px;

	padding-top: var(--space-40);
}

.kontakt-gallery__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-16);
	margin-bottom: var(--space-18);
}

.kontakt-gallery__eyebrow {
	font-size: var(--text-11-5);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.kontakt-gallery__title {
	margin: var(--space-8) 0 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-26);
	line-height: 1;
	color: var(--c-hero-ink);
}

.kontakt-gallery__tools {
	display: flex;
	align-items: center;
	gap: var(--space-14);
}

.kontakt-gallery__count {
	font-size: var(--text-13);
	color: var(--c-hero-muted);
}

.kontakt-gallery__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	white-space: nowrap;
	padding: var(--space-10) var(--space-17);
	background: var(--surface);
	border: 1px solid var(--c-hero-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--text-13);
	font-weight: 600;
	color: var(--c-hero-ink);
	cursor: pointer;
	transition: border-color .18s ease;
}

.kontakt-gallery__toggle:hover {
	border-color: var(--color-primary);
}

.kontakt-gallery__toggle svg {
	width: 12px;
	height: 12px;
	opacity: .6;
	transition: transform .18s ease;
}

.kontakt-gallery__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/*
 * The mockup's mosaic needs its four columns to work — a two-column tile in a
 * one- or two-column grid is just a very letterboxed full-width strip. Up to
 * the mockup's width every tile is therefore one uniform 4:3 cell; the
 * `--c2`/`--r2` span modifiers only take effect from 981px up.
 */
.kontakt-gallery__grid {
	display: grid;
	grid-auto-flow: dense;
	grid-template-columns: 1fr;
	gap: var(--space-12);
}

.kontakt-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	padding: 0;
	background: var(--c-hero-band);
	border: 0;
	border-radius: var(--radius-14);
	cursor: zoom-in;
}

.kontakt-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.kontakt-photo:hover .kontakt-photo__img {
	transform: scale(1.04);
}

.kontakt-photo:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ============================== Lightbox ================================ */
.kontakt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-20);
	background: var(--overlay-lightbox);
}

/* The class sets `display`, so the `hidden` attribute has to win explicitly —
   without this the lightbox is open on page load. */
.kontakt-lightbox[hidden] {
	display: none;
}

.kontakt-lightbox__stage {
	position: relative;
	width: min(1100px, 100%);
	height: min(720px, 100%);
	overflow: hidden;
	background: var(--c-lightbox-stage);
	border-radius: var(--radius-18);
}

.kontakt-lightbox__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kontakt-lightbox__close {
	position: absolute;
	top: var(--space-20);
	right: var(--space-20);
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--surface-on-dark-12);
	border: 0;
	border-radius: var(--radius-11);
	color: var(--c-white);
	cursor: pointer;
	transition: background .18s ease;
}

.kontakt-lightbox__close:hover {
	background: var(--surface-on-dark-24);
}

.kontakt-lightbox__close svg {
	width: 18px;
	height: 18px;
}

/* ================================= Map ================================== */
.kontakt-map {
	padding-top: var(--space-40);
	padding-bottom: var(--space-48);
}

.kontakt-map__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-14);
	margin-bottom: var(--space-18);
}

.kontakt-map__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-26);
	line-height: 1;
	color: var(--c-hero-ink);
}

.kontakt-map__address {
	font-size: var(--text-14);
	color: var(--c-hero-muted);
}

.kontakt-map__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
}

.kontakt-map__frame {
	overflow: hidden;
	border-radius: var(--radius-16);
	background: var(--c-hero-band);
	line-height: 0;
}

.kontakt-map__frame iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

.kontakt-map__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.kontakt-map__photo {
	position: relative;
	flex: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-16);
	background: var(--c-hero-band);
	line-height: 0;
}

.kontakt-map__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 200px;
	object-fit: cover;
}

.kontakt-map__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: var(--space-20);
	background: var(--c-hero-ink);
	border-radius: var(--radius-16);
	color: var(--c-white);
}

.kontakt-map__card-title {
	font-family: var(--font-display);
	font-size: var(--text-22);
	font-weight: 600;
}

.kontakt-map__card-text {
	font-size: var(--text-13-5);
	line-height: var(--leading-160);
	color: var(--c-on-dark-68);
}

.kontakt-map__btn {
	align-self: flex-start;
	margin-top: var(--space-4);
	padding: var(--space-11) var(--space-17);
	font-size: var(--text-13-5);
}

/* ============================ Tablet (>=561px) ========================== */
@media (min-width: 561px) {
	.kontakt-hero__inner {
		padding-top: var(--space-22);
		padding-bottom: var(--space-28);
	}

	.kontakt-hero__title {
		font-size: var(--text-38);
	}

	.kontakt-form {
		padding: var(--space-26) var(--space-28);
	}

	.kontakt-gallery__title,
	.kontakt-map__title {
		font-size: var(--text-30);
	}

	.kontakt-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================== Desktop (>=981px) ========================== */
@media (min-width: 981px) {
	.kontakt-hero__inner {
		padding-top: var(--space-26);
		padding-bottom: var(--space-30);
	}

	.kontakt-hero__main {
		grid-template-columns: 1fr 420px;
		gap: var(--space-40);
	}

	.kontakt-hero__title {
		font-size: var(--text-48);
	}

	.kontakt-hero__actions {
		justify-content: flex-end;
	}

	.kontakt-contact {
		padding-top: var(--space-40);
	}

	.kontakt-contact__grid {
		grid-template-columns: 380px 1fr;
		gap: var(--space-32);
	}

	.kontakt-form {
		padding: var(--space-30) var(--space-32);
	}

	.kontakt-form__title {
		font-size: var(--text-30);
	}

	.kontakt-gallery {
		padding-top: var(--space-56);
	}

	.kontakt-gallery__title,
	.kontakt-map__title {
		font-size: var(--text-36);
	}

	.kontakt-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: var(--photo-row);
	}

	.kontakt-photo {
		aspect-ratio: auto;
	}

	.kontakt-photo--c2 {
		grid-column: span 2;
	}

	.kontakt-photo--r2 {
		grid-row: span 2;
	}

	.kontakt-lightbox {
		padding: var(--space-48);
	}

	.kontakt-lightbox__close {
		top: var(--space-28);
		right: var(--space-32);
	}

	.kontakt-map {
		padding-top: var(--space-56);
		padding-bottom: var(--space-64);
	}

	.kontakt-map__layout {
		grid-template-columns: 1fr 380px;
	}

	.kontakt-map__frame iframe {
		height: 420px;
	}
}