/**
 * Casa Terra Area map (Figma Home "V5 Signature · Aït Ben Haddou map" 7:660 and The place "M9
 * Place and arrival · Distances map" 7:6235).
 *
 * One of three maps shows per breakpoint (desktop 1200×360, tablet 770×420, phone crop), in a
 * cream card with a tan rule. Under it: three drive figures (Home) or five drive times and the
 * source (The place: five columns on desktop, rows below). The place opens with a text and
 * photo split; its address shows on tablets and phones.
 */

/* ------------------------------------------------------------------ */
/* Heading (Home) and split (The place)                               */
/* ------------------------------------------------------------------ */

.ct-area-map .ct-area-map__heading .ct-heading__text {
	margin-top: 12px;
}

.ct-area-map__split {
	display: grid;
	grid-template-columns: minmax(0, 384px) minmax(0, 792px);
	justify-content: space-between;
	gap: 24px;
	align-items: start;
}

.ct-area-map__eyebrow {
	margin-bottom: 16px;
}

.ct-area-map__lead {
	margin-top: 16px;
	color: var(--ct-muted);
}

.ct-area-map__more--intro {
	margin-top: 32px;
}

.ct-area-map .ct-area-map__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.ct-area-map__photo .ct-figure__media {
	aspect-ratio: 792 / 486;
	border-radius: var(--ct-radius-panel);
}

/* Address and the second copy of the link: tablets and phones (and desktop when chosen). */
.ct-area-map__where {
	display: none;
}

.ct-area-map--address-desktop .ct-area-map__where {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	margin-top: 32px;
}

.ct-area-map--address-desktop .ct-area-map__more--where {
	display: none;
}

.ct-area-map__address {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 430px;
}

.ct-area-map__lines {
	color: var(--ct-heading);
	font-style: normal;
}

