/* ============================================================================
   [lswp_tools] — Partner Toolkit section.

   Deliberately its own visual system, separate from frontend.css's
   "Research Vault" Fraunces/brass palette: this section is styled to
   match the main site theme itself (Spartan headings, Poppins body,
   navy #0d3b66 + gold #9f7944 accent) — those exact values were pulled
   from university.linkinsolution.com's own live CSS, not invented, so
   a tool card sits on the page looking like it was always part of the
   theme rather than a plugin bolt-on.

   v1.11.0 — replaced the card-grid layout with a ranked design: a
   "Best 3, at a glance" comparison table pinned above a full ranked
   list (rank order comes from each tool's native WP "Order" field —
   see class-lswp-tools-cpt.php). The old .lswp-tools-grid/.lswp-tools-card
   rules are gone; .lswp-tools-discount-code (copy-to-clipboard) and
   .lswp-tools-cta are kept and reused by the new markup so tools.js
   needed almost no changes. Defensive !important overrides remain on
   the logo <img> — a common WordPress theme pattern is a global
   `.entry-content img { height: auto !important }` rule, which would
   otherwise squash a wide/rectangular logo image inside the square
   monogram tile.
   ============================================================================ */

.lswp-tools-section {
	--lswp-t-navy: #0d3b66;
	--lswp-t-navy-dark: #0a2e50;
	--lswp-t-ink: #1e1e1e;
	--lswp-t-ink-muted: #6b7280;
	--lswp-t-gold: #9f7944;
	--lswp-t-gold-pale: #f6f0e6;
	--lswp-t-bg: #ffffff;
	--lswp-t-bg-alt: #f3f4f6;
	--lswp-t-border: #e5e7eb;
	--lswp-t-font-display: 'Spartan', sans-serif;
	--lswp-t-font-body: 'Poppins', sans-serif;

	position: relative;
	font-family: var(--lswp-t-font-body);
	color: var(--lswp-t-ink);
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 20px 20px;
}

/* Two soft, low-opacity color blobs behind the header — a small bit of
   atmosphere so the section doesn't read as flat white, especially
   noticeable when only a couple of tools are published so far. Negative
   z-index keeps them reliably behind every real child without needing
   to touch every child's own stacking. */
.lswp-tools-section::before,
.lswp-tools-section::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.lswp-tools-section::before {
	top: -70px;
	left: -60px;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(159, 121, 68, .10), transparent 70%);
}
.lswp-tools-section::after {
	top: 40px;
	right: -100px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(13, 59, 102, .06), transparent 70%);
}

.lswp-tools-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--lswp-t-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lswp-t-gold);
	margin-bottom: 12px;
}
.lswp-tools-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	background: var(--lswp-t-gold);
	border-radius: 2px;
}

.lswp-tools-heading {
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1.2;
	color: var(--lswp-t-ink);
	margin: 0 0 28px;
	max-width: 640px;
}
.lswp-tools-accent { color: var(--lswp-t-gold); }

.lswp-tools-empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--lswp-t-ink-muted);
	font-family: var(--lswp-t-font-body);
	background: var(--lswp-t-bg-alt);
	border-radius: 10px;
	border: 1px dashed var(--lswp-t-border);
}

