/* Brasil Flores — Responsive CSS
   Mobile-first (390px) → desktop (1440px) */

/* ===========================
   GUTTER / BASE
   =========================== */
:root {
	--bf-gutter: 1rem;
}

/* ===========================
   MOBILE MENU TOP BAR
   =========================== */
.bf-mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--bf-space-4) var(--bf-gutter);
	border-bottom: 1px solid var(--bf-border);
}

.bf-mobile-menu__title {
	font-family: var(--bf-font-heading);
	font-size: var(--bf-text-xl);
	font-weight: var(--bf-weight-bold);
	color: var(--bf-green-950);
}

.bf-mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--bf-text);
	border-radius: var(--bf-radius-full);
}

.bf-mobile-menu__close:hover {
	background: var(--bf-green-50);
}

/* Very small phones */
@media (max-width: 380px) {
	:root {
		--bf-gutter: 0.75rem;
	}

	.bf-hero {
		min-height: 440px;
		min-height: clamp(440px, 78svh, 520px);
		border-radius: var(--bf-radius-md);
	}

	.bf-trust__item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--bf-space-2);
	}
}

/* ===========================
   TABLET (768px)
   =========================== */
@media (min-width: 768px) {
	:root {
		--bf-gutter: 1.5rem;
	}

	/* Hero */
	.bf-hero {
		min-height: 560px;
	}

	.bf-hero__cta-row {
		flex-direction: row;
	}

	.bf-hero__cta {
		width: auto;
	}

	/* Trust */
	.bf-trust__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--bf-space-4);
		padding: var(--bf-space-6) 0;
	}

	.bf-trust__item {
		padding: var(--bf-space-4);
	}

	/* Section spacing */
	.bf-section {
		padding: var(--bf-space-20) 0;
	}

	/* Section head: title + desc on one row */
	.bf-section-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.bf-section-head__link {
		margin-left: auto;
	}

	/* Category grid: 2 cols on tablet */
	.bf-category-grid {
		gap: var(--bf-space-4);
	}

	/* Product grid: 2 cols on tablet */
	.bf-product-grid {
		gap: var(--bf-space-5);
	}

	/* Funeral grid */
	.bf-funeral-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--bf-space-5);
	}

	/* Atelier: two columns */
	.bf-atelier__inner {
		grid-template-columns: 5fr 7fr;
		gap: var(--bf-space-12);
	}

	/* Testimonials */
	.bf-testimonial-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Footer */
	.bf-footer__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--bf-space-10);
	}
}

/* ===========================
   LAPTOP (1024px)
   =========================== */
@media (min-width: 1024px) {
	:root {
		--bf-gutter: 2rem;
	}

	/* Header */
	.bf-header__menu-toggle {
		display: none;
	}

	.bf-header__icon-btn--account {
		display: flex;
	}

	.bf-header__main {
		flex-wrap: nowrap;
	}

	.bf-header__search {
		order: 2;
		flex: 1 1 auto;
		max-width: 460px;
		margin: 0 auto;
	}

	.bf-header__actions {
		order: 3;
		margin-left: 0;
	}

	.bf-header__nav {
		display: block;
	}

	/* Hero (altura controlada por el clamp base) */
	.bf-hero__title {
		font-size: clamp(2.8rem, 2.2rem + 2vw, 4rem);
	}

	/* Section spacing */
	.bf-section {
		padding: var(--bf-space-24) 0;
	}

	/* Category grid: 4 cols */
	.bf-category-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Product grid: 4 cols */
	.bf-product-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--bf-space-6);
	}

	/* Footer: 4 balanced columns */
	.bf-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* ===========================
   WIDE (1440px+)
   =========================== */
@media (min-width: 1440px) {
	:root {
		--bf-gutter: 2.5rem;
	}
}