/*!
 * FG Commerce — página de contacto y ubicación.
 *
 * Un único mostrador: datos, acciones y mapa a un lado, formulario al otro.
 * Sección, título de página, lead, botones y la vista previa del mapa vienen
 * de blocks.css, que esta superficie también carga; aquí solo vive la
 * composición propia de la página. Los valores provienen de tokens.css.
 */

.fg-contact-page {
	padding-block-end: var(--fg-space-56);
}

.fg-contact-page-head {
	margin-block-end: var(--fg-space-32);
}

/* La medida va en el lead y no en el contenedor: `ch` se resuelve con la letra
   del propio elemento, y el lead es más grande que el texto base. */
.fg-contact-page-head .fg-lead {
	max-width: 52ch;
	margin: 0;
}

/* Mostrador ------------------------------------------------------------- */

.fg-contact-desk {
	display: grid;
	gap: var(--fg-space-40);
	align-items: start;
}

.fg-contact-facts-list {
	display: grid;
	gap: var(--fg-space-24);
	margin: 0;
}

.fg-contact-fact dt {
	margin: 0 0 var(--fg-space-4);
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	font-weight: var(--fg-font-weight-control);
	line-height: var(--fg-line-height-small);
}

.fg-contact-fact dd {
	max-width: 44ch;
	margin: 0;
	font-size: var(--fg-font-size-card-title);
	line-height: var(--fg-line-height-card);
}

.fg-contact-fact dd + dd {
	margin-block-start: var(--fg-space-4);
}

.fg-contact-fact dd a {
	color: var(--fg-color-action);
	font-weight: var(--fg-font-weight-strong);
}

/* El ancla de cobertura llega desde cada ficha: que no quede pegada al borde. */
#cobertura {
	scroll-margin-block-start: var(--fg-space-24);
}

.fg-contact-facts .fg-actions {
	margin-block-start: var(--fg-space-32);
}

/* Formulario ------------------------------------------------------------ */

/*
 * Panel de papel con campos blancos: separa el formulario del resto del
 * mostrador sin otra línea de borde, y los campos quedan como la superficie
 * donde se escribe.
 */
.fg-contact-form-panel {
	padding: var(--fg-space-24);
	border-radius: var(--fg-radius-panel);
	background: var(--fg-color-paper);
}

.fg-contact-form-title {
	margin: 0 0 var(--fg-space-8);
	font-size: var(--fg-font-size-group-title);
	line-height: var(--fg-line-height-heading);
}

.fg-contact-form-intro {
	max-width: 60ch;
	margin: 0 0 var(--fg-space-24);
	color: var(--fg-color-muted);
}

/*
 * base.css no fija ancho a los controles: cada superficie decide. Aquí ocupan
 * su columna; sin esto salían con su ancho intrínseco (~200 px) y el de
 * cantidad desbordaba el panel.
 */
.fg-contact-form :is(input, select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.fg-contact-form-row {
	display: grid;
	gap: 0 var(--fg-space-16);
}

.fg-contact-form-actions {
	margin-block: var(--fg-space-8) var(--fg-space-12);
}

.fg-contact-form-actions .fg-button {
	width: 100%;
}

.fg-contact-form > :last-child {
	margin-block-end: 0;
}

.fg-contact-form-fallback {
	margin: 0;
}

/* El mapa cierra la columna de datos, bajo las acciones. */
.fg-contact-facts .fg-contact-map {
	margin-block-start: var(--fg-space-32);
}

@media (width >= 640px) {
	.fg-contact-form-panel {
		padding: var(--fg-space-32);
	}

	.fg-contact-form-row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.fg-contact-form-actions .fg-button {
		width: auto;
	}
}

@media (width >= 1024px) {
	.fg-contact-page {
		padding-block-end: var(--fg-space-72);
	}

	.fg-contact-page-head {
		margin-block-end: var(--fg-space-48);
	}

	.fg-contact-desk {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--fg-space-64);
	}
}