/**
 * Contact Components (ontwo/contact-person + ontwo/info-card blocks)
 *
 * Two reusable blocks and the map wrapper the contact page puts around an
 * OpenStreetMap iframe. Nothing here is contact-page specific — the blocks are
 * usable on any page.
 *
 * Links inside these components are black, not the site's pink. Six coloured
 * names beside six coloured addresses read as decoration rather than hierarchy.
 * The orange icon marks the row; pink returns on hover, matching base.css's
 * a:hover convention.
 */

/* ==========================================================================
   1. info-card
   ========================================================================== */

.info-card {
	background: var(--color-white);
	border-radius: 8px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	padding: 22px 24px;
}

.info-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.info-card__head .icon {
	color: var(--color-primary);
}

.info-card__title {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-medium);
	color: var(--color-body);
}

/* InnerBlocks content sets its own paragraph margins; strip the outer ones so
   the card's padding is the only spacing at its edges. */
.info-card__body > :first-child {
	margin-top: 0;
}

.info-card__body > :last-child {
	margin-bottom: 0;
}

/* The one variant: a card that is an invitation rather than a reference. */
.info-card--highlight {
	background: var(--color-green-shade);
	box-shadow: none;
	border-left: 4px solid var(--color-green);
	border-radius: 0 8px 8px 0;
}

.info-card--highlight .info-card__head .icon {
	color: var(--color-green);
}

/* ==========================================================================
   2. Compact layout — a short list inside an info-card
   ========================================================================== */

/**
 * For lists whose items are a label and one short value, such as a set of
 * general e-mail addresses. Down the full content column those read as a lot of
 * white space and a lot of rules; three across keeps each label with its value.
 *
 * Overrides the orange prose bullet from components/page.css, which is for
 * running text and fights a gridded list.
 */
.info-card--compact .info-card__body ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-content .info-card--compact .info-card__body li {
	min-width: 0;
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--color-gray-shade);
	overflow-wrap: break-word;
}

.page-content .info-card--compact .info-card__body li::before {
	content: none;
}

/* ==========================================================================
   3. contact-person
   ========================================================================== */

/**
 * Blocks are siblings in .page-content with no wrapper of their own, so the
 * grid goes on .page-content, scoped with :has() to pages that carry the cards.
 * Same approach as person.css — see the note there.
 *
 * Everything is full width by default and the two half-width block types opt
 * back in, which is shorter than excluding each of the others by name.
 */
.page-content:has(> .contact-person, > .info-card--half) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.page-content:has(> .contact-person, > .info-card--half) > * {
	grid-column: 1 / -1;
}

.page-content:has(> .contact-person, > .info-card--half) > .contact-person,
.page-content:has(> .contact-person, > .info-card--half) > .info-card--half,
.page-content:has(> .contact-person, > .info-card--half) > .person-card {
	grid-column: span 1;
}

/**
 * Margins do not collapse between grid items, so base.css's `margin: 0 0 1em`
 * on a heading lands entirely below it and stacks on the row gap — 16px above
 * a section heading against 40px below. Restate both sides here so a heading
 * sits closer to the section it introduces than to the one it ends.
 */
.page-content:has(> .contact-person, > .info-card--half) > h2 {
	margin-top: var(--spacing-half);
	margin-bottom: 10px;
}

.page-content:has(> .contact-person, > .info-card--half) > h2:first-child {
	margin-top: 0;
}

.page-content .contact-person {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	background: var(--color-white);
	border: 1px solid var(--color-gray-shade);
	border-radius: 8px;
}

.contact-person__role {
	font-size: 11px;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-red-light);
}

.contact-person__name {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
	color: var(--color-body);
}

.contact-person__links {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* page.css gives .page-content li an orange bullet and 20px of left padding;
   these rows carry their own icon instead. */
.page-content .contact-person__links li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 0;
}

.page-content .contact-person__links li::before {
	content: none;
}

.contact-person__links .icon {
	color: var(--color-primary);
}

/* ==========================================================================
   4. Link treatment inside both blocks
   ========================================================================== */

.page-content .contact-person__links a,
.page-content .info-card__body a {
	color: var(--color-body);
	overflow-wrap: break-word;
}

.page-content .contact-person__links a:hover,
.page-content .info-card__body a:hover {
	color: var(--color-secondary);
}

/* ==========================================================================
   5. Map
   ========================================================================== */

.contact-map {
	position: relative;
	aspect-ratio: 16 / 7;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	background: var(--color-gray-shade);
}

.contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/**
 * A dragged finger over an iframe pans the map instead of scrolling the page.
 * The shield takes that first touch; assets/js/map-embed.js removes it on
 * click. Without JavaScript the shield never appears, so the map stays usable.
 */
.contact-map__shield {
	position: absolute;
	inset: 0;
	display: none;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 16px;
	width: 100%;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--font-size-small);
	color: var(--color-white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.contact-map--shielded .contact-map__shield {
	display: flex;
}

/**
 * core/file is the allowed way to place a PDF (see inc/editor-lockdown.php).
 * It ships with a download button beside the link, which points at the same
 * file and says the same thing twice — the content sets showDownloadButton to
 * false, and the one remaining link carries the action in the theme's pill.
 */
.page-content .wp-block-file {
	margin-top: var(--spacing-small);
}

.page-content .wp-block-file a:not(.wp-block-file__button) {
	display: inline-flex;
	align-items: center;
	padding: 9px 20px;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-button);
	font-weight: var(--font-weight-medium);
	color: var(--color-primary);
}

.page-content .wp-block-file a:not(.wp-block-file__button):hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* ==========================================================================
   6. Mobile
   ========================================================================== */

@media screen and (max-width: 875px) {
	.page-content:has(> .contact-person, > .info-card--half) {
		grid-template-columns: 1fr;
	}

	.info-card--compact .info-card__body ul {
		grid-template-columns: 1fr;
	}

	/* 16:7 is 157px tall on a 360px screen. */
	.contact-map {
		aspect-ratio: 4 / 3;
	}
}