/* Intone CTA block (intone/cta) — in-article call to action.

   Re-skinned for intone.com. The palette is the site's own in-article accent
   language, taken from content-body.css rather than invented:

     .cb-callout--light   #f4f6f9 surface + 4px solid #f6b43f left border + #1e2e4c ink
     .cb-callout--dark    #141414 surface + 4px solid #f6b43f left border + #fff ink
     .cb-highlight        solid #f6b43f + #09101d ink
     .cb-card             #f4f6f9 surface, #1e2e4c title, #455068 body

   Two things the imported version did that intone.com does not do, and why
   they are gone:

   1. GRADIENTS. The source site's signature was a teal->lime gradient frame
      and a mint gradient card. intone.com has no brand gradient at all — all
      21 linear-gradient declarations in the theme are photo scrims, a
      background-clip text effect and the skeleton shimmer. The accent here is
      a flat solid gold, so the frame and the card are flat.

   2. border-image. The imported rule declared `transition: border-color` but
      animated `border-image`, which is a different property — so the frame
      snapped in with no transition. Flat gold is a real border-color, so the
      declared transition now actually runs.

   Structural rules carried over from the import, both still correct here:

   a. Every border is reserved at full width as `solid transparent` in the BASE
      rule. Hover only ever recolours it, never grows it, so the box is pixel
      stable from first paint and nothing in the article below shifts when a
      reader hovers it.

   b. The frame sits on TOP+RIGHT, the card accent on LEFT+BOTTOM. A left
      border would push the card ~10px right of the body copy, a visible
      misalignment against every surrounding paragraph. A right border shrinks
      the content box instead of displacing it, so the card's left edge stays
      flush with the article text.

   Colour is entirely token-driven: the rules below read var(--icbc-*), and the
   style variant and dark mode only redefine those tokens. That is what keeps
   dark mode out of a specificity fight with content-body.css. */

/* ---- Light (default block style) ---- */

.icbc {
	/* Every token carries a literal fallback: the Gutenberg editor canvas
	   loads no design-system CSS, so --ds-* / --t-* resolve to nothing there
	   and the block would otherwise render colourless while authoring. */
	--icbc-gold: var(--ds-gold, #f6b43f);
	--icbc-surface: var(--ds-light-200, #f4f6f9);
	--icbc-ink: var(--ds-navy, #1e2e4c);
	/* Supporting-paragraph ink: lighter than the heading so the two read as a
	   hierarchy rather than one block of navy. Matches .cb-card p. */
	--icbc-body-ink: #455068;

	--icbc-btn-bg: var(--ds-dark-900, #141414);
	--icbc-btn-fg: #ffffff;
	--icbc-btn-bd: var(--ds-dark-900, #141414);
	/* Gold is a hover accent for buttons sitewide, never a resting fill. */
	--icbc-btn-hover-bg: var(--ds-gold, #f6b43f);
	--icbc-btn-hover-fg: var(--ds-dark-900, #141414);

	--icbc-link: #233963;
	/* The article's own link hover is --ds-gold-label #b07613, which lands at
	   3.56:1 on this card — under AA for normal text. This is one step darker
	   (4.83:1) and reads as the same dark gold. Revert this one line to
	   var(--ds-gold-label, #b07613) if exact parity with body copy matters more. */
	--icbc-link-hover: #96610f;

	--icbc-sheen: rgba(255, 255, 255, 0.8);
	--icbc-glass-border: rgba(255, 255, 255, 0.3);
	--icbc-glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	--icbc-facet-opacity: 0.1;
	--icbc-focus: var(--ds-navy, #1e2e4c);
	--icbc-lift-shadow: var(--t-shadow, 0 4px 24px rgba(9, 16, 29, 0.08));

	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	transition: border-color 0.4s ease;
	/* The block must respond to the width of the column it is dropped into,
	   not the viewport — the same 1440px desktop serves it a 740px article
	   column and a wider page section. */
	container-type: inline-size;
	container-name: icbc;
}

/* Doubled class (0,2,0) so the outer margin beats the article's own rhythm
   rule `.post-content > * + * { margin-top: 24px }` (0,1,0) regardless of
   which stylesheet the browser printed last. */
.icbc.icbc {
	margin: 40px 0;
}

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

.icbc:hover,
.icbc:focus-within {
	border-color: var(--icbc-gold);
}

.icbc .icbc-card {
	position: relative;
	overflow: hidden;
	/* !important guards the component against broad ambient resets on host
	   pages (e.g. `.some-scope div { padding: … }`), which otherwise beat a
	   single-class rule on a specificity tie. */
	/* Static first, then the container-relative version. A browser that does
	   not understand the cqi unit discards the second declaration as invalid —
	   without this fallback it would be left with NO padding at all, since the
	   invalid unit kills the whole clamp() and with it the declaration. */
	padding: 32px 32px !important;
	padding: 32px clamp(20px, 5cqi, 40px) !important;
	background: var(--icbc-surface);
	/* Gold left edge is present at rest, not only on hover: it is the site's
	   standing mark on an accented in-article panel (.cb-callout, .cb-card),
	   and a card with no accent until you touch it reads as unbranded. */
	border-left: 4px solid var(--icbc-gold);
	border-bottom: 4px solid transparent;
	transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.icbc:hover .icbc-card,
.icbc:focus-within .icbc-card {
	transform: translate(6px, -6px);
	border-bottom-color: var(--icbc-gold);
	box-shadow: var(--icbc-lift-shadow);
}

/* Frosted sheen — appears instantly on hover (no fade), matching the source. */
.icbc .icbc-glass {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.icbc:hover .icbc-glass,
.icbc:focus-within .icbc-glass {
	background: linear-gradient(90deg, transparent, var(--icbc-sheen), transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--icbc-glass-border);
	box-shadow: var(--icbc-glass-shadow);
}

.icbc .icbc-pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Sized by HEIGHT only (auto width) so the facet keeps its native aspect
	   ratio — stretching it to a fixed box flattens the diagonal. */
	background: url("facet-pattern.svg") no-repeat right center;
	background-size: auto 100%;
	opacity: var(--icbc-facet-opacity);
	transform-origin: right center;
	transition: transform 0.3s ease;
}

.icbc:hover .icbc-pattern,
.icbc:focus-within .icbc-pattern {
	/* translate + uniform scale, never width/height, so it never stretches. */
	transform: translate(18px, -14px) scale(0.9);
}

.icbc .icbc-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* Groups every copy field (heading, description) so the button stays a single
   flex sibling whatever the template renders — this is what lets the inline
   layout work unchanged for a one-field template and a two-field one. */
.icbc .icbc-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Deliberately NO max-width here. The measure cap stays on .icbc-text,
	   because `ch` resolves against the element's OWN font-size: 62ch on the
	   22px sentence is ~680px, but on this wrapper (inherited ~16px) it is
	   ~500px, which would silently make every existing CTA wrap earlier. */
	min-width: 0;
}

.icbc .icbc-heading {
	margin: 0 !important;
	padding: 0;
	color: var(--icbc-ink) !important;
	font-family: var(--ds-font-heading, "Public Sans", sans-serif) !important;
	letter-spacing: 0;
	text-wrap: pretty;
}

.icbc .icbc-text {
	margin: 0 !important;
	padding: 0;
	max-width: 62ch;
	color: var(--icbc-ink) !important;
	font-family: var(--ds-font-heading, "Public Sans", sans-serif) !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	letter-spacing: 0;
	text-wrap: pretty;
}

/* Inline links inside the heading / description.
   Styled explicitly rather than inherited: the article does supply
   `.intone-content-body a { color:#233963 }`, but (a) that only exists inside
   a post — content-body.css is enqueued behind an is_single() guard, so on a
   Page it is absent entirely — and (b) in dark mode the article repaints links
   gold, which on a gold-accented card loses the link against its own frame.
   Underline is never dropped: colour alone must not be the only cue (WCAG 1.4.1). */
.icbc .icbc-heading a,
.icbc .icbc-text a {
	color: var(--icbc-link) !important;
	font-weight: inherit;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.icbc .icbc-heading a:hover,
.icbc .icbc-text a:hover,
.icbc .icbc-heading a:focus-visible,
.icbc .icbc-text a:focus-visible {
	color: var(--icbc-link-hover) !important;
}

.icbc .icbc-heading a:focus-visible,
.icbc .icbc-text a:focus-visible {
	outline: 2px solid var(--icbc-focus);
	outline-offset: 2px;
}

/* Bold and italic runs inside the copy.
   RichText offers core/bold in both fields, and the article ships
   `.intone-content-body strong { color: #1e2e4c }` (0,1,1). That selector
   matches the <strong> CHILD directly, so the !important colour on the parent
   <p> never inherits into it — a bolded phrase on the Dark card rendered navy
   on #141414, about 1.4:1. `inherit` keeps this token-driven: it follows
   whatever --icbc-ink or --icbc-body-ink resolved to for that style and theme.
   (0,2,1) + !important also clears the dark-mode rule at the same specificity.
   `em` needs nothing — content-body.css sets only font-style on it. */
.icbc .icbc-heading strong,
.icbc .icbc-heading b,
.icbc .icbc-text strong,
.icbc .icbc-text b {
	color: inherit !important;
}

/* The button. Scoped two classes deep (0,2,0) on purpose: the article's own
   `.post-content a` / `.intone-content-body a` are (0,1,1) and would otherwise
   paint the label #233963 and underline it, on top of the button fill. */
.icbc .icbc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 16px 32px !important;
	border: 2px solid var(--icbc-btn-bd);
	/* Square is unambiguous house style: every intone.com button that declares
	   a radius declares 0, and the parent theme's reset puts 3px on bare
	   button elements. Stated rather than omitted so nothing can leak in. */
	border-radius: 0;
	background: var(--icbc-btn-bg);
	color: var(--icbc-btn-fg) !important;
	font-family: var(--ds-font-heading, "Public Sans", sans-serif) !important;
	font-size: clamp(14px, 1.3vw, 16px) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.icbc .icbc-btn:visited {
	color: var(--icbc-btn-fg) !important;
}

.icbc .icbc-btn:hover,
.icbc .icbc-btn:focus-visible {
	background: var(--icbc-btn-hover-bg);
	border-color: var(--icbc-btn-hover-bg);
	color: var(--icbc-btn-hover-fg) !important;
	text-decoration: none !important;
}

/* The focus ring is --icbc-focus (navy on the light card, white on a dark one),
   NOT gold. focus-visible also fills the button gold, so a gold ring would sit
   gold-on-gold against the button (1.00:1) and 1.68:1 against the light card —
   no visible focus at all for keyboard users. Navy gives 12.51:1 there. */
.icbc .icbc-btn:focus-visible {
	outline: 3px solid var(--icbc-focus);
	outline-offset: 3px;
}

/* Visually-hidden text. Used for the "(opens in a new tab)" suffix, which is
   the only cue a screen-reader user would otherwise get for target="_blank".
   Absolutely positioned so it never affects the button's flex layout. */
.icbc .icbc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Inline layout: button beside the sentence ---- */

.icbc--inline .icbc-body {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.icbc--tpl-sentence.icbc--inline .icbc-text {
	/* Smaller measure so the sentence and the button genuinely fit side by
	   side inside the article column instead of silently wrapping. Scoped to
	   the sentence template: the headline template's description is already
	   small, and bumping it would flatten the heading/description hierarchy. */
	font-size: 19px !important;
}

/* ---- Template: heading + description + button ---- */

.icbc.icbc--tpl-headline .icbc-heading {
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.icbc.icbc--tpl-headline .icbc-text {
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: var(--icbc-body-ink) !important;
}

/* ---- Dark block style ----
   The heavier interruption. Mirrors .cb-callout--dark: #141414 surface, gold
   left edge, white copy. Note this is a STYLE the editor picks, and is
   unrelated to the site's dark mode. */

.icbc.is-style-dark {
	--icbc-surface: var(--ds-dark-900, #141414);
	--icbc-ink: #ffffff;
	--icbc-body-ink: rgba(255, 255, 255, 0.84);

	/* On a dark band the house button is a white fill that goes gold on hover
	   (.btn-cta-white), not an ink fill that would vanish into the card. */
	--icbc-btn-bg: #ffffff;
	--icbc-btn-fg: #000000;
	--icbc-btn-bd: #ffffff;

	--icbc-link: #ffffff;
	--icbc-link-hover: var(--ds-gold, #f6b43f);

	/* The 0.8-alpha white sheen reads as a highlight on the light card but
	   washes the dark one out to grey and drops the copy's contrast with it. */
	--icbc-sheen: rgba(255, 255, 255, 0.16);
	--icbc-glass-border: rgba(255, 255, 255, 0.16);
	--icbc-glass-shadow: none;
	--icbc-facet-opacity: 0.16;
	--icbc-focus: #ffffff;
	--icbc-lift-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ---- Site dark mode ----
   Set as <html data-theme="dark"> before first paint. Only the token block is
   overridden, so none of the rules above have to be restated and none of them
   enter a specificity fight with content-body.css's own dark overrides.

   `[data-theme="dark"] .icbc:not(.is-style-dark)` is (0,3,0), which clears the
   article's `[data-theme="dark"] .intone-content-body p` at (0,2,1).

   The dark block style is deliberately excluded and gets nothing: it is
   already a fixed-dark panel, exactly like .cb-callout--dark, which ships no
   dark-mode rule of its own. Repainting it to --t-surface-raised (#141416)
   would make it darker than it is now and flatten it into the page. */

[data-theme="dark"] .icbc:not(.is-style-dark) {
	--icbc-surface: var(--t-surface-raised, #141416);
	--icbc-ink: var(--t-text, #f4f6f9);
	/* Deliberately NOT --t-text-muted. Flat on #141416 that token measures
	   5.30:1 and would pass — but the copy sits above the gold facet (0.16)
	   and, on hover, the white sheen (0.16) as well. Over that stack it drops
	   to 3.37:1, under AA for 17px body copy. 0.78 holds 5.66:1 at the same
	   worst case and 11.35:1 flat. */
	--icbc-body-ink: rgba(255, 255, 255, 0.78);

	/* An ink #141414 button on a #141416 card would be invisible, so the
	   button inverts to the light fill. Hover stays gold, as everywhere. */
	--icbc-btn-bg: var(--t-text, #f4f6f9);
	--icbc-btn-fg: var(--ds-dark-900, #141414);
	--icbc-btn-bd: var(--t-text, #f4f6f9);

	--icbc-link: var(--ds-gold, #f6b43f);
	--icbc-link-hover: #ffffff;

	--icbc-sheen: rgba(255, 255, 255, 0.16);
	--icbc-glass-border: rgba(255, 255, 255, 0.16);
	--icbc-glass-shadow: none;
	--icbc-facet-opacity: 0.16;
	--icbc-focus: #ffffff;
	--icbc-lift-shadow: var(--t-shadow, 0 4px 24px rgba(0, 0, 0, 0.4));
}

/* ---- Narrow container ----
   Container query, not a viewport one: what matters is how wide the column is,
   and a 1440px desktop can still serve this block a 400px sidebar. A container
   cannot style itself, so the outer border widths stay in the media query below. */

@container icbc (max-width: 480px) {
	.icbc .icbc-card {
		padding: 24px 20px !important;
	}

	.icbc .icbc-body,
	.icbc--inline .icbc-body {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.icbc .icbc-text,
	.icbc--tpl-sentence.icbc--inline .icbc-text {
		font-size: 18px !important;
	}

	.icbc.icbc--tpl-headline .icbc-heading {
		font-size: 21px !important;
	}

	.icbc.icbc--tpl-headline .icbc-text,
	.icbc--tpl-headline.icbc--inline .icbc-text {
		font-size: 16px !important;
	}

	.icbc .icbc-btn {
		width: 100%;
		padding: 15px 20px !important;
	}
}

/* Browsers without container query support (and genuinely small screens). */
@media (max-width: 600px) {
	.icbc.icbc {
		margin: 32px 0;
	}

	.icbc {
		/* Set on the base rule, not :hover — width must never change. */
		border-top-width: 6px;
		border-right-width: 6px;
	}

	.icbc .icbc-card {
		padding: 24px 20px !important;
		border-left-width: 3px;
		border-bottom-width: 3px;
	}

	.icbc:hover .icbc-card,
	.icbc:focus-within .icbc-card {
		transform: translate(4px, -4px);
	}

	.icbc .icbc-body,
	.icbc--inline .icbc-body {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.icbc .icbc-text,
	.icbc--inline .icbc-text,
	.icbc--tpl-sentence.icbc--inline .icbc-text {
		font-size: 18px !important;
	}

	.icbc.icbc--tpl-headline .icbc-heading {
		font-size: 21px !important;
	}

	.icbc.icbc--tpl-headline .icbc-text {
		font-size: 16px !important;
	}

	.icbc .icbc-btn {
		width: 100%;
		padding: 15px 20px !important;
	}
}

/* Touch devices never fire :hover, so show the gold frame permanently there
   rather than letting mobile readers see an unbranded grey-edged box. */
@media (hover: none) {
	.icbc,
	.icbc .icbc-card {
		border-color: var(--icbc-gold);
	}
}

@media (prefers-reduced-motion: reduce) {
	.icbc,
	.icbc .icbc-card,
	.icbc .icbc-pattern,
	.icbc .icbc-btn {
		transition: none;
	}

	.icbc:hover .icbc-card,
	.icbc:focus-within .icbc-card,
	.icbc:hover .icbc-pattern,
	.icbc:focus-within .icbc-pattern {
		transform: none;
	}
}