/**
 * Location Map — Residential Roofing section 14 (1920x876).
 *
 * Figma padding is 120 880 120 240: the map screenshot spans the full width
 * but the copy is held to the left 800px so the pin stays visible.
 *
 * The detail panel (frame 1092:19784) is 800 wide — the same 800 as the copy
 * column, NOT 868 — and its two columns are 349 and 281, not 349 and 349:
 * 60 + 349 + 50 + 281 + 60 = 800, which puts the contact column at x=699 and
 * ends the content at 980. Confirmed on the export, where the white fill fades
 * out by x=1040 (= 240 + 800).
 *
 * There IS a vertical rule between the two columns, and it is easy to miss: the
 * design does not draw a line node, it puts a RIGHT-side stroke on the address
 * column itself (frame "Location", 349x206, borderRightWeight 1, #121212 at
 * 15%). That places it at x=649 — the column's own right edge — which is why an
 * earlier greyscale scan down x=660..700 came back flat and the rule was
 * recorded as absent. Same construction as the trusted-logos divider and the
 * product-rows link rule.
 *
 * The map image and the pale left-to-right fade come from the shared section
 * settings (background: Image, overlay: Pale fade from the left).
 */

.location-map {
	position: relative;
}

.location-map__inner {
	position: relative;
	z-index: 1;
}

.location-map__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* 1440 container minus the 880-240 = 640 of right padding in Figma. */
	max-width: 800px;
}

/* Vertical rhythm is set from rendered INK, not from Figma node tops: Anek
 * Devanagari's browser metrics put a 64px cap right at the top of its 72px line
 * box, where Figma centres it, so a heading's box carries ~25px of dead space
 * below the glyphs. Design ink down this column: mark 120..154, heading
 * 172..216, lede 244/276, panel titles 398, addresses 453/520/553/587,
 * button 706..755. */
.location-map__content .section-eyebrow {
	margin-bottom: 16px;
}

.location-map__heading {
	margin-bottom: -6px;
}

/* 670 at the developer's instruction. (The design's lede node is 800x64 — two
 * lines; 640 took three and pushed everything below it 32px down, so anything
 * narrower than ~700 is a deliberate departure, not a measurement.) */
.location-map__text {
	max-width: 670px;
	margin: 0 0 39px;
}

/* --- detail panel ----------------------------------------------------- */
.location-map__panel {
	display: grid;
	grid-template-columns: 349px 281px;
	gap: 50px;
	/* 60 + 349 + 50 + 281 + 60 = 800. */
	width: 800px;
	max-width: none;
	margin-bottom: 40px;
	/* Figma "Address Section" is 800x326 at y=340. Its padding is 60 all round
	 * measured to Figma's cap boxes; against CSS line boxes that is 57 top and
	 * bottom, which lands both the panel edges and the text ink where the
	 * export has them. The fill is a
	 * gradient rather than the flat white panel this was built as, which hid
	 * the map behind it. It fades out to the right, not the left. */
	padding: 57px 60px 57px;
	background-image: linear-gradient(
		270.41deg,
		rgb(255 255 255 / 0%) 0.35%,
		rgb(255 255 255 / 100%) 85.72%
	);
}

/* 22 at the developer's instruction, up from the 13 it was built with. */
.location-map__group-title {
	margin: 0 0 22px;
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-30);
	font-weight: 700;
	line-height: var(--lh-30);
}

.location-map__group-list {
	display: flex;
	flex-direction: column;
	/* 28 at the developer's instruction. The design steps Address 1 -> Address 2
	 * and Number 1 -> Number 2 by 35, measured node top to node top; the rows
	 * now open 20 to their icon and the title 22 above them, so the step is set
	 * from what the rows render rather than from that figure. */
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 20 at the developer's instruction, up from the 12 it was built with. */
.location-map__row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-20);
}

.location-map__row-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 6px;
	color: var(--primary-green);
}

/* 20 at the developer's instruction, up from the 16 it was built with.
 * `height: auto` keeps whichever icon the row carries on its own aspect — the
 * rows mix a 22x26 pin with a 21.9 square phone, so a shared height would
 * squash one of them. */
.location-map__row-icon svg {
	width: 20px;
	height: auto;
}

.location-map__row-text {
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
	text-decoration: none;
	transition: var(--transition);
}

a.location-map__row-text:hover,
a.location-map__row-text:focus-visible {
	color: var(--primary-green);
}

/* The address copy is a 263-wide text node in the design, which is what makes
 * the Dublin address wrap to three lines. */
.location-map__group:first-child .location-map__row-text {
	max-width: 263px;
}

/* The divider, drawn as the address column's own right edge — see the note at
 * the top of this file. It runs the column's height, not the panel's, because
 * that is what a border on the column is. */
.location-map__group:first-child {
	border-right: 1px solid rgb(18 18 18 / 15%);
}

@media (max-width: 991px) {

	.location-map__content {
		max-width: none;
	}
}

@media (max-width: 1199px) {

	/* The map is a 1920-wide plate and `.section-image` centres it, so as the
	 * band narrows the crop walks in from both sides and takes the pin with it.
	 * Anchored 19% in from the right at the developer's instruction, which keeps
	 * the pin in frame beside the copy. */
	.location-map {
		background-position: right 19% center;
	}

	.location-map__panel {
		grid-template-columns: minmax(0, 349fr) minmax(0, 281fr);
		width: 100%;
	}
}

@media (max-width: 767px) {

	/* The -6px pulls the lede up against a 64px display line. At this width the
	 * heading is on its mobile size and the negative margin just crowds it, so
	 * it goes back to 0 at the developer's instruction. */
	.location-map__heading {
		margin-bottom: 0;
	}

	.location-map__panel {
		grid-template-columns: 1fr;
		gap: var(--space-30);
		padding: var(--space-25);
	}

	/* Stacked, there is nothing to its right to divide. */
	.location-map__group:first-child {
		border-right: 0;
	}

	.location-map__group:first-child .location-map__row-text {
		max-width: none;
	}
}