/* =============================================================
   Contact — screen styles.
   Shared pieces live in main.css: .card, .aside-card, the form
   system (.form, .field, .form-status) and the icon badge.
   ============================================================= */

/*
 * Form first, then the ways to reach a location without one. Below 992px they
 * stack in that order, which is also the order of usefulness: someone who came
 * to write a message gets the form, and someone who wants to call scrolls past
 * a form they were never going to fill in — shorter than the reverse.
 */
.contact-form__title {
	margin-bottom: var(--space-2);
	font-size: var(--fs-h2);
	color: var(--color-navy);
}

.contact-form__intro {
	margin-bottom: var(--space-5);
	font-size: var(--fs-sm);
	color: var(--color-text);
}

/*
 * The "don't send us anything sensitive" line. Deliberately quiet: it is a
 * caution, not a warning, and styling it like an error would make every visitor
 * think they had done something wrong before they typed a word.
 */
.contact-form__notice {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	margin-bottom: var(--space-5);
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text);
	background: var(--color-surface-soft);
	border-radius: var(--radius-sm);
}

/*
 * Top, not centred: on a phone this notice runs to four or five lines, and an
 * icon floating in the middle of a paragraph loses the anchor to where reading
 * starts. Same choice as .form-status__message right above it in this form, the
 * footer contact list and the location cards.
 *
 * The 1px is optical, not structural: an 18px icon box next to a 20.8px line box
 * sits 1.4px above the first line's centre, which reads as "slightly too high"
 * rather than as aligned. The footer nudges 2px for its larger line box.
 */
.contact-form__notice .icon {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--color-link);
}

.contact-aside {
	display: grid;
	gap: var(--space-5);
}

.contact-list {
	display: grid;
	gap: var(--space-5);
	/*
	 * Each value sits in a narrow column beside its icon, and a short line such
	 * as the opening hours could leave its last word alone on a second line (in
	 * Spanish, from 320 to 360 px and around 1024 px). `pretty`, as on card
	 * titles, moves a word down to keep it company. Measured from 320 to
	 * 1920 px, the card keeps its height. Unsupported browsers wrap as before.
	 */
	text-wrap: pretty;
}

/*
 * Only when something follows. This margin existed to clear a button under the
 * list; with the button gone it became 20px of dead space between the last line
 * and the card's own padding. Tied to the sibling rather than deleted so the
 * spacing comes back on its own if a card ever puts an action back.
 */
.contact-list:not(:last-child) {
	margin-bottom: var(--space-5);
}

.contact-list__item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
}

.contact-list__label {
	display: block;
	font-size: var(--fs-sm);
	color: var(--color-ink);
}

.contact-list__value {
	font-size: var(--fs-sm);
	color: var(--color-text);
}