/* =====================================================
   RESPONSIVE FLUID — AMALCO
   Camada extra de adaptação automática

   OBJETIVO:
   - Não substituir o layout atual
   - Não mudar a identidade visual
   - Ajustar melhor telas grandes, médias e menores
   - Evitar quebra de cards, textos e botões

   IMPORTANTE:
   Este arquivo deve carregar por último.
===================================================== */


/* =====================================================
   VARIÁVEIS FLUIDAS GLOBAIS

   AJUSTE AQUI:
   Estes valores controlam a adaptação automática geral.
   Não alteram o layout sozinhos; são usados nos blocos abaixo.
===================================================== */

:root {
	/* Espaçamentos */
	--amalco-fluid-section-sm: clamp(56px, 6vw, 72px);
	--amalco-fluid-section-md: clamp(72px, 7vw, 104px);
	--amalco-fluid-section-lg: clamp(90px, 8vw, 128px);

	/* Gaps */
	--amalco-fluid-gap-sm: clamp(18px, 2vw, 28px);
	--amalco-fluid-gap-md: clamp(28px, 3vw, 48px);
	--amalco-fluid-gap-lg: clamp(34px, 4vw, 54px);

	/* Cards */
	--amalco-card-height-fluid: clamp(460px, 34vw, 540px);
	--amalco-card-padding-fluid: clamp(36px, 3vw, 48px) clamp(24px, 2.6vw, 38px);

	/* Botões */
	--amalco-button-height-fluid: clamp(54px, 4vw, 60px);
	--amalco-button-padding-fluid: 0 clamp(26px, 2.4vw, 32px);
}


/* =====================================================
   TELAS GRANDES — ACIMA DE 1600PX

   Objetivo:
   - Evitar que o site pareça pequeno em monitor grande.
   - Preservar o visual atual em 1366px / 1440px.
===================================================== */

@media (min-width: 1600px) {
	/* Home — logo principal cresce só em telas muito grandes */
	.home-hero__logo {
		width: clamp(600px, 32vw, 680px);
	}

	.home-hero__title {
		max-width: 1100px;
	}

	/* Heroes internas */
	.empreendimentos-hero__content,
	.contato-hero__content,
	.sobre-hero__content {
		max-width: 720px;
	}

	.empreendimentos-hero__title,
	.contato-hero__title,
	.sobre-hero__title {
		max-width: 680px;
	}

	/* Cards de empreendimentos */
	.empreendimento-card,
	.empreendimento-card__media,
	.empreendimento-card__content {
		min-height: 560px;
	}
}


/* =====================================================
   NOTEBOOKS / DESKTOPS MENORES — ATÉ 1280PX

   Objetivo:
   - Reduzir alturas e espaçamentos suavemente.
   - Evitar cards espremidos em notebook menor.
===================================================== */

@media (max-width: 1280px) {
	/* Grid de empreendimentos */
	.empreendimentos-grid {
		gap: var(--amalco-fluid-gap-md);
	}

	/* Cards de empreendimentos */
	.empreendimento-card,
	.empreendimento-card--large,
	.empreendimento-card--wide,
	.empreendimento-card--tall {
		min-height: var(--amalco-card-height-fluid);
	}

	.empreendimento-card__media,
	.empreendimento-card__content,
	.empreendimento-card--large .empreendimento-card__media,
	.empreendimento-card--wide .empreendimento-card__media,
	.empreendimento-card--tall .empreendimento-card__media {
		min-height: var(--amalco-card-height-fluid);
	}

	.empreendimento-card__content {
		padding: var(--amalco-card-padding-fluid);
	}

	/* Contato */
	.contato-canais__grid {
		gap: var(--amalco-fluid-gap-sm);
	}

	.contato-form-section__grid {
		gap: var(--amalco-fluid-gap-lg);
	}

	/* Sobre */
	.sobre-grid,
	.sobre-grid--reverse {
		gap: var(--amalco-fluid-gap-lg);
	}
}


