/*
 * BritishGambler review component kit (agent 41, 2026-11-12).
 * Prefix: .bgrk-  (every component also carries the base class .bgrk)
 * Loaded by inc/review-kit.php only on singular pages whose post_content contains "bgrk-".
 * Palette = BG brand navy/indigo (Ghost v2 toplist + theme accent #0017BF). Fonts = site's own
 * (freight-display-pro headings, Inter body). Dark-mode safe ([data-site-scheme="dark"]).
 * Docs + copy-paste snippets: reports/41-review-kit.md. Undo: remove the require in functions.php.
 */

.bgrk {
	--bgrk-accent: #0017bf;
	--bgrk-indigo: #1a3eb5;
	--bgrk-soft: #eef1fc;
	--bgrk-navy: #0b0b2e;
	--bgrk-ink: #0b0b1a;
	--bgrk-text: #3a3a4d;
	--bgrk-muted: #6b6b7c;
	--bgrk-line: #e5e5ec;
	--bgrk-line-strong: #d0d0db;
	--bgrk-card: #fff;
	--bgrk-pro: #0b7a4b;
	--bgrk-pro-soft: #ecf7f1;
	--bgrk-con: #b4372f;
	--bgrk-con-soft: #fbefee;
	--bgrk-gold: #a07a12;
	--bgrk-gold-soft: #fbf3df;
	--bgrk-radius: 10px;
	--bgrk-serif: "freight-display-pro", Lora, Georgia, "Times New Roman", serif;
	--bgrk-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--bgrk-sans);
	color: var(--bgrk-text);
}

.bgrk *,
.bgrk *::before,
.bgrk *::after {
	box-sizing: border-box;
}

[data-site-scheme="dark"] .bgrk,
[data-scheme="dark"] .bgrk {
	--bgrk-accent: #9db0ff;
	--bgrk-indigo: #9db0ff;
	--bgrk-soft: rgba(157, 176, 255, .1);
	--bgrk-ink: #fff;
	--bgrk-text: rgba(255, 255, 255, .82);
	--bgrk-muted: rgba(255, 255, 255, .6);
	--bgrk-line: rgba(255, 255, 255, .14);
	--bgrk-line-strong: rgba(255, 255, 255, .24);
	--bgrk-card: rgba(255, 255, 255, .04);
	--bgrk-pro: #5fd39a;
	--bgrk-pro-soft: rgba(95, 211, 154, .1);
	--bgrk-con: #ff8f87;
	--bgrk-con-soft: rgba(255, 143, 135, .1);
	--bgrk-gold: #e9c46a;
	--bgrk-gold-soft: rgba(233, 196, 106, .12);
}

/* Small uppercase label used by several components */
.bgrk .bgrk-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-family: var(--bgrk-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--bgrk-indigo);
}

.bgrk .bgrk-label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

/* ---------------------------------------------------------------
 * 1. Brand header strip  (.bgrk-brand)
 * ------------------------------------------------------------- */
.bgrk-brand {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 28px 0;
	padding: 16px 18px;
	background: linear-gradient(180deg, var(--bgrk-soft) 0%, var(--bgrk-card) 100%);
	border: 1px solid var(--bgrk-line);
	border-left: 4px solid var(--bgrk-indigo);
	border-radius: var(--bgrk-radius);
}

.bgrk-brand .bgrk-brand__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 56px;
	padding: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--bgrk-logo-bg, #fff);
	box-shadow: 0 0 0 1px rgba(11, 11, 26, .08), 0 1px 3px rgba(11, 11, 26, .08);
}

.bgrk-brand .bgrk-brand__logo img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 0;
}

.bgrk-brand .bgrk-brand__logo--contain img {
	object-fit: contain;
	padding: 6px;
}

.bgrk-brand .bgrk-brand__text {
	min-width: 0;
	flex: 1 1 auto;
}

.bgrk-brand p.bgrk-brand__name,
.bgrk-brand h3.bgrk-brand__name,
.bgrk-brand .bgrk-brand__name {
	margin: 0 0 6px;
	font-family: var(--bgrk-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--bgrk-ink);
}

