/*
 * Footer. Figma desktop 1560:40640 (1440x868, purple band, 84px padding, rows 44px
 * apart: link columns + contact / reviews + trees + accreditation / big logo / copyright).
 * Mobile 1720:32701 (390 wide, 64px padding, blocks 32px apart, columns 2-up).
 */

.footer {
	position: relative;
	overflow: hidden;
	background: var(--c-bg-purple);
	color: var(--c-text-dark);
	isolation: isolate;
}

/* ---------- Decorative shapes ---------- */
.footer__shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.footer__shape { position: absolute; height: auto; max-width: none; }
.footer__shape--1 { left: 69.31%; bottom: 64px; width: 37.78%; }
.footer__shape--2 { left: -3.06%; top: -30px; width: 33.33%; }
.footer__shape--3 { left: 90.65%; top: -100px; width: 7.66%; }

/* ---------- Layout ---------- */
.footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 277px;
	grid-template-areas:
		"nav contact"
		"trust trust"
		"brand brand"
		"copy copy";
	gap: 44px 0;
	padding-block: 84px;
}

.footer__nav {
	grid-area: nav;
	display: grid;
	grid-template-columns: minmax(0, 290fr) minmax(0, 332fr) minmax(0, 321fr);
}

.footer__contact { grid-area: contact; }
.footer__trust { grid-area: trust; }
.footer__brand { grid-area: brand; }
.footer__copyright { grid-area: copy; }

/* ---------- Link columns ---------- */
.footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 280px;
	padding-left: 15px;
	border-left: 1px solid var(--c-primary);
}

.footer__col-title { font: var(--f-header-2xs); }

.footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font: var(--f-body-xs);
}

.footer__col--bold .footer__links { gap: 16px; font: var(--f-header-2xs); }

.footer__link { transition: color .15s ease; }
.footer__link:hover { color: var(--c-primary); }

/* ---------- Contact ---------- */
.footer__contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer__address {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-style: normal;
}

.footer__row {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 217px;
	font: var(--f-body-xs);
}

.footer__row--phone { align-items: flex-start; max-width: none; }
.footer__row-icon { --icon-size: 16px; color: var(--c-text-dark); }

.footer__phone {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font: var(--f-subtitle-m);
}

.footer__hours { font: var(--f-subtitle-s); color: var(--c-text-grey); }

/* ---------- Reviews / trees / accreditation ---------- */
.footer__trust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.footer__badge {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.footer__badge-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.footer__badge-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font: var(--f-header-xs);
	white-space: nowrap;
}

.footer__stars { display: inline-flex; gap: 6px; --icon-size: 20px; color: var(--c-secondary); }
.footer__tree { --icon-size: 20px; color: var(--c-secondary); }

.footer__badge-link {
	--icon-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: var(--f-body-s);
	white-space: nowrap;
}

.footer__badge-link:hover { color: var(--c-primary); }
.footer__badge-note { font: var(--f-body-s); }

.footer__badge-img { display: block; }
.footer__badge-img img { height: 40px; object-fit: cover; }
/* Badge asset is cropped to its border: fills the 194x40 box flush left (2010:59857). */
.footer__badge-img--review img { width: 194px; object-fit: fill; }
.footer__badge-img--trees img { width: 82px; }

.footer__accreditation {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	width: 598px;
	max-width: 100%;
	min-height: 106px;
}

.footer__accreditation-text { font: var(--f-body-xs); }
.footer__accreditation-text--mobile { display: none; }

.footer__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.footer__logo-item { display: block; }
/* Figma boxes 128/129/74 x34: the logo fills the box (cropped top/bottom like the Figma image fill). */
.footer__logo-item img { width: var(--logo-w, auto); height: 34px; object-fit: cover; }

/* ---------- Big logo + copyright ---------- */
.footer__brand {
	--logo-h: clamp(70px, 11.25vw, 162px);
	display: inline-flex;
	align-items: center;
	gap: calc(var(--logo-h) * .271);
	justify-self: start;
	max-width: 100%;
}

.footer__brand-mark { width: calc(var(--logo-h) * 1.017); height: var(--logo-h); color: var(--c-primary); }
.footer__brand-name { width: calc(var(--logo-h) * 3.66); height: var(--logo-h); color: var(--c-text-dark); }

.footer__copyright {
	font: var(--f-subtitle-s);
	color: var(--c-text-grey);
	text-align: center;
}

/* ---------- Tablet: contact under the columns ---------- */
@media (max-width: 1100px) {
	.footer__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "nav" "contact" "trust" "brand" "copy";
	}

	.footer__contact { max-width: 350px; }
	.footer__trust { flex-wrap: wrap; align-items: flex-start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.footer__shape--1 { left: 47.69%; bottom: 301px; width: 92.82%; }
	.footer__shape--2 { left: -5.13%; top: -50px; width: 64.1%; }
	.footer__shape--3 { left: 75.38%; top: -105px; width: 19.49%; }

	.footer__inner { gap: 32px; padding-block: 64px; }

	.footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 18px;
	}

	.footer__col { gap: 10px; min-height: 0; }
	.footer__col--bold { grid-column: 1 / -1; }
	.footer__col--bold .footer__links { gap: 10px; }

	.footer__contact { max-width: none; }

	.footer__trust {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.footer__accreditation { width: 100%; min-height: 0; }
	.footer__logos { justify-content: space-between; gap: 12px; }
	.footer__logo-item img { width: calc(var(--logo-w) * 30 / 34); height: 30px; }   /* 112/114/65 x30 */
	.footer__accreditation-text--desktop { display: none; }
	.footer__accreditation-text--mobile { display: block; }

	.footer__brand { --logo-h: min(70px, calc((100vw - 40px) / 4.95)); }

	.footer__copyright { text-align: left; }
}