/**
 * Footer design: Kiosk — .esptb-ft-kiosk
 *
 * A dense marketplace footer: the service strip (brand, help line and
 * contact tiles) on the card surface, the link columns beside an app &
 * social rail, a payments row on the bottom-bar colour and the bottom bar.
 * Every colour, font and size comes from the kit tokens (the theme's
 * settings) unless the block sets its own. Phones: one column; the link
 * lists fold (footer.js), the contact tiles and the rail stay open.
 */

/* ------------------------------------------------------- service strip */

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-desk {
	background: var(--ftc-card);
	border-bottom: 1px solid var(--ftc-line);
	padding-bottom: max(22px, calc(var(--ft-pad, var(--fk-pad-r)) * 0.5));
	padding-top: max(22px, calc(var(--ft-pad, var(--fk-pad-r)) * 0.5));
}

/* One hairline between bands, never two. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-desk + .esptb-ft-bottom,
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-desk + .esptb-ft-ks-paybar,
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-paybar:first-child { border-top: 0; }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-counter {
	display: grid;
	gap: 22px var(--ftc-gap);
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-brand {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-brand .esptb-ft-about { max-width: 52ch; }

/* Set here: the kit's own about margin loses to `.esptb-ft p { margin: 0 }`. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-brand .esptb-ft-logo + .esptb-ft-about { margin-top: 12px; }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-help { min-width: 0; }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-help-h {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	margin: 0 0 12px;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-help-h > span {
	min-width: 0;
	text-wrap: balance;
}

/* One line-height tall, so it stays on the first line when the title wraps. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-help-h .esptb-ft-ic {
	align-items: center;
	background: var(--ftc-accent-soft);
	border-radius: 50%;
	color: var(--ftc-accent-ink);
	height: 1.35em;
	justify-content: center;
	width: 1.35em;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-help-h .esptb-ft-ic svg {
	height: 0.72em;
	width: 0.72em;
}

/* Contact tiles: caption + value on the footer colour, a filled icon. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles .esptb-ft-crow {
	background: var(--ftc-bg);
	border: 1px solid var(--ftc-line);
	border-radius: calc(var(--ftc-radius) * 1.2);
	gap: 10px;
	min-height: 56px;
	padding: 8px 12px 8px 8px;
}

/* Phone + WhatsApp side by side; an odd last tile (e-mail) takes the row. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles .esptb-ft-crow:last-child:nth-child(odd) { grid-column: 1 / -1; }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles .esptb-ft-ic {
	height: 38px;
	width: 38px;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles .esptb-ft-crow-t { padding-top: 0; }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles .esptb-ft-crow-k {
	display: block;
	line-height: 1.3;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles .esptb-ft-crow-v {
	color: var(--ftc-heading);
	font-weight: 700;
	line-height: 1.35;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles a.esptb-ft-crow:hover {
	border-color: var(--ftc-accent-ink);
	transform: translateY(-1px);
}

/* ------------------------------------------------ link columns + rail */

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

/* Folded rows sit flush; the rail keeps air above it. */
.espt-block-footer .esptb-ft-kiosk.is-folded .esptb-ft-ks-grid,
.espt-block-footer .esptb-ft-kiosk.is-folded .esptb-ft-ks-links { row-gap: 0; }
.espt-block-footer .esptb-ft-kiosk.is-folded .esptb-ft-ks-links + .esptb-ft-ks-rail { padding-top: 26px; }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail > * { min-width: 0; }