.bgrk-brand ul.bgrk-brand__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bgrk-brand ul.bgrk-brand__tags li {
	margin: 0;
	padding: 3px 10px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--bgrk-indigo);
	background: var(--bgrk-card);
	border: 1px solid var(--bgrk-line-strong);
	border-radius: 999px;
	list-style: none;
}

.bgrk-brand ul.bgrk-brand__tags li::before,
.bgrk-brand ul.bgrk-brand__tags li::marker {
	content: none;
	display: none;
}

/* ---------------------------------------------------------------
 * 2. Screenshot frames  (.bgrk-shot  --phone | --browser | --duo)
 * ------------------------------------------------------------- */
.bgrk-shot {
	margin: 28px 0;
	padding: 0;
	text-align: center;
}

.bgrk-shot .bgrk-shot__frame {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	background: #0b0b1a;
	overflow: hidden;
}

.bgrk-shot img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	margin: 0 !important;
	border-radius: 0;
}

/* phone */
.bgrk-shot--phone .bgrk-shot__frame,
.bgrk-shot__frame--phone {
	width: 280px;
	padding: 10px;
	border-radius: 38px;
	box-shadow: 0 0 0 2px #2a2a40, 0 18px 40px -12px rgba(11, 11, 46, .45);
}

.bgrk-shot--phone .bgrk-shot__frame img,
.bgrk-shot__frame--phone img {
	border-radius: 28px;
}

.bgrk-shot--phone .bgrk-shot__frame::before,
.bgrk-shot__frame--phone::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 50%;
	z-index: 2;
	width: 76px;
	height: 20px;
	margin-left: -38px;
	border-radius: 12px;
	background: #0b0b1a;
}

/* browser */
.bgrk-shot--browser .bgrk-shot__frame,
.bgrk-shot__frame--browser {
	width: 100%;
	padding: 0;
	border: 1px solid var(--bgrk-line-strong);
	border-radius: var(--bgrk-radius);
	background: var(--bgrk-card);
	box-shadow: 0 14px 34px -14px rgba(11, 11, 46, .35);
	text-align: left;
}

.bgrk-shot .bgrk-shot__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	background: #f1f2f7;
	border-bottom: 1px solid var(--bgrk-line);
}

[data-site-scheme="dark"] .bgrk-shot .bgrk-shot__bar,
[data-scheme="dark"] .bgrk-shot .bgrk-shot__bar {
	background: #1b1b2e;
}

.bgrk-shot .bgrk-shot__bar > i {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d0d0db;
}

.bgrk-shot .bgrk-shot__bar > i:nth-child(1) { background: #ff5f57; }
.bgrk-shot .bgrk-shot__bar > i:nth-child(2) { background: #febc2e; }
.bgrk-shot .bgrk-shot__bar > i:nth-child(3) { background: #28c840; }

.bgrk-shot .bgrk-shot__url {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 8px;
	padding: 3px 12px;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--bgrk-muted);
	background: var(--bgrk-card);
	border: 1px solid var(--bgrk-line);
	border-radius: 999px;
}

/* duo: browser + phone side by side (phone overlaps on desktop) */
.bgrk-shot--duo .bgrk-shot__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 24px;
	align-items: end;
}

.bgrk-shot--duo .bgrk-shot__frame--phone {
	width: 220px;
}

.bgrk-shot figcaption,
.bgrk-photo figcaption {
	margin: 12px auto 0;
	max-width: 640px;
	font-family: var(--bgrk-sans);
	font-size: 13.5px;
	font-style: normal;
	line-height: 1.5;
	text-align: center;
	color: var(--bgrk-muted);
}

/* ---------------------------------------------------------------
 * 3. Our insight  (.bgrk-insight  = core/group with a core/heading + paragraphs)
 * ------------------------------------------------------------- */
.bgrk-insight {
	position: relative;
	margin: 32px 0;
	padding: 26px 28px 10px;
	background: var(--bgrk-card);
	border: 1px solid var(--bgrk-line);
	border-top: 4px solid var(--bgrk-indigo);
	border-radius: var(--bgrk-radius);
	box-shadow: 0 2px 12px rgba(11, 11, 26, .04);
}

.bgrk-insight h2,
.bgrk-insight h3 {
	margin-top: 0 !important;
}

.bgrk-insight h2::before,
.bgrk-insight h3::before,
.bgrk-insight h4::before {
	content: "Our insight";
	display: block;
	margin: 0 0 8px;
	font-family: var(--bgrk-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--bgrk-indigo);
}

.bgrk-insight p {
	max-width: 70ch;
}

.bgrk-insight p:first-of-type {
	font-size: 1.06em;
	color: var(--bgrk-ink);
}

/* ---------------------------------------------------------------
 * 4. Pros / cons  (.bgrk-pc)
 * ------------------------------------------------------------- */
.bgrk-pc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 28px 0;
}

