/**
 * Tokenomicon + FinOps X 2027 banners.
 *
 * Two components off one Figma frame set:
 *   .tfx-bar     — the thin site-wide strip, rendered from header.php
 *   .tfx-banner  — the tall homepage block, rendered as a page-builder section
 *
 * Both sit on the TFX surface navy with the nested chevron artwork bleeding off
 * each edge, and both use the Tokenomicon brand faces: DM Sans for the title
 * and button, DM Mono for the dates. Those arrive via the 'tokenomicon-fonts'
 * handle, which page-blocks/tfx-bar.php and page-blocks/tfx-banner.php enqueue
 * alongside this file.
 *
 * Colours and type sizes are fixed by the brand rather than editable; only the
 * copy and the link come from ACF. Chevron offsets are absolute pixels taken
 * from the Figma frames, so each copy is cropped by its own overflow:hidden
 * exactly as it is there.
 *
 * 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.
 */

.tfx-bar,
.tfx-banner {
	position: relative;
	overflow: hidden;
	background-color: #040920;
}

/* ── Chevrons ────────────────────────────────────────────────────── */

/* Shared by both components. The artwork is 693x1800 and 690x1800, and every
   placement below is taller than its band, so the pair is always a cropped
   slice rather than a whole chevron. object-fit keeps that slice undistorted
   when the box ratio and the file ratio differ by a pixel or two. */
.tfx-bar__chevron,
.tfx-banner__chevron {
	position: absolute;
	z-index: 0;
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

/* ── Site-wide bar ───────────────────────────────────────────────── */

.tfx-bar {
	display: block;
	width: 100%;
}

.tfx-bar__link {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3px 24px;
	/* The chevrons bleed roughly 130px in from each edge, so the row keeps
	   clear of them rather than running underneath. */
	padding: 8px clamp(56px, 11vw, 150px);
	color: #ffffff;
	text-decoration: none;
}

.tfx-bar__link:hover,
.tfx-bar__link:focus {
	color: #ffffff;
	text-decoration: none;
}

.tfx-bar__link:focus-visible {
	outline: 2px solid #6bd2f1;
	outline-offset: -4px;
}

.tfx-bar__copy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	white-space: nowrap;
}

.tfx-bar .tfx-bar__title {
	margin: 0;
	font-family: "DM Sans", "IBM Plex Sans", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	color: #ffffff;
}

.tfx-bar .tfx-bar__dates {
	margin: 0;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: #6bd2f1;
}

/* A span, not an anchor: the whole bar is already the link. */
.tfx-bar .tfx-bar__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 4px 12px;
	border-radius: 8px;
	background-color: #204bbe;
	font-family: "DM Sans", "IBM Plex Sans", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: #ffffff;
	white-space: nowrap;
	transition: background-color 180ms ease;
}

.tfx-bar__link:hover .tfx-bar__cta,
.tfx-bar__link:focus-visible .tfx-bar__cta {
	background-color: #2a5ad8;
}

.tfx-bar__chevron--left {
	top: -220px;
	left: -62px;
	width: 196px;
	height: 510px;
}

.tfx-bar__chevron--right {
	top: -249px;
	right: -65px;
	width: 207px;
	height: 539px;
}

/* Between the two framed sizes the chevrons need a step of their own: the
   desktop artwork is drawn for a 1682px band and swamps a tablet, while the
   phone sliver is too mean to read. The placement is the desktop one scaled by
   ~0.57, which keeps the apex in the visible slice. The narrower gutter is
   what keeps the row on one line once the chevrons stop reaching so far in. */
@media (max-width: 1023px) {
	.tfx-bar__link {
		padding-inline: clamp(56px, 9vw, 100px);
	}

	.tfx-bar__chevron--left {
		top: -125px;
		left: -35px;
		width: 112px;
		height: 291px;
	}

	.tfx-bar__chevron--right {
		top: -142px;
		right: -37px;
		width: 118px;
		height: 307px;
	}
}

/* The row stacks on a phone, which makes the bar tall enough that the full-size
   chevrons would sit behind the copy. Both shrink to a sliver down each edge,
   matching the 393px frame. */
