/**
 * AIHub Blocks — shared front-end + editor styles.
 * Uses the theme design tokens (blueprint §10) with safe fallbacks so blocks
 * render correctly even in the editor / before the theme is active.
 */
:root {
	--aihub-bg: #121117;
	--aihub-bg-2: #17161D;
	--aihub-surface: #17161D;
	--aihub-surface-2: #211F29;
	--aihub-border: #2A2833;
	--aihub-border-soft: #232128;
	--aihub-text: #F4F4F5;
	--aihub-muted: #A3A1AA;
	--aihub-primary: #944DFF;
	--aihub-primary-ink: #B78AFF;
	--aihub-secondary: #EC4899;
	--aihub-accent: #B78AFF;
	--aihub-success: #22C55E;
	--aihub-warning: #F59E0B;
	--aihub-danger: #EF4444;
	--aihub-radius: 14px;
}

.aihub-block-empty {
	border: 1px dashed var(--aihub-border);
	border-radius: 8px;
	padding: 1rem;
	color: var(--aihub-muted);
	font-size: 0.9rem;
	text-align: center;
}

/* -- Card -------------------------------------------------------------- */
.aihub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}
.aihub-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: var(--aihub-surface);
	border: 1px solid var(--aihub-border);
	border-radius: var(--aihub-radius);
	padding: 1.25rem;
	color: var(--aihub-text);
}
.aihub-card__head { display: flex; align-items: center; gap: 0.8rem; }
.aihub-card__logo { border-radius: 12px; object-fit: cover; background: var(--aihub-surface-2); }
.aihub-card__title { flex: 1; min-width: 0; }
.aihub-card__title h3 { margin: 0 0 0.1rem; font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aihub-card__title a { color: var(--aihub-text); text-decoration: none; }
.aihub-card__title a:hover { color: var(--aihub-accent); }
.aihub-card__cat { display: block; font-size: 0.8rem; font-weight: 500; color: var(--aihub-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aihub-card__desc { margin: 0; color: var(--aihub-muted); font-size: 0.9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aihub-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.65rem; padding-top: 0.9rem; border-top: 1px solid var(--aihub-border-soft); }
.aihub-card__price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--aihub-text); }
.aihub-card__price::before { content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--aihub-muted); margin-bottom: 1px; }
.aihub-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* -- Score badge ------------------------------------------------------- */
.aihub-score {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--aihub-surface-2);
}
.aihub-score small { font-size: 0.7em; color: var(--aihub-muted); font-weight: 500; }
.aihub-score--strong { color: var(--aihub-success); }
.aihub-score--good { color: var(--aihub-accent); }
.aihub-score--average { color: var(--aihub-warning); }
.aihub-score--weak { color: var(--aihub-danger); }
.aihub-card--strong { border-color: color-mix(in srgb, var(--aihub-success) 40%, var(--aihub-border)); }

/* -- Badges & flags ---------------------------------------------------- */
.aihub-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.aihub-badge {
	font-size: 0.72rem;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--aihub-surface-2);
	color: var(--aihub-muted);
	border: 1px solid var(--aihub-border);
}
.aihub-badge--privacy { color: var(--aihub-success); border-color: color-mix(in srgb, var(--aihub-success) 45%, var(--aihub-border)); }
/* Flags ride the card's top edge as pinned ribbons, so they never collide
   with the score pill in the card head. */
.aihub-flag {
	position: absolute;
	top: -9px; right: 14px;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 9px;
	border-radius: 999px;
	box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5);
	white-space: nowrap;
}
.aihub-flags { position: absolute; top: -9px; right: 14px; display: flex; gap: 4px; z-index: 2; }
.aihub-flags .aihub-flag { position: static; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5); }
.aihub-flag--sponsored { background: var(--aihub-warning); color: #1a1200; font-weight: 700; }
.aihub-flag--deal { background: var(--aihub-success); color: #04120b; font-weight: 700; }
.aihub-flag--top { background: var(--aihub-primary); color: #fff; font-weight: 700; }
.aihub-disclosure { font-size: 0.72rem; color: var(--aihub-muted); }

/* -- Buttons ----------------------------------------------------------- */
.aihub-cta, .aihub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 0.06s ease, filter 0.15s ease;
}
.aihub-cta { background: var(--aihub-primary); color: #fff; }
.aihub-cta:hover { filter: brightness(1.08); }
.aihub-cta:active { transform: translateY(1px); }
.aihub-btn--ghost { background: transparent; color: var(--aihub-text); border-color: var(--aihub-border); }
.aihub-btn--ghost:hover { border-color: var(--aihub-primary); }
.aihub-cta-block { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }

/* -- Tables ------------------------------------------------------------ */
.aihub-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	color: var(--aihub-text);
}
.aihub-table th, .aihub-table td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--aihub-border);
	vertical-align: middle;
}
.aihub-table th[scope="row"] { color: var(--aihub-muted); font-weight: 500; }
.aihub-table td { font-variant-numeric: tabular-nums; }

