/**
 * Contact page office addresses — the written list under the "Where We Are"
 * map.
 *
 * Namespaced under .eha-offices so nothing can collide with the theme's
 * Tailwind utilities. The block sits inside .blue-section, which is #0090fc
 * with white text, so colour is inherited and only what differs is set here.
 */

/* SIZES ARE IN PX ON PURPOSE.
 *
 * This theme sets the root font-size to 20px, not the usual 16, so every rem
 * renders 25% larger than written. Stating the intended pixel sizes directly
 * keeps intent and output the same thing — the same reason cookie-consent.css
 * and publications.css are written in px.
 */

/* The bottom space is PADDING, not margin, and that is deliberate.
 *
 * The section's inner wrapper is .pt-[110px] — padding on top, none at the
 * bottom, because this block used to end with the map image. A margin-bottom
 * here has nothing to butt against, so it collapses straight out through the
 * wrapper and the container and the section, and the blue edge cuts the last
 * address off mid-line. Measured: 0px between the last office and the section
 * edge. Padding cannot collapse, so it actually holds the space open. */
.eha-offices {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 48px 0 0;
	padding: 0 0 72px;
	list-style: none;
}

/* A hairline above every office, so the four read as one aligned row with a
 * shared baseline rather than four blocks floating under the map. It is also
 * what separates them once the grid collapses to one column. */
.eha-offices__item {
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* The country heading.
 *
 * The footer gives <small> a 40px top margin, because there it separates
 * countries stacked inside one column. Here every item holds exactly one
 * country and the hairline does the separating, so that margin would only
 * push the headings away from their own rule. */
.eha-offices__item small {
	display: block;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.eha-offices__item p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.5;
}

.eha-offices__item p:last-child {
	margin-bottom: 0;
}

/* Two across rather than four: at this width four columns put most addresses
 * onto three or four lines each. */
@media (max-width: 992px) {
	.eha-offices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
		margin-top: 40px;
		padding-bottom: 56px;
	}
}

@media (max-width: 576px) {
	.eha-offices {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 24px;
		margin-top: 32px;
		/* The wrapper already adds 30px here via sm:pb-3. */
		padding-bottom: 24px;
	}
}