@media (max-width: 767px) {
	.tfx-bar__link {
		flex-direction: column;
		gap: 8px;
		padding: 8px 48px;
	}

	.tfx-bar__copy {
		flex-direction: column;
		gap: 8px;
	}

	.tfx-bar .tfx-bar__title {
		font-size: 1.1rem;
	}

	.tfx-bar .tfx-bar__dates {
		font-size: 0.9rem;
	}

	.tfx-bar .tfx-bar__cta {
		height: 18px;
		padding: 3px 9px;
		border-radius: 6px;
		font-size: 0.9rem;
	}

	.tfx-bar__chevron--left {
		top: -67px;
		left: -44px;
		width: 74px;
		height: 198px;
	}

	.tfx-bar__chevron--right {
		top: -5px;
		right: -35px;
		width: 59px;
		height: 158px;
	}
}

/* ── Homepage banner ─────────────────────────────────────────────── */

.tfx-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Keeps the content clear of the chevrons, which reach about 211px in from
	   each edge at full size. It sits on the section rather than on __inner so
	   that it eats into the viewport either side of the 914px block instead of
	   out of it — otherwise the two columns wrap apart on a wide screen. */
	padding-inline: clamp(24px, 13vw, 211px);
}

.tfx-banner__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* 77px across is what the Figma frame leaves between the 446px lockup and
	   the 391px date column inside its 914px block. The row gap only applies
	   once the two wrap apart, where it wants to be tighter. */
	gap: 32px 77px;
	width: 100%;
	max-width: 914px;
}

.tfx-banner__logo {
	display: block;
	width: 446px;
	max-width: 100%;
	height: auto;
}

.tfx-banner__aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	flex-shrink: 0;
}

.tfx-banner__dates {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: #6bd2f1;
	white-space: nowrap;
}

.tfx-banner .tfx-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	border-radius: 8px;
	background-color: #204bbe;
	font-family: "DM Sans", "IBM Plex Sans", sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 180ms ease;
}

.tfx-banner .tfx-banner__button:hover,
.tfx-banner .tfx-banner__button:focus {
	background-color: #2a5ad8;
	color: #ffffff;
	text-decoration: none;
}

.tfx-banner .tfx-banner__button:focus-visible {
	outline: 2px solid #6bd2f1;
	outline-offset: 2px;
}

.tfx-banner__chevron--left {
	top: -311px;
	left: -125px;
	width: 336px;
	height: 898px;
}

.tfx-banner__chevron--right {
	top: -311px;
	right: -121px;
	width: 332px;
	height: 887px;
}

/* Between the 914px content block and the chevrons there is no room for the
   two-column layout much below 1024px, so the block centres and stacks. */
@media (max-width: 1023px) {
	.tfx-banner {
		padding-inline: clamp(24px, 16vw, 150px);
	}

	.tfx-banner__inner {
		flex-direction: column;
		gap: 16px;
	}

	.tfx-banner__logo {
		width: 320px;
	}

	/* Same step as the bar's: the desktop artwork is drawn for a 1682px band
	   and swamps a tablet, so the placement is scaled by ~0.57, which keeps
	   each apex inside the visible slice. */
	.tfx-banner__chevron--left {
		top: -178px;
		left: -74px;
		width: 198px;
		height: 514px;
	}

	.tfx-banner__chevron--right {
		top: -178px;
		right: -71px;
		width: 195px;
		height: 508px;
	}
}

@media (max-width: 767px) {
	.tfx-banner {
		padding-inline: 56px;
	}

	.tfx-banner__inner {
		gap: 8px;
	}

	.tfx-banner__logo {
		width: 195px;
	}

	.tfx-banner__aside {
		gap: 8px;
	}

	.tfx-banner__dates {
		font-size: 0.75rem;
	}

	.tfx-banner .tfx-banner__button {
		height: 36px;
		padding: 0 24px;
		border-radius: 6px;
		font-size: 0.9375rem;
	}

	.tfx-banner__chevron--left {
		top: -118px;
		left: -83px;
		width: 147px;
		height: 394px;
	}

	.tfx-banner__chevron--right {
		top: auto;
		bottom: -118px;
		right: -90px;
		width: 146px;
		height: 390px;
	}
}