/* Intone CTA block (intone/cta) — in-article call to action.
   Shares the brand language of the [intone_cta] banner (inc/cta-banner/):
   mint gradient card, navy copy, teal->lime gradient frame revealed on hover,
   diagonal facet pattern. Scaled down for a blog content column (~640px on
   /insights/blog/ singles, which render inside .post-content.intone-content-body).

   Two rules carried over from the banner, both learned the hard way there:

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

   2. The banner's frame sits on the TOP+LEFT because it is a centred
      full-width banner where a left inset is invisible. Here the block sits in
      a text column, and a left border would push the card ~10px right of the
      body copy — a visible misalignment against every surrounding paragraph.
      So the whole treatment is mirrored: frame on TOP+RIGHT, card accent on
      LEFT+BOTTOM, lift up-and-right. A right border shrinks the card's content
      box instead of displacing it, so the card's left edge stays flush with the
      article text and nothing can overflow the column. */

.icbc {
	--icbc-navy: #1e2e4c;
	--icbc-accent: #233963;
	/* Supporting-paragraph ink: lighter than the heading so the two read as a
	   hierarchy rather than one block of navy. */
	--icbc-body-ink: #35476a;
	--icbc-mint: linear-gradient(45deg, #e3ffcc 0%, #d0fff1 100%);
	--icbc-deep: linear-gradient(45deg, #1b2f54 0%, #233963 100%);
	--icbc-brand: linear-gradient(
		90deg,
		#6ac2b7 0%,
		#8ad6c0 50%,
		#8adbbb 75%,
		#86dcaf 87.5%,
		#84dda5 93.75%,
		#95e091 96.88%,
		#9fdd5f 100%
	);

	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	margin: 40px 0;
	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 640px blog column
	   and a 1200px page section. */
	container-type: inline-size;
	container-name: icbc;
}

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

.icbc:hover,
.icbc:focus-within {
	border-image: var(--icbc-brand) 1;
}

.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. */
	padding: 32px clamp(20px, 5cqi, 40px) !important;
	background: var(--icbc-mint);
	border-left: 3px solid transparent;
	border-bottom: 3px solid transparent;
	transition: transform 0.4s ease, border-color 0.4s ease;
}

.icbc:hover .icbc-card,
.icbc:focus-within .icbc-card {
	transform: translate(6px, -6px);
	border-image: var(--icbc-brand) 1;
}

/* Frosted sheen — appears instantly on hover (no fade), matching the banner. */
.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, rgba(255, 255, 255, 0.8), transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.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: 0.1;
	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-navy) !important;
	font-family: "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-navy) !important;
	font-family: "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 host article does supply
   `.intone-content-body a { color:#233963 }`, but (a) that only exists inside a
   post, and this block can sit on any page, and (b) #233963 on the navy card is
   navy-on-navy and effectively invisible. Mint deliberately mirrors the
   article's own link treatment (navy + underline, gold on hover) so a link in a
   CTA behaves exactly like a link in the surrounding copy. 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-accent) !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: #b07613 !important;
}

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

.icbc.is-style-navy .icbc-heading a,
.icbc.is-style-navy .icbc-text a {
	color: #fff !important;
}

.icbc.is-style-navy .icbc-heading a:hover,
.icbc.is-style-navy .icbc-text a:hover,
.icbc.is-style-navy .icbc-heading a:focus-visible,
.icbc.is-style-navy .icbc-text a:focus-visible {
	/* Lime end of the brand gradient — the one accent with real contrast on navy. */
	color: #9fdd5f !important;
}

.icbc.is-style-navy .icbc-heading a:focus-visible,
.icbc.is-style-navy .icbc-text a:focus-visible {
	outline-color: #fff;
}

.icbc .icbc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 13px 22px !important;
	border: 2px solid var(--icbc-accent);
	background: #fff;
	color: var(--icbc-accent) !important;
	font-family: "Public Sans", sans-serif !important;
	font-size: 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:hover,
.icbc .icbc-btn:focus-visible {
	background: var(--icbc-accent);
	color: #fff !important;
}

.icbc .icbc-btn:focus-visible {
	outline: 2px solid var(--icbc-navy);
	outline-offset: 3px;
}

/* ---- 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 a ~640px blog 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;
}

/* ---- Navy style variant (mint is the default, no class required) ---- */

.icbc.is-style-navy .icbc-card {
	background: var(--icbc-deep);
}

.icbc.is-style-navy {
	--icbc-body-ink: rgba(255, 255, 255, 0.84);
}

.icbc.is-style-navy .icbc-text,
.icbc.is-style-navy .icbc-heading {
	color: #fff !important;
}

.icbc.is-style-navy.icbc--tpl-headline .icbc-text {
	color: var(--icbc-body-ink) !important;
}

.icbc.is-style-navy .icbc-pattern {
	opacity: 0.16;
}

.icbc.is-style-navy .icbc-btn {
	border-color: #fff;
	background: #fff;
	color: var(--icbc-navy) !important;
}

.icbc.is-style-navy .icbc-btn:hover,
.icbc.is-style-navy .icbc-btn:focus-visible {
	border-color: transparent;
	background: var(--icbc-brand);
	color: var(--icbc-navy) !important;
}

.icbc.is-style-navy .icbc-btn:focus-visible {
	outline-color: #fff;
}

/* The 0.8-alpha white sheen reads as a highlight on the mint card but washes
   the navy one out to grey and drops the copy's contrast with it, so the navy
   variant gets a much fainter band. */
.icbc.is-style-navy:hover .icbc-glass,
.icbc.is-style-navy:focus-within .icbc-glass {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	box-shadow: none;
	border-color: rgba(255, 255, 255, 0.16);
}

/* ---- 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-card {
		padding: 24px 20px !important;
	}

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

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

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

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

	.icbc-btn {
		width: 100%;
		padding: 14px 18px !important;
		font-size: 15px !important;
	}
}

/* Browsers without container query support (and genuinely small screens). */
@media (max-width: 600px) {
	.icbc {
		margin: 32px 0;
		/* 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: 2px;
		border-bottom-width: 2px;
	}

	.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 {
		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: 14px 18px !important;
		font-size: 15px !important;
	}
}

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

@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;
	}
}