/**
 * GT Pro — Core block style variations.
 *
 * Ported from the Marketers Delight block-styles dropin that powers
 * gauravtiwari.org (md-dropins/blocks/css/core-*.css), so an author moving
 * between the two sites gets the same catalogue under the same names.
 *
 * Three deliberate differences from the MD original:
 *
 *   1. Tokens are namespaced --gtbs-*. MD publishes generic names
 *      (--color-text, --space-single, --radius-m) from its own theme.json;
 *      anantamias runs Bricks, where those names are not ours to claim.
 *      Everything resolves from the .sp-prose palette with literal fallbacks.
 *   2. Lengths are px, not rem. This site sets html{font-size:62.5%}, so MD's
 *      rem values would land at 62.5% of their intended size.
 *   3. Icons are inline-SVG masks, not the md-icon webfont, which does not
 *      exist here. background-color drives the colour, so a masked glyph still
 *      follows its state token.
 *
 * Loaded by includes/block-styles.php on the front end only when the rendered
 * content actually carries an is-style-* class, and unconditionally in the
 * editor canvas.
 *
 * @package GT_Pro
 */

/* ==========================================================================
   1. TOKENS
   Mirrors the .sp-prose palette in bricks-child/inc/single-layout.php.
   ========================================================================== */

:root,
.editor-styles-wrapper {
	/* Surface + ink */
	--gtbs-text:        var(--sp-ink, #18181b);
	--gtbs-text-soft:   var(--sp-soft, #3f3f46);
	--gtbs-text-sec:    var(--sp-muted, #57534e);
	--gtbs-text-light:  #ffffff;
	--gtbs-border:      var(--sp-rule, #e4e4e7);
	--gtbs-border-2:    var(--sp-rule-2, #d4d4d8);
	--gtbs-surface:     #ffffff;
	--gtbs-bg:          var(--sp-paper, #fafaf9);

	/* Brand */
	--gtbs-primary:     var(--sp-primary, #2364a9);
	--gtbs-primary-d:   var(--sp-primary-d, #1f3b61);
	--gtbs-links:       var(--sp-primary, #2364a9);
	--gtbs-accent:      var(--sp-gold, #d9b324);
	/* Gold is too light to set type on paper; --sp-gold-d is its ink twin. */
	--gtbs-accent-ink:  var(--sp-gold-d, #8c7117);
	--gtbs-tertiary:    #0f766e;
	--gtbs-button:      var(--sp-primary, #2364a9);
	--gtbs-button-text: #ffffff;

	/* Status — semantic, never the brand slot: an Error must read as an error */
	--gtbs-warning:     #b45309;
	--gtbs-error:       #b91c1c;
	--gtbs-info:        #2563eb;
	--gtbs-success:     #047857;

	/* Rhythm — MD's scale, tightened to this site's prose measure */
	--gtbs-space-xs:     4px;
	--gtbs-space-third:  8px;
	--gtbs-space-half:   12px;
	--gtbs-space-single: 18px;
	--gtbs-space-mid:    24px;
	--gtbs-space-double: 32px;

	/* Radii */
	--gtbs-radius-xs:   2px;
	--gtbs-radius-s:    4px;
	--gtbs-radius-m:    8px;
	--gtbs-radius-l:   12px;
	--gtbs-radius-full: 999px;

	/* Type */
	--gtbs-fs-xs:   12px;
	--gtbs-fs-s:    14px;
	--gtbs-fs-base: 17px;
	--gtbs-fs-m:    18px;
	--gtbs-fs-l:    20px;
	--gtbs-lh-relaxed: 1.7;
	--gtbs-weight-bold: 700;
	--gtbs-font-serif: var(--serif, 'CharmanSerif', Georgia, "Times New Roman", serif);
	--gtbs-font-mono: var(--sp-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	/* Depth + motion */
	--gtbs-shadow-tint:        rgba(24, 24, 27, 0.08);
	--gtbs-shadow-tint-strong: rgba(24, 24, 27, 0.16);
	--gtbs-shadow-sm: 0 1px 2px var(--gtbs-shadow-tint);
	--gtbs-shadow-md: 0 4px 16px var(--gtbs-shadow-tint);
	--gtbs-motion-fast: 0.18s cubic-bezier(0.25, 1, 0.5, 1);
	--gtbs-motion:      0.3s cubic-bezier(0.25, 1, 0.5, 1);
	--gtbs-motion-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

	/* Masked glyphs — see the header note on why these are not a webfont */
	--gtbs-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.5 1.7 20.4a1.2 1.2 0 0 0 1 1.8h18.6a1.2 1.2 0 0 0 1-1.8ZM12 8.6a1 1 0 0 1 1 1v4.6a1 1 0 0 1-2 0V9.6a1 1 0 0 1 1-1Zm0 8.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
	--gtbs-icon-error:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.8a10.2 10.2 0 1 0 0 20.4 10.2 10.2 0 0 0 0-20.4Zm4 12.8a1 1 0 0 1-1.4 1.4L12 13.4l-2.6 2.6A1 1 0 0 1 8 14.6L10.6 12 8 9.4A1 1 0 0 1 9.4 8L12 10.6 14.6 8A1 1 0 0 1 16 9.4L13.4 12Z'/%3E%3C/svg%3E");
	--gtbs-icon-info:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.8a10.2 10.2 0 1 0 0 20.4 10.2 10.2 0 0 0 0-20.4Zm0 3.6a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Zm1.8 12.4h-3.6a1 1 0 0 1 0-2h.8v-3.4h-.6a1 1 0 0 1 0-2H12a1 1 0 0 1 1 1v4.4h.8a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
	--gtbs-icon-tip:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6a7.2 7.2 0 0 0-4.2 13.1c.6.4 1 1.1 1 1.9v.3h6.4v-.3c0-.8.4-1.5 1-1.9A7.2 7.2 0 0 0 12 1.6Zm-3.2 17c0 .5.4.9.9.9h4.6c.5 0 .9-.4.9-.9v-.2H8.8Zm.8 2.6a2.8 2.8 0 0 0 4.8 0Z'/%3E%3C/svg%3E");
	--gtbs-icon-note:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.7 2.6a2.1 2.1 0 0 1 3 0l.7.7a2.1 2.1 0 0 1 0 3l-1.3 1.3-3.7-3.7ZM15 5.2 3.5 16.7a1 1 0 0 0-.3.5l-1.1 4a.8.8 0 0 0 1 1l4-1.1a1 1 0 0 0 .5-.3L19 9.3Z'/%3E%3C/svg%3E");
	--gtbs-icon-key:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.6 2a6.4 6.4 0 0 0-6.1 8.4l-7 7a1.2 1.2 0 0 0-.3.9v2.5c0 .6.5 1.2 1.2 1.2h2.9a1 1 0 0 0 1-1v-1.4h1.4a1 1 0 0 0 1-1v-1.4h1.4a1 1 0 0 0 .7-.3l1.3-1.3A6.4 6.4 0 1 0 15.6 2Zm1.6 3.2a1.6 1.6 0 1 1 0 3.2 1.6 1.6 0 0 1 0-3.2Z'/%3E%3C/svg%3E");
	--gtbs-icon-check:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 5.4a1.3 1.3 0 0 1 0 1.9L10.2 18.1a1.3 1.3 0 0 1-1.9 0L3 12.8a1.3 1.3 0 0 1 1.9-1.9l4.4 4.4L19.1 5.4a1.3 1.3 0 0 1 1.9 0Z'/%3E%3C/svg%3E");
	--gtbs-icon-cross:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.4 4.6a1.3 1.3 0 0 1 0 1.9L13.9 12l5.5 5.5a1.3 1.3 0 0 1-1.9 1.9L12 13.9l-5.5 5.5a1.3 1.3 0 0 1-1.9-1.9L10.1 12 4.6 6.5a1.3 1.3 0 0 1 1.9-1.9L12 10.1l5.5-5.5a1.3 1.3 0 0 1 1.9 0Z'/%3E%3C/svg%3E");
	--gtbs-icon-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.3 4.3a1.2 1.2 0 0 1 1.7 0l6.8 6.8a1.2 1.2 0 0 1 0 1.7l-6.8 6.9a1.2 1.2 0 0 1-1.7-1.7l4.8-4.8H3.4a1.2 1.2 0 0 1 0-2.4h14.7l-4.8-4.8a1.2 1.2 0 0 1 0-1.7Z'/%3E%3C/svg%3E");
	--gtbs-icon-star:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 2.4 3 6.1 6.7 1-4.8 4.7 1.1 6.7-6-3.2-6 3.2 1.1-6.7L2.3 9.5l6.7-1Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. PARAGRAPH — alert and notice wells
   Flat tonal wells: no rails, no labels, no drop shadows. Status styles map to
   semantic tokens rather than brand slots, and each carries a masked glyph so
   hue is never the only cue.
   ========================================================================== */

:where(p, .wp-block-paragraph).is-style-warning,
:where(p, .wp-block-paragraph).is-style-error,
:where(p, .wp-block-paragraph).is-style-info,
:where(p, .wp-block-paragraph).is-style-tip,
:where(p, .wp-block-paragraph).is-style-note,
:where(p, .wp-block-paragraph).is-style-notice,
:where(p, .wp-block-paragraph).is-style-minimal {
	--gtbs-callout-accent: var(--gtbs-primary);
	--gtbs-callout-bg:     color-mix(in srgb, var(--gtbs-callout-accent) 6%, var(--gtbs-surface));
	--gtbs-callout-border: color-mix(in srgb, var(--gtbs-callout-accent) 22%, var(--gtbs-border));
	--gtbs-callout-icon:   color-mix(in srgb, var(--gtbs-callout-accent) 72%, var(--gtbs-text));
	--gtbs-callout-link:   color-mix(in srgb, var(--gtbs-callout-accent) 38%, var(--gtbs-links));
	background: var(--gtbs-callout-bg);
	border: 1px solid var(--gtbs-callout-border);
	border-radius: var(--gtbs-radius-m);
	color: var(--gtbs-text);
	line-height: var(--gtbs-lh-relaxed);
	margin: 1.5em 0 1em;
	padding: var(--gtbs-space-single) var(--gtbs-space-mid);
}

:where(p, .wp-block-paragraph).is-style-warning {
	--gtbs-callout-accent: var(--gtbs-warning);
	--gtbs-callout-glyph: var(--gtbs-icon-warning);
}

:where(p, .wp-block-paragraph).is-style-error {
	--gtbs-callout-accent: var(--gtbs-error);
	--gtbs-callout-glyph: var(--gtbs-icon-error);
}

:where(p, .wp-block-paragraph).is-style-info {
	--gtbs-callout-accent: var(--gtbs-info);
	--gtbs-callout-glyph: var(--gtbs-icon-info);
}

:where(p, .wp-block-paragraph).is-style-tip {
	--gtbs-callout-accent: var(--gtbs-success);
	--gtbs-callout-glyph: var(--gtbs-icon-tip);
}

:where(p, .wp-block-paragraph).is-style-note {
	--gtbs-callout-accent: var(--gtbs-tertiary);
	--gtbs-callout-glyph: var(--gtbs-icon-note);
}

:where(p, .wp-block-paragraph).is-style-notice {
	--gtbs-callout-accent: var(--gtbs-accent);
}

/* State icon — inline at the start of the first line so wrapped text flows
   beneath it. A mask carries no text, so screen readers announce nothing:
   a second visual cue alongside hue, not announced content. */
:where(p, .wp-block-paragraph).is-style-warning::before,
:where(p, .wp-block-paragraph).is-style-error::before,
:where(p, .wp-block-paragraph).is-style-info::before,
:where(p, .wp-block-paragraph).is-style-tip::before,
:where(p, .wp-block-paragraph).is-style-note::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	margin-inline-end: 0.5em;
	background-color: var(--gtbs-callout-icon);
	-webkit-mask: var(--gtbs-callout-glyph) no-repeat center / contain;
	mask: var(--gtbs-callout-glyph) no-repeat center / contain;
}

:where(p, .wp-block-paragraph).is-style-minimal {
	--gtbs-callout-bg:     color-mix(in srgb, var(--gtbs-text) 3%, var(--gtbs-surface));
	--gtbs-callout-border: color-mix(in srgb, var(--gtbs-text) 10%, transparent);
	--gtbs-callout-link:   var(--gtbs-links);
	color: var(--gtbs-text-sec);
}

:where(p, .wp-block-paragraph).is-style-warning a,
:where(p, .wp-block-paragraph).is-style-error a,
:where(p, .wp-block-paragraph).is-style-info a,
:where(p, .wp-block-paragraph).is-style-tip a,
:where(p, .wp-block-paragraph).is-style-note a,
:where(p, .wp-block-paragraph).is-style-notice a,
:where(p, .wp-block-paragraph).is-style-minimal a {
	color: var(--gtbs-callout-link);
	font-weight: var(--gtbs-weight-bold);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--gtbs-callout-link) 42%, transparent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

/* ==========================================================================
   3. PARAGRAPH — typography
   ========================================================================== */

:where(p, .wp-block-paragraph).is-style-intro {
	color: var(--gtbs-text-sec);
	font-size: clamp(18px, 16px + 0.35vw, 21px);
	line-height: 1.68;
	margin-block-start: var(--gtbs-space-single);
}

:where(p, .wp-block-paragraph).is-style-serif {
	font-family: var(--gtbs-font-serif);
	font-size: 1.1em;
	line-height: 1.8;
}

:where(p, .wp-block-paragraph).is-style-lead {
	border-block-end: 1px solid var(--gtbs-border);
	color: var(--gtbs-text);
	font-size: clamp(18px, 16px + 0.3vw, 20px);
	font-weight: 500;
	line-height: 1.72;
	margin-block-end: var(--gtbs-space-mid);
	padding-block-end: var(--gtbs-space-single);
}

/* Editor canvas: WP global styles zero block bottom margins inside layout
   containers at (0,1,0). Restate the lead's trailing space above that so the
   canvas matches the front end. */
.editor-styles-wrapper .block-editor-block-list__layout > .is-style-lead {
	margin-block-end: var(--gtbs-space-mid);
}

:where(p, .wp-block-paragraph).is-style-quote {
	border-inline-start: 3px solid color-mix(in srgb, var(--gtbs-primary) 72%, var(--gtbs-border));
	color: var(--gtbs-text-sec);
	font-style: italic;
	line-height: 1.7;
	margin: 1.25em 0;
	padding-inline-start: var(--gtbs-space-single);
}

/* ==========================================================================
   4. PARAGRAPH — emphasis boxes
   ========================================================================== */

:where(p, .wp-block-paragraph).is-style-glass {
	background: color-mix(in srgb, var(--gtbs-surface) 84%, transparent);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	backdrop-filter: blur(8px) saturate(120%);
	border: 1px solid color-mix(in srgb, var(--gtbs-border) 72%, transparent);
	border-radius: var(--gtbs-radius-l);
	box-shadow: var(--gtbs-shadow-sm);
	color: var(--gtbs-text);
	line-height: var(--gtbs-lh-relaxed);
	margin: 1.5em 0;
	padding: var(--gtbs-space-mid) var(--gtbs-space-double);
}

:where(p, .wp-block-paragraph).is-style-spotlight,
:where(p, .wp-block-paragraph).is-style-ribbon-box,
:where(p, .wp-block-paragraph).is-style-numbered-box,
:where(p, .wp-block-paragraph).is-style-key-point {
	--gtbs-box-accent: var(--gtbs-primary);
	--gtbs-box-bg:     color-mix(in srgb, var(--gtbs-box-accent) 5%, var(--gtbs-surface));
	--gtbs-box-border: color-mix(in srgb, var(--gtbs-box-accent) 24%, var(--gtbs-border));
	--gtbs-box-rail:   color-mix(in srgb, var(--gtbs-box-accent) 72%, var(--gtbs-text));
	--gtbs-box-link:   color-mix(in srgb, var(--gtbs-box-accent) 35%, var(--gtbs-links));
	background: var(--gtbs-box-bg);
	border: 1px solid var(--gtbs-box-border);
	border-radius: var(--gtbs-radius-l);
	color: var(--gtbs-text);
	line-height: var(--gtbs-lh-relaxed);
	margin: 1.5em 0;
	position: relative;
}

:where(p, .wp-block-paragraph).is-style-spotlight {
	overflow: hidden;
	padding: var(--gtbs-space-mid) var(--gtbs-space-double);
	box-shadow: var(--gtbs-shadow-sm);
}

:where(p, .wp-block-paragraph).is-style-spotlight::before {
	background: var(--gtbs-box-rail);
	border-radius: var(--gtbs-radius-l) var(--gtbs-radius-l) 0 0;
	content: "";
	height: 4px;
	inset: 0 0 auto;
	position: absolute;
}

/* Ribbon — a bookmark ribbon hangs from the top edge */
:where(p, .wp-block-paragraph).is-style-ribbon-box {
	padding: var(--gtbs-space-mid) calc(var(--gtbs-space-double) + var(--gtbs-space-mid)) var(--gtbs-space-mid) var(--gtbs-space-double);
}

:where(p, .wp-block-paragraph).is-style-ribbon-box::before {
	background: var(--gtbs-box-rail);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
	content: "";
	height: 32px;
	inset: 0 var(--gtbs-space-mid) auto auto;
	position: absolute;
	width: 18px;
}

/* ---- Badge boxes -------------------------------------------------------
 *
 * Same lesson as the icon lists: an absolute badge inside the box's own left
 * padding only stays clear of the text while that padding survives. These are
 * flex containers instead — the badge is a flex item, the text is the anonymous
 * item beside it, and the gap between them is structural rather than a padding
 * value the host can win. `align-items: baseline` anchors the badge to the
 * first line, so a box that wraps to five lines still reads top-down.
 * ---------------------------------------------------------------------- */

:where(p, .wp-block-paragraph).is-style-numbered-box,
:where(p, .wp-block-paragraph).is-style-key-point {
	display: flex;
	align-items: baseline;
	column-gap: 14px;
	padding: var(--gtbs-space-mid) var(--gtbs-space-double);
}

:where(p, .wp-block-paragraph).is-style-numbered-box {
	counter-increment: gtbs-para;
}

:where(p, .wp-block-paragraph).is-style-numbered-box::before {
	content: counter(gtbs-para);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 30px;
	height: 30px;
	/* Pull the chip back up to the first line's baseline box. */
	margin-top: calc((1em * var(--gtbs-lh-relaxed) - 30px) / 2);
	background: var(--gtbs-box-rail);
	border-radius: var(--gtbs-radius-full);
	color: var(--gtbs-text-light);
	font-size: var(--gtbs-fs-s);
	font-weight: var(--gtbs-weight-bold);
	line-height: 1;
}

:where(p, .wp-block-paragraph).is-style-key-point {
	--gtbs-box-accent: var(--gtbs-accent);
}

/* Glyph only, no enclosing disc: a mask paints the glyph shape, so a disc
   behind it would need a second element. The other callouts are glyph-only
   too, which makes the family read consistently. */
:where(p, .wp-block-paragraph).is-style-key-point::before {
	content: "";
	flex: 0 0 auto;
	align-self: flex-start;
	width: 22px;
	height: 22px;
	margin-top: calc((1em * var(--gtbs-lh-relaxed) - 22px) / 2);
	background-color: var(--gtbs-box-rail);
	-webkit-mask: var(--gtbs-icon-key) no-repeat center / contain;
	mask: var(--gtbs-icon-key) no-repeat center / contain;
}

:where(p, .wp-block-paragraph).is-style-spotlight a,
:where(p, .wp-block-paragraph).is-style-ribbon-box a,
:where(p, .wp-block-paragraph).is-style-numbered-box a,
:where(p, .wp-block-paragraph).is-style-key-point a {
	color: var(--gtbs-box-link);
	font-weight: var(--gtbs-weight-bold);
}

/* ==========================================================================
   5a. HEADING — the anantamias set
   Not a port. gauravtiwari.org's heading variations answer a general-purpose
   blog; these answer an exam-prep article, where headings mostly do four jobs:
   number a sequence, mark a question, divide a long paper into parts, and step
   down to an aside. Every one that carries an ornament puts it in its own grid
   or block row, so nothing can land on the text.

   On the doubled class: both hosts print a short blue bar as `h2::before` —
   `.sp-prose h2::before` and `.editor-styles-wrapper h2::before`, each (0,1,2).
   A plain `.is-style-x::before` is (0,1,1) and loses, so the bar's `content:""`
   would erase every numeral and chip below. Repeating the class lifts these to
   (0,2,1), which wins on class count, and unlike scoping to a host it keeps
   working wherever else article content is rendered.
   ========================================================================== */

/* Neutralise the bar's geometry on the variations that replace or drop it.
   The `content` for each is set in its own rule further down. */
.is-style-numeral.is-style-numeral::before,
.is-style-question.is-style-question::before,
.is-style-step.is-style-step::before,
.is-style-banner.is-style-banner::before,
.is-style-quiet.is-style-quiet::before,
.is-style-gold-rule.is-style-gold-rule::before {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	margin-bottom: 0;
}

/* These three supply their own rule or need no ornament at all. */
.is-style-banner.is-style-banner::before,
.is-style-quiet.is-style-quiet::before,
.is-style-gold-rule.is-style-gold-rule::before {
	content: none;
}

/* Counters restart per article, not per page. */
.sp-prose,
.editor-styles-wrapper .block-editor-block-list__layout {
	counter-reset: gtbs-numeral gtbs-step;
}

/* ---- Numeral — an editorial part number in its own column ------------- */
.is-style-numeral {
	counter-increment: gtbs-numeral;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 18px;
	align-items: baseline;
}

.is-style-numeral.is-style-numeral::before {
	content: counter(gtbs-numeral, decimal-leading-zero);
	display: block;
	font-family: var(--gtbs-font-serif);
	font-size: 0.85em;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--gtbs-accent-ink);
}

/* ---- Gold Rule — an underline that stops at the text ------------------
   `width: fit-content` rather than a plain border, so the rule measures the
   heading instead of the whole column. */
.is-style-gold-rule {
	width: fit-content;
	max-width: 100%;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--gtbs-accent);
}

/* ---- Quiet — a subhead that steps down instead of up ------------------
   The only variation here that overrides heading SIZE and COLOUR, both of
   which the hosts set on the bare element (`.sp-prose h2` at (0,1,1) sets a
   2.6rem clamp, `.sp-prose h3` sets the blue). Doubling the class for the same
   reason as the ::before rules above — otherwise a quiet heading renders at
   full h2 size in monospace, which is louder than the default it replaces. */
.is-style-quiet.is-style-quiet {
	font-family: var(--gtbs-font-mono);
	font-size: var(--gtbs-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gtbs-text-sec);
}

/* ---- Banner — a part division across the measure ---------------------- */
.is-style-banner {
	background: color-mix(in srgb, var(--gtbs-primary) 6%, var(--gtbs-surface));
	border-left: 5px solid var(--gtbs-accent);
	border-radius: 0 var(--gtbs-radius-m) var(--gtbs-radius-m) 0;
	padding: 14px 24px;
	color: var(--gtbs-primary-d);
}

/* ---- Question — a Q chip, for PYQ and answer-writing pages ------------ */
.is-style-question {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
}

.is-style-question.is-style-question::before {
	content: "Q";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	/* Headings run tight (1.12–1.2), so centre the chip on the first line box
	   rather than letting baseline alignment hang it off the cap height. */
	margin-top: calc((1em * 1.15 - 34px) / 2);
	background: color-mix(in srgb, var(--gtbs-primary) 12%, transparent);
	border-radius: var(--gtbs-radius-m);
	color: var(--gtbs-primary);
	font-family: var(--gtbs-font-mono);
	font-size: var(--gtbs-fs-m);
	font-weight: 700;
	line-height: 1;
}

/* ---- Step — a numbered pill on its own row, so it cannot crowd the text */
.is-style-step {
	counter-increment: gtbs-step;
}

.is-style-step.is-style-step::before {
	content: "Step " counter(gtbs-step);
	display: block;
	width: fit-content;
	margin-bottom: 10px;
	padding: 4px 12px;
	background: color-mix(in srgb, var(--gtbs-accent) 22%, transparent);
	border-radius: var(--gtbs-radius-full);
	color: var(--gtbs-accent-ink);
	font-family: var(--gtbs-font-mono);
	font-size: var(--gtbs-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ==========================================================================
   5b. HEADING — legacy names, kept for already-published content
   These are the Marketers Delight heading variations. They stay styled because
   live content already carries them (82 headings use is-style-highlight), but
   they are out of the inserter: the curated set is 5a above.
   ========================================================================== */

.is-style-label {
	font-size: clamp(12px, 11px + 0.2vw, var(--gtbs-fs-xs));
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--gtbs-text-sec);
	font-weight: var(--gtbs-weight-bold);
}

h1.is-style-serif,
h2.is-style-serif,
h3.is-style-serif,
h4.is-style-serif,
h5.is-style-serif,
h6.is-style-serif {
	font-family: var(--gtbs-font-serif);
	font-weight: 400;
}

/* Numbered headings — counters, so renumbering is automatic */
h2.is-style-numbered {
	counter-increment: gtbs-h2;
	counter-reset: gtbs-h3;
}

h2.is-style-numbered::before {
	content: counter(gtbs-h2);
}

h3.is-style-numbered {
	counter-increment: gtbs-h3;
}

h3.is-style-numbered::before {
	content: counter(gtbs-h3);
}

h2.is-style-numbered::before,
h3.is-style-numbered::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--gtbs-primary) 10%, transparent);
	border-radius: var(--gtbs-radius-full);
	color: var(--gtbs-primary);
	width: 40px;
	height: 40px;
	margin-inline-end: var(--gtbs-space-half);
	font-size: var(--gtbs-fs-base);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.is-style-centered-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--gtbs-space-single);
}

.is-style-centered-heading::before,
.is-style-centered-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gtbs-border);
	max-width: 100px;
}

.is-style-thick-border {
	padding-bottom: var(--gtbs-space-single);
	border-bottom: 4px solid var(--gtbs-text);
	margin-bottom: var(--gtbs-space-mid);
}

.is-style-accent-bar {
	padding-inline-start: var(--gtbs-space-single);
	border-inline-start: none;
	box-shadow: inset 4px 0 0 color-mix(in srgb, var(--gtbs-primary) 70%, var(--gtbs-text));
}

/* Inverse fill */
.is-style-box-heading {
	background: var(--gtbs-text);
	color: var(--gtbs-bg) !important;
	padding: var(--gtbs-space-single) var(--gtbs-space-mid);
	border-radius: var(--gtbs-radius-m);
	margin-bottom: var(--gtbs-space-single);
}

.is-style-ribbon {
	position: relative;
	display: inline-block;
	background: var(--gtbs-primary);
	color: var(--gtbs-text-light) !important;
	padding: var(--gtbs-space-half) var(--gtbs-space-double) var(--gtbs-space-half) var(--gtbs-space-single);
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-left: var(--gtbs-space-single);
	border-radius: 0 var(--gtbs-radius-s) var(--gtbs-radius-s) 0;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--gtbs-primary) 30%, transparent);
}

.is-style-ribbon::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0;
	border: 20px solid transparent;
	border-right-color: var(--gtbs-primary);
	border-left: 0;
}

.is-style-ribbon::after {
	content: "";
	position: absolute;
	right: -12px;
	top: 0;
	border: 20px solid var(--gtbs-primary);
	border-right-color: transparent;
}

.is-style-highlight {
	background: color-mix(in srgb, var(--gtbs-accent) 25%, transparent);
	display: inline;
	padding: 0 4px;
	border-radius: var(--gtbs-radius-xs);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.is-style-sticker {
	display: inline-block;
	background: var(--gtbs-accent);
	color: color-mix(in srgb, var(--gtbs-accent) 35%, var(--gtbs-text)) !important;
	padding: var(--gtbs-space-half) var(--gtbs-space-mid);
	border-radius: var(--gtbs-radius-l);
	font-weight: 600;
	box-shadow: 3px 3px 0 color-mix(in srgb, var(--gtbs-accent) 40%, var(--gtbs-text) 10%);
	transform: rotate(-1deg);
}

.is-style-brackets::before {
	content: "[ ";
	color: var(--gtbs-text-sec);
}

.is-style-brackets::after {
	content: " ]";
	color: var(--gtbs-text-sec);
}

.is-style-section {
	display: flex;
	align-items: center;
	gap: var(--gtbs-space-single);
}

.is-style-section::before {
	content: "§";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--gtbs-primary) 8%, transparent);
	color: var(--gtbs-primary);
	width: 40px;
	height: 40px;
	border-radius: var(--gtbs-radius-m);
	font-size: 1.25em;
	flex-shrink: 0;
}

/* The theme prints a rule above every .sp-prose h2. On the flex-row and
   inline-fill heading styles that rule becomes a stray bar, so drop it there. */
.sp-prose h2.is-style-section::before,
.sp-prose h2.is-style-centered-heading::before,
.sp-prose h2.is-style-box-heading::before,
.sp-prose h2.is-style-ribbon::before,
.sp-prose h2.is-style-sticker::before {
	display: none;
}

/* ==========================================================================
   6. LIST
   ========================================================================== */

/* ---- Marker-replacing lists --------------------------------------------
 *
 * The icon used to be an absolutely positioned ::before sitting in the li's
 * left padding. That works only as long as OUR padding-left survives, and it
 * does not: bricks-child's editor sheet sets
 * `.editor-styles-wrapper ul.wp-block-list li{padding-left:.4rem}` at (0,2,2),
 * which outranks a plain `.is-style-x li` at (0,1,1). In the canvas the
 * padding collapsed to 4px while the icon stayed at left:0, and the glyph
 * landed on top of the first word.
 *
 * Escalating specificity would fix that one host and break on the next. The
 * li is a two-column grid instead: the icon is a real grid item, so it can
 * never share space with the text. Whatever padding a host wins now shows up
 * as harmless leading space rather than a collision.
 * ---------------------------------------------------------------------- */

.wp-block-list.is-style-numbered,
.wp-block-list.is-style-checked,
.wp-block-list.is-style-cancel,
.wp-block-list.is-style-list,
.wp-block-list.is-style-list-checkmark,
.wp-block-list.is-style-list-cross,
.wp-block-list.is-style-arrow-square-right,
:is(.sp-prose, .editor-styles-wrapper) :is(ul, ol)[class*="is-style-"]:is(.is-style-numbered, .is-style-checked, .is-style-cancel, .is-style-list, .is-style-list-checkmark, .is-style-list-cross, .is-style-arrow-square-right) {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* Typography-only list variations keep normal bullets and normal indent. */
.is-style-intro {
	font-size: 1.25em;
	line-height: 1.6;
	font-weight: 400;
	color: var(--gtbs-text);
}

ul.is-style-serif,
ol.is-style-serif {
	font-family: var(--gtbs-font-serif);
}

.is-style-small {
	font-size: var(--gtbs-fs-s);
	line-height: 1.6;
}

.is-style-large {
	font-size: var(--gtbs-fs-l);
	line-height: var(--gtbs-lh-relaxed);
}

/* Shared two-column shape. `minmax(0,1fr)` rather than `1fr` so a long
   unbroken string shrinks instead of pushing the icon column off. */
.is-style-numbered > li,
.is-style-checked > li,
.is-style-cancel > li,
.is-style-list > li,
.is-style-list-checkmark > li,
.is-style-list-cross > li,
.is-style-arrow-square-right > li,
:is(.sp-prose, .editor-styles-wrapper) :is(ul, ol)[class*="is-style-"]:is(.is-style-numbered, .is-style-checked, .is-style-cancel, .is-style-list, .is-style-list-checkmark, .is-style-list-cross, .is-style-arrow-square-right) > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 12px;
	padding-left: 0;
	list-style: none;
}

/* Belt and braces on the marker. `list-style:none` above already removes it,
   but that declaration sits at (0,1,1) and a host only has to land one
   `list-style-type` on the item to bring a native "1." back next to the chip.
   Repeating the class puts this out of reach, and blanking ::marker means even
   a re-enabled marker paints nothing. */
.is-style-numbered.is-style-numbered > li,
.is-style-checked.is-style-checked > li,
.is-style-cancel.is-style-cancel > li,
.is-style-list.is-style-list > li,
.is-style-list-checkmark.is-style-list-checkmark > li,
.is-style-list-cross.is-style-list-cross > li,
.is-style-arrow-square-right.is-style-arrow-square-right > li {
	list-style: none;
}

.is-style-numbered > li::marker,
.is-style-checked > li::marker,
.is-style-cancel > li::marker,
.is-style-list > li::marker,
.is-style-list-checkmark > li::marker,
.is-style-list-cross > li::marker,
.is-style-arrow-square-right > li::marker {
	content: "";
}

/* ---- Nested lists ------------------------------------------------------
 * A sub-list is a third child of a grid li, and auto-placement drops it into
 * the NEXT free cell — column 1 of row 2, i.e. directly underneath the chip,
 * indented as if it were itself a top-level item. Two numbers then stack: the
 * parent's chip and the sub-list's own first marker, which reads as the item
 * being numbered twice.
 *
 * Pinning sub-lists to the text column puts them where a nested list belongs,
 * under the text they qualify.
 * -------------------------------------------------------------------- */
.is-style-numbered > li > :is(ul, ol),
.is-style-checked > li > :is(ul, ol),
.is-style-cancel > li > :is(ul, ol),
.is-style-list-checkmark > li > :is(ul, ol),
.is-style-list-cross > li > :is(ul, ol),
.is-style-arrow-square-right > li > :is(ul, ol) {
	grid-column: 2;
	margin-block: var(--gtbs-space-third) 0;
}

/* The ruled list is a single column, so its sub-lists stay in column 1. */
.is-style-list > li > :is(ul, ol) {
	grid-column: 1;
	margin-block: var(--gtbs-space-third) 0;
}

/* Icon column — sized in em so it tracks the list's own font size, and nudged
   down by the difference between the line box and the glyph so it optically
   centres on the first line rather than the cap height. */
.is-style-checked > li::before,
.is-style-cancel > li::before,
.is-style-list-checkmark > li::before,
.is-style-list-cross > li::before,
.is-style-arrow-square-right > li::before {
	content: "";
	width: 1em;
	height: 1em;
	margin-top: calc((1em * var(--gtbs-lh-relaxed) - 1em) / 2);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.is-style-checked > li::before,
.is-style-list-checkmark > li::before {
	background-color: var(--gtbs-tertiary);
	-webkit-mask-image: var(--gtbs-icon-check);
	mask-image: var(--gtbs-icon-check);
}

.is-style-cancel > li::before,
.is-style-list-cross > li::before {
	background-color: var(--gtbs-primary);
	-webkit-mask-image: var(--gtbs-icon-cross);
	mask-image: var(--gtbs-icon-cross);
}

.is-style-arrow-square-right > li::before {
	background-color: var(--gtbs-text);
	-webkit-mask-image: var(--gtbs-icon-arrow);
	mask-image: var(--gtbs-icon-arrow);
}

/* Ruled — no icon, so it is a single column with a hairline between rows. */
.is-style-list > li {
	grid-template-columns: minmax(0, 1fr);
}

.is-style-list > li:not(:last-child) {
	border-bottom: 1px solid color-mix(in srgb, var(--gtbs-border), transparent 50%);
	padding-bottom: var(--gtbs-space-third);
	margin-bottom: var(--gtbs-space-third);
}

/* Numbered — a counter chip in the icon column. */
.is-style-numbered {
	counter-reset: gtbs-listitem;
}

.is-style-numbered > li {
	column-gap: 14px;
	padding-block: var(--gtbs-space-third);
}

.is-style-numbered > li:not(:last-child) {
	border-bottom: 1px solid color-mix(in srgb, var(--gtbs-border), transparent 60%);
}

.is-style-numbered > li::before {
	counter-increment: gtbs-listitem;
	content: counter(gtbs-listitem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: color-mix(in srgb, var(--gtbs-primary) 10%, transparent);
	color: var(--gtbs-primary);
	border-radius: var(--gtbs-radius-full);
	font-size: var(--gtbs-fs-s);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* ==========================================================================
   7. IMAGE + POST FEATURED IMAGE
   ========================================================================== */

figure.is-style-rounder img,
.wp-block-post-featured-image.is-style-rounder img {
	border-radius: var(--gtbs-radius-m);
}

/* Shadow — lift only when the image is a link */
figure.is-style-shadow img,
.wp-block-post-featured-image.is-style-shadow img {
	box-shadow: 0 5px 25px var(--gtbs-shadow-tint-strong);
}

figure.is-style-shadow a img,
figure.is-style-shadow-round a img {
	transition: box-shadow var(--gtbs-motion-slow), transform var(--gtbs-motion-slow);
}

figure.is-style-shadow a:hover img {
	box-shadow: 0 8px 35px var(--gtbs-shadow-tint-strong);
	transform: translateY(-2px);
}

/* Shadow Round — floating screenshot field. Two-layer shadow (wide ambient +
   tight brand key), hairline border tinted toward the brand, and a detached
   accent ring offset from the edge. */
figure.is-style-shadow-round img,
.wp-block-post-featured-image.is-style-shadow-round img {
	background: color-mix(in srgb, var(--gtbs-primary) 3%, #f5f5f4);
	border: 1px solid color-mix(in srgb, var(--gtbs-primary) 46%, var(--gtbs-border));
	border-radius: var(--gtbs-radius-l);
	box-sizing: border-box;
	box-shadow:
		0 24px 64px color-mix(in srgb, var(--gtbs-text) 18%, transparent),
		0 4px 14px color-mix(in srgb, var(--gtbs-primary) 12%, transparent);
	outline: 1px solid color-mix(in srgb, var(--gtbs-accent) 30%, transparent);
	outline-offset: 4px;
}

figure.is-style-shadow-round a:hover img {
	box-shadow:
		0 32px 72px color-mix(in srgb, var(--gtbs-text) 22%, transparent),
		0 6px 18px color-mix(in srgb, var(--gtbs-primary) 16%, transparent);
	transform: translateY(-2px);
}

@media (forced-colors: active) {
	figure.is-style-shadow-round img {
		border: 1px solid canvastext;
		box-shadow: none;
		outline: 0;
	}
}

/* Browser Shot — a chrome bar above the image. The frame wraps the IMAGE only:
   the chrome bar is its own grid row, so a figcaption falls outside the window
   instead of being enclosed by it. Dots are neutral — they signify window
   controls, not brand colour. */
figure.is-style-browser-shot {
	--gtbs-browser-chrome: 36px;
	--gtbs-browser-bar: color-mix(in srgb, var(--gtbs-text) 7%, var(--gtbs-surface));
	--gtbs-browser-dot: color-mix(in srgb, var(--gtbs-text) 24%, transparent);
	display: grid;
	grid-template-columns: 100%;
	position: relative;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Chrome bar — in flow as row 1, never overlaps the caption */
figure.is-style-browser-shot::before {
	content: "";
	block-size: var(--gtbs-browser-chrome);
	background: var(--gtbs-browser-bar);
	border: 1px solid var(--gtbs-border);
	border-block-end: 0;
	border-radius: var(--gtbs-radius-m) var(--gtbs-radius-m) 0 0;
}

/* Window controls — absolutely positioned, so they stay out of the grid flow */
figure.is-style-browser-shot::after {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--gtbs-browser-chrome) / 2);
	inset-inline-start: 16px;
	inline-size: 8px;
	block-size: 8px;
	margin-block-start: -4px;
	border-radius: 50%;
	background: var(--gtbs-browser-dot);
	box-shadow: 14px 0 0 var(--gtbs-browser-dot), 28px 0 0 var(--gtbs-browser-dot);
}

figure.is-style-browser-shot > a {
	display: block;
	line-height: 0;
}

figure.is-style-browser-shot img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/* Without this the 1px side borders are added OUTSIDE 100%, and the screen
	   renders 2px wider than the chrome bar sitting above it. */
	box-sizing: border-box;
	border: 1px solid var(--gtbs-border);
	border-block-start: 0;
	border-radius: 0 0 var(--gtbs-radius-m) var(--gtbs-radius-m);
	margin: 0;
}

figure.is-style-browser-shot > figcaption {
	margin-block-start: var(--gtbs-space-half);
}

/* ==========================================================================
   8. GROUP
   ========================================================================== */

/* Aside — a margin note. Inline by default; only pulled into the gutter once
   the viewport is wide enough that the prose column has margin to spare. */
.is-style-aside,
.is-style-aside-right {
	display: block;
	font-size: var(--gtbs-fs-s);
	color: var(--gtbs-text-sec);
	padding: var(--gtbs-space-half);
}

@media (min-width: 1366px) {
	.sp-prose {
		position: relative;
	}

	.sp-prose > .is-style-aside,
	.sp-prose > .is-style-aside-right {
		--gtbs-aside-width: clamp(150px, 200px, 250px);
		position: absolute;
		width: var(--gtbs-aside-width);
		padding: var(--gtbs-space-single);
		border-radius: var(--gtbs-radius-s);
		background: var(--gtbs-surface);
	}

	.sp-prose > .is-style-aside {
		left: calc(-1 * var(--gtbs-aside-width) - var(--gtbs-space-mid));
	}

	.sp-prose > .is-style-aside-right {
		right: calc(-1 * var(--gtbs-aside-width) - var(--gtbs-space-mid));
	}
}

.wp-block-group.is-style-glass,
.wp-block-group.is-style-soft-glow,
.wp-block-group.is-style-raised,
.wp-block-group.is-style-bordered-accent,
.wp-block-group.is-style-spotlight,
.wp-block-group.is-style-dashed {
	--gtbs-panel-accent: var(--gtbs-primary);
	--gtbs-panel-bg:     color-mix(in srgb, var(--gtbs-panel-accent) 4%, var(--gtbs-surface));
	--gtbs-panel-border: color-mix(in srgb, var(--gtbs-panel-accent) 18%, var(--gtbs-border));
	--gtbs-panel-rail:   color-mix(in srgb, var(--gtbs-panel-accent) 70%, var(--gtbs-text));
	background: var(--gtbs-panel-bg);
	border: 1px solid var(--gtbs-panel-border);
	border-radius: var(--gtbs-radius-l);
	color: var(--gtbs-text);
	padding: var(--gtbs-space-mid);
	position: relative;
}

/* Glass — translucent surface that follows the content background */
.wp-block-group.is-style-glass {
	background: color-mix(in srgb, var(--gtbs-surface) 82%, transparent);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	backdrop-filter: blur(8px) saturate(120%);
	border-color: color-mix(in srgb, var(--gtbs-border) 72%, transparent);
	box-shadow: var(--gtbs-shadow-sm);
}

/* Soft Glow — understated brand-tinted emphasis */
.wp-block-group.is-style-soft-glow {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--gtbs-panel-accent) 8%, transparent),
		0 18px 44px -36px color-mix(in srgb, var(--gtbs-panel-accent) 70%, var(--gtbs-text));
}

/* Raised — static elevated card */
.wp-block-group.is-style-raised {
	background: var(--gtbs-surface);
	border-color: color-mix(in srgb, var(--gtbs-border) 88%, var(--gtbs-text));
	box-shadow: var(--gtbs-shadow-md);
}

/* Bordered Accent — strong edge, quiet surface */
.wp-block-group.is-style-bordered-accent {
	border: 1.5px solid color-mix(in srgb, var(--gtbs-panel-accent) 45%, var(--gtbs-border));
}

/* Spotlight — top accent for featured sections */
.wp-block-group.is-style-spotlight {
	overflow: hidden;
	box-shadow: 0 16px 44px -38px color-mix(in srgb, var(--gtbs-panel-accent) 70%, var(--gtbs-text));
}

.wp-block-group.is-style-spotlight::before {
	background: var(--gtbs-panel-rail);
	border-radius: var(--gtbs-radius-l) var(--gtbs-radius-l) 0 0;
	content: "";
	height: 4px;
	inset: 0 0 auto;
	position: absolute;
}

.wp-block-group.is-style-spotlight > * {
	position: relative;
	z-index: 1;
}

/* Dashed — drafting / reference panel */
.wp-block-group.is-style-dashed {
	background: color-mix(in srgb, var(--gtbs-text) 3%, var(--gtbs-surface));
	border-style: dashed;
	border-width: 2px;
}

/* ==========================================================================
   9. BUTTON
   The theme already styles .wp-block-button__link inside .sp-prose at (0,2,0).
   Each variation therefore targets .is-style-X .wp-element-button, which core
   also puts on the link element, and pairs it with an .sp-prose-scoped twin so
   the variation wins inside article prose.
   ========================================================================== */

/* Link — inline text button */
.is-style-link .wp-element-button,
.sp-prose .is-style-link .wp-block-button__link {
	border: 0;
	background: transparent;
	color: var(--gtbs-button);
	text-decoration: none;
	padding: 4px 0;
	font-weight: 600;
	box-shadow: none;
}

.is-style-link .wp-element-button:hover,
.sp-prose .is-style-link .wp-block-button__link:hover {
	background: transparent;
	color: color-mix(in srgb, var(--gtbs-button), var(--gtbs-text) 20%);
	box-shadow: none;
	transform: none;
}

/* Primary — elevated lift on the brand button colour */
.is-style-primary .wp-element-button,
.sp-prose .is-style-primary .wp-block-button__link {
	background: var(--gtbs-button);
	color: var(--gtbs-button-text);
	border: none;
	padding: 12px 28px;
	font-weight: 600;
	border-radius: var(--gtbs-radius-m);
	box-shadow: var(--gtbs-shadow-sm);
	transition: transform var(--gtbs-motion), box-shadow var(--gtbs-motion);
}

.is-style-primary .wp-element-button:hover,
.sp-prose .is-style-primary .wp-block-button__link:hover {
	background: var(--gtbs-button);
	color: var(--gtbs-button-text);
	transform: translateY(-2px);
	box-shadow: var(--gtbs-shadow-md);
}

.is-style-primary .wp-element-button:active {
	transform: translateY(0);
	box-shadow: var(--gtbs-shadow-sm);
}

/* Secondary — soft tonal, brand tint */
.is-style-secondary .wp-element-button,
.sp-prose .is-style-secondary .wp-block-button__link {
	background: color-mix(in srgb, var(--gtbs-button) 12%, transparent);
	color: var(--gtbs-button);
	border: none;
	padding: 12px 28px;
	font-weight: 600;
	border-radius: var(--gtbs-radius-m);
	box-shadow: none;
}

.is-style-secondary .wp-element-button:hover,
.sp-prose .is-style-secondary .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--gtbs-button) 20%, transparent);
	color: var(--gtbs-button);
	transform: none;
	box-shadow: none;
}

