/*
 * Heidesee Footer widget — centered brand logo on the paper texture, a rule
 * split around the two columns (Projektentwickler / Partner) and a bottom
 * legal bar. See widgets/class-footer.php. Paper texture comes from the shared
 * .hd-tex-paper hook (assets/tex.css).
 */

.hd-footer {
	/* Warm greige base (Figma footer ≈ #D8D3CF rendered with the paper texture),
	   distinct from the cooler Kalkstein used elsewhere. */
	background-color: #E0DAD6;
	color: var(--c-graphit);
	padding: clamp(48px, 6vw, 92px) var(--gutter) clamp(32px, 4vw, 48px);
}

.hd-footer > * {
	max-width: var(--wrap-max);
	margin-inline: auto;
}

/* --- Brand logo (centered, above the rule) --- */
.hd-footer__brand {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(32px, 5vw, 72px);
}

.hd-footer__brand img {
	height: clamp(120px, 14vw, 184px);
	width: auto;
	display: block;
}

/* --- Two columns; each carries half of the top rule, the grid gap makes the
       center break seen in the design. --- */
.hd-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hd-col-gap);
}

.hd-footer__col {
	border-top: 2px solid var(--c-graphit);
	padding-top: clamp(24px, 3vw, 40px);
}

.hd-footer__label {
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	font-size: 18px; /* Figma: 18px column labels */
	font-weight: var(--fw-bold);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* --- Left column: developer --- */
/* Scoped with .hd-footer so it beats Elementor's `.elementor-widget-container
   img { max-width:100% }` (which is more specific than a lone class). */
.hd-footer .hd-footer__dev-logo {
	display: block;
	width: auto;
	max-width: 60%;
	height: auto;
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* Address + contact live in one rich-text field; the paragraph margin keeps
   the phone/mail block clearly apart from the address above (customer request
   2026-08). */
.hd-footer__address {
	margin: 0 0 16px;
	line-height: 1.5;
}

.hd-footer__address p {
	margin: 0 0 1.4em;
}

.hd-footer__address p:last-child {
	margin-bottom: 0;
}

/* Links inside the rich-text address field */
.hd-footer__address a,
.hd-footer__link {
	color: var(--c-graphit);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hd-footer__address a:hover,
.hd-footer__link:hover {
	opacity: 0.6;
}

/* --- Right column: partner logos ---
   Not a uniform grid: each logo gets its own width (repeater control "Breite")
   so visually heavy marks can be scaled down and light ones up, like in Figma.
   space-between justifies each row flush to both edges with the leftover
   whitespace distributed evenly (the Figma rows do exactly that), so a row of
   three always spans the full column no matter what the widths sum to. The
   column gap is the minimum spacing AND the wrap control: it must stay large
   enough that a fourth logo can't slip into a row (Figma: 3 per row). */
.hd-footer__partners {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 2vw, 28px) clamp(12px, 1.5vw, 20px);
}

.hd-footer__partner {
	width: 26%;
}

.hd-footer__partner img {
	display: block;
	width: 100%;
	height: auto;
}

/* Empty repeater slots: faint placeholder so the row keeps its shape while
   the client has not added partner logos yet. */
.hd-footer__partner--empty {
	aspect-ratio: 165 / 141;
	background-color: rgba(30, 32, 33, 0.05);
}

/* --- Bottom legal bar ---
   A WordPress menu (location "heidesee-footer"); its links spread across the
   full width via space-between. Wraps to more rows on narrow screens. */
.hd-footer__legal {
	margin-top: clamp(40px, 6vw, 80px);
}

.hd-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px clamp(16px, 3vw, 40px);
}

.hd-footer__legal-menu a {
	color: var(--c-graphit);
	text-decoration: none;
	/* Figma: <p> medium — DM Sans Medium 18/28 */
	font-size: 18px;
	line-height: 28px;
	font-weight: var(--fw-medium);
}

.hd-footer__legal-menu a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mobile (Figma 390): the whole footer collapses to a single column —
   Projektentwickler stacks over Partner. The partner grid keeps 2 across; the
   legal menu keeps its space-between row and wraps as needed. */
@media (max-width: 767px) {
	.hd-footer__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	/* Default only — per-logo widths from the "Breite" control override this
	   (set mobile values there when a logo needs its own size). */
	.hd-footer__partner {
		width: 40%;
	}
}