/*
 * Kontakt page. Grid per the client's hand sketch:
 *   photos | address (dark graphite) | building panel
 *          |                         | map (click-to-load)
 * The map iframe is injected only after an explicit user action
 * (no third-party cookies before consent).
 */

/* alignment and the gap below come from the shared page-title rule in main.css */

/*
 * Every panel on this page is rounded to the same 14px — the client asked for
 * the photographs ("wszystkie zdjęcia z zaokrąglonymi narożnikami"), and a
 * rounded photograph next to a square graphite plane in the same grid reads as
 * one of them being wrong rather than as a choice. The radius matches the info
 * card that already sits on the map.
 */
.dd-kontakt__grid {
	--dd-panel-radius: var(--dd-radius-media);

	display: grid;
	/* the photo column is wider than it was: it holds one picture now instead
	   of two stacked, and the client asked for that picture to grow a little */
	grid-template-columns: 1.15fr 1.15fr 1fr;
	grid-template-areas:
		"photos address building"
		"photos address map";
	gap: clamp(1rem, 2.5vw, 1.75rem);
	align-items: stretch;
}

/* --- Photo (left) ------------------------------------------------------- */

/* top-aligned, not centred: the column spans both rows, so centring left the
   photograph starting 51px below the two panels beside it and ending 65px above
   them — three elements in one row and not one shared edge */
.dd-kontakt__photos {
	grid-area: photos;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.dd-kontakt__photos img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dd-panel-radius);
}

/* --- Address (middle, dark graphite) ----------------------------------- */

.dd-kontakt__address {
	grid-area: address;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
	background: linear-gradient(170deg, #161618, #1f1c1a 70%, #241f1c);
	border-radius: var(--dd-panel-radius);
}

/*
 * The lockup stands in for the clinic's name, so it is set at heading size.
 *
 * The artwork is copper on solid black, and this panel is graphite — dropped in
 * as-is it drew a black rectangle around itself. `screen` leaves black alone and
 * keeps the copper, so the lockup sits on the panel instead of on a patch of a
 * different colour. Everywhere else on the site it stands on the black bar or
 * the black footer, where the file's own ground already matches.
 */
.dd-kontakt__address-logo {
	width: clamp(160px, 62%, 240px);
	height: auto;
	margin-bottom: 0.9rem;
	mix-blend-mode: screen;
}

/*
 * No lift on the lockup any more.
 *
 * 07.08 it was asked for ("Logo, na centralnym czarnym polu, podnieść o 1,5cm")
 * and the panel had the room: address, caption, phone, and nothing else. The
 * opening hours moved in on 23.08 and the column now fills its own height, so
 * the same 56px transform carried the logo 8px past the panel's top edge while
 * 48px of padding sat unused at the bottom. 25.08: "podpis i godziny sa OK,
 * jedynie logo jest za wysoko".
 *
 * Nothing replaces it: the panel is a centred flex column, so with the
 * transform gone the padding is symmetrical again on its own.
 */

.dd-kontakt__address-line {
	margin: 0;
	font-family: var(--dd-font-body);
	color: #d8d2cd;
}

/*
 * The e-mail keeps the address block's colour and size; only its link states
 * are its own, and they are the ones the phone number below already uses.
 */
.dd-kontakt__email {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid rgba(216, 210, 205, 0.3);
}

.dd-kontakt__email:hover,
.dd-kontakt__email:focus-visible {
	color: var(--dd-color-accent-light);
	border-block-end-color: currentColor;
}

/*
 * The timetable, on the graphite panel.
 *
 * Same two-column grid as the footer's, for the same reason: three rows of days
 * of unequal width would otherwise put the three times in three different
 * places and stop reading as a timetable. The rule above it separates it from
 * the address without adding a heading-sized break to a panel that already has
 * a logo, an address and a call to action in it.
 */
.dd-kontakt__hours {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	margin-block-start: 1.4em;
	padding-block-start: 1.2em;
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	align-self: stretch;
}

.dd-kontakt__hours-heading {
	margin: 0;
	font-family: var(--dd-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #b3aca6;
}

.dd-kontakt__hours-list {
	display: grid;
	grid-template-columns: max-content max-content;
	gap: 0.25rem 1.1rem;
	margin: 0;
}

.dd-kontakt__hours-row {
	display: contents;
}

.dd-kontakt__hours-days,
.dd-kontakt__hours-value {
	margin: 0;
	font-family: var(--dd-font-body);
	line-height: 1.5;
}

.dd-kontakt__hours-days {
	color: #b3aca6;
	text-align: end;
}

.dd-kontakt__hours-value {
	color: #ffffff;
	text-align: start;
	font-variant-numeric: tabular-nums;
}

.dd-kontakt__hours-row--closed .dd-kontakt__hours-value {
	color: #b3aca6;
}

.dd-kontakt__caption {
	margin: 1.6em 0 0.4em;
	font-family: var(--dd-font-body);
	font-weight: 600;
	color: #ffffff;
}

/* The one call link on the page: 40px tall on a phone before the min-height,
   which is under the 44px target (WCAG 2.5.8). */
.dd-kontakt__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-family: var(--dd-font-heading);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--dd-color-accent-light);
	text-decoration: none;
}

