/*
 * Responsividade — Formulários (page-pedir-orcamento.php, page-contactos.php).
 * Seletores próprios: .mer-form*, .mer-quote-*, .mer-contact-card*, .mer-contacts-inline*,
 * .mer-contact-form-wrap, .mer-map.
 * Carregado depois de main.css. Breakpoints: xl 1200 · lg 1024 · md 768 · sm 480.
 * NÃO tocar em seletores da Foundation (_base.css).
 */

/* ══════════════════════════════════════════════════════════════════
 * Refinamentos responsivos. main.css já trata:
 *   .mer-quote-layout → coluna única centrada (max-width 720px) em todos os bp
 *   .mer-form__row → 1 coluna em ≤480 (bp-sm)
 * Abaixo apenas o que falta.
 * ════════════════════════════════════════════════════════════════ */

/* bp-md */
@media (max-width: 768px) {
	/* Menos padding nos cartões de formulário → inputs ganham largura. */
	.mer-quote-form,
	.mer-contact-form-wrap {
		padding: var(--mer-space-7); /* 32px → 24px */
	}
}

/* bp-sm */
@media (max-width: 480px) {
	/* Padding ainda mais reduzido: aproveita ao máximo a largura em telemóvel. */
	.mer-quote-form,
	.mer-contact-form-wrap {
		padding: var(--mer-space-5); /* → 16px */
	}

	/* Cartões de tipo de cliente ficam demasiado estreitos a 2 colunas. */
	.mer-form__radio-grid {
		grid-template-columns: 1fr;
	}

	/* Linha de material: nome a toda a largura; qtd + unidade + remover por baixo. */
	.mer-form__item-row {
		grid-template-columns: 1fr 110px 40px;
	}
	.mer-form__item-name {
		grid-column: 1 / -1;
	}

	/* Botão de submeter a toda a largura em telemóvel. */
	.mer-form__actions {
		justify-content: stretch;
	}
	.mer-form__actions .mer-btn {
		width: 100%;
	}

	/* Contactos diretos: força coluna única — evita qualquer overflow a 320px. */
	.mer-contacts-inline {
		grid-template-columns: 1fr;
	}

	/* Mapa um pouco mais alto em ecrãs de telemóvel (16/9 fica muito baixo). */
	.mer-map {
		aspect-ratio: 4 / 3;
	}

	/* Reduz padding do bloco de sucesso para acompanhar o cartão. */
	.mer-form__success {
		padding: var(--mer-space-6);
	}
}