.bgrk-pc .bgrk-pc__col {
	padding: 18px 20px 8px;
	border: 1px solid var(--bgrk-line);
	border-radius: var(--bgrk-radius);
	background: var(--bgrk-pro-soft);
}

.bgrk-pc .bgrk-pc__col--con {
	background: var(--bgrk-con-soft);
}

.bgrk-pc p.bgrk-pc__title {
	margin: 0 0 10px;
	font-family: var(--bgrk-serif);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--bgrk-ink);
}

.bgrk-pc ul {
	margin: 0 0 10px !important;
	padding: 0 !important;
	list-style: none !important;
}

.bgrk-pc ul li {
	position: relative;
	margin: 0 0 10px !important;
	padding: 0 0 0 28px !important;
	font-size: 15px;
	line-height: 1.5;
	list-style: none !important;
	color: var(--bgrk-text);
}

.bgrk-pc ul li::marker {
	content: none;
}

.bgrk-pc ul li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bgrk-pro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.4l2.6 2.6L12 5.4'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.bgrk-pc .bgrk-pc__col--con ul li::before {
	background: var(--bgrk-con) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M4.5 8h7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------------------------------------------------------------
 * 5. Facts table  (.bgrk-facts)  + 6. Last verified (.bgrk-verified)
 * ------------------------------------------------------------- */
.bgrk-facts {
	margin: 28px 0;
	overflow: hidden;
	border: 1px solid var(--bgrk-line-strong);
	border-radius: var(--bgrk-radius);
	background: var(--bgrk-card);
}

.bgrk-facts p.bgrk-facts__title {
	margin: 0;
	padding: 14px 20px;
	font-family: var(--bgrk-serif);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	background: var(--bgrk-navy);
}

.bgrk-facts table.bgrk-facts__table {
	width: 100%;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 15px;
	line-height: 1.5;
}

.bgrk-facts table.bgrk-facts__table th,
.bgrk-facts table.bgrk-facts__table td {
	padding: 12px 20px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--bgrk-line) !important;
	vertical-align: top;
	text-align: left;
	overflow-wrap: anywhere;
	background: transparent;
}

.bgrk-facts table.bgrk-facts__table th {
	width: 34%;
	font-family: var(--bgrk-sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bgrk-ink);
	background: var(--bgrk-soft) !important;
}

.bgrk-facts table.bgrk-facts__table td {
	color: var(--bgrk-text);
}

.bgrk-facts table.bgrk-facts__table td small {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--bgrk-muted);
}

.bgrk-facts table.bgrk-facts__table a {
	color: var(--bgrk-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bgrk .bgrk-verified,
.bgrk-facts p.bgrk-verified {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 12px 20px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--bgrk-muted);
	background: var(--bgrk-card);
}

.bgrk .bgrk-verified strong {
	color: var(--bgrk-pro);
	font-weight: 700;
}

.bgrk .bgrk-verified::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bgrk-pro);
}

/* ---------------------------------------------------------------
 * 7. Image card for Pexels photos  (.bgrk-photo on core/image)
 * ------------------------------------------------------------- */
.bgrk-photo,
figure.wp-block-image.bgrk-photo {
	margin: 32px 0 !important;
	padding: 0;
}

.bgrk-photo img,
figure.wp-block-image.bgrk-photo img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 16px 34px -18px rgba(11, 11, 46, .45);
}

.bgrk-photo figcaption,
figure.wp-block-image.bgrk-photo figcaption {
	position: relative;
	padding-left: 14px;
	text-align: left;
	max-width: none;
}

.bgrk-photo figcaption::before {
	content: "";
	position: absolute;
	top: .25em;
	bottom: .25em;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--bgrk-indigo);
}

/* ---------------------------------------------------------------
 * 8. References  (.bgrk-refs)
 * ------------------------------------------------------------- */
.bgrk-refs {
	margin: 36px 0 20px;
	padding: 18px 22px 8px;
	border-top: 2px solid var(--bgrk-ink);
	background: var(--bgrk-soft);
	border-radius: 0 0 var(--bgrk-radius) var(--bgrk-radius);
}

.bgrk-refs p.bgrk-refs__title {
	margin: 0 0 10px;
	font-family: var(--bgrk-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--bgrk-ink);
}

.bgrk-refs ol {
	margin: 0 0 10px !important;
	padding-left: 22px !important;
}

.bgrk-refs ol li {
	margin: 0 0 8px !important;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bgrk-text);
	overflow-wrap: anywhere;
}


/* ---------------------------------------------------------------
 * 9. Mini review wrapper for hub/category pages  (.bgrk-mini = core/group)
 *    Holds: brand strip (H3 name) > screenshot > insight (H4/H3) > pros/cons > facts > "Read our full review" line
 * ------------------------------------------------------------- */
.bgrk-mini {
	margin: 36px 0;
	padding: 22px 24px 8px;
	border: 1px solid var(--bgrk-line);
	border-radius: 14px;
	background: var(--bgrk-card);
	box-shadow: 0 4px 22px -10px rgba(11, 11, 46, .18);
	counter-increment: bgrk-mini;
}

.bgrk-mini .bgrk-brand {
	margin-top: 0;
}

.bgrk-mini .bgrk-insight {
	margin: 20px 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.bgrk-mini .bgrk-insight h3::before,
.bgrk-mini .bgrk-insight h4::before {
	content: "Our insight";
}

.bgrk-mini .bgrk-insight h4 {
	margin-top: 0 !important;
}

.bgrk-mini .bgrk-shot,
.bgrk-mini .bgrk-pc,
.bgrk-mini .bgrk-facts {
	margin: 20px 0;
}

.bgrk p.bgrk-more,
p.bgrk-more {
	margin: 4px 0 16px;
	font-size: 15px;
	font-weight: 600;
}

p.bgrk-more a {
	color: var(--bgrk-accent, #0017bf);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------- */
@media (max-width: 640px) {
	.bgrk-brand {
		gap: 12px;
		padding: 12px;
	}

	.bgrk-brand .bgrk-brand__logo {
		width: 96px;
		height: 44px;
	}

	.bgrk-brand p.bgrk-brand__name,
.bgrk-brand h3.bgrk-brand__name,
.bgrk-brand .bgrk-brand__name {
		font-size: 21px;
	}

	.bgrk-insight {
		padding: 20px 16px 4px;
	}

	.bgrk-pc {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.bgrk-pc .bgrk-pc__col {
		padding: 16px 16px 6px;
	}

	.bgrk-facts table.bgrk-facts__table,
	.bgrk-facts table.bgrk-facts__table tbody,
	.bgrk-facts table.bgrk-facts__table tr,
	.bgrk-facts table.bgrk-facts__table th,
	.bgrk-facts table.bgrk-facts__table td {
		display: block;
		width: 100% !important;
	}

	.bgrk-facts table.bgrk-facts__table th {
		padding: 10px 16px 2px !important;
		border-bottom: 0 !important;
		font-size: 12px;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--bgrk-indigo);
		background: transparent !important;
	}

	.bgrk-facts table.bgrk-facts__table td {
		padding: 0 16px 12px !important;
	}

	.bgrk-facts p.bgrk-facts__title,
	.bgrk .bgrk-verified {
		padding-left: 16px;
		padding-right: 16px;
	}

	.bgrk-shot--duo .bgrk-shot__row {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.bgrk-shot--phone .bgrk-shot__frame,
	.bgrk-shot__frame--phone,
	.bgrk-shot--duo .bgrk-shot__frame--phone {
		width: 240px;
	}

	.bgrk-photo img,
	figure.wp-block-image.bgrk-photo img {
		border-radius: 10px;
	}

	.bgrk-refs {
		padding: 16px 16px 6px;
	}

	.bgrk-mini {
		padding: 14px 12px 4px;
		border-radius: 12px;
	}
}