/* ==========================================================================
   Block 06 – footer
   Explicit grid-row assignments (rather than relying on auto-placement)
   keep the legal nav locked to the same row as the contact info, next to
   it from tablet up, matching the design.
   ========================================================================== */

/* padding scales up with viewport instead of staying fixed at the
   100px/120px spec value on every screen size - too much empty space
   around a small phone's content. */
.block-footer {
	background-color: var(--color-header-2);
	padding: 5rem 0 6rem;
}

@media (min-width: 30em) {
	.block-footer {
		padding: 7rem 0 8rem;
	}
}

@media (min-width: 48em) {
	.block-footer {
		padding: 10rem 0 12rem;
	}
}

/* Spec (both h2's in the footer): weight 900, 35px font-size, 47px
   line-height, 0 letter-spacing (same ratio as the hero subline). */
.block-footer h2 {
	font-size: clamp(1.8rem, 1.82vw, 3.5rem);
	line-height: 1.34;
	letter-spacing: 0;
}

.block-footer-social {
	grid-column: 1 / 13;
	grid-row: 1;
}

/* 30px gap from the h2 to the icon row. */
.block-footer-social-links {
	margin-top: 3rem;
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
}

.block-footer-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	color: var(--color-text);
	transition: color var(--transition-base), transform var(--transition-base);
}

.block-footer-icon svg {
	width: 100%;
	height: 100%;
}

.block-footer-icon:hover {
	color: var(--color-accent);
	transform: translateY(-0.2rem);
}

/* Spec: weight 300, 25px font-size, 35px line-height, 0 letter-spacing,
   bottom-aligned with the icons (see align-items:flex-end above). */
.block-footer-follow {
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
}

/* 70px gap from the social block to the contact heading, only in full from
   48em up - smaller on mobile so it's not disproportionate next to the
   shrunken (clamp-minimum) heading text. */
.block-footer-contact-heading {
	grid-column: 1 / 13;
	grid-row: 2;
	margin-top: 4rem;
}

@media (min-width: 48em) {
	.block-footer-contact-heading {
		margin-top: 7rem;
	}
}

/* 20px gap from the contact heading to the fon./mail. rows. */
.block-footer-contact-info {
	grid-column: 1 / 13;
	grid-row: 3;
	margin-top: 2rem;
}

.block-footer-contact-info dl {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* Spec: fon./mail. rows both 25px font-size / 35px line-height / 0
   letter-spacing - the label (dt) is weight 700, the value (dd/a) inherits
   the body's weight 300. align-items keeps both rows the same height even
   though the label is bold and the value isn't. */
.block-footer-contact-row {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
}

.block-footer-contact-row dt {
	font-weight: var(--font-weight-bold);
	width: 6rem;
	flex-shrink: 0;
}

.block-footer-contact-row dd {
	margin: 0;
}

.block-footer-contact-row a {
	transition: color var(--transition-base);
}

.block-footer-contact-row a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

/* Spec: weight 300, 25px font-size, 35px line-height, 0 letter-spacing -
   same as fon./mail. Stacked (not side by side) with the same row gap as
   .block-footer-contact-info's dl, so impressum lines up with the fon.
   row and datenschutz with the mail. row next to it. */
.block-footer-legal {
	grid-column: 1 / 13;
	grid-row: 4;
	margin-top: 2.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: clamp(1.4rem, 1.3vw, 2.5rem);
	line-height: 1.4;
	letter-spacing: 0;
}

.block-footer-legal a {
	transition: color var(--transition-base);
}

.block-footer-legal a:hover {
	color: var(--color-accent);
}

@media (min-width: 48em) {
	.block-footer-social {
		grid-column: 1 / 7;
	}

	.block-footer-contact-heading {
		grid-column: 1 / 9;
	}

	.block-footer-contact-info {
		grid-column: 1 / 9;
	}

	.block-footer-legal {
		grid-column: 9 / 13;
		grid-row: 3;
		margin-top: 3rem;
		align-items: flex-end;
		align-self: start;
	}
}