.dd-kontakt__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 0.9em;
	padding: 0.65em 2.2em;
	border-radius: 999px;
	background: var(--dd-color-accent);
	color: #0a0a0a;
	font-family: var(--dd-font-body);
	font-weight: 600;
	text-decoration: none;
}

.dd-kontakt__cta:hover,
.dd-kontakt__cta:focus-visible {
	background: var(--dd-color-accent-light);
	color: #0a0a0a;
}

/* --- Building panel (top right) ----------------------------------------
 * The aerial photograph of Modern Tower with the arena in frame, per the
 * client's list. It sets the height of the top row itself — 3:2, the ratio the
 * file is built at, so nothing is cropped on desktop — and the two lines that
 * used to be the whole panel now sit over its lower edge on a scrim, the same
 * arrangement the info card has on the map below.
 */

.dd-kontakt__building-wrap {
	grid-area: building;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.dd-kontakt__building {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #131315;
	border: 1px solid rgb(201 138 90 / 22%);
	border-radius: var(--dd-panel-radius);
}

.dd-kontakt__building-photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* the scrim runs well above the type: the frame under it is a lit car park in
   one corner and a dark roof in the other, and only a long fade keeps both
   lines on the same ground */
.dd-kontakt__building-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.9rem clamp(0.85rem, 2vw, 1.15rem) 0.8rem;
	background: linear-gradient(to top, rgb(10 9 8 / 94%) 20%, rgb(10 9 8 / 62%) 62%, rgb(10 9 8 / 0%));
}

.dd-kontakt__building-name {
	display: block;
	font-family: var(--dd-font-heading);
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	line-height: 1.2;
	color: var(--dd-color-accent-light);
}

.dd-kontakt__building-line {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--dd-font-body);
	font-size: 0.82rem;
	line-height: 1.35;
	color: #d8d2cd;
}

/* --- Map (bottom right) -------------------------------------------------
 * The still map carries the annotations the client asked for (clinic pin
 * with the logo, "CH Riviera", "bezpłatne parkingi", "Polsat Plus Arena
 * Gdynia") burnt in, so they stay on their places at any width; the info
 * card sits over its lower band. Google's interactive map is still opt-in
 * — the iframe is injected on click and keeps clear of the card.
 */