/* Outline — neutral border, brand on hover */
.is-style-outline .wp-element-button,
.sp-prose .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--gtbs-text);
	border: 1.5px solid var(--gtbs-border-2);
	padding: 12px 24px;
	font-weight: 500;
	border-radius: var(--gtbs-radius-m);
	box-shadow: none;
}

.is-style-outline .wp-element-button:hover,
.sp-prose .is-style-outline .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--gtbs-button) 5%, transparent);
	border-color: var(--gtbs-button);
	color: var(--gtbs-button);
	transform: none;
	box-shadow: none;
}

/* Ghost — text only, neutral tint on hover */
.is-style-ghost .wp-element-button,
.sp-prose .is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--gtbs-text-sec);
	border: none;
	padding: 12px 24px;
	font-weight: 500;
	border-radius: var(--gtbs-radius-m);
	box-shadow: none;
}

.is-style-ghost .wp-element-button:hover,
.sp-prose .is-style-ghost .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--gtbs-border) 50%, transparent);
	color: var(--gtbs-text);
	transform: none;
	box-shadow: none;
}

/* Glow */
.is-style-glow .wp-element-button,
.sp-prose .is-style-glow .wp-block-button__link {
	background: var(--gtbs-button);
	color: var(--gtbs-button-text);
	border: none;
	padding: 12px 28px;
	font-weight: 600;
	border-radius: var(--gtbs-radius-m);
	box-shadow:
		0 0 15px color-mix(in srgb, var(--gtbs-button), transparent 65%),
		0 2px 8px color-mix(in srgb, var(--gtbs-button), transparent 80%);
	transition: transform var(--gtbs-motion), box-shadow var(--gtbs-motion);
}