/* ---------- Category filter pills ---------- */
.lswp-tools-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}
.lswp-tools-pill {
	font-family: var(--lswp-t-font-display);
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	background: #fff;
	border: 1px solid var(--lswp-t-border);
	color: var(--lswp-t-ink-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lswp-tools-pill:hover { border-color: var(--lswp-t-navy); color: var(--lswp-t-navy); }
.lswp-tools-pill.is-active {
	background: var(--lswp-t-navy);
	border-color: var(--lswp-t-navy);
	color: #fff;
	box-shadow: 0 4px 10px -4px rgba(13, 59, 102, .5);
}

/* ---------- Best 3, at a glance (top picks board) ---------- */
.lswp-tools-toppicks { margin-bottom: 30px; }
.lswp-tools-toppicks-label {
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lswp-t-navy);
	margin-bottom: 10px;
}
.lswp-tools-tp-table {
	border: 1px solid var(--lswp-t-navy);
	border-radius: 12px;
	overflow: hidden;
}
.lswp-tools-tp-row {
	display: grid;
	grid-template-columns: 1.5fr 2fr .9fr 84px;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	background: var(--lswp-t-bg);
	border-top: 1px solid var(--lswp-t-border);
}
.lswp-tools-tp-row:first-child { border-top: none; }
.lswp-tools-tp-row:nth-child(even):not(.lswp-tools-tp-head) { background: var(--lswp-t-bg-alt); }
.lswp-tools-tp-head {
	background: var(--lswp-t-navy);
	color: #fff;
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-top: none;
}
.lswp-tools-tp-tool {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--lswp-t-ink);
	min-width: 0;
}
.lswp-tools-tp-logo {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--lswp-t-navy);
	background-image: linear-gradient(135deg, var(--lswp-t-navy), var(--lswp-t-navy-dark));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 10px;
	flex-shrink: 0;
	overflow: hidden;
}
.lswp-tools-tp-bestfor {
	font-size: 12.5px;
	color: var(--lswp-t-ink-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lswp-tools-tp-disc {
	font-family: var(--lswp-t-font-display);
	font-weight: 800;
	font-size: 12.5px;
	color: var(--lswp-t-gold);
}
.lswp-tools-cta-sm { padding: 8px 12px; font-size: 12px; gap: 5px; }

/* ---------- Ranked list ---------- */
.lswp-tools-ranked-head {
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--lswp-t-ink);
	margin: 4px 0 14px;
}
.lswp-tools-ranked-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lswp-tools-rank-row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--lswp-t-bg);
	border: 1px solid var(--lswp-t-border);
	border-radius: 10px;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.lswp-tools-rank-row[hidden] { display: none; }
.lswp-tools-rank-row:hover {
	border-color: rgba(13, 59, 102, .25);
	box-shadow: 0 10px 22px -16px rgba(13, 59, 102, .35);
}
.lswp-tools-rank-row.is-top { border-color: rgba(159, 121, 68, .35); }

