/* ==========================================================================
   Tools Soko Picks

   Loaded only on pages that use [ts_picks] or [ts_pick]; enqueued from
   wp-content/novamira-sandbox/toolssoko-picks.php. Tokens come from the site
   stylesheet in Additional CSS, with the committed values as fallbacks.

   The Picks page is set to Astra's unboxed layout, so the cards sit directly
   on the #ededf3 ground and the ground-to-card step does the separating.
   ========================================================================== */

/* ---------------------------------------------------------- 1. Lead card */

/* Site section 11 pads single content for the boxed article card. The Picks
   page is unboxed, so line its content up with the title panel instead. */
.ts-picks-page.ast-single-post .entry-content {
	padding: 32px 0 64px;
}

/* Astra pads groups and quotes inside entry content, so these selectors carry
   the entry-content ancestor to outrank it. */
.entry-content .ts-picks-lead.wp-block-group {
	background: var(--ts-paper, #ffffff);
	border: 1px solid var(--ts-rule, #e2e2e9);
	border-radius: 3px;
	padding: clamp(20px, 3vw, 32px);
	margin: 0 0 32px;
}
.ts-picks-lead > * { max-width: 68ch; }
.entry-content .ts-picks-lead > :first-child { margin-top: 0; }
.entry-content .ts-picks-lead > :last-child,
.entry-content .ts-picks-lead > .wp-block-quote.wp-block-quote:last-child { margin-bottom: 0; }
.ts-picks-lead .ts-picks-lead__standfirst {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ts-ink, #1b1b1f);
}

/* ---------------------------------------------------------- 2. Section jump list */

.ts-picks__jump { margin: 0 0 40px; }
.ts-picks__jump ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ts-picks__jump li { margin: 0; }
.ts-picks .ts-picks__jump a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	background: var(--ts-paper, #ffffff);
	border: 1px solid var(--ts-rule, #e2e2e9);
	border-radius: 3px;
	color: var(--ts-ink, #1b1b1f);
	font-family: var(--ts-display, "Roboto Condensed", sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ts-picks .ts-picks__jump a:hover,
.ts-picks .ts-picks__jump a:focus {
	border-color: var(--ts-orange-deep, #b45c09);
	color: var(--ts-orange-deep, #b45c09);
	box-shadow: 0 4px 12px rgba(27, 27, 31, 0.08);
}
.ts-picks__count {
	color: var(--ts-muted, #6a6a76);
	font-family: var(--ts-text, "Inter", system-ui, sans-serif);
	font-weight: 600;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 3. Sections */

.ts-picks__group {
	margin: 0 0 64px;
	scroll-margin-top: 96px;
}
.ts-picks__group:last-child { margin-bottom: 0; }

.ts-picks__head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 24px;
	align-items: end;
	padding: 0 0 14px;
	margin: 0 0 24px;
	border-bottom: 2px solid var(--ts-ink, #1b1b1f);
}
.ts-picks .ts-picks__head h2 {
	grid-column: 1;
	margin: 0;
	font-family: var(--ts-display, "Roboto Condensed", sans-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.12;
	color: var(--ts-ink, #1b1b1f);
}
.ts-picks .ts-picks__head p {
	grid-column: 1;
	margin: 0;
	color: var(--ts-body, #2c2c33);
}
/* On the ground, so the deeper orange: #b45c09 fails there. */
.ts-picks .ts-picks__more {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
	color: var(--ts-orange-deeper, #9c4d06);
	font-weight: 600;
	white-space: nowrap;
}
.ts-picks .ts-picks__more::after { content: " \2192"; }

/* ---------------------------------------------------------- 4. Card grid */

.ts-picks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

/* ---------------------------------------------------------- 5. Card */

.ts-pick {
	display: flex;
	flex-direction: column;
	background: var(--ts-paper, #ffffff);
	border: 1px solid var(--ts-rule, #e2e2e9);
	border-radius: 3px;
	padding: 20px 20px 16px;
	transition: box-shadow 0.15s ease;
}
.ts-pick:hover { box-shadow: 0 6px 18px rgba(27, 27, 31, 0.10); }

.ts-pick .ts-pick__name {
	margin: 0 0 8px;
	font-family: var(--ts-display, "Roboto Condensed", sans-serif);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--ts-ink, #1b1b1f);
}
.ts-pick .ts-pick__summary {
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ts-body, #2c2c33);
}

/* Facts read like a small specification table: rules and a zebra band. */
.ts-pick .ts-pick__facts {
	margin: 0 0 16px;
	border-top: 1px solid var(--ts-rule, #e2e2e9);
}
.ts-pick__facts > div {
	display: grid;
	grid-template-columns: minmax(92px, 38%) 1fr;
	gap: 12px;
	padding: 7px 8px;
	border-bottom: 1px solid var(--ts-rule, #e2e2e9);
	font-size: 0.875rem;
	line-height: 1.45;
}
.ts-pick__facts > div:nth-child(odd) { background: var(--ts-paper-alt, #f4f4f7); }
.ts-pick .ts-pick__facts dt {
	margin: 0;
	align-self: center;
	font-family: var(--ts-display, "Roboto Condensed", sans-serif);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ts-muted, #6a6a76);
}
.ts-pick .ts-pick__facts dd {
	margin: 0;
	color: var(--ts-ink, #1b1b1f);
	font-variant-numeric: tabular-nums;
}

.ts-pick__foot { margin-top: auto; }

.ts-pick__buy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}
.ts-pick a.ts-pick__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	background: var(--ts-orange-deep, #b45c09);
	border: 1px solid var(--ts-orange-deep, #b45c09);
	border-radius: 3px;
	color: #ffffff;
	font-family: var(--ts-display, "Roboto Condensed", sans-serif);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}
.ts-pick a.ts-pick__btn:hover,
.ts-pick a.ts-pick__btn:focus {
	background: var(--ts-orange-deeper, #9c4d06);
	border-color: var(--ts-orange-deeper, #9c4d06);
	color: #ffffff;
}
.ts-pick a.ts-pick__btn--ghost {
	background: transparent;
	border-color: var(--ts-ink, #1b1b1f);
	color: var(--ts-ink, #1b1b1f);
}
.ts-pick a.ts-pick__btn--ghost:hover,
.ts-pick a.ts-pick__btn--ghost:focus {
	background: transparent;
	border-color: var(--ts-orange-deep, #b45c09);
	color: var(--ts-orange-deep, #b45c09);
}

.ts-pick .ts-pick__also,
.ts-pick .ts-pick__source {
	margin: 0 0 6px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ts-muted, #6a6a76);
}
.ts-pick__also > span:first-child { font-weight: 600; color: var(--ts-body, #2c2c33); }
.ts-pick__sep { color: var(--ts-rule, #e2e2e9); }
.ts-pick .ts-pick__checked {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--ts-rule, #e2e2e9);
	font-size: 0.78rem;
	color: var(--ts-muted, #6a6a76);
}
.ts-pick .ts-pick__checked.is-bad { color: var(--ts-bad, #c0392b); }

/* ---------------------------------------------------------- 6. Card inside an article */

/* The article is already a white card, so the embedded card takes the
   alternate band instead and does not lift. */
.ts-pick-embed { margin: 1.75em 0; }
.ts-pick-embed .ts-pick { background: var(--ts-paper-alt, #f4f4f7); }
.ts-pick-embed .ts-pick:hover { box-shadow: none; }
.ts-pick-embed .ts-pick__facts > div:nth-child(odd) { background: var(--ts-paper, #ffffff); }

/* ---------------------------------------------------------- 7. Small screens */

@media (max-width: 600px) {
	.ts-picks__head { grid-template-columns: 1fr; }
	.ts-picks .ts-picks__more { grid-column: 1; grid-row: auto; }
	.ts-picks__group { margin-bottom: 48px; }
	.ts-picks__grid { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.ts-pick,
	.ts-picks .ts-picks__jump a { transition: none; }
}