/* "Jak se k nám dostanete" — Figma 260:2382. */

.directions__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1053px;
	margin: 0 auto;
}

.directions__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 39px;
}

.place-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.place-card__map {
	display: block;
	width: 100%;
	aspect-ratio: 507 / 290;
	object-fit: cover;
}

.place-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 24px;
	background: var(--color-white);
}

.place-card__address {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.place-card__label {
	color: var(--color-neutral-1);
	font-size: var(--body-small-size);
	line-height: 1.4;
	letter-spacing: -0.14px;
}

.place-card__value {
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: var(--body-secondary-ls);
}

.place-card__list {
	display: flex;
	flex-direction: column;
	gap: 13px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.place-route {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 13px;
	border-top: 1px solid var(--color-neutral-4);
}

.place-route__head {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--body-secondary-ls);
}

/*
 * The transport glyphs are non-square exports carrying
 * preserveAspectRatio="none", so they are centred in a 16px box and sized by
 * their own ratio rather than stretched to fill it.
 */
.place-route__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.place-route__icon img {
	width: auto;
	height: auto;
	max-width: 16px;
	max-height: 16px;
}

.place-route__text {
	color: var(--color-neutral-1);
	font-size: var(--body-small-size);
	line-height: 1.4;
	letter-spacing: -0.14px;
}

/* The button is pushed to the foot so both cards line up whatever their copy. */
.place-card .btn { margin-top: auto; }

@media (min-width: 768px) {
	.directions__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.directions__container { gap: 60px; }
}