/* The first address line is the name: medium weight. */
.ct-area-map__lines::first-line {
	font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Map card                                                           */
/* ------------------------------------------------------------------ */

.ct-area-map__card {
	overflow: hidden;
	border: 1px solid var(--ct-line);
	border-radius: var(--ct-radius-panel);
	background: var(--ct-area-map-card, var(--ct-c-cream));
}

.ct-area-map--split .ct-area-map__card {
	margin-top: 40px;
}

.ct-area-map__map--tablet,
.ct-area-map__map--phone {
	display: none;
}

.ct-area-map__card:focus-visible {
	outline-offset: 4px;
}

/* Place names (Outfit 13/18 earth; strong 14/20 semibold; note 12/17 muted; region serif italic). */
.ct-area-map .ct-area-map__label {
	color: var(--ct-c-earth);
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
}

.ct-area-map__label--r {
	transform: translateX(-100%);
}

.ct-area-map__label--c {
	transform: translate(-50%, -50%);
}

.ct-area-map .ct-area-map__label--strong {
	font-size: var(--ct-fs-small);
	line-height: var(--ct-lh-small);
	font-weight: 600;
}

.ct-area-map .ct-area-map__label--note,
.ct-area-map .ct-area-map__label--caption {
	color: var(--ct-c-muted);
	font-size: var(--ct-fs-label);
	line-height: 17px;
}

.ct-area-map .ct-area-map__label--caption {
	font-weight: 600;
}

.ct-area-map .ct-area-map__label--region {
	color: var(--ct-c-muted);
	font-family: var(--ct-serif);
	font-size: 18px;
	line-height: 25px;
	font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Home: three drive figures                                          */
/* ------------------------------------------------------------------ */

.ct-area-map__figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 32px 0 0;
}

.ct-area-map__figure {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
}

.ct-area-map__value {
	margin: 0;
	color: var(--ct-heading);
}

.ct-area-map__figure-label {
	margin: 0;
	color: var(--ct-muted);
}

.ct-area-map__more--after {
	margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* The place: five drive times                                        */
/* ------------------------------------------------------------------ */

.ct-area-map__drives {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
}

.ct-area-map__drive {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-top: 16px;
	border-top: 1px solid var(--ct-heading);
}

.ct-area-map__place {
	order: 1;
	color: var(--ct-muted);
	font-size: var(--ct-fs-small);
	line-height: var(--ct-lh-small);
}

.ct-area-map__time {
	order: 2;
	color: var(--ct-heading);
	font-family: var(--ct-serif);
	font-size: 32px;
	line-height: 40px;
}

.ct-area-map__distance {
	order: 3;
	color: var(--ct-muted);
}

.ct-area-map__distance-short {
	display: none;
}

.ct-area-map__source {
	margin-top: 40px;
	color: var(--ct-muted);
}

/* ------------------------------------------------------------------ */
/* Tablet (834)                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ct-area-map .ct-area-map__heading {
		margin-bottom: 32px;
	}

	.ct-area-map__map--desktop {
		display: none;
	}

	.ct-area-map__map--tablet {
		display: block;
	}

	.ct-area-map__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ct-area-map__eyebrow {
		margin-bottom: 12px;
	}

	.ct-area-map__lead {
		margin-top: 12px;
		font-size: var(--ct-fs-body-lg);
		line-height: var(--ct-lh-body-lg);
	}

	.ct-area-map__photo .ct-figure__media {
		aspect-ratio: 770 / 473;
	}

	.ct-area-map__more--intro {
		display: none;
	}

	.ct-area-map__where,
	.ct-area-map--address-desktop .ct-area-map__where {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 24px;
		margin-top: 32px;
	}

	.ct-area-map--address-desktop .ct-area-map__more--where {
		display: block;
	}

	.ct-area-map--split .ct-area-map__card {
		margin-top: 32px;
	}

	.ct-area-map__drives {
		display: block;
		margin-top: 32px;
	}

	.ct-area-map__drive {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 80px 140px;
		align-items: center;
		gap: 16px;
		padding: 12px 0;
		border-top: 0;
		border-bottom: 1px solid var(--ct-line);
	}

	.ct-area-map__place {
		order: 1;
		color: var(--ct-heading);
		font-size: var(--ct-fs-body);
		line-height: var(--ct-lh-body);
	}

	.ct-area-map__distance {
		order: 2;
	}

	.ct-area-map__time {
		order: 3;
		font-size: 24px;
		line-height: 32px;
		text-align: right;
	}

	.ct-area-map__distance-long {
		display: none;
	}

	.ct-area-map__distance-short {
		display: inline;
	}

	.ct-area-map__source {
		margin-top: 32px;
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390)                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ct-area-map .ct-area-map__heading {
		margin-bottom: 24px;
	}

	.ct-area-map .ct-area-map__heading .ct-heading__text {
		margin-top: 8px;
	}

	.ct-area-map__map--tablet {
		display: none;
	}

	.ct-area-map__map--phone {
		display: block;
	}

	/* The place: the tablet map at its own size, scrolling sideways in the card. */
	.ct-area-map--phone-scroll .ct-area-map__card {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ct-area-map--phone-scroll .ct-area-map__card::-webkit-scrollbar {
		display: none;
	}

	.ct-area-map--phone-scroll .ct-area-map__map--phone {
		display: none;
	}

	.ct-area-map--phone-scroll .ct-area-map__map--tablet {
		display: block;
		width: 770px;
	}

	.ct-area-map__lead {
		font-size: var(--ct-fs-lead);
		line-height: var(--ct-lh-lead);
	}

	.ct-area-map__photo .ct-figure__media {
		aspect-ratio: 350 / 215;
	}

	.ct-area-map__where {
		flex-direction: column;
	}

	.ct-area-map__figures {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		margin-top: 24px;
	}

	.ct-area-map__more--after {
		margin-top: 12px;
	}

	.ct-area-map__drive {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.ct-area-map__time {
		font-size: 22px;
		line-height: 29px;
	}
}