/**
 * Footer design: Aurora — .esptb-ft-aurora
 *
 * A bold footer on a soft gradient built from the palette: the footer
 * colour deepening toward the far corner, a glow of the accent behind the
 * brand and a warm glow of the theme's second accent on the right, with a
 * thin aurora line along the top edge. The brand block sits top-left beside
 * the "join us" card; below it one frosted glass panel holds the link
 * columns, the categories and the contact details, split by hairlines; a
 * translucent bottom bar closes the footer.
 *
 * Every colour comes from the kit palette (--ftc-*) or the theme tokens
 * (--fk-*), so it reads in the brand tone it is drawn for and in the site,
 * light, tint and dark tones too; the block's own colours still win.
 * Phones: one column — brand, the card, then the glass panel with the link
 * lists folded (footer.js) above the contact rows, which stay open.
 */

/* --------------------------------------------------------------- surface */

.espt-block-footer .esptb-ft-aurora {
	/* Fallbacks that suit any tone; the relative-colour block below tunes
	   them to the actual palette. */
	--au-shade: color-mix(in srgb, #000 10%, transparent);
	--au-glass: var(--ft-card-bg, color-mix(in srgb, var(--ftc-heading) 8%, transparent));
	--au-hi: transparent;
	--au-glow: color-mix(in srgb, var(--ftc-accent) 20%, transparent);
	--au-warm: color-mix(in srgb, var(--fk-accent2) 18%, transparent);
	--au-edge: color-mix(in srgb, var(--ftc-heading) 13%, transparent);
	--au-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 48px -30px rgba(0, 0, 0, 0.42);
	--au-round: calc(var(--ftc-radius) * 1.6);
	/* The colour is its own declaration, so the footer keeps its background
	   even if a gradient layer ever fails. Glows are sized in lengths, not %,
	   so a tall phone footer never stretches them into streaks. */
	background-color: var(--ftc-bg);
	background-image:
		radial-gradient(clamp(320px, 58vw, 760px) clamp(240px, 34vw, 440px) at 0% 0%, var(--au-glow), transparent 72%),
		radial-gradient(clamp(280px, 48vw, 620px) clamp(220px, 30vw, 400px) at 100% 0%, var(--au-warm), transparent 72%),
		linear-gradient(135deg, transparent 18%, var(--au-shade) 100%);
}

/* Derived from the heading colour's lightness: behind light text (brand,
   dark, site) the far corner deepens strongly and the glass is a whisper
   of white with a bright top edge; behind dark text (light, tint) the
   corner barely moves and the glass turns milky white. The test uses the
   exact form below, so browsers with an older relative-colour syntax keep
   the fallbacks above. */
@supports (color: oklch(from #000 0 0 0 / calc(l * l * 0.34))) {
	.espt-block-footer .esptb-ft-aurora {
		--au-shade: oklch(from var(--ftc-heading) 0 0 0 / calc(l * l * 0.34));
		--au-glass: var(--ft-card-bg, oklch(from var(--ftc-heading) 1 0 0 / calc(0.08 + (1 - l) * 0.62)));
		--au-hi: oklch(from var(--ftc-heading) 1 0 0 / calc(l * 0.16));
	}
}

/* The aurora line along the top edge. */
.espt-block-footer .esptb-ft-aurora::before {
	background: linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--ftc-accent) 70%, transparent) 30%, var(--fk-accent2) 62%, transparent 96%);
	content: "";
	height: 2px;
	left: 0;
	opacity: 0.85;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

