/* =========================================================================
   20 · FOOTER — pre-footer band + 5-col megafooter + bottom row
   Reference: V4-BUILD-SPEC §6 + PAKISTAN-NGO-RESEARCH "Trust strip"
   ========================================================================= */

/* ---------- Pre-footer band ---------- */
.jj-pre-footer {
	background: var(--jj-primary-deep);
	color: rgba(255, 255, 255, 0.92);
	padding-block: var(--section-y);
	position: relative;
	overflow: hidden;
}
.jj-pre-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(232, 163, 23, 0.18), transparent 50%);
	pointer-events: none;
}
.jj-pre-footer__inner {
	position: relative;
	display: grid;
	gap: var(--sp-8);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 48em) {
	.jj-pre-footer__inner {
		grid-template-columns: 1.5fr 1fr;
		gap: var(--sp-12);
	}
}
.jj-pre-footer__title {
	font-size: var(--fs-2xl);
	color: #fff;
	margin: 0 0 var(--sp-4);
}
.jj-pre-footer__sub {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-md);
	max-width: 50ch;
	margin: 0;
}
.jj-pre-footer__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
}
@media (min-width: 48em) {
	.jj-pre-footer__actions { align-items: flex-end; }
}

/* ---------- Footer main ---------- */
.jj-footer {
	background: var(--jj-text);
	color: rgba(255, 255, 255, 0.75);
	padding-block: var(--section-y) var(--sp-6);
	font-size: var(--fs-sm);
}
.jj-footer a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.jj-footer a:hover { color: var(--jj-accent-gold); }

/* 5-column grid (responsive) */
.jj-footer__grid {
	display: grid;
	gap: var(--sp-10) var(--sp-8);
	grid-template-columns: 1fr;
}
@media (min-width: 36em) {
	.jj-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 48em) {
	.jj-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}
@media (min-width: 64em) {
	.jj-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1.3fr;
	}
}

/* Brand column spans full width on smallest, becomes col-2 on intermediate */
@media (min-width: 36em) and (max-width: 47.99em) {
	.jj-footer__col--brand { grid-column: 1 / -1; }
}

.jj-footer__col {
	min-width: 0;
}

.jj-footer__title {
	font-family: var(--jj-font-serif);
	font-size: var(--fs-xl);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	margin: 0 0 var(--sp-4);
}
.jj-footer__tagline {
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--fs-sm);
	line-height: 1.5;
	max-width: 32ch;
	margin: 0 0 var(--sp-4);
}

/* Headings inside footer cols */
.jj-footer__heading {
	font-family: var(--jj-font-sans);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	margin: 0 0 var(--sp-4);
}

/* Footer nav lists */
.jj-footer__nav,
.jj-footer__contact,
.jj-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jj-footer__nav li { margin-bottom: var(--sp-2); }
.jj-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
	line-height: 1.45;
}
.jj-footer__contact .jj-icon { flex-shrink: 0; margin-top: 2px; }

/* Socials cluster */
.jj-footer__socials {
	display: flex;
	gap: var(--sp-2);
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	flex-wrap: wrap;
}
.jj-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.jj-footer__socials a:hover {
	background: var(--jj-accent-gold);
	color: var(--jj-text);
	border-color: var(--jj-accent-gold);
}

/* ---------- Trust strip (in brand column) ---------- */
.jj-footer__trust {
	list-style: none;
	margin: var(--sp-6) 0 0;
	padding: var(--sp-4);
	background: rgba(255, 255, 255, 0.04);
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: 1fr;
}
@media (min-width: 36em) {
	.jj-footer__trust { grid-template-columns: 1fr 1fr; }
}
.jj-footer__trust-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	min-width: 0;
}
.jj-footer__trust-icon {
	color: var(--jj-accent-gold);
	flex-shrink: 0;
}
.jj-footer__trust-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.jj-footer__trust-text strong {
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
}
.jj-footer__trust-text span {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--fs-xs);
	line-height: 1.3;
	word-break: break-word;
}

/* ---------- Newsletter form ---------- */
.jj-footer__newsletter-intro {
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--fs-sm);
	margin: 0 0 var(--sp-3);
}
.jj-newsletter {
	display: flex;
	gap: var(--sp-2);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	padding: var(--sp-2);
}
.jj-newsletter input[type="email"] {
	flex: 1;
	background: transparent;
	border: none;
	color: #fff;
	padding: var(--sp-2) var(--sp-3);
	min-width: 0;
}
.jj-newsletter input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.jj-newsletter input[type="email"]:focus { outline: none; }

/* ---------- Payment methods strip ---------- */
.jj-footer__pay {
	margin-top: var(--sp-6);
}
.jj-footer__pay .jj-eyebrow {
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--sp-2);
}
.jj-footer__pay-list {
	display: flex;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.jj-footer__pay-item {
	display: inline-flex;
	padding: var(--sp-1) var(--sp-2);
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Footer bottom row ---------- */
.jj-footer__bottom {
	margin-top: var(--sp-12);
	padding-top: var(--sp-6);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.5);
}
.jj-footer__copyright { margin: 0; }
.jj-footer__legal {
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}
.jj-footer__legal a { color: rgba(255, 255, 255, 0.55); }
.jj-footer__credit {
	margin: 0;
	color: rgba(255, 255, 255, 0.4);
}
.jj-footer__credit a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: underline;
	text-underline-offset: 2px;
}