/*
 * GORILLA GARAGE — Section: Kontakt-Info
 *
 * 3 prominente Kontakt-Tiles (Adresse, Telefon, E-Mail).
 * Section sitzt in der .gg-kontakt-zone (page-kontakt.php) auf gemeinsamer
 * Map-BG zusammen mit kontakt-form. Section selbst ist transparent
 * (section--dark), Tiles bleiben helle Cards mit innenliegendem
 * Light-Context (Token-Reset für dark-section-Override).
 *
 * Tiles tragen das Chevron-Cut-Treatment (analog .btn / .kontakt-form__pill):
 * clip-path schneidet diagonale Cuts oben-rechts + unten-links → KEIN border,
 * KEIN border-radius, KEIN inset shadow. Tiefe per filter: drop-shadow,
 * folgt der Clip-Form sauber. State-Differenzierung via background + drop-
 * shadow (gleiches Muster wie .btn, button.css).
 */

/* ─────────────────────────────────────────────────────────────
 * Heading — 2-Spalten: Copy (Eyebrow + Title) links, 3D-Pin
 * (kontakt.png) rechts. Ab 1024px nebeneinander, sonst gestapelt.
 * Der Pin übernimmt die Rolle des entfallenen Page-Hero-Icons.
 * ───────────────────────────────────────────────────────────── */

.gg-section-kontakt-info__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: var(--space-6);
	max-width: none;
	margin-bottom: var(--space-10);
}

.gg-section-kontakt-info__head-copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.gg-section-kontakt-info__eyebrow {
	margin: 0;
}

.gg-section-kontakt-info__title {
	margin: 0;
}

.gg-section-kontakt-info__head-image {
	display: flex;
	justify-content: center;
}

.gg-section-kontakt-info__head-image img {
	width: 100%;
	max-width: clamp(160px, 20vw, 240px);
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}

@media (min-width: 1024px) {
	.gg-section-kontakt-info__head {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: var(--space-12);
		align-items: end;
	}

	.gg-section-kontakt-info__head-image {
		justify-self: end;
		/* Pin ragt nach oben/rechts aus dem Heading-Block heraus,
		 * in den freien Map-Bereich rechts neben dem Container. */
		margin-block: clamp(-80px, -6vw, -30px) clamp(-40px, -3vw, -10px);
	}

	.gg-section-kontakt-info__head-image img {
		max-width: clamp(200px, 22vw, 280px);
	}
}

/* ─────────────────────────────────────────────────────────────
 * Grid — 3 Tiles, responsive
 * ───────────────────────────────────────────────────────────── */

.gg-section-kontakt-info__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-6);
}

/* ─────────────────────────────────────────────────────────────
 * Tile — Chevron-Cut Card (KEIN border, KEIN border-radius)
 * ───────────────────────────────────────────────────────────── */

.gg-kontakt-tile {
	/* Tiles sind helle Cards, auch wenn die umgebende Section dark ist.
	 * Token-Reset hebt den dark-context-Override (tokens.css) wieder auf,
	 * damit `--color-text-muted` innerhalb der Card wieder dunkel auf
	 * hellem BG liest. */
	--color-text:       var(--gg-grey-700);
	--color-text-muted: var(--gg-grey-500);
	/* Chevron-Cut-Tiefe — größer als bei Buttons, da Card-Format. */
	--btn-chevron-cut: 18px;

	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background-color: var(--gg-white);
	background-image: var(--bg-light-fade);
	color: var(--gg-black);
	border: 0;
	border-radius: 0;
	clip-path: var(--clip-btn-chevron);
	text-decoration: none;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
	transition:
		transform var(--dur-fast) var(--ease-standard),
		filter var(--dur-base) var(--ease-standard);
	min-height: 100%;
}

.gg-kontakt-tile:hover,
.gg-kontakt-tile:focus-visible {
	transform: var(--hover-lift-card);
	filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}

.gg-kontakt-tile:focus-visible {
	outline: 2px solid var(--gg-red);
	outline-offset: 3px;
}

.gg-kontakt-tile__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--gg-red);
}

.gg-kontakt-tile__icon svg {
	width: 26px;
	height: 26px;
	display: block;
}

.gg-kontakt-tile__value {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-headline);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--gg-black);
}

/* ─────────────────────────────────────────────────────────────
 * CTA — nur Icon (Pfeil), inline rechts neben dem Value.
 * ───────────────────────────────────────────────────────────── */

.gg-kontakt-tile__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--gg-red);
	transition: transform var(--dur-fast) var(--ease-standard);
}

.gg-kontakt-tile__cta svg {
	width: 20px;
	height: 20px;
	display: block;
}

.gg-kontakt-tile:hover .gg-kontakt-tile__cta,
.gg-kontakt-tile:focus-visible .gg-kontakt-tile__cta {
	transform: var(--hover-nudge-arrow);
}