/* Comparison / benchmark tables scroll on mobile with sticky first column */
.aihub-compare, .aihub-benchmark { overflow-x: auto; }
.aihub-table--compare th:first-child,
.aihub-table--compare td:first-child { position: sticky; left: 0; background: var(--aihub-surface); }
.aihub-table--benchmark thead th { color: var(--aihub-muted); font-weight: 600; }

/* -- Score breakdown meters ------------------------------------------- */
.aihub-scores__overall { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.aihub-scores__overall .aihub-score { font-size: 1.6rem; padding: 6px 14px; }
.aihub-scores__label { color: var(--aihub-muted); }
.aihub-scores__table { width: 100%; border-collapse: collapse; }
.aihub-scores__table th { text-align: left; font-weight: 500; color: var(--aihub-text); padding: 0.35rem 0; white-space: nowrap; }
.aihub-scores__table td { padding: 0.35rem 0 0.35rem 0.75rem; width: 60%; }
.aihub-weight { color: var(--aihub-muted); font-size: 0.75rem; margin-left: 0.35rem; }
.aihub-meter { display: inline-block; width: calc(100% - 3rem); height: 8px; background: var(--aihub-surface-2); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.aihub-meter__fill { display: block; height: 100%; border-radius: 999px; background: var(--aihub-primary); }
.aihub-meter__fill--strong { background: var(--aihub-success); }
.aihub-meter__fill--good { background: var(--aihub-accent); }
.aihub-meter__fill--average { background: var(--aihub-warning); }
.aihub-meter__fill--weak { background: var(--aihub-danger); }
.aihub-meter__val { margin-left: 0.5rem; font-variant-numeric: tabular-nums; }
.aihub-scores__note, .aihub-benchmark__method, .aihub-checked { color: var(--aihub-muted); font-size: 0.78rem; margin: 0.5rem 0 0; }

/* -- Feature checklist ------------------------------------------------- */
.aihub-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.4rem; }
.aihub-checklist__item { display: flex; align-items: center; gap: 0.5rem; color: var(--aihub-text); }
.aihub-tick { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.8rem; }
.aihub-checklist__item--yes .aihub-tick { background: color-mix(in srgb, var(--aihub-success) 22%, transparent); color: var(--aihub-success); }
.aihub-checklist__item--no { color: var(--aihub-muted); }
.aihub-checklist__item--no .aihub-tick { background: var(--aihub-surface-2); color: var(--aihub-muted); }

/* -- Privacy ----------------------------------------------------------- */
.aihub-privacy__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.aihub-privacy__cell--good { color: var(--aihub-success); }
.aihub-privacy__cell--warn { color: var(--aihub-warning); }

/* -- FAQ --------------------------------------------------------------- */
.aihub-faq__item { border: 1px solid var(--aihub-border); border-radius: 10px; margin-bottom: 0.5rem; background: var(--aihub-surface); }
.aihub-faq__item summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; color: var(--aihub-text); }
.aihub-faq__answer { padding: 0 1rem 0.75rem; color: var(--aihub-muted); }

/* -- Section headings -------------------------------------------------- */
.aihub-grid-section__heading, .aihub-benchmark__heading { color: var(--aihub-text); }
.aihub-coupon code { background: var(--aihub-surface-2); padding: 2px 8px; border-radius: 6px; }

@media (max-width: 600px) {
	.aihub-scores__table th { white-space: normal; }
}

/* ===================================================================== */
/*  Modern polish (v1.1)                                                  */
/* ===================================================================== */

/* Pills for pending / unknown states — friendly, not alarming */
.aihub-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	line-height: 1.4;
}
.aihub-pill--pending {
	background: color-mix(in srgb, var(--aihub-accent) 14%, transparent);
	color: var(--aihub-accent);
	border: 1px solid color-mix(in srgb, var(--aihub-accent) 35%, transparent);
}
.aihub-pending-note {
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1px dashed var(--aihub-border);
	border-radius: 12px;
	color: var(--aihub-muted);
	font-size: 0.9rem;
	background: color-mix(in srgb, var(--aihub-surface-2) 60%, transparent);
}
.aihub-scores--pending .aihub-meter__fill { background: var(--aihub-border); }
.aihub-privacy__cell--unknown { color: var(--aihub-muted); }