.dd-kontakt__map-wrap {
	grid-area: map;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.dd-kontakt__map {
	--dd-map-card-space: 152px;

	flex: 1;
	min-height: 380px;
	background: #131315;
	border-radius: var(--dd-panel-radius);
	position: relative;
	overflow: hidden;
}

.dd-kontakt__map-static,
.dd-kontakt__map-static picture {
	position: absolute;
	inset: 0;
}

.dd-kontakt__map-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.dd-kontakt__map-credit,
.dd-kontakt__building-credit {
	margin: 0.4rem 0 0;
	font-family: var(--dd-font-body);
	font-size: 0.72rem;
	line-height: 1.4;
	text-align: right;
	color: #6f6862;
}

.dd-kontakt__map-credit a,
.dd-kontakt__building-credit a {
	color: #6f6862;
	text-decoration: underline;
}

.dd-kontakt__map-credit a:hover,
.dd-kontakt__map-credit a:focus-visible,
.dd-kontakt__building-credit a:hover,
.dd-kontakt__building-credit a:focus-visible {
	color: var(--dd-color-accent-ink);
	text-decoration: underline;
}

.dd-kontakt__map-load {
	position: absolute;
	right: 0.75rem;
	bottom: calc(var(--dd-map-card-space) - 0.4rem);
	min-height: 44px;
	padding: 0.4em 1em;
	border: 0;
	border-radius: 999px;
	background: rgba(20, 18, 16, 0.88);
	color: var(--dd-color-accent-light);
	font-family: var(--dd-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

.dd-kontakt__map-load:hover,
.dd-kontakt__map-load:focus-visible {
	background: #0a0a0a;
	color: #ffffff;
}

/* --- Info card over the map (per the client's mockup) ------------------- */

.dd-kontakt__map-card {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	max-width: 460px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem;
	border-radius: var(--dd-radius-media);
	background: rgba(18, 16, 14, 0.92);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.dd-kontakt__map-thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 10px;
	/* the mark is copper on black and keeps its own proportions inside the
	   square — `cover` here would crop the artwork instead of a photograph */
	object-fit: contain;
	background: #000;
}

.dd-kontakt__map-card-text {
	min-width: 0;
}

.dd-kontakt__map-card-name {
	margin: 0;
	font-family: var(--dd-font-heading);
	font-size: 1.05rem;
	line-height: 1.2;
	color: var(--dd-color-accent-light);
}

.dd-kontakt__map-card-address {
	margin: 0.15rem 0 0.5rem;
	font-family: var(--dd-font-body);
	font-size: 0.82rem;
	line-height: 1.35;
	color: #d8d2cd;
}

.dd-kontakt__map-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	padding: 0.4em 1.1em;
	border-radius: 999px;
	background: #ffffff;
	color: #1a1613;
	font-family: var(--dd-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.dd-kontakt__map-card-link svg {
	color: var(--dd-color-accent-ink);
}

.dd-kontakt__map-card-link:hover,
.dd-kontakt__map-card-link:focus-visible {
	background: var(--dd-color-accent-light);
	color: #0a0a0a;
}

/* The card keeps its band at the bottom, so the Google iframe takes the
   space above it (a replaced element ignores `auto` between top/bottom). */
.dd-kontakt__map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - var(--dd-map-card-space));
	border: 0;
}

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 990.98px) {
	.dd-kontakt__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"address"
			"photos"
			"building"
			"map";
	}

	/* full width, the aerial would be 640px tall at 3:2 — the crop it loses at
	   the top and bottom is car park and pitch, both labels sit mid-frame */
	.dd-kontakt__building {
		aspect-ratio: 16 / 9;
	}


	/* Below the desktop grid the panel sets its own shape, so the crop the
	   browser picks (wide 3:2 here, tall 0.85 under 600px) fills it without
	   cropping a labelled place out of view. */
	.dd-kontakt__map {
		flex: 0 0 auto;
		min-height: 0;
		aspect-ratio: 3 / 2;
	}
}

/* Between the desktop grid and the phone the aerial is two to three times wider
   than either, and the caption kept a size set against a 335px panel while the
   labels burnt into the picture grew with it. */
@media (min-width: 601px) and (max-width: 990.98px) {
	.dd-kontakt__building-caption {
		padding-top: 2.6rem;
	}

	.dd-kontakt__building-name {
		font-size: 1.35rem;
	}

	.dd-kontakt__building-line {
		font-size: 0.95rem;
	}
}

@media (max-width: 600px) {
	/* Taller than the crop so the info card never reaches the labels; the
	   sides it trims carry no annotation. */
	.dd-kontakt__map {
		aspect-ratio: 0.72;
	}
}

@media (max-width: 420px) {
	.dd-kontakt__map-card {
		gap: 0.6rem;
		padding: 0.6rem;
	}

	.dd-kontakt__map-thumb {
		width: 48px;
		height: 48px;
	}

	.dd-kontakt__map-card-name {
		font-size: 0.98rem;
	}

	.dd-kontakt__map-card-link {
		font-size: 0.8rem;
		padding: 0.4em 0.9em;
	}
}