/*
 * jab-core-blocks — BEM variant + column-layout system.
 */

[class^="jab-"],
[class*=" jab-"] {
	box-sizing: border-box;
}

[class^="jab-"] *,
[class*=" jab-"] * {
	box-sizing: inherit;
}

[class*="--variant-column"] {
	margin-block: var(--brand-space-5);
}

[class*="--col-full"] {
	display: block;
}

[class*="--col-70-30"],
[class*="--col-50-50"],
[class*="--col-30-70"] {
	display: grid;
	gap: var(--brand-space-5);
	align-items: start;
}

[class*="--col-70-30"] {
	grid-template-columns: 70% 30%;
}

[class*="--col-50-50"] {
	grid-template-columns: 50% 50%;
}

[class*="--col-30-70"] {
	grid-template-columns: 30% 70%;
}

[class*="--col-custom"] {
	display: grid;
	gap: var(--brand-space-5);
	align-items: start;
}

@media (max-width: 768px) {
	[class*="--col-70-30"],
	[class*="--col-50-50"],
	[class*="--col-30-70"],
	[class*="--col-custom"] {
		grid-template-columns: 1fr !important;
	}
}

[class*="--variant-boxed"] {
	max-width: 800px;
	margin-inline: auto;
	margin-block: var(--brand-space-5);
	padding: var(--brand-space-5);
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--brand-radius-md);
}

[class*="--variant-vertical"] {
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-3);
	padding: var(--brand-space-4);
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--brand-radius-md);
}

/* Universal bg_override variants — CRO contrast for any block (locked 2026-05-16).
   Applies via .jab-<slug>--bg-override-<key>. Stacks on top of block default styling
   so accent/warning/primary/success override the default surface/border. */
[class*="--bg-override-surface"] { background: var(--brand-surface) !important; }
[class*="--bg-override-light"] { background: var(--brand-bg-light) !important; }
[class*="--bg-override-callout"] { background: var(--brand-bg-callout) !important; }
[class*="--bg-override-accent"] { background: var(--brand-accent) !important; color: var(--brand-text-on-dark); border-color: var(--brand-accent) !important; }
[class*="--bg-override-warning"] { background: color-mix(in srgb, var(--brand-warning) 22%, var(--brand-surface)) !important; border-color: var(--brand-warning) !important; border-width: 2px !important; }
[class*="--bg-override-success"] { background: color-mix(in srgb, var(--brand-success) 15%, var(--brand-surface)) !important; border-color: var(--brand-success) !important; }
[class*="--bg-override-primary"] { background: var(--brand-primary) !important; color: var(--brand-text-on-dark); border-color: var(--brand-primary) !important; }

.jab-urgency {
	display: inline-flex;
	align-items: center;
	gap: var(--brand-space-2);
	padding: var(--brand-space-2) var(--brand-space-3);
	font-size: var(--brand-text-sm);
	font-family: var(--brand-font-body);
	color: var(--brand-text);
	background: color-mix(in srgb, var(--brand-warning) 15%, var(--brand-surface));
	border-radius: var(--brand-radius-sm);
	margin: var(--brand-space-3) 0;
	max-width: 100%;
}

.jab-urgency__icon {
	display: inline-block;
	font-size: var(--brand-text-base);
	line-height: 1;
}

.jab-rating {
	display: inline-flex;
	align-items: baseline;
	gap: var(--brand-space-1);
	font-size: var(--brand-text-sm);
	color: var(--brand-text-muted);
}

.jab-rating__stars {
	color: var(--brand-rating-star);
	letter-spacing: 1px;
}

.jab-rating__numeric {
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-text);
}

.jab-rating__count {
	color: var(--brand-text-muted);
}

/* ============================================================
 *  v0.4.0 — QoT editorial button system
 *  Pill-shaped (999px), 240ms cubic-bezier ease, design-system aligned.
 *  PRIMARY = gold (accent), text = navy → invites without shouting.
 *  BRAND   = navy (primary) → identity-anchored CTA.
 *  EMPHASIS= rose → emotional/secondary commerce CTAs.
 * ============================================================ */
.jab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--brand-space-2);
	padding: 12px 22px;
	font-family: var(--brand-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	border-radius: var(--brand-radius-pill);   /* 999px — pill */
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 240ms cubic-bezier(.2, .8, .2, 1),
	            color 240ms cubic-bezier(.2, .8, .2, 1),
	            border-color 240ms cubic-bezier(.2, .8, .2, 1),
	            transform 240ms cubic-bezier(.2, .8, .2, 1),
	            box-shadow 240ms cubic-bezier(.2, .8, .2, 1);
}