/* Card: clean white surface, soft border + subtle hover lift (light theme) */
.aihub-card {
	position: relative;
	background: var(--aihub-surface);
	border: 1px solid var(--aihub-border);
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.aihub-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--aihub-primary) 35%, var(--aihub-border));
	box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--aihub-primary) 30%, transparent), 0 2px 8px rgba(0,0,0,0.08);
}
.aihub-card__logo {
	border: 1px solid var(--aihub-border);
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Score badge sits top-right of the card head, bold and legible */
.aihub-card__head > .aihub-score {
	flex: none; align-self: flex-start;
	font-size: 1.02rem; padding: 5px 11px; border-radius: 12px;
	background: color-mix(in srgb, currentColor 10%, var(--aihub-surface));
}
.aihub-card__head > .aihub-score small { font-size: 0.6em; }

/* Buttons: gradient primary + soft glow */
.aihub-cta {
	background: var(--aihub-primary);
	box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--aihub-primary) 55%, transparent);
	border: none;
}
.aihub-cta:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--aihub-primary) 45%, transparent); }

/* Score badge polish */
.aihub-score { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.aihub-scores__overall .aihub-score {
	background: var(--aihub-surface-2);
}

/* Meters: rounded, subtle inner shadow, animated width */
.aihub-meter { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.aihub-meter__fill { transition: width 0.5s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 0 10px -2px currentColor; }

/* Tables: zebra + hover rows */
.aihub-table--benchmark tbody tr,
.aihub-table--compare tbody tr { transition: background 0.12s ease; }
.aihub-table--benchmark tbody tr:hover,
.aihub-table--compare tbody tr:hover { background: color-mix(in srgb, var(--aihub-primary) 8%, transparent); }
.aihub-table--benchmark tbody tr td:first-child { color: var(--aihub-muted); font-variant-numeric: tabular-nums; }

/* Badges: crisper */
.aihub-badge { backdrop-filter: blur(4px); }

/* Flags */
.aihub-flag--sponsored { box-shadow: 0 2px 8px rgba(245,158,11,0.4); }

/* Logo / initial avatar */
.aihub-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 14px;
	overflow: hidden;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	line-height: 1;
}
.aihub-avatar--img { object-fit: cover; background: var(--aihub-surface-2); border: 1px solid var(--aihub-border); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.aihub-avatar--ph {
	background: var(--aihub-primary);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.35);
	text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.aihub-card .aihub-avatar { width: 56px; height: 56px; }

/* Pending score meters: subtle shimmer so it reads "coming soon", not broken */
.aihub-scores--pending .aihub-meter {
	background: var(--aihub-surface-2);
	background-size: 200% 100%;
	animation: aihub-shimmer 2s ease-in-out infinite;
}
@keyframes aihub-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .aihub-scores--pending .aihub-meter { animation: none; } }

/* External-link affiliate CTAs get a subtle arrow */
a.aihub-cta[target="_blank"]::after {
	content: "↗";
	font-size: 0.85em;
	opacity: 0.85;
	margin-left: 0.1em;
}

/* Keyboard focus visibility (a11y) */
.aihub-cta:focus-visible,
.aihub-btn:focus-visible,
.aihub-card a:focus-visible,
.aihub-faq__item summary:focus-visible {
	outline: 2px solid var(--aihub-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Card CTA row: keep buttons balanced */
.aihub-card__actions .aihub-btn, .aihub-card__actions .aihub-cta { flex: 1; min-width: 0; }

/* Card title link: white, no underline, accent on hover — must win in any
   context (grid, sidebar, or embedded inside .aihub-longform). */
.aihub-card .aihub-card__title a { color: var(--aihub-text); text-decoration: none; }
.aihub-card .aihub-card__title a:hover { color: var(--aihub-accent); text-decoration: none; }

/* -- Card row alignment (v3.3): equal-height sections across a grid row -- */
/* Description: always reserve two lines so shorter blurbs don't shift layout */
.aihub-card__desc { min-height: 2.7em; }
/* Badges: exactly one row — reserve it, clip any overflow */
.aihub-badges { min-height: 25px; max-height: 25px; overflow: hidden; }
/* Price: clamp verbose strings to two lines, slightly de-emphasized */
.aihub-card__price {
	font-size: 0.95rem; line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.8em;
}
/* Tighter footer rhythm; quieter disclosure */
.aihub-card__foot { gap: 0.55rem; }
.aihub-card .aihub-disclosure { font-size: 0.68rem; opacity: 0.75; }