/* The rail's two headings read as column titles. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail .esptb-ft-apps-h,
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail .esptb-ft-social-h {
	color: var(--ftc-heading);
	font-family: var(--fk-display);
	font-size: var(--ft-title-size, var(--fk-title-size));
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin: 0 0 14px;
	opacity: 1;
	text-transform: var(--fk-title-tt);
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail .esptb-ft-apps-row { gap: 10px; }

/* Store badges in the tiles' language: card surface, hairline, accent icon. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail a.esptb-ft-app {
	background: var(--ftc-card);
	border: 1px solid var(--ftc-line);
	border-radius: calc(var(--ftc-radius) * 1.2);
	color: var(--ftc-heading);
	flex: 1 1 150px;
	padding: 6px 14px 6px 12px;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail a.esptb-ft-app:hover {
	border-color: var(--ftc-accent-ink);
	color: var(--ftc-heading);
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail a.esptb-ft-app .esptb-ft-ic { color: var(--ftc-accent-ink); }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail a.esptb-ft-app small { color: var(--ftc-muted); opacity: 1; }

/* ------------------------------------------------------- payments row */

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-paybar {
	background: var(--ftc-bottom-bg);
	border-top: 1px solid var(--ftc-line);
	color: var(--ftc-bottom-text);
	padding-bottom: 18px;
	padding-top: 18px;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay-h {
	align-items: center;
	color: var(--ftc-heading);
	display: inline-flex;
	flex: none;
	font-weight: 700;
	gap: 8px;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay-h .esptb-ft-ic { color: var(--ftc-accent-ink); }

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay .esptb-ft-pay {
	gap: 8px;
	min-width: 0;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay .esptb-ft-pay li {
	border-radius: calc(var(--ftc-radius) * 0.6);
	font-size: 12px;
	min-height: calc(var(--ft-pay-h, var(--fk-pay-h)) + 6px);
	padding: 5px 12px;
}

.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay .esptb-ft-pay.is-img img { max-height: calc(var(--ft-pay-h, var(--fk-pay-h)) * 1.4); }

/* Very narrow phones: the tiles stack one per row. */
@media (max-width: 379px) {
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: every tap target reaches 40px — the links in an opened list,
   the social icons and the bottom bar's policy and credit links. The list
   gap shrinks by the same amount, so an opened list keeps its rhythm. */
@media (max-width: 767px) {
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links .esptb-ft-links { gap: max(0px, calc(var(--ft-link-gap, var(--fk-link-gap)) - 10px)); }

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links .esptb-ft-links a {
		background-origin: content-box;
		min-height: 40px;
		padding: 8px 0;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail a.esptb-ft-soc {
		min-height: 40px;
		min-width: 40px;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-bottom .esptb-ft-policy a,
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-bottom .esptb-ft-credit a {
		background-origin: content-box;
		min-height: 40px;
		padding: 9px 0;
	}
}

/* -------------------------------------------------------------- ≥ 768px */

@media (min-width: 768px) {
	/* Brand: logo | about, split by a hairline. */
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-brand {
		align-items: center;
		flex-direction: row;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-brand .esptb-ft-logo { flex: none; }

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-brand .esptb-ft-logo + .esptb-ft-about {
		border-left: 1px solid var(--ftc-line);
		margin: 0 0 0 24px;
		padding: 2px 0 2px 24px;
	}

	/* The tiles share one row in equal widths. */
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		grid-template-columns: none;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles .esptb-ft-crow:last-child:nth-child(odd) { grid-column: auto; }

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links.has-1 { grid-template-columns: minmax(0, 1fr); }
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* A lone link list spreads across the row instead of leaving it empty. */
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links.has-1 .esptb-ft-links {
		column-gap: var(--ftc-gap);
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	}

	/* The rail lies across the full width under the columns. */
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px var(--ftc-gap);
		justify-content: space-between;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links + .esptb-ft-ks-rail {
		border-top: 1px solid var(--ftc-line);
		padding-top: var(--ftc-gap);
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail a.esptb-ft-app { flex: 0 1 auto; }

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay {
		flex-direction: row;
		gap: 12px 18px;
		text-align: left;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay-h {
		border-right: 1px solid var(--ftc-line);
		padding-right: 18px;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-pay .esptb-ft-pay { justify-content: flex-start; }
}

/* ------------------------------------------------------------- ≥ 1024px */

@media (min-width: 1024px) {
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-grid.has-links.has-rail { grid-template-columns: minmax(0, 1fr) clamp(224px, 22%, 270px); }

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links.has-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* Beside the link columns the rail becomes the last column, set off by a
	   hairline (alone it keeps the tablet row: badges left, icons right). */
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links + .esptb-ft-ks-rail {
		border-left: 1px solid var(--ftc-line);
		border-top: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding-left: var(--ftc-gap);
		padding-top: 0;
	}

	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-links + .esptb-ft-ks-rail a.esptb-ft-app { flex: 1 1 100%; }
}

/* ------------------------------------------------ wide strip (≥ 1080px) */

/* The strip measures its own width (the block's "Content width" can make
   it narrow on a wide screen), and only then becomes one counter row: the
   brand left, the help desk right — never wider than 62%, so a long help
   line or e-mail wraps instead of squeezing the brand. */
.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-desk > .esptb-ft-wrap { container: ks-desk / inline-size; }

@container ks-desk (min-width: 1080px) {
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-counter.is-split {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) fit-content(62%);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-tiles a.esptb-ft-crow:hover,
	.espt-block-footer .esptb-ft-kiosk .esptb-ft-ks-rail a.esptb-ft-app:hover { transform: none; }
}