.lswp-tools-rank-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--lswp-t-bg-alt);
	color: var(--lswp-t-ink-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.lswp-tools-rank-row.is-top .lswp-tools-rank-num { background: var(--lswp-t-navy); color: #fff; }

.lswp-tools-rank-logo {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--lswp-t-navy);
	background-image: linear-gradient(135deg, var(--lswp-t-navy), var(--lswp-t-navy-dark));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 11.5px;
	flex-shrink: 0;
	overflow: hidden;
}

.lswp-tools-logo-img { background: var(--lswp-t-bg-alt) !important; box-shadow: none; border: 1px solid var(--lswp-t-border); }
.lswp-tools-logo-img img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

.lswp-tools-rank-body { flex: 1; min-width: 0; }
.lswp-tools-rank-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lswp-tools-rank-name {
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--lswp-t-ink);
}
.lswp-tools-rank-bestfor {
	font-size: 12px;
	color: var(--lswp-t-ink-muted);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lswp-tools-superlative {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 5px;
}
.lswp-tools-superlative.is-editors-pick { background: var(--lswp-t-gold-pale); color: var(--lswp-t-gold); }
.lswp-tools-superlative.is-most-popular { background: #eaf2fb; color: var(--lswp-t-navy); }
.lswp-tools-superlative.is-best-value { background: #eaf7f0; color: #16794c; }
.lswp-tools-superlative.is-staff-favorite { background: #fdeee6; color: #c2410c; }

.lswp-tools-rank-discount { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lswp-tools-rank-extra {
	font-family: var(--lswp-t-font-body);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--lswp-t-navy);
	background: none;
	border: none;
	padding: 4px 2px;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	cursor: pointer;
}
.lswp-tools-rank-extra:hover { color: var(--lswp-t-navy-dark); }

/* The revealed extra-coupon codes — a full-width strip below the row's
   main line, same copy-button component as the primary code, just
   smaller and left-aligned instead of centered in the discount slot. */
.lswp-tools-rank-extra-codes {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--lswp-t-border);
}
.lswp-tools-rank-extra-codes[hidden] { display: none; }
.lswp-tools-rank-extra-codes .lswp-tools-discount-code { font-size: 11px; padding: 6px 9px; }
span.lswp-tools-rank-badge {
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 12px;
	color: var(--lswp-t-gold);
	background: var(--lswp-t-gold-pale);
	border-radius: 5px;
	padding: 6px 10px;
	white-space: nowrap;
}
/* When the badge is also the copy-code button, give it the same gold
   pill look as the plain-text badge above instead of .lswp-tools-discount-code's
   default bordered-white look — it should read as "the discount", the
   copy affordance is secondary. */
button.lswp-tools-discount-code.lswp-tools-rank-badge {
	background: var(--lswp-t-gold-pale);
	border-color: transparent;
	color: var(--lswp-t-gold);
	font-family: var(--lswp-t-font-display);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 10px;
}
button.lswp-tools-discount-code.lswp-tools-rank-badge:hover {
	background: var(--lswp-t-navy);
	border-color: var(--lswp-t-navy);
	color: #fff;
}

/* Coupon code — a real button so it's clearly clickable, with a copy
   icon and a brief "Copied!" swap handled in tools.js. Click-to-copy
   beats select-and-Ctrl+C, especially on mobile. Padding sized to
   clear the ~44px touch-target guideline together with its line-height. */
.lswp-tools-discount-code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--lswp-t-font-body);
	font-size: 12px;
	line-height: 1;
	color: var(--lswp-t-ink-muted);
	border: 1px solid var(--lswp-t-border);
	border-radius: 5px;
	padding: 8px 10px;
	background: #fff;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.lswp-tools-discount-code:hover {
	border-color: var(--lswp-t-navy);
	color: var(--lswp-t-navy);
}
.lswp-tools-discount-code:active { transform: scale(.96); }
.lswp-tools-discount-code.is-copied {
	background: var(--lswp-t-navy);
	border-color: var(--lswp-t-navy);
	color: #fff;
}
.lswp-tools-copy-icon { flex-shrink: 0; }

.lswp-tools-cta {
	/* Grid rows already stretch every card in the row to the same
	   height (CSS Grid's default align-items: stretch); .lswp-tools-card
	   is now a column flexbox and this margin-top:auto is what actually
	   uses that equal height — it pushes the button to the card's
	   bottom edge no matter how much (or little) text/coupon rows sit
	   above it, so every button in a row lines up. */
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--lswp-t-navy);
	color: #fff;
	font-family: var(--lswp-t-font-display);
	font-weight: 500;
	font-size: 14px;
	padding: 13px;
	border-radius: 6px;
	text-decoration: none;
	transition: background .15s ease, box-shadow .15s ease;
}
.lswp-tools-cta:hover {
	background: var(--lswp-t-navy-dark);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 16px -8px rgba(13, 59, 102, .55);
}
.lswp-tools-cta svg { transition: transform .2s ease; }
.lswp-tools-cta:hover svg { transform: translateX(3px); }

/* ---------- Focus states (keyboard navigation) ---------- */
.lswp-tools-pill:focus-visible,
.lswp-tools-discount-code:focus-visible,
.lswp-tools-cta:focus-visible {
	outline: 2px solid var(--lswp-t-navy);
	outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.lswp-tools-section { padding: 24px 16px 16px; }
	.lswp-tools-heading { margin-bottom: 20px; }
	.lswp-tools-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: -16px;
		padding-inline: 16px;
		margin-bottom: 24px;
		scrollbar-width: none;
	}
	.lswp-tools-filters::-webkit-scrollbar { display: none; }
	.lswp-tools-pill { flex-shrink: 0; }

	/* Top picks table: drop the header row and stack each tool's four
	   cells instead of forcing four skinny columns into ~340px. */
	.lswp-tools-tp-head { display: none; }
	.lswp-tools-tp-row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 14px 16px;
	}
	.lswp-tools-tp-bestfor { white-space: normal; }
	.lswp-tools-tp-disc { font-size: 14px; }
	.lswp-tools-tp-row .lswp-tools-cta-sm { width: 100%; }

	/* Ranked rows: keep rank + logo + name on the top line, wrap the
	   discount/CTA onto their own full-width line below it (flex-wrap
	   itself is already on at every width — see base rule above). */
	.lswp-tools-rank-row { row-gap: 10px; }
	.lswp-tools-rank-body { flex-basis: 100%; order: 1; }
	.lswp-tools-rank-discount { order: 2; flex: 1; }
	.lswp-tools-rank-row > .lswp-tools-cta-sm { order: 3; }
	.lswp-tools-rank-bestfor { white-space: normal; }
}