/*
 * Softcore Link Exchange -- frontend footer section.
 *
 * Only ever enqueued when there is at least one enabled link (see
 * class-sle-frontend.php's maybe_enqueue_assets()), and only ever
 * printed above the existing DMCA/Privacy/Terms nav menu inside
 * #wrapper-footer -- never inside it, never restyling it.
 *
 * Colors/sizing are taken directly from the live theme: body { background:
 * #000; color: #fff; } (famoustube/css/custom.css) is sitewide, not
 * scoped to the footer, so this section sits on the exact same black
 * with no visible seam; #fc8fd2 is the theme's own existing pink accent
 * (already used the same restrained way -- hover/label accents, not
 * fills -- throughout famoustube-child/style.css). .container reuses
 * the theme's own Bootstrap breakpoints/widths (famoustube/css/theme.css)
 * rather than redefining them, and the grid's own breakpoints below are
 * chosen to match those same widths (576/768/992/1200px).
 *
 * COLUMN COUNT: class-sle-frontend.php's render() sets --sle-columns on
 * .sle-links__grid to the ACTUAL number of links visible on this
 * request (never a fixed number, never the total stored count). Every
 * tier below reads that one number through its own min(), so a page
 * with only 3 visible links renders exactly 3 columns (no empty
 * trailing space) even inside the widest, up-to-10 desktop tier, while
 * a page with 20 renders 10 in each of two rows -- CSS grid's own
 * default auto-flow wraps to a new row on its own once a row's columns
 * are full, so nothing here ever hardcodes "10 then a new row"; it
 * falls out of repeat()'s count alone.
 */

.sle-links {
	padding: 28px 0 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sle-links__heading {
	margin: 0 0 14px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: #fc8fd2;
}

.sle-links__grid {
	display: grid;
	grid-template-columns: repeat(min(var(--sle-columns, 1), 10), minmax(0, 1fr));
	gap: 6px 12px;
	margin: 0;
	padding: 0;
}

.sle-links__grid a {
	display: block;
	overflow-wrap: anywhere;
	padding: 5px 6px;
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
	color: #ccc;
	font-size: 13px;
	line-height: 1.4;
}

.sle-links__grid a:hover,
.sle-links__grid a:focus {
	color: #fc8fd2;
	text-decoration: underline;
}

/* Smaller desktop / laptop (Bootstrap lg, below xl's 1200px container):
   reduce the maximum naturally as the container narrows. */
@media (max-width: 1199.98px) {
	.sle-links__grid {
		grid-template-columns: repeat(min(var(--sle-columns, 1), 8), minmax(0, 1fr));
	}
}

/* Tablet, upper end (Bootstrap md, below lg's 992px container). */
@media (max-width: 991.98px) {
	.sle-links__grid {
		grid-template-columns: repeat(min(var(--sle-columns, 1), 5), minmax(0, 1fr));
	}
}

/* Tablet, lower end / phablet (Bootstrap sm, below md's 768px container). */
@media (max-width: 767.98px) {
	.sle-links__grid {
		grid-template-columns: repeat(min(var(--sle-columns, 1), 3), minmax(0, 1fr));
	}
}

/* Mobile (below sm's 576px container). */
@media (max-width: 575.98px) {
	.sle-links__grid {
		grid-template-columns: repeat(min(var(--sle-columns, 1), 2), minmax(0, 1fr));
	}
}

/* Narrow phone: two columns gets tight once wrapped text stacks to two
   lines per cell -- drop to one column rather than let it feel cramped.
   (Always exactly 1 here regardless of --sle-columns, so no min() needed.) */
@media (max-width: 379.98px) {
	.sle-links__grid {
		grid-template-columns: 1fr;
	}
}