/* =====================================================
   TABLET / TELAS INTERMEDIÁRIAS — ATÉ 900PX

   Objetivo:
   - Quebrar cards antes de ficarem apertados.
   - Melhorar iPad/tablets e notebooks estreitos.
===================================================== */

@media (max-width: 900px) {
	/* Empreendimentos: card imagem + texto vira 1 coluna */
	.empreendimento-card,
	.empreendimento-card--large,
	.empreendimento-card--wide,
	.empreendimento-card--tall {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.empreendimento-card__media,
	.empreendimento-card--large .empreendimento-card__media,
	.empreendimento-card--wide .empreendimento-card__media,
	.empreendimento-card--tall .empreendimento-card__media {
		min-height: clamp(320px, 52vw, 460px);
		height: clamp(320px, 52vw, 460px) !important;
	}

	.empreendimento-card__content {
		min-height: auto;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
	}

	/* Home portfolio: card vira 1 coluna antes de apertar */
	.portfolio-card {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.portfolio-card__image {
		min-height: clamp(280px, 50vw, 430px);
	}

	.portfolio-card__content {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	/* Sobre: imagem e texto em coluna */
	.sobre-grid,
	.sobre-grid--reverse {
		grid-template-columns: 1fr;
	}

	.sobre-grid--reverse .sobre-copy,
	.sobre-grid--reverse .sobre-media {
		order: initial;
	}
}


/* =====================================================
   MOBILE GERAL — ATÉ 700PX

   Objetivo:
   - Impedir estouro horizontal.
   - Garantir botões e filtros 100%.
   - Preservar o mobile atual.
===================================================== */

@media (max-width: 700px) {
	/* Evita estouro lateral */
	.home-hero,
	.empreendimentos-hero,
	.contato-hero,
	.sobre-hero {
		overflow-x: hidden;
	}

	/* Textos longos não quebram layout */
	.home-hero__title,
	.empreendimentos-hero__title,
	.contato-hero__title,
	.sobre-hero__title,
	.empreendimento-card__content h2,
	.portfolio-card__content h2,
	.contato-canal h3 {
		overflow-wrap: anywhere;
	}

	/* Botões ocupam largura segura */
	.portfolio-card__content a,
	.empreendimento-card__button,
	.contato-form-box button,
	.contato-form-box input[type="submit"],
	.sobre-cta__button {
		width: 100%;
		max-width: 100%;
	}

	/* Filtros seguros no mobile */
	.home-launch-filter__nav a,
	.empreendimentos-filter__nav button {
		width: 100%;
		max-width: 100%;
	}

	/* Imagens nunca estouram */
	.portfolio-card__image img,
	.empreendimento-card__media img,
	.sobre-media img {
		max-width: 100%;
	}
}


/* =====================================================
   TELAS MUITO PEQUENAS — ATÉ 390PX

   Objetivo:
   - Ajustar iPhones menores.
   - Reduzir respiros laterais.
===================================================== */

@media (max-width: 390px) {
	/* Hero Home */
	.home-hero {
		padding-left: 16px;
		padding-right: 16px;
	}

	.home-hero__logo {
		width: min(220px, 86vw);
	}

	.home-hero__title {
		font-size: 11.5px;
		letter-spacing: 0.075em;
	}

	.home-hero__bottom-nav {
		gap: 18px;
	}

	.home-hero__bottom-nav a {
		font-size: 11px;
		letter-spacing: 0.12em;
	}

	/* Heroes internas */
	.empreendimentos-hero__title,
	.contato-hero__title,
	.sobre-hero__title {
		font-size: clamp(30px, 9.2vw, 44px);
	}

	.empreendimentos-hero__text,
	.contato-hero__text,
	.sobre-hero__text {
		font-size: 11px;
		letter-spacing: 0.10em;
	}

	/* Cards e blocos */
	.empreendimento-card__content,
	.portfolio-card__content,
	.contato-canal,
	.contato-form-section__content,
	.contato-form-box,
	.contato-final__box,
	.sobre-copy,
	.sobre-cta__box {
		padding-left: 22px;
		padding-right: 22px;
	}
}