/*
 * Responsividade — Páginas internas (page-sobre.php, page-profissionais.php, page-showroom.php).
 * Seletores próprios: .mer-stats*, .mer-values-grid/.mer-value-card*, .mer-team-*, .mer-steps*,
 * .mer-spaces/.mer-space*, .mer-gallery*, .mer-showroom-visit*, .mer-cta__actions, .mer-hero--centered,
 * .mer-about-split*.
 * Carregado depois de main.css. Breakpoints: xl 1200 · lg 1024 · md 768 · sm 480.
 * NÃO tocar em seletores da Foundation (_base.css) nem em .mer-section-header (Foundation).
 */

/* ═══════════════════════════════════════════════════════════════════════
   bp-lg 1024 — tablet landscape e abaixo: esconde o menu sticky de ambientes.
   É desktop-only; em mobile/tablet o scroll pelos ambientes é normal.
   ═══════════════════════════════════════════════════════════════════════ */
/* bp-lg */
@media (max-width: 1024px) {
	.mer-space-nav { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   bp-md 768 — tablet: reduz o hero centrado (título 64→48, menos altura).
   .mer-stats já cai para 2 colunas no main.css neste breakpoint.
   ═══════════════════════════════════════════════════════════════════════ */
/* bp-md */
@media (max-width: 768px) {
	.mer-hero--centered { min-height: 380px; }
	.mer-hero--centered .mer-hero__title { font-size: var(--mer-fs-6xl); }

	/* História — media empilha sobre o texto */
	.mer-about-split { grid-template-columns: 1fr; gap: var(--mer-space-7); }
}

/* ═══════════════════════════════════════════════════════════════════════
   bp-sm 480 — telemóvel: encolhe números grandes, empilha CTAs e garante
   grelhas sem overflow a 320px.
   ═══════════════════════════════════════════════════════════════════════ */
/* bp-sm */
@media (max-width: 480px) {
	/* Hero centrado — título e altura menores, botão full-width */
	.mer-hero--centered { min-height: 300px; }
	.mer-hero--centered .mer-hero__title { font-size: var(--mer-fs-5xl); }
	.mer-hero__centered-inner { gap: var(--mer-space-3); }
	.mer-hero__centered-inner .mer-btn { width: 100%; }

	/* Números — mantém 2 colunas (do main.css) mas reduz o valor 48→42 */
	.mer-stats { gap: var(--mer-space-5); }
	.mer-stats__value { font-size: var(--mer-fs-5xl); }

	/* Números editorial — rótulo sobe para cima do número, alinhado à esquerda */
	.mer-stats--feature .mer-stats__item { grid-template-columns: 1fr; }
	.mer-stats--feature .mer-stats__label {
		order: -1;
		justify-self: start;
		text-align: left;
		max-width: none;
		padding-top: 0;
		margin-bottom: var(--mer-space-3);
	}

	/* Grelhas de cards — força coluna única para evitar min-width a estourar */
	.mer-values-grid,
	.mer-team-grid { grid-template-columns: 1fr; }

	/* Steps — número decorativo 48→42 */
	.mer-steps__number { font-size: var(--mer-fs-5xl); }

	/* Ambientes — título sobre a capa 26→20 com padding mais apertado */
	.mer-space__title {
		font-size: var(--mer-fs-2xl);
		padding: var(--mer-space-5) var(--mer-space-5);
	}

	/* Galeria — thumbs encolhem até caber (evita min 180px a estourar) */
	.mer-gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }

	/* CTA final — botões empilhados full-width */
	.mer-cta__actions { flex-direction: column; }
	.mer-cta__actions .mer-btn { width: 100%; }

	/* Info da visita — ações empilhadas full-width */
	.mer-showroom-visit__actions { flex-direction: column; }
	.mer-showroom-visit__actions .mer-btn { width: 100%; }
}