/*
 * Keyless Nearby Places – Stylesheet
 * ----------------------------------
 * Modernes Karten-Grid für den "Was ist in der Nähe?"-Bereich
 * der Immobilien-Detailseiten (DreamHome-Theme).
 *
 * Wichtige Hinweise zur Architektur (v1.1):
 *  – Die Icons werden vom JavaScript direkt am <i>-Element gesetzt
 *    (FA-Klasse austauschen). Deshalb kein display:none auf <i> und
 *    keine ::before-Pseudoelemente mehr – das hatte in v1.0 mit
 *    FontAwesome Pro nicht funktioniert.
 *  – Was hier bleibt: das Layout (Grid, Karten, Distanz-Pillen,
 *    Hover-Schatten, Mobile-Anpassung).
 */


/* ==========================================================================
 *  Container: aus row → CSS Grid umbauen
 * ========================================================================== */
.property-nearby-places .property-element.row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin: 0;
}

/* Plugin packt alle .place-Boxen in einen .nearby-place-wrapper.
   display: contents macht ihn fürs Grid "transparent". */
.property-nearby-places .nearby-place-wrapper {
	display: contents;
}


/* ==========================================================================
 *  Karte
 *  --------------------------------------------------------------------------
 *  Hinweis: DreamHome's .row hat Regeln, die unsere Border am letzten Kind
 *  überschreiben können. Wir erzwingen den Rahmen mit höherer Specificity
 *  über den verschachtelten Selector .property-nearby-places .property-element.row
 *  und behalten zusätzlich !important auf der Border, damit es zuverlässig
 *  durchschlägt.
 * ========================================================================== */
.property-nearby-places .property-element.row .place,
.property-nearby-places .property-element.row .place:last-child,
.property-nearby-places .property-element.row .place:nth-child(odd):last-child {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #ffffff;
	border: 1px solid #eef0f4 !important;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.property-nearby-places .property-element.row .place:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
	border-color: #dde3ec !important;
}


/* ==========================================================================
 *  Icon-Pille
 *  --------------------------------------------------------------------------
 *  Verschachteltes Zentrierungs-Pattern:
 *    1) .place-icon  → Flex-Container, zentriert das <i>
 *    2) <i>          → ebenfalls Flex-Container, zentriert sein ::before
 *
 *  Warum doppelt? Weil unterschiedliche FontAwesome-Glyphen (besonders der
 *  map-pin) eine eigene baseline-/ascender-Position in der Font haben,
 *  die das Pseudo-Element im <i> verschiebt. Erst wenn das <i> selbst
 *  die Glyphe zentriert, sitzen alle Icons gleich mittig.
 *
 *  !important: das DreamHome-Theme bringt eigenes line-height / padding /
 *  vertical-align für <i> mit – wir überschreiben das gezielt.
 * ========================================================================== */
.property-nearby-places .property-element.row .place .place-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #1d6fdc;
	color: #ffffff;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
	text-align: center;
}

.property-nearby-places .property-element.row .place .place-icon i {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1em !important;
	height: 1em !important;
	line-height: 1 !important;
	font-size: inherit !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
	text-align: center !important;
}

.property-nearby-places .property-element.row .place .place-icon i::before {
	display: block !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
}


/* ==========================================================================
 *  Info-Bereich
 * ========================================================================== */
.property-nearby-places .place-info {
	flex: 1 1 auto;
	min-width: 0;
}

.property-nearby-places .place-title {
	margin: 0 0 8px 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: none;
	color: #0f172a;
}

.property-nearby-places .place-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.property-nearby-places .place-list li {
	margin: 0;
	padding: 5px 0;
	font-size: 13px;
	color: #475569;
	line-height: 1.35;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	border-top: 1px dashed #f1f5f9;
}

.property-nearby-places .place-list li:first-child {
	border-top: none;
	padding-top: 0;
}

/* Distanz als kleine Pille rechts */
.property-nearby-places .place-distance {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 500;
	color: #1d6fdc;
	background: #eaf2ff;
	padding: 2px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Header etwas kompakter */
.property-nearby-places .tfre-property-header h3 {
	margin-bottom: 18px;
}


/* ==========================================================================
 *  Mobile
 * ========================================================================== */
@media (max-width: 600px) {
	.property-nearby-places .property-element.row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.property-nearby-places .property-element.row .place {
		padding: 12px 14px !important;
	}

	.property-nearby-places .property-element.row .place .place-icon {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
}