/**
 * Footer design: Atlas — .esptb-ft-atlas
 *
 * Store-first: the showroom card (a drawn street map with a pin, the
 * address and a "see on map" button, the opening hours, phone and e-mail)
 * on the left; the brand, the link columns and the socials on the right.
 * Every colour, font and size comes from the kit tokens (the theme's
 * settings) unless the block sets its own. The card arranges itself by its
 * own width (container query): stacked when narrow, the map beside the
 * details when wide (tablets, or a card standing on its own).
 */

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

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-grid {
	display: grid;
	gap: var(--ftc-gap);
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-side {
	display: flex;
	flex-direction: column;
	gap: var(--ftc-gap);
	min-width: 0;
}

/* ------------------------------------------------------------ store card */

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-store {
	container-type: inline-size;
	min-width: 0;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-card {
	background: var(--ftc-card);
	border: 1px solid var(--ftc-line);
	border-radius: calc(var(--ftc-radius) * 1.6);
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.45);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
}

/* With a map the card fills its grid row: when the column beside it is
   taller, the map (never an empty strip under the details) takes up the
   extra height. A card without a map keeps its own height. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-card.has-map {
	grid-template-rows: minmax(0, 1fr) auto;
	height: 100%;
}

/* The drawn map: a street grid, two avenues, a cross street and two parks,
   all mixed from the palette so it follows every tone. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-map {
	--at-grid: color-mix(in srgb, var(--ftc-heading) 6%, transparent);
	--at-road: color-mix(in srgb, var(--ftc-heading) 12%, transparent);
	--at-park: color-mix(in srgb, var(--ftc-accent) 18%, transparent);
	background-color: color-mix(in srgb, var(--ftc-heading) 3%, var(--ftc-card));
	background-image:
		linear-gradient(112deg, transparent calc(46% - 7px), var(--at-road) calc(46% - 7px) calc(46% + 7px), transparent calc(46% + 7px)),
		linear-gradient(21deg, transparent calc(68% - 4px), var(--at-road) calc(68% - 4px) calc(68% + 4px), transparent calc(68% + 4px)),
		linear-gradient(0deg, transparent calc(27% - 3px), var(--at-road) calc(27% - 3px) calc(27% + 3px), transparent calc(27% + 3px)),
		radial-gradient(ellipse 66px 46px at 12% 22%, var(--at-park) 0 94%, transparent 100%),
		radial-gradient(ellipse 88px 44px at 92% 94%, var(--at-park) 0 94%, transparent 100%),
		repeating-linear-gradient(0deg, var(--at-grid) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(90deg, var(--at-grid) 0 1px, transparent 1px 26px);
	border-bottom: 1px solid var(--ftc-line);
	display: block;
	min-height: 148px;
	overflow: hidden;
	position: relative;
}

/* The pin stands on a soft ground mark with a slow "you are here" ring. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-map::before,
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-map::after {
	border-radius: 50%;
	content: "";
	left: 50%;
	position: absolute;
	top: 62%;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-map::before {
	background: color-mix(in srgb, var(--ftc-fill) 38%, transparent);
	height: 12px;
	transform: translate(-50%, -50%);
	width: 26px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-map::after {
	/* Two pulses on arrival, then still — nothing keeps moving in the footer. */
	animation: esptb-ft-at-pulse 2.4s ease-out 2;
	border: 2px solid var(--ftc-fill);
	height: 32px;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.35);
	width: 70px;
}

@keyframes esptb-ft-at-pulse {
	0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.35); }
	80%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

/* A teardrop pin: its tip sits on the ground mark (44px square → the tip
   is 31px from its centre once turned). */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-pin {
	align-items: center;
	background: var(--ftc-fill);
	border-radius: 50% 50% 50% 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ftc-card) 80%, transparent), -6px 6px 16px rgba(0, 0, 0, 0.32);
	color: var(--ftc-on-fill);
	display: flex;
	height: 44px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 62%;
	transform: translate(-50%, calc(-50% - 31px)) rotate(-45deg);
	width: 44px;
	z-index: 1;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-pin .esptb-ft-ic { transform: rotate(45deg); }

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-pin .esptb-ft-ic svg {
	height: 20px;
	width: 20px;
}