.is-style-glow .wp-element-button:hover,
.sp-prose .is-style-glow .wp-block-button__link:hover {
	background: var(--gtbs-button);
	box-shadow:
		0 0 25px color-mix(in srgb, var(--gtbs-button), transparent 45%),
		0 0 50px color-mix(in srgb, var(--gtbs-button), transparent 70%),
		0 4px 12px color-mix(in srgb, var(--gtbs-button), transparent 75%);
	transform: translateY(-1px);
}

/* Pill — fully rounded capsule */
.is-style-pill .wp-element-button,
.sp-prose .is-style-pill .wp-block-button__link {
	background: var(--gtbs-button);
	color: var(--gtbs-button-text);
	border: none;
	padding: 12px 32px;
	font-weight: 600;
	border-radius: var(--gtbs-radius-full);
	letter-spacing: 0.01em;
	transition: transform var(--gtbs-motion), box-shadow var(--gtbs-motion);
}

.is-style-pill .wp-element-button:hover,
.sp-prose .is-style-pill .wp-block-button__link:hover {
	background: var(--gtbs-button);
	transform: translateY(-1px);
	box-shadow: var(--gtbs-shadow-md);
}

/* 3D — raised pushable button */
.is-style-3d .wp-element-button,
.sp-prose .is-style-3d .wp-block-button__link {
	background: var(--gtbs-button);
	color: var(--gtbs-button-text);
	border: none;
	padding: 12px 28px;
	font-weight: 600;
	border-radius: var(--gtbs-radius-m);
	box-shadow:
		0 5px 0 0 color-mix(in srgb, var(--gtbs-button) 70%, #000),
		0 7px 10px rgba(0, 0, 0, 0.12);
	transform: translateY(-3px);
	transition: transform var(--gtbs-motion-fast), box-shadow var(--gtbs-motion-fast);
}

.is-style-3d .wp-element-button:hover,
.sp-prose .is-style-3d .wp-block-button__link:hover {
	background: var(--gtbs-button);
	transform: translateY(-1px);
	box-shadow:
		0 3px 0 0 color-mix(in srgb, var(--gtbs-button) 70%, #000),
		0 5px 8px rgba(0, 0, 0, 0.1);
}

.is-style-3d .wp-element-button:active {
	transform: translateY(1px);
	box-shadow:
		0 1px 0 0 color-mix(in srgb, var(--gtbs-button) 70%, #000),
		0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Shine — a sheen sweeps across on hover */
.is-style-shine .wp-element-button,
.sp-prose .is-style-shine .wp-block-button__link {
	position: relative;
	background: var(--gtbs-button);
	color: var(--gtbs-button-text);
	border: none;
	padding: 12px 24px;
	font-weight: 600;
	border-radius: var(--gtbs-radius-m);
	overflow: hidden;
}

.is-style-shine .wp-element-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
	transform: translateX(-100%);
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-style-shine .wp-element-button:hover::before {
	transform: translateX(100%);
}

/* Arrow — indicator that nudges on hover */
.is-style-arrow .wp-element-button,
.sp-prose .is-style-arrow .wp-block-button__link {
	background: var(--gtbs-button);
	color: var(--gtbs-button-text);
	border: none;
	padding: 12px 24px;
	font-weight: 600;
	border-radius: var(--gtbs-radius-m);
	display: inline-flex;
	align-items: center;
	gap: var(--gtbs-space-half);
}

.is-style-arrow .wp-element-button::after {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--gtbs-icon-arrow) no-repeat center / contain;
	mask: var(--gtbs-icon-arrow) no-repeat center / contain;
	transition: transform var(--gtbs-motion-slow);
}

.is-style-arrow .wp-element-button:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button[class*="is-style-"] .wp-element-button,
	.wp-block-button[class*="is-style-"] .wp-element-button::after,
	.wp-block-button[class*="is-style-"] .wp-element-button::before {
		transition-duration: 0.01ms;
	}

	.wp-block-button[class*="is-style-"] .wp-element-button:hover {
		transform: none;
	}
}

/* ==========================================================================
   10. TABLE
   The theme already gives .sp-prose tables a dark header band and zebra rows.
   These variations layer on top; each selector carries the block class so it
   outranks the theme's (0,1,2) element rules.
   ========================================================================== */

.wp-block-table[class*="is-style-"],
.wp-block-table.has-sticky-column {
	/* Tonal bands derive from the ink, not from mixing two near-identical
	   surfaces — a few percent of the text colour always yields a visible
	   tint. */
	--gtbs-table-tint-1: color-mix(in srgb, var(--gtbs-text) 3.5%, var(--gtbs-surface));
	--gtbs-table-tint-2: color-mix(in srgb, var(--gtbs-text) 6%, var(--gtbs-surface));
}

/* Small — dense reference table */
.wp-block-table.is-style-small-table {
	font-size: var(--gtbs-fs-s);
}

.wp-block-table.is-style-small-table thead th,
.sp-prose .wp-block-table.is-style-small-table thead th {
	font-size: var(--gtbs-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 8px 12px;
}

.wp-block-table.is-style-small-table tbody td,
.sp-prose .wp-block-table.is-style-small-table tbody td {
	padding: 8px 12px;
}

/* Ratings — bold first column, a star after every strong */
.wp-block-table.is-style-ratings tbody td:first-child {
	font-weight: var(--gtbs-weight-bold);
}

.wp-block-table.is-style-ratings strong::after,
.wp-block-table.is-style-ratings b::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-inline-start: 0.25em;
	vertical-align: -0.08em;
	background-color: var(--gtbs-accent);
	-webkit-mask: var(--gtbs-icon-star) no-repeat center / contain;
	mask: var(--gtbs-icon-star) no-repeat center / contain;
}

/* Services — dark header band. The band derives from --gtbs-text and the
   foreground from the surface, so the pair stays legible together. */
.wp-block-table.is-style-services {
	box-shadow: var(--gtbs-shadow-sm);
}

.wp-block-table.is-style-services thead th,
.sp-prose .wp-block-table.is-style-services thead th {
	background: color-mix(in srgb, var(--gtbs-text) 90%, var(--gtbs-bg));
	color: var(--gtbs-surface);
	font-weight: var(--gtbs-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--gtbs-fs-s);
}

.wp-block-table.is-style-services tbody td:first-child {
	font-weight: var(--gtbs-weight-bold);
}

/* Comparison — a feature matrix: labels left, values centred */
.wp-block-table.is-style-comparison table {
	table-layout: fixed;
}

.wp-block-table.is-style-comparison thead th,
.sp-prose .wp-block-table.is-style-comparison thead th {
	text-align: center;
	border-bottom-width: 2px;
}

.wp-block-table.is-style-comparison thead th:first-child,
.sp-prose .wp-block-table.is-style-comparison thead th:first-child {
	text-align: left;
	background: var(--gtbs-surface);
	color: var(--gtbs-text);
	border-right: 1px solid var(--gtbs-border);
}

.wp-block-table.is-style-comparison tbody td {
	text-align: center;
}

.wp-block-table.is-style-comparison tbody td:first-child,
.sp-prose .wp-block-table.is-style-comparison tbody td:first-child {
	text-align: left;
	background: var(--gtbs-table-tint-1);
	border-right: 1px solid var(--gtbs-border);
}

/* Striped — zebra rows for long data tables */
.wp-block-table.is-style-striped tbody tr:nth-child(even),
.sp-prose .wp-block-table.is-style-striped tbody tr:nth-child(even) {
	background: var(--gtbs-table-tint-1);
}

/* Striping already separates rows; the per-row rule becomes noise. */
.wp-block-table.is-style-striped tbody td,
.sp-prose .wp-block-table.is-style-striped tbody td {
	border-block-end: 0;
}

/* Sticky first column — opt in with .has-sticky-column.
   `background: inherit` resolves from <tr>, which has no background, so the
   frozen column would be transparent and rows would scroll through it. It
   needs an explicit opaque surface plus an edge shadow to read as pinned. */
.wp-block-table.has-sticky-column td:first-child,
.wp-block-table.has-sticky-column th:first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 2;
	background: var(--gtbs-surface);
	box-shadow: 1px 0 0 var(--gtbs-border), 4px 0 8px -4px var(--gtbs-shadow-tint);
}

.wp-block-table.has-sticky-column thead th:first-child {
	background: var(--gtbs-table-tint-2);
	z-index: 3;
}

.wp-block-table.is-style-services.has-sticky-column thead th:first-child {
	background: color-mix(in srgb, var(--gtbs-text) 90%, var(--gtbs-bg));
	z-index: 3;
}

.wp-block-table.is-style-services.has-sticky-column tbody td:first-child {
	background: var(--gtbs-surface);
}

.wp-block-table.is-style-striped.has-sticky-column tbody tr:nth-child(even) td:first-child {
	background: var(--gtbs-table-tint-1);
}

@media (max-width: 640px) {
	.wp-block-table.is-style-small-table thead th,
	.wp-block-table.is-style-small-table tbody td {
		padding: 6px 8px;
	}
}

/* ==========================================================================
   11. COVER, VIDEO, SEPARATOR, COLUMN
   ========================================================================== */

.wp-block-cover.is-style-rounded-cover {
	border-radius: var(--gtbs-radius-l);
	overflow: hidden;
}

.wp-block-cover.is-style-blur-image .wp-block-cover__image-background {
	filter: blur(4px);
}

.wp-block-cover.is-style-blur-image-more .wp-block-cover__image-background {
	filter: blur(8px);
}

.wp-block-video.is-style-media-boxed {
	background: var(--gtbs-surface);
	border: 1px solid var(--gtbs-border);
	border-radius: var(--gtbs-radius-m);
	padding: var(--gtbs-space-single);
	box-shadow: var(--gtbs-shadow-sm);
}

.wp-block-separator.is-style-dotted-sep {
	border: none;
	border-bottom: 4px dotted var(--gtbs-border);
	background: transparent;
	height: auto;
	margin: 2em auto;
}

.wp-block-separator.is-style-dashed-sep {
	border: none;
	border-bottom: 3px dashed var(--gtbs-border);
	background: transparent;
	height: auto;
	margin: 2em auto;
}

/* The stroke colour is baked into the data URI on purpose: `currentColor`
   inside a background-image SVG resolves against that image's own document,
   not this one, so the MD original painted the wave black. */
.wp-block-separator.is-style-wave-sep {
	border: none;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'%3E%3Cpath d='M0 6 Q 25 0, 50 6 T 100 6' stroke='%23d4d4d8' fill='none' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
	background-size: 100px 12px;
	margin: 2em auto;
}

.wp-block-separator.is-style-slash-sep {
	border: none;
	height: auto;
	background: transparent;
	margin: 2em auto;
	text-align: center;
}

.wp-block-separator.is-style-slash-sep::before {
	content: "/ / /";
	color: var(--gtbs-border-2);
	font-size: var(--gtbs-fs-l);
	font-weight: 300;
	letter-spacing: 0.5em;
}

.wp-block-column.is-style-column-box-shadow {
	box-shadow: var(--gtbs-shadow-md);
	border-radius: var(--gtbs-radius-m);
	padding: var(--gtbs-space-mid);
	background: var(--gtbs-surface);
}