/*
 * Gallery page footer section — US-GAL-04
 *
 * The band that closes the Gallery page. The CTA directly above it sits on
 * --color-primary-800, so this footer drops to the deepest brand surface
 * (--color-bg-dark / primary-900) with the shop photo faded behind it: the two
 * adjacent dark bands read as separate surfaces, and the layout differs too
 * (the CTA is a split; this is a brand row + photo strip over a column grid).
 *
 *   Desktop (>1024px): brand row — brand/tagline/menu button on the left, a
 *                      four-frame photo strip on the right — then a 4-column
 *                      grid (closing line + social (wider) | visit | hours |
 *                      explore), closed by a slim bottom bar.
 *   Tablet (<=1024px): photo strip drops below the brand text; 2-column grid
 *                      with the about column spanning both.
 *   Mobile (<=640px):  fully stacked, full-width button, 2-up photo strip,
 *                      bottom bar stacked.
 *
 * Every colour / type / spacing / radius / shadow / motion value comes from
 * assets/css/design-tokens.css — no hardcoded hex values, no arbitrary px.
 * Motion is minimal (brand brief: 15/100): hover and focus transitions only,
 * all disabled under prefers-reduced-motion. Scoped entirely under
 * .amber-footer-gal so nothing can leak into the header nav or other sections.
 */

.amber-footer-gal {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(var(--space-12), 6vw, var(--space-20)) 0 var(--space-8);
	background: var(--color-bg-dark);
	color: var(--color-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

/* Amber hairline along the top edge, separating this band from the CTA above. */
.amber-footer-gal::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--space-1);
	background: linear-gradient(
		90deg,
		var(--color-highlight-500) 0%,
		var(--color-accent-500) 55%,
		var(--color-primary-600) 100%
	);
	z-index: 2;
}

/* The faded shop photo. Added only when the theme actually ships the file.
   The scrim is derived from the warm dark surface token so the photo never
   shifts the band towards a cool blue that the palette does not contain. */
.amber-footer-gal.has-backdrop {
	/* Fallback for browsers without color-mix(): the solid dark surface. */
	--amber-footer-gal-scrim: var(--color-bg-dark);
	--amber-footer-gal-scrim-soft: var(--color-bg-dark);
}

@supports (background: color-mix(in srgb, red, blue)) {
	.amber-footer-gal.has-backdrop {
		--amber-footer-gal-scrim: color-mix(in srgb, var(--color-bg-dark) 97%, transparent);
		--amber-footer-gal-scrim-soft: color-mix(in srgb, var(--color-bg-dark) 90%, transparent);
	}
}

.amber-footer-gal.has-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			180deg,
			var(--amber-footer-gal-scrim-soft) 0%,
			var(--amber-footer-gal-scrim) 60%,
			var(--color-bg-dark) 100%
		),
		var(--amber-footer-gal-backdrop);
	background-size: cover, cover;
	background-position: center, center center;
	pointer-events: none;
	z-index: -1;
}

.amber-footer-gal__container {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* ---------- brand row ---------- */

.amber-footer-gal__lede {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(var(--space-8), 4vw, var(--space-12));
	padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
	border-bottom: 1px solid var(--color-primary-700);
}

.amber-footer-gal__lede-text {
	min-width: 0;
}

.amber-footer-gal__brand {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-tight);
	color: var(--color-text-on-dark);
}

.amber-footer-gal__tagline {
	margin: var(--space-2) 0 0;
	font-size: var(--text-lg);
	color: var(--color-text-muted-on-dark);
	line-height: var(--leading-snug);
	max-width: var(--measure);
}

.amber-footer-gal__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: var(--space-6);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--color-accent-500);
	color: var(--color-primary-900);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: var(--letter-normal);
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition:
		background-color var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.amber-footer-gal__button:hover,
.amber-footer-gal__button:focus-visible {
	background: var(--color-accent-400);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.amber-footer-gal__button:focus-visible {
	outline: 2px solid var(--color-highlight-400);
	outline-offset: 2px;
}

/* ---------- photo strip ---------- */

.amber-footer-gal__strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.amber-footer-gal__strip-item {
	list-style: none;
	overflow: hidden;
	border: 1px solid var(--color-primary-700);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.amber-footer-gal__strip-image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* The photos sit behind the dark band's copy, so they are held back a
	   touch and come forward on hover. */
	opacity: 0.85;
	transition:
		opacity var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
}

.amber-footer-gal__strip-item:hover .amber-footer-gal__strip-image {
	opacity: 1;
	transform: scale(1.03);
}

/* ---------- column grid ---------- */

.amber-footer-gal__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(var(--space-8), 4vw, var(--space-12));
	padding: clamp(var(--space-10), 5vw, var(--space-16)) 0;
}

.amber-footer-gal__col {
	min-width: 0;
}

.amber-footer-gal__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-highlight-300);
}

.amber-footer-gal__about {
	margin: 0;
	max-width: var(--measure);
	color: var(--color-text-muted-on-dark);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.amber-footer-gal__address {
	margin: 0 0 var(--space-3);
	font-style: normal;
	color: var(--color-text-on-dark);
	line-height: var(--leading-snug);
}

/* ---------- links ---------- */

.amber-footer-gal__nav,
.amber-footer-gal__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.amber-footer-gal__nav-item + .amber-footer-gal__nav-item {
	margin-top: var(--space-2);
}

.amber-footer-gal__link,
.amber-footer-gal__social-link,
.amber-footer-gal__nav a,
.amber-footer-gal__top {
	display: inline-block;
	color: var(--color-text-muted-on-dark);
	font-size: var(--text-base);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
}

.amber-footer-gal__link:hover,
.amber-footer-gal__link:focus-visible,
.amber-footer-gal__social-link:hover,
.amber-footer-gal__social-link:focus-visible,
.amber-footer-gal__nav a:hover,
.amber-footer-gal__nav a:focus-visible,
.amber-footer-gal__top:hover,
.amber-footer-gal__top:focus-visible {
	color: var(--color-text-on-dark);
	border-bottom-color: var(--color-highlight-400);
}

.amber-footer-gal__link:focus-visible,
.amber-footer-gal__social-link:focus-visible,
.amber-footer-gal__nav a:focus-visible,
.amber-footer-gal__top:focus-visible {
	outline: 2px solid var(--color-accent-500);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.amber-footer-gal__link--grid {
	margin-top: var(--space-5);
	color: var(--color-highlight-300);
	font-size: var(--text-sm);
}

/* A footer menu assigned in wp-admin renders through wp_nav_menu(); reset the
   list chrome WordPress adds so it matches the fallback list exactly. */
.amber-footer-gal__nav li {
	list-style: none;
}

.amber-footer-gal__nav li + li {
	margin-top: var(--space-2);
}

.amber-footer-gal__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

/* ---------- hours ---------- */

.amber-footer-gal__badge {
	display: inline-block;
	margin: 0 0 var(--space-4);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
}

.amber-footer-gal__badge--open {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}

.amber-footer-gal__badge--closed {
	background: var(--color-primary-700);
	color: var(--color-primary-100);
}

.amber-footer-gal__hours {
	margin: 0;
}

.amber-footer-gal__hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-primary-700);
}

.amber-footer-gal__hours-row:last-child {
	border-bottom: 0;
}

.amber-footer-gal__hours-row.is-today .amber-footer-gal__hours-day,
.amber-footer-gal__hours-row.is-today .amber-footer-gal__hours-time {
	color: var(--color-text-on-dark);
	font-weight: 700;
}

.amber-footer-gal__hours-day {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted-on-dark);
}

.amber-footer-gal__hours-time {
	margin: 0;
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted-on-dark);
	white-space: nowrap;
}

/* ---------- bottom bar ---------- */

.amber-footer-gal__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-primary-700);
}

.amber-footer-gal__copyright {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-primary-200);
}

.amber-footer-gal__top {
	font-size: var(--text-sm);
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
	.amber-footer-gal__lede {
		grid-template-columns: minmax(0, 1fr);
	}

	.amber-footer-gal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.amber-footer-gal__col--about {
		grid-column: 1 / -1;
	}

	.amber-footer-gal__brand {
		font-size: var(--text-xl);
	}

	.amber-footer-gal__tagline {
		font-size: var(--text-base);
	}
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
	.amber-footer-gal__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.amber-footer-gal__strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.amber-footer-gal__button {
		width: 100%;
	}

	.amber-footer-gal__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.amber-footer-gal__button,
	.amber-footer-gal__link,
	.amber-footer-gal__social-link,
	.amber-footer-gal__nav a,
	.amber-footer-gal__top,
	.amber-footer-gal__strip-image {
		transition: none;
	}

	.amber-footer-gal__button:hover,
	.amber-footer-gal__button:focus-visible {
		transform: none;
	}

	.amber-footer-gal__strip-item:hover .amber-footer-gal__strip-image {
		transform: none;
	}
}