/* The shop's name as the map label, beside the pin head. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-poi {
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-line);
	border-radius: 999px;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.45);
	color: var(--ftc-heading);
	font-family: var(--fk-display);
	font-size: 12px;
	font-weight: 700;
	left: calc(50% + 30px);
	line-height: 1.2;
	max-width: calc(50% - 42px);
	overflow: hidden;
	padding: 6px 12px;
	position: absolute;
	text-overflow: ellipsis;
	top: calc(62% - 31px);
	transform: translateY(-50%);
	white-space: nowrap;
}

/* The details. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px 20px 24px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-kicker {
	color: var(--ftc-accent-ink);
	margin-bottom: 6px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-addr {
	color: var(--ftc-heading);
	font-family: var(--fk-display);
	font-size: calc(var(--ft-title-size, var(--fk-title-size)) * 1.15);
	font-weight: 700;
	line-height: 1.45;
	max-width: 32ch;
	text-wrap: balance;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info a.esptb-ft-at-go {
	align-self: flex-start;
	background: var(--ftc-fill);
	border-radius: 999px;
	color: var(--ftc-on-fill);
	gap: 8px;
	line-height: 1.2;
	margin-top: 14px;
	min-height: 44px;
	padding: 10px 18px 10px 14px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info a.esptb-ft-at-go::after {
	background: currentColor;
	content: "";
	flex: none;
	height: 14px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
	width: 14px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info a.esptb-ft-at-go:hover {
	color: var(--ftc-on-fill);
	filter: brightness(1.08);
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info a.esptb-ft-at-go:hover::after { transform: translateX(3px); }

/* Hours and phone / e-mail: each opens with a hairline — unless it is the
   first thing under the title (no orphan dividers when a part is missing). */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-hours { min-width: 0; }

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info > * + .esptb-ft-at-hours,
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info > * + .esptb-ft-at-reach {
	border-top: 1px solid var(--ftc-line);
	margin-top: 20px;
	padding-top: 18px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-kicker + .esptb-ft-at-hours,
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-kicker + .esptb-ft-at-reach {
	border-top: 0;
	margin-top: 4px;
	padding-top: 0;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-hours-h {
	align-items: center;
	color: var(--ftc-heading);
	display: flex;
	font-weight: 700;
	gap: 8px;
	margin-bottom: 10px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-hours-h .esptb-ft-ic { color: var(--ftc-accent-ink); }

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-hours-h .esptb-ft-ic svg {
	height: 16px;
	width: 16px;
}

/* Phone and e-mail side by side while they fit, stacked when they don't. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-reach {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px 26px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-reach .esptb-ft-crow {
	align-items: center;
	flex: 1 1 auto;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-reach .esptb-ft-ic {
	background: var(--ftc-accent-soft);
	border-radius: 50%;
	height: 40px;
	width: 40px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-reach .esptb-ft-crow-k { display: block; }

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-reach .esptb-ft-crow-v {
	color: var(--ftc-heading);
	font-weight: 600;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-reach .is-phone .esptb-ft-crow-v {
	font-family: var(--fk-display);
	font-size: 1.08em;
	letter-spacing: 0.01em;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-reach a.esptb-ft-crow:hover .esptb-ft-crow-v { color: var(--ftc-link-h); }

/* Wide card (tablets, or no link columns beside it): the map on the left. */
@container (min-width: 620px) {
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-card.has-map {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		grid-template-rows: none;
	}

	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-card.has-map .esptb-ft-at-map {
		border-bottom: 0;
		border-right: 1px solid var(--ftc-line);
		min-height: 220px;
	}

	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info {
		justify-content: center;
		padding: 26px 28px 28px;
	}
}

/* ------------------------------------------------ brand, links, socials */

/* Top-aligned, so the logo lines up with the top of the store card and a
   long about text never leaves it floating mid-paragraph. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-brand {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-brand .esptb-ft-logo { flex: none; }

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-brand .esptb-ft-about {
	flex: 1 1 260px;
	margin-top: 0;
	max-width: 52ch;
	text-wrap: pretty;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-cols {
	display: grid;
	gap: var(--ftc-gap);
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-brand + .esptb-ft-at-cols {
	border-top: 1px solid var(--ftc-line);
	padding-top: var(--ftc-gap);
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-follow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: space-between;
}

/* The "follow us" label at text size — the kit's 12px caps read too small
   in Bengali next to the icons. */
.espt-block-footer .esptb-ft-atlas .esptb-ft-at-follow .esptb-ft-social-h {
	font-size: var(--ft-link-size, var(--fk-link-size));
	letter-spacing: 0.01em;
	opacity: 1;
}

.espt-block-footer .esptb-ft-atlas .esptb-ft-at-side > * + .esptb-ft-at-follow {
	border-top: 1px solid var(--ftc-line);
	padding-top: 20px;
}

/* Phones, folded: the link rows sit flush between two hairlines. */
.espt-block-footer .esptb-ft-atlas.is-folded .esptb-ft-at-cols { row-gap: 0; }
.espt-block-footer .esptb-ft-atlas.is-folded .esptb-ft-at-brand + .esptb-ft-at-cols { padding-top: 0; }
.espt-block-footer .esptb-ft-atlas.is-folded .esptb-ft-at-cols + .esptb-ft-at-follow { border-top: 0; padding-top: 0; }

.espt-block-footer .esptb-ft-atlas.is-folded .esptb-ft-at-cols > .esptb-ft-col:not(.is-foldable) {
	border-bottom: 1px solid var(--ftc-line);
	padding: 16px 0 18px;
}

/* Phones: thumb-sized links in the opened lists and in the bottom bar. */
@media (max-width: 767px) {
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-cols .esptb-ft-links { gap: calc(var(--ft-link-gap, var(--fk-link-gap)) * 0.4); }

	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-cols .esptb-ft-links a {
		align-items: center;
		display: inline-flex;
		min-height: 40px;
	}

	.espt-block-footer .esptb-ft-atlas .esptb-ft-bottom .esptb-ft-policy a,
	.espt-block-footer .esptb-ft-atlas .esptb-ft-bottom .esptb-ft-credit a { padding: 10px 0; }
}

/* Unfolded on a wide phone ("Fold link columns" off): two lists a row. */
@media (min-width: 480px) and (max-width: 767px) {
	.espt-block-footer .esptb-ft-atlas:not(.is-folded) .esptb-ft-at-cols.has-2,
	.espt-block-footer .esptb-ft-atlas:not(.is-folded) .esptb-ft-at-cols.has-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-cols.has-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-cols.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* One list alone flows into two close columns instead of a long strip. */
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-cols.has-1 .esptb-ft-links {
		display: grid;
		gap: var(--ft-link-gap, var(--fk-link-gap)) var(--ftc-gap);
		grid-template-columns: repeat(2, minmax(0, 15em));
	}
}

/* Desktop: the store card on the left, a little wider than half the rest —
   only when link columns stand beside it (is-split, set in atlas.php). */
@media (min-width: 1024px) {
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-grid.is-split {
		column-gap: calc(var(--ftc-gap) * 1.6);
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-map::after {
		animation: none;
		opacity: 0.35;
		transform: translate(-50%, -50%) scale(0.8);
	}

	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info a.esptb-ft-at-go::after { transition: none; }
	.espt-block-footer .esptb-ft-atlas .esptb-ft-at-info a.esptb-ft-at-go:hover::after { transform: none; }
}