/* -------------------------------------------- top: brand + "join us" card */

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-top {
	display: grid;
	gap: var(--ftc-gap);
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: calc(var(--ftc-gap) * 1.15);
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-top:last-child { margin-bottom: 0; }

/* The kit's paragraph reset (.esptb-ft p) outranks its own about margin. */
.espt-block-footer .esptb-ft-aurora .esptb-ft-au-brand .esptb-ft-about {
	font-size: 1.07em;
	line-height: 1.75;
	margin-top: 16px;
	max-width: 50ch;
}

.espt-block-footer .esptb-ft-aurora a.esptb-ft-soc { border-color: var(--au-edge); }

/* Glass surfaces: the card and the panel. */
.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join,
.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab {
	background: var(--au-glass);
	border: 1px solid var(--ftc-line);
	border-radius: var(--au-round);
	box-shadow: inset 0 1px 0 var(--au-hi), var(--au-shadow);
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join {
	gap: 14px 16px;
	padding: 18px;
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join .esptb-ft-community-ic {
	box-shadow: 0 0 0 6px var(--ftc-accent-soft);
	height: 48px;
	margin: 6px;
	width: 48px;
}

/* Balanced, so a two-line title never strands one word on its own line. */
.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join .esptb-ft-community-h {
	font-family: var(--fk-display);
	font-size: var(--ft-title-size, var(--fk-title-size));
	line-height: 1.3;
	text-wrap: balance;
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join .esptb-ft-community-x {
	font-size: 0.95em;
	margin-top: 4px;
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join a.esptb-ft-btn { gap: 10px; }

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join a.esptb-ft-btn::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.2s ease;
	width: 14px;
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join a.esptb-ft-btn:hover::after { transform: translateX(3px); }

/* ------------------------------------------------ the glass panel (slab) */

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 0 18px;
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell { padding: 20px 0; }

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell + .esptb-ft-au-cell { border-top: 1px solid var(--ftc-line); }

/* A short aurora stroke under each column title (not on folded rows). */
.espt-block-footer .esptb-ft-aurora:not(.is-folded) .esptb-ft-au-cell > .esptb-ft-title::after {
	background: linear-gradient(90deg, var(--fk-accent2), color-mix(in srgb, var(--ftc-accent-ink) 55%, transparent));
	border-radius: 2px;
	content: "";
	display: block;
	height: 2px;
	margin-top: 10px;
	width: 28px;
}

.espt-block-footer .esptb-ft-aurora:not(.is-folded) .esptb-ft-au-cell > .esptb-ft-title { margin-bottom: 16px; }

/* Folded rows sit flush inside the panel, split by the same hairlines. */
.espt-block-footer .esptb-ft-aurora.is-folded .esptb-ft-au-slab > .esptb-ft-col.is-foldable {
	border-bottom: 0;
	padding: 0;
}

.espt-block-footer .esptb-ft-aurora.is-folded .esptb-ft-au-slab > .is-contact { padding: 20px 0 22px; }

/* A long title wraps inside its toggle without touching the hairlines. */
.espt-block-footer .esptb-ft-aurora.is-folded .esptb-ft-au-slab .esptb-ft-toggle { padding: 10px 0; }

/* Contact rows with their small captions (hotline, e-mail …). */
.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab .esptb-ft-contact { gap: 14px; }

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab .esptb-ft-crow .esptb-ft-ic {
	background: var(--ftc-accent-soft);
	border: 1px solid var(--au-edge);
	border-radius: 50%;
	height: 40px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	width: 40px;
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab .esptb-ft-contact.is-rows .esptb-ft-crow-k { display: block; }

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab .esptb-ft-contact.is-rows .esptb-ft-crow-v {
	color: var(--ftc-heading);
	font-weight: 600;
	text-wrap: pretty;
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab .esptb-ft-contact.is-rows .is-address .esptb-ft-crow-t { padding-top: 1px; }

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab a.esptb-ft-crow:hover .esptb-ft-ic {
	background: var(--ftc-fill);
	border-color: var(--ftc-fill);
	color: var(--ftc-on-fill);
}

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab a.esptb-ft-crow:hover .esptb-ft-crow-v { color: var(--ftc-link-h); }

/* --------------------------------------------------- translucent bottom */

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-bottom { background: color-mix(in srgb, var(--ftc-bottom-bg) 70%, transparent); }

.espt-block-footer .esptb-ft-aurora .esptb-ft-au-bottom .esptb-ft-pay li {
	background: color-mix(in srgb, var(--ftc-bottom-text) 10%, transparent);
	border-color: color-mix(in srgb, var(--ftc-bottom-text) 24%, transparent);
	border-radius: 999px;
	color: var(--ftc-bottom-text);
	padding: 4px 12px;
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 767px) {
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell .esptb-ft-links a { min-height: 40px; }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell .esptb-ft-links { gap: calc(var(--ft-link-gap, var(--fk-link-gap)) * 0.4); }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-bottom .esptb-ft-policy a,
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-bottom .esptb-ft-credit a { padding: 10px 0; }
}

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

@media (min-width: 768px) {
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-top.has-2 {
		align-items: center;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Beside the brand the card stacks: icon + words, the button below. */
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-top.has-2 .esptb-ft-au-join { grid-template-columns: auto minmax(0, 1fr); }

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-top.has-2 .esptb-ft-au-join a.esptb-ft-btn {
		grid-column: 2;
		justify-self: start;
	}

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join { padding: 22px 24px; }

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0;
	}

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-1 { grid-template-columns: minmax(0, 1fr); }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-3 > :last-child { grid-column: 1 / -1; }

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell { padding: 26px 28px 28px; }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell + .esptb-ft-au-cell { border-top: 0; }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell:nth-child(even) { border-left: 1px solid var(--ftc-line); }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell:nth-child(n+3) { border-top: 1px solid var(--ftc-line); }

	/* A panel with a single cell lays its content out in a row. */
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-1 .esptb-ft-links,
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-1 .esptb-ft-contact {
		column-gap: 36px;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Tablets: the odd cell out spans the row, so its list flows in two columns. */
@media (min-width: 768px) and (max-width: 1023px) {
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-3 > :last-child .esptb-ft-links,
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-3 > :last-child .esptb-ft-contact {
		column-gap: 28px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

@media (min-width: 1024px) {
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-top.has-2 {
		column-gap: calc(var(--ftc-gap) * 2);
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-top.has-2 .esptb-ft-au-join {
		justify-self: end;
		max-width: 520px;
		width: 100%;
	}

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-3 > :last-child { grid-column: auto; }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab.has-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell { padding: 30px 30px 32px; }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell:nth-child(n+3) { border-top: 0; }
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-cell + .esptb-ft-au-cell { border-left: 1px solid var(--ftc-line); }
}

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

@media (prefers-reduced-motion: reduce) {
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-slab .esptb-ft-crow .esptb-ft-ic,
	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join a.esptb-ft-btn::after { transition: none; }

	.espt-block-footer .esptb-ft-aurora .esptb-ft-au-join a.esptb-ft-btn:hover::after { transform: none; }
}