.jab-btn--lg { font-size: 17px; padding: 16px 30px; }
.jab-btn--sm { font-size: 13px; padding: 8px 16px; }

/* Primary CTA — Sunset Gold. "Invites, never pushes." */
.jab-btn--filled {
	background: var(--brand-accent);
	color: var(--brand-primary-dark);
	box-shadow: 0 1px 2px rgba(212, 180, 131, 0.25);
}
.jab-btn--filled:hover,
.jab-btn--filled:focus {
	background: var(--gold-600, #b08653);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(176, 134, 83, 0.30);
}

/* Brand CTA — Navy. Identity-anchored. */
.jab-btn--brand {
	background: var(--brand-primary);
	color: var(--brand-text-on-dark);
}
.jab-btn--brand:hover,
.jab-btn--brand:focus {
	background: var(--brand-primary-dark);
	color: var(--brand-text-on-dark);
	transform: translateY(-1px);
}

/* Emphasis CTA — Deep Rose. Emotional / "Read this if it speaks to you." */
.jab-btn--emphasis {
	background: var(--rose-500, #A85D5D);
	color: #ffffff;
}
.jab-btn--emphasis:hover,
.jab-btn--emphasis:focus {
	background: #934f4f;
	color: #ffffff;
	transform: translateY(-1px);
}

/* Outline — secondary action, navy stroke. */
.jab-btn--outline {
	background: transparent;
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}
.jab-btn--outline:hover,
.jab-btn--outline:focus {
	background: var(--brand-bg-light);
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

/* Ghost — soft card-on-card. */
.jab-btn--ghost {
	background: var(--brand-surface);
	color: var(--brand-primary);
	border-color: var(--brand-border);
}
.jab-btn--ghost:hover,
.jab-btn--ghost:focus {
	background: var(--brand-bg-light);
}

/* On dark backgrounds (accent / primary bg_override) — invert. */
.jab-btn--on-dark.jab-btn--outline {
	color: var(--brand-text-on-dark);
	border-color: var(--brand-text-on-dark);
}
.jab-btn--on-dark.jab-btn--outline:hover,
.jab-btn--on-dark.jab-btn--outline:focus {
	background: var(--brand-text-on-dark);
	color: var(--brand-primary);
}

/* ============================================================
 *  Pill badge — design-system style. For TOP PICK / BEST VALUE etc.
 *  Use via `.jab-badge .jab-badge--<variant>`.
 * ============================================================ */
.jab-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--brand-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--brand-radius-pill);
	line-height: 1.4;
	border: 1px solid transparent;
	white-space: nowrap;
}
.jab-badge--accent  { background: var(--gold-100, #f7eedd); color: var(--gold-700, #8c6a3d); border-color: var(--gold-300, #ecd9bd); }
.jab-badge--sage    { background: var(--sage-100, #e6ece8); color: var(--sage-700, #5c6f63); border-color: var(--sage-200, #cfd9d2); }
.jab-badge--navy    { background: var(--brand-bg-light); color: var(--brand-primary); border-color: var(--brand-border); }
.jab-badge--rose    { background: var(--rose-100, #f0d9d9); color: var(--rose-700, #7d3f3f); border-color: var(--rose-200, #e3bfbf); }
.jab-badge--solid   { background: var(--brand-primary); color: var(--brand-text-on-dark); }

/* ============================================================
 *  Pull quote — design-system editorial signature.
 *  Use via `.jab-pullquote` with optional `.jab-pullquote__cite`.
 *  Big sage-coloured " mark hangs to the left.
 * ============================================================ */
.jab-pullquote {
	position: relative;
	font-family: var(--brand-font-display);
	font-size: 26px;
	line-height: 1.3;
	font-style: italic;
	font-weight: 500;
	color: var(--brand-primary);
	margin: var(--brand-space-7) var(--brand-space-3) var(--brand-space-7) var(--brand-space-7);
	max-width: 560px;
}
.jab-pullquote::before {
	content: "\201C";
	position: absolute;
	left: -36px;
	top: -18px;
	font-size: 80px;
	line-height: 1;
	color: var(--sage-500, #7C9082);
	font-style: normal;
	font-weight: 600;
}
.jab-pullquote__cite {
	display: block;
	font-family: var(--brand-font-display);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: var(--sage-700, #5c6f63);
	margin-top: var(--brand-space-3);
}
.jab-pullquote__cite strong { color: var(--brand-primary); font-weight: 600; }
@media (max-width: 768px) {
	.jab-pullquote { margin-inline: var(--brand-space-5); font-size: 22px; }
	.jab-pullquote::before { left: -22px; top: -14px; font-size: 60px; }
}