/*
 * Article blocks — components from apps/guides/templatetags/article_blocks.py
 * (templates in templates/components/article/). Dark surfaces echo the
 * guide hero: #020617 base, orange and slate glow, faint grid.
 * Theme tokens are --ec-*; this file only adds block-level styles.
 */

.ab {
	--ab-accent: #ff4e02;
	--ab-line: #e2e8f0;
	--ab-soft: #f8fafc;
	--ab-muted: #475569;
	--ab-radius: 1rem;
	--ab-radius-lg: 1.5rem;
	margin-top: 1.5rem;
}
.ab > :last-child { margin-bottom: 0; }
/* Same air after a block as before it (Bootstrap mt-* utilities still win). */
.ab + * { margin-top: 1.5rem; }
@media (min-width: 768px) {
	.ab + * { margin-top: 2rem; }
}

/* Shared bits ---------------------------------------------------------- */

.ab-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ab-muted);
}
.ab-eyebrow::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--ab-accent);
	box-shadow: 0 0 0 3px rgba(255, 78, 2, .18);
}
.ab-pill {
	display: inline-flex;
	align-items: center;
	padding: .25rem .75rem;
	border-radius: 2rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ab-accent);
	background: rgba(255, 78, 2, .08);
	border: 1px solid rgba(255, 78, 2, .35);
}

/* Dark surface (hero echo) */
.ab-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 2rem 1.5rem;
	border-radius: var(--ab-radius-lg);
	background-color: #020617;
	color: #fff;
}
.ab-dark::before,
.ab-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.ab-dark::before {
	background:
		radial-gradient(55% 75% at 100% 0%, rgba(255, 78, 2, .34), rgba(255, 78, 2, 0) 70%),
		radial-gradient(65% 85% at 0% 100%, rgba(51, 65, 85, .95), rgba(30, 41, 59, 0) 70%);
}
.ab-dark::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	-webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 5%, transparent 65%);
	mask-image: radial-gradient(ellipse at 80% 20%, #000 5%, transparent 65%);
}
.ab-dark .ab-eyebrow { color: rgba(255, 255, 255, .6); }
.ab-dark a:not(.btn) {
	color: #fff;
	text-decoration-color: rgba(255, 78, 2, .8);
	text-underline-offset: .2em;
}
.ab-dark a:not(.btn):hover { color: #ffb08f; }
@media (min-width: 768px) {
	.ab { margin-top: 2rem; }
	.ab-dark { padding: 2.5rem; }
}

/* Animated glow layers (CTA) */
.ab-glow {
	position: absolute;
	z-index: -1;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform, opacity;
}
.ab-glow--accent {
	top: -60%;
	right: -15%;
	width: 60%;
	background: radial-gradient(closest-side, rgba(255, 78, 2, .45), rgba(255, 78, 2, 0));
}
.ab-glow--slate {
	bottom: -90%;
	left: -20%;
	width: 75%;
	background: radial-gradient(closest-side, rgba(51, 65, 85, .95), rgba(30, 41, 59, 0));
}
@media (prefers-reduced-motion: no-preference) {
	.ab-glow--accent { animation: ab-drift 20s ease-in-out infinite alternate; }
	.ab-glow--slate { animation: ab-drift-back 24s ease-in-out infinite alternate; }
}
@keyframes ab-drift {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(-14%, 12%, 0) scale(1.15); }
}
@keyframes ab-drift-back {
	0% { transform: translate3d(0, 0, 0) scale(1.05); }
	100% { transform: translate3d(12%, -10%, 0) scale(.95); }
}

/* Key takeaways --------------------------------------------------------- */

.ab-takeaways { padding-bottom: 1.75rem; }

.ab-takeaways__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.ab-takeaways__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .75rem;
	background: rgba(255, 78, 2, .16);
	border: 1px solid rgba(255, 78, 2, .45);
	color: var(--ab-accent);
}
.ab-takeaways__list {
	counter-reset: ab-takeaway;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ab-takeaways__list > li {
	counter-increment: ab-takeaway;
	position: relative;
	padding: .875rem 0 .875rem 2.75rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}
.ab-takeaways__list > li:last-child { padding-bottom: 0; }
@media (max-width: 499.98px) {
	.ab-takeaways__list > li { padding-left: 2.25rem; }
	.ab-step { padding-left: 3.25rem; }
}
.ab-takeaways__list > li::before {
	content: counter(ab-takeaway, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: .9rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ab-accent);
}

/* Callout ----------------------------------------------------------------- */

.ab-callout {
	--ab-tone: #44a5b2;
	--ab-tone-soft: rgba(68, 165, 178, .12);
	position: relative;
	display: flex;
	gap: 1rem;
	padding: 1.5rem;
	border-radius: var(--ab-radius);
	background: var(--ab-soft);
	border: 1px solid var(--ab-line);
	overflow: hidden;
}
.ab-callout::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--ab-tone);
}
.ab-callout--warning { --ab-tone: #e09a4a; --ab-tone-soft: rgba(239, 181, 114, .2); }
.ab-callout--rule { --ab-tone: #ff4e02; --ab-tone-soft: rgba(255, 78, 2, .1); }
.ab-callout--tip { --ab-tone: #44b288; --ab-tone-soft: rgba(68, 178, 136, .14); }
.ab-callout__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .75rem;
	background: var(--ab-tone-soft);
	color: var(--ab-tone);
	font-size: 1.25rem;
}
.ab-callout__body { min-width: 0; }
.ab-callout__body .ab-eyebrow { margin-bottom: .375rem; color: var(--ab-tone); }
.ab-callout__body .ab-eyebrow::before { display: none; }
.ab-callout__title { margin-bottom: .5rem; }
.ab-callout__body > :last-child { margin-bottom: 0; }
.ab-callout__body p { font-size: 1.0625rem; }

/* Definition -------------------------------------------------------------- */

.ab-definition {
	padding: 1.75rem 1.5rem;
	border-radius: var(--ab-radius-lg);
	border: 1px solid var(--ab-line);
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(255, 78, 2, .07), rgba(255, 78, 2, 0) 70%),
		#fff;
}
.ab-definition__term {
	display: block;
	margin-bottom: .5rem;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 500;
	color: var(--ec-emphasis-color);
}
.ab-definition p:last-child { margin-bottom: 0; }

/* Quote ------------------------------------------------------------------- */

.ab-quote { padding: 2rem 1.5rem; }
.ab-quote blockquote {
	position: relative;
	margin: 0 0 1.25rem;
	padding-top: 2.25rem;
	font-size: 1.25rem;
	line-height: 1.55;
	color: #fff;
}
.ab-quote blockquote::before {
	content: "\201C";
	position: absolute;
	top: -.75rem;
	left: 0;
	font-size: 4rem;
	line-height: 1;
	color: var(--ab-accent);
}
.ab-quote figcaption { font-size: .875rem; color: rgba(255, 255, 255, .6); }
.ab-quote figcaption b { display: block; font-weight: 500; color: #fff; }

/* Steps ------------------------------------------------------------------- */

.ab-steps {
	counter-reset: ab-step;
	list-style: none;
	padding: 0;
}
.ab-step {
	counter-increment: ab-step;
	position: relative;
	padding: 0 0 1.75rem 3.75rem;
}
.ab-step:last-child { padding-bottom: 0; }
.ab-step::before {
	content: counter(ab-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #020617;
	border: 1.5px solid var(--ab-accent);
	box-shadow: 0 0 0 4px rgba(255, 78, 2, .1);
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
}
.ab-step::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 3rem;
	bottom: .5rem;
	border-left: 1.5px dashed #cbd5e1;
}
.ab-step:last-child::after { display: none; }
.ab-step__title { margin: .5rem 0 .375rem; }
.ab-step p { margin-bottom: 0; font-size: 1.0625rem; }
.ab-step p + p { margin-top: .5rem; }

/* Checklist --------------------------------------------------------------- */

.ab-checklist {
	padding: 1.5rem;
	border-radius: var(--ab-radius);
	border: 1px solid var(--ab-line);
}
.ab-checklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}
.ab-checklist li {
	position: relative;
	padding-left: 2.25rem;
	font-size: 1.0625rem;
}
.ab-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: .4rem;
	background: var(--ab-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

/* Compare (two sides) ------------------------------------------------------ */

.ab-compare {
	display: grid;
	gap: 1rem;
}
@media (min-width: 768px) {
	.ab-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ab-side {
	--ab-tone: #64748b;
	padding: 1.5rem;
	border-radius: var(--ab-radius);
	border: 1px solid var(--ab-line);
	border-top: 3px solid var(--ab-tone);
	background: #fff;
}
.ab-side--good { --ab-tone: #44b288; }
.ab-side--bad { --ab-tone: #ec5a5a; }
.ab-side__title { margin-bottom: .75rem; }
.ab-side ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: 1.0625rem; }
.ab-side p { font-size: 1.0625rem; }
.ab-side li::marker { color: var(--ab-tone); }
.ab-side p:last-child { margin-bottom: 0; }

/* Table ------------------------------------------------------------------- */

.ab-table { margin-left: 0; margin-right: 0; }
.ab-table__caption {
	margin-bottom: .75rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--ec-emphasis-color);
}
.ab-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	background: #fff;
}
.ab-table .table {
	--ec-table-striped-bg: #f8fafc;
	--ec-table-border-color: var(--ab-line);
	min-width: max(100%, 34rem);
	margin: 0;
	font-size: .9375rem;
}
.ab-table .table > thead > tr > th {
	padding: .875rem 1rem;
	background-color: #1e293b;
	box-shadow: none;
	color: #fff;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .02em;
	border-bottom: 0;
	vertical-align: bottom;
}
.ab-table .table > tbody > tr > * {
	padding: .875rem 1rem;
	vertical-align: top;
}
.ab-table .table > tbody > tr > th {
	font-weight: 500;
	color: var(--ec-emphasis-color);
}
.ab-table .table > tbody > tr:last-child > * { border-bottom: 0; }
.ab-table__source {
	margin: .625rem 0 0;
	font-size: .8125rem;
	color: var(--ab-muted);
}

/* Stats ------------------------------------------------------------------- */

.ab-stats { padding-top: 2.25rem; padding-bottom: 2.25rem; }

.ab-stats__grid {
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 500px) {
	.ab-stats__grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.ab-stat { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.ab-stat__value {
	margin-bottom: .375rem;
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 1.1;
	color: var(--ab-accent);
}
.ab-stat__label { font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.ab-stats__source {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .8125rem;
	color: rgba(255, 255, 255, .55);
}

/* Example ----------------------------------------------------------------- */

.ab-example {
	padding: 1.5rem;
	border-radius: var(--ab-radius-lg);
	border: 1.5px dashed #cbd5e1;
	background: var(--ab-soft);
}
.ab-example__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin-bottom: 1rem;
}
.ab-example__head h3 { margin: 0; }
.ab-example > p { font-size: 1.0625rem; }
.ab-example .ab-table { margin-top: 1rem; }
.ab-example .ab-table + p { margin-top: 1rem; }
@media (min-width: 768px) {
	.ab-example { padding: 2rem; }
}

/* Cards ------------------------------------------------------------------- */

.ab-cards {
	display: grid;
	gap: 1rem;
}
@media (min-width: 500px) {
	.ab-cards--2, .ab-cards--3, .ab-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.ab-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ab-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ab-card {
	position: relative;
	padding: 1.5rem;
	border-radius: var(--ab-radius);
	border: 1px solid var(--ab-line);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.ab-card::before {
	content: "";
	position: absolute;
	left: 1.5rem;
	top: 0;
	width: 2rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--ab-accent);
}
.ab-card:hover {
	border-color: rgba(255, 78, 2, .35);
	box-shadow: 0 .75rem 2rem -1rem rgba(2, 6, 23, .25);
}
.ab-card__label { margin-bottom: .5rem; }
.ab-card__title { margin-bottom: .5rem; }
.ab-card p { margin-bottom: 0; font-size: .9375rem; color: var(--ab-muted); }
.ab-card p + p { margin-top: .5rem; }
.ab-card ul { margin: 0; padding-left: 1.1rem; font-size: .9375rem; color: var(--ab-muted); }

/* Read next --------------------------------------------------------------- */

.ab-readnext {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem;
}
.ab-readnext__body { min-width: 0; flex: 1; }
.ab-readnext__body .ab-eyebrow { margin-bottom: .375rem; }
.ab-readnext__title {
	display: block;
	margin-bottom: .25rem;
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
}
.ab-dark a.ab-readnext__title { text-decoration: none; }
.ab-readnext__text { margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .7); }
.ab-readnext__arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--ab-accent);
	color: #fff;
	transition: transform .2s ease;
}
.ab-readnext:hover .ab-readnext__arrow { transform: translateX(4px); }

/* Inline CTA -------------------------------------------------------------- */

.ab-cta { padding: 2rem 1.5rem 1.5rem; }
.ab-cta__head { max-width: 38rem; }
.ab-cta__title { margin-bottom: .75rem; color: #fff; letter-spacing: -.01em; }
.ab-cta__text {
	margin-bottom: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}
.ab-cta__bar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.25rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.ab-cta__facts {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ab-cta__facts li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	color: rgba(255, 255, 255, .78);
}
.ab-cta__facts li::before {
	content: "";
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: rgba(255, 78, 2, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff4e02' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / .75rem no-repeat;
}
.ab-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	white-space: nowrap;
}
.ab-cta__btn i { transition: transform .2s ease; }
.ab-cta__btn:hover i { transform: translateX(4px); }
@media (min-width: 768px) {
	.ab-cta { padding: 2.75rem 2.75rem 2rem; }
	.ab-cta__bar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
}