/**
 * State of Tokenomics Banner page block.
 *
 * Ported from the .tfhp-banner band on tokeneconomics.com. Colours are the
 * Tokenomics brand's and are fixed rather than editable: near-black navy
 * ground, teal highlight and chevron, cyan CTA.
 *
 * The one deliberate difference from the source is the typeface. That site
 * uses Inter Tight / Inter; here the band borrows IBM Plex Sans, which
 * header.php already loads site-wide, so the block adds no webfont request.
 * Sizes, weights and tracking are unchanged.
 *
 * Selectors are doubled up on the type rules so they beat the theme's own
 * heading and link styles, which land at the same specificity.
 */

.state-of-banner {
	position: relative;
	overflow: hidden;
	background-color: #040920;
}

/* ── Chevron ─────────────────────────────────────────────────────── */

/* Rendered inline by page-blocks/state-of-banner.php. Pinned to the top-right
   and stretched to the band's height, so it bleeds off both edges the way it
   does on the source site. */
.state-of-banner__art {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

/* On a phone the band is tall enough that a full-height chevron would sit
   behind the copy, so it shrinks back to a corner motif. */
@media (max-width: 767px) {
	.state-of-banner__art {
		height: 120px;
		opacity: 0.9;
	}
}

/* ── Layout ──────────────────────────────────────────────────────── */

.state-of-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* The reserved gutter on the right is what keeps the CTA clear of the chevron.
   It scales with the viewport between a 56px floor and a 220px ceiling. */
.state-of-banner .state-of-banner__link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	padding-right: clamp(56px, 18vw, 220px);
	color: #ffffff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.state-of-banner .state-of-banner__link {
		padding-right: 56px;
	}
}

.state-of-banner .state-of-banner__link:focus-visible {
	outline: 2px solid #0ce4d2;
	outline-offset: 4px;
}

/* A flex-basis rather than a width, so the copy takes the row to itself and
   drops the CTA beneath it once there is less than 420px to work with. */
.state-of-banner__copy {
	flex: 1 1 420px;
	min-width: 0;
}

/* ── Copy ────────────────────────────────────────────────────────── */

.state-of-banner .state-of-banner__title {
	margin: 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 600;
	font-size: clamp(1.625rem, 3.6vw, 2.5rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: #ffffff;
	text-wrap: pretty;
}

.state-of-banner .state-of-banner__highlight {
	color: #0ce4d2;
}

.state-of-banner .state-of-banner__meta {
	margin: 12px 0 0;
	max-width: 510px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: rgba(255, 255, 255, 0.8);
}

/* ── CTA ─────────────────────────────────────────────────────────── */

/* A span, not an anchor: the whole band is already the link. */
.state-of-banner .state-of-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 30px;
	border-radius: 9999px;
	background-color: #00cbf6;
	color: #040920;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 180ms ease;
}

.state-of-banner .state-of-banner__cta svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	transition: transform 180ms ease;
}

.state-of-banner .state-of-banner__link:hover .state-of-banner__cta svg,
.state-of-banner .state-of-banner__link:focus-visible .state-of-banner__cta svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.state-of-banner .state-of-banner__cta svg {
		transition: none;
	}
}

/* Below the flex-basis the CTA wraps onto its own line, where a full-width
   pill reads better than one hugging the left edge. */
@media (max-width: 479px) {
	.state-of-banner .state-of-banner__cta {
		width: 100%;
	}
}