/* ========================================================================== *
 * # Footer
 * ==========================================================================
 * Brand + three link columns; the legal block (who sells Pomello, GSTIN, address) underneath.
 * ========================================================================== */

.footer-section {
	padding: var(--space-400) 0 max(var(--space-250), env(safe-area-inset-bottom));
	background: var(--panel);
	border-top: var(--border-width) solid var(--line);
	font-size: var(--label);
}

.footer-grid {
	display: grid;
	gap: var(--space-250) var(--space-150);

	@media (min-width: 500px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));

		& .footer-brand {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 1000px) {
		grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));

		& .footer-brand {
			grid-column: auto;
		}
	}
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-75);
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-25);

	& a {
		display: inline-flex;
		align-items: center;
		gap: var(--space-50);
		min-height: 44px;
		color: var(--ink-2);
		text-decoration: none;

		&:hover {
			color: var(--pri);
		}
	}
}

.footer-heading {
	margin-bottom: var(--space-50);
	font-size: var(--label);
	font-weight: 600;
	color: var(--ink);
}

.footer-column ul {
	padding: 0;

	& li {
		list-style: none;
	}

	& a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		color: var(--muted);
		text-decoration: none;

		&:hover,
		&[aria-current] {
			color: var(--pri);
		}
	}
}

.footer-legal {
	display: flex;
	flex-direction: column;
	gap: var(--space-25);
	margin-top: var(--space-300);
	padding-top: var(--space-150);
	border-top: var(--border-width) solid var(--line-2);
}