/* ============================================================
   FOOTER
   Split out of style.css — see functions.php for the enqueue.
   ============================================================ */

/* ============================================================
   3. FOOTER
   ============================================================ */

.footer {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 1025px;
	padding: 56px 32px 32px;
	background: var(--espresso);
	color: var(--cream);
	overflow: hidden;
	margin-top: 0;
}

.footer__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Crop matches the Figma fill transform on the background photo. */
.footer__media img {
	position: absolute;
	left: -17.66%;
	top: 0;
	width: 168.56%;
	height: 157.87%;
	max-width: none;
	object-fit: cover;
}

.footer__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay);
}

.footer__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1377px;
	margin-inline: auto;
	padding: 32px 16px 16px;
	border-radius: 8px;
	background: var(--panel);

	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	grid-template-areas:
		"logo    nav"
		"gallery aside";
	column-gap: 62px;
	row-gap: 72px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.footer__panel {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* --- logo --- */

.footer__logo {
	grid-area: logo;
	position: relative;
	width: 523px;
	max-width: 100%;
	aspect-ratio: 523 / 141;
	overflow: hidden;
}

/* --- nav --- */

/* The Figma header row is 1067px wide inside a 1345px panel, which parks the
   nav 79px into the right column rather than against the panel edge. */
.footer__nav {
	grid-area: nav;
	justify-self: start;
	padding-left: 79px;
}

.footer__nav ul {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 133px;
}

.footer__nav a {
	display: block;
	font-size: 18px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--cream);
    text-align: left;
}

.footer__nav a:hover {
	opacity: 0.7;
}

/* --- gallery --- */

.footer__gallery {
	grid-area: gallery;
	display: flex;
	align-items: flex-end;
	gap: 4px;
}

.footer__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer__card figcaption {
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--cream);
    text-align: left;
}

.footer__photo {
	display: block;
	height: 273px;
	border-radius: 8px;
	overflow: hidden;
}

.footer__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- cta + social column --- */

/* The 412px text block is right-aligned inside the 490px aside column. */
.footer__cta {
	grid-area: aside;
	align-self: start;
	justify-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 33px;
	width: 412px;
	max-width: 100%;
    text-align: left;
}

.footer__tagline {
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.72px;
	color: var(--cream);
    text-align: left;
}

.footer__social {
	grid-area: aside;
	align-self: end;
	justify-self: end;
	display: flex;
	gap: 4px;
}

.footer__social a {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 36px;
	border-radius: 4px;
	transition: background-color 0.2s var(--ease);
}

/* The frame is drawn as two 8px brackets, so the middle 20px of each vertical
   edge stays open — that break is part of the design, not a rounding artefact. */
.footer__social a::before,
.footer__social a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
	border: 1px solid var(--mocha);
	pointer-events: none;
	transition: border-color 0.2s var(--ease);
}

.footer__social a::before {
	top: 0;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}

.footer__social a::after {
	bottom: 0;
	border-top: 0;
	border-radius: 0 0 4px 4px;
}

.footer__social a:hover {
	background: rgba(123, 91, 69, 0.35);
}

.footer__social a:hover::before,
.footer__social a:hover::after {
	border-color: var(--cream);
}

.footer__social img {
	width: 16px;
	height: 16px;
}

/* ============================================================
   TABLET (768–1024px) — Figma node 292:1642. Same panel treatment
   (translucent card over the full-bleed photo) as desktop, narrowed to
   960px, with the social icons regrouped under the logo instead of
   under the CTA (nav takes their old spot on the right of that row).
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

	.footer {
		min-height: auto;
	}

	.footer__panel {
		max-width: 960px;
	}

	.footer__logo {
		width: 375px;
		align-self: start;
	}

	.footer__nav {
		justify-self: end;
		padding-left: 0;
	}

	.footer__nav ul {
		width: auto;
	}

	/* paired with the logo (top of the same column) instead of the CTA */
	.footer__social {
		grid-area: logo;
		align-self: end;
		justify-self: start;
	}

	.footer__photo {
		height: 160px;
	}

	.footer__cta {
		width: 375px;
	}

	.footer__bottom {
		margin-top: 32px;
		text-align: center;
	}

	.footer__copy {
		margin: 0;
		font-size: 18px;
		text-transform: uppercase;
	}
}

/* ============================================================
   MOBILE (<=767px) — Figma node 298:2833. The translucent panel card
   is dropped: content sits straight on the footer's solid --espresso
   background (so the full-bleed photo is hidden), stacked in a new
   order, ending in a short decorative strip of that same photo with
   the copyright overlaid on it.
   ============================================================ */

@media (max-width: 767px) {

	.footer {
		min-height: auto;
		padding: 64px 20px 0;
	}

	.footer__media {
		display: none;
	}

	.footer__panel {
		display: flex;
		flex-direction: column;
		max-width: none;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.footer__logo {
		order: 1;
		width: 302px;
		margin: 0 auto;
	}

	.footer__cta {
		order: 2;
		text-align: center;
		align-items: center;
	}

	.footer__tagline {
		text-align: center;
	}

	.footer__nav {
		order: 3;
		padding-left: 0;
	}

	.footer__nav ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
		gap: 18px;
	}

	.footer__nav a {
		letter-spacing: -0.25px;
	}

	.footer__social {
		order: 4;
		align-self: flex-start;
	}

	.footer__gallery {
		order: 5;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.footer__photo {
		height: 160px;
	}

	/* decorative reprise of the footer background photo, carrying the
	   copyright — Figma node 298:2888/2889/2890 */
	.footer__bottom {
		position: relative;
		margin-top: 64px;
		height: 179px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image:
			linear-gradient(rgba(26, 22, 21, 0.48), rgba(26, 22, 21, 0.48)),
			url("../img/footer-bg.jpg");
		background-size: cover;
		background-position: center;
	}

	.footer__copy {
		margin: 0;
		font-size: 16px;
		letter-spacing: -0.25px;
		text-transform: uppercase;
		text-align: center;
	}
}