/**
 * Component styles: nav, buttons, cards, hero content, footer, forms.
 */

/* Nav */
/* Header logo mark + wordmark + scrolling tagline — the site's only
   "return to Home" path now that the primary menu has no text Home link. */
.ev-site-logo {
	display: flex;
	align-items: center;
	gap: var(--ev-space-xs);
	text-decoration: none;
	color: var(--ev-color-text);
	flex: none;
}

.ev-site-logo__mark {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
}

.ev-site-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.ev-site-logo__name {
	font-weight: 700;
	font-size: var(--ev-font-size-sm);
}

.ev-site-logo__tagline-wrap {
	display: block;
	max-width: 7rem;
	overflow: hidden;
	white-space: nowrap;
}

.ev-site-logo__tagline {
	display: inline-block;
	font-size: 0.7rem;
	font-style: italic;
	color: var(--ev-color-text-muted);
	padding-left: 100%;
	animation: ev-logo-marquee 9s linear infinite;
}

@keyframes ev-logo-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.ev-site-logo__tagline {
		animation: none;
		padding-left: 0;
	}
	.ev-site-logo__tagline-wrap {
		max-width: none;
		overflow: visible;
		white-space: normal;
	}
}

.ev-nav__menu {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ev-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ev-nav__menu li {
	flex: none;
}

.ev-nav__menu a {
	display: block;
	color: var(--ev-color-text);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.ev-nav__menu a:hover,
.ev-nav__menu a:focus-visible {
	color: var(--ev-color-accent-cyan);
}

/* "Get the Planner" nav item — set via a custom menu-item class in wp-admin
   (menu item classes="ev-nav__cta"), not a template-hardcoded link, so it
   stays edit-able from the Menus screen like every other nav item. */
.ev-nav__menu .ev-nav__cta a {
	background: var(--ev-color-cta-primary);
	color: var(--ev-color-text-on-accent);
	padding: var(--ev-space-2xs) var(--ev-space-md);
	border-radius: var(--ev-radius-sm);
}

.ev-nav__menu .ev-nav__cta a:hover,
.ev-nav__menu .ev-nav__cta a:focus-visible {
	background: var(--ev-color-cta-primary-hover);
	color: var(--ev-color-text-on-accent);
}

.ev-nav__toggle {
	display: inline-flex;
	background: none;
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-sm);
	padding: var(--ev-space-xs) var(--ev-space-sm);
	color: var(--ev-color-text);
}

@media (min-width: 64em) {
	.ev-nav__toggle {
		display: none;
	}
}

@media (max-width: 63.99em) {
	.ev-nav__menu {
		display: none;
		flex-direction: column;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--ev-color-bg-alt);
		border-bottom: 1px solid var(--ev-color-border);
		padding: var(--ev-space-md);
		z-index: 100;
	}

	.ev-nav__menu.is-open {
		display: flex;
	}
}

/*
 * Sitewide promo bar (header.php) — sits above the header on every page,
 * outside the homepage's .evh gold/serif scope, so it stays in the
 * standard navy tokens regardless of which page it's on.
 */
.ev-promo-bar {
	position: relative;
	background: var(--ev-color-bg-alt);
	color: var(--ev-color-text);
	border-bottom: 1px solid var(--ev-color-border);
	padding: var(--ev-space-xs) 2.75rem;
	font-size: var(--ev-font-size-sm);
}

.ev-promo-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ev-space-sm);
	text-align: center;
}

.ev-promo-bar__text {
	margin: 0;
}

.ev-promo-bar__code {
	color: var(--ev-color-cta-primary);
	letter-spacing: 0.04em;
}

.ev-promo-bar__cta {
	color: var(--ev-color-accent-cyan);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.ev-promo-bar__cta:hover {
	color: var(--ev-color-text);
}

.ev-promo-bar__close {
	position: absolute;
	right: var(--ev-space-sm);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--ev-color-text-muted);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	padding: var(--ev-space-2xs) var(--ev-space-xs);
}

.ev-promo-bar__close:hover {
	color: var(--ev-color-text);
}

/* Buttons */
.ev-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ev-space-xs);
	padding: var(--ev-space-sm) var(--ev-space-lg);
	border-radius: var(--ev-radius-sm);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--ev-transition-fast), border-color var(--ev-transition-fast);
}

.ev-button--primary {
	background: var(--ev-color-cta-primary);
	color: var(--ev-color-text-on-accent);
}

.ev-button--primary:hover {
	background: var(--ev-color-cta-primary-hover);
	color: var(--ev-color-text-on-accent);
}

.ev-button--secondary {
	background: transparent;
	border-color: var(--ev-color-cta-secondary);
	color: var(--ev-color-cta-secondary);
}

.ev-button--secondary:hover {
	background: var(--ev-color-cta-secondary);
	color: var(--ev-color-text-on-accent);
}

/* Hero */
.ev-hero__logo {
	margin-bottom: var(--ev-space-lg);
}

.ev-hero__logo .custom-logo {
	height: 5.5rem;
	width: auto;
}

.ev-hero__tagline {
	color: var(--ev-color-text-muted);
	font-style: italic;
	font-size: var(--ev-font-size-sm);
	margin-bottom: var(--ev-space-lg);
}

.ev-hero__eyebrow {
	color: var(--ev-color-accent-cyan);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--ev-font-size-sm);
	font-weight: 700;
}

.ev-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--ev-space-md);
	flex-wrap: wrap;
	margin-top: var(--ev-space-lg);
}

.ev-hero__price {
	font-size: var(--ev-font-size-lg);
	font-weight: 700;
	margin-top: var(--ev-space-md);
}

.ev-hero__price span {
	font-weight: 400;
	font-size: var(--ev-font-size-sm);
	color: var(--ev-color-text-muted);
}

/*
 * A small decorative accent next to the CTA button rather than a full boxed
 * photo. The source image (media 46) is already pre-cropped to just the
 * toggle-switch shape (no label text, minimal padding), so it's shown at its
 * own natural aspect ratio here — no further object-fit cropping needed.
 */
.ev-hero__badge {
	display: inline-flex;
	width: 6rem;
	height: auto;
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
}

.ev-hero__badge img {
	width: 100%;
	height: auto;
	display: block;
}

.ev-hero__media img {
	border-radius: var(--ev-radius-xl);
	border: 1px solid var(--ev-color-border);
	width: 100%;
}

/*
 * Immersive variant: no card border/background, and the source photo's own
 * light backdrop is masked to fade into the page's dark background at the
 * edges (same technique as .ev-footer-brand__img), so the mockup reads as
 * sitting directly on the page rather than framed in a box.
 */
.ev-hero__media--immersive img {
	border: none;
	border-radius: 0;
	-webkit-mask-image: radial-gradient(ellipse 72% 75% at center, #000 42%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 75% at center, #000 42%, transparent 100%);
}

/*
 * Cards. Deliberately no `overflow: hidden` on .ev-card itself — that would
 * risk silently clipping title/excerpt text if a height calculation upstream
 * ever comes out smaller than the content (exactly what happened with the
 * first pass of the featured-card layout below). Corner-clipping is scoped
 * to .ev-card__media only, which is the one part that actually needs it.
 */
.ev-card {
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-lg);
	display: flex;
	flex-direction: column;
	box-shadow: var(--ev-shadow-sm);
}

/*
 * Card media sizes itself to the image's own natural aspect ratio (width:
 * 100%, height: auto) rather than being forced into a fixed-shape box.
 * A fixed box + object-fit: contain was the earlier approach, but a portrait
 * diagram inside a landscape-shaped box just produces big empty gutters —
 * technically not "cropped" but visually broken in its own way. Letting the
 * image define its own height means a landscape photo and a portrait
 * diagram each render at their true proportions with zero dead space,
 * at the cost of card heights varying across a grid — an acceptable, common
 * trade (most editorial sites do exactly this) next to visible gutters.
 */
.ev-card__media {
	background: var(--ev-color-surface-raised);
	overflow: hidden;
	border-radius: var(--ev-radius-lg) var(--ev-radius-lg) 0 0;
}

.ev-card__media img {
	width: 100%;
	height: auto;
	display: block;
}

/*
 * Featured (spotlight) card: media sits in its own column rather than a
 * fixed-height box, so the text column simply centers itself vertically
 * next to whatever height the image naturally renders at (via align-items:
 * center on the row) instead of both columns being forced to an arbitrary
 * shared height.
 */
.ev-card-grid--featured .ev-card:first-child .ev-card__media {
	border-radius: var(--ev-radius-lg) 0 0 var(--ev-radius-lg);
}

/*
 * Insights page's three pillar panels. Unlike .ev-card__media (which lets
 * each image keep its own natural aspect ratio, since a mixed grid doesn't
 * need to line up), these three are explicitly meant to read as symmetric —
 * so every panel photo is capped to the same height and centered, regardless
 * of whether the source photo is portrait or landscape.
 */
/*
 * Navy panels (2026-09-02), for contrast against the Insights hub's light
 * .ev-section--soft background. Hardcoded to the sitewide dark-mode surface/
 * border/text values rather than the var(--ev-color-*) tokens those names
 * normally resolve to here — .ev-section--soft redefines those same custom
 * properties to their on-light equivalents for everything inside it, so
 * referencing the var would just give back the light color being replaced.
 */
.ev-topic-panel {
	background: #16223a;
	border: 1px solid #22304a;
	border-radius: var(--ev-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--ev-shadow-sm);
}

.ev-topic-panel__media {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #1c2c4a;
	overflow: hidden;
	height: 12rem;
}

.ev-topic-panel__img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ev-topic-panel__heading {
	margin: 0;
	padding: var(--ev-space-lg) var(--ev-space-lg) 0;
	font-size: var(--ev-font-size-lg);
}

.ev-topic-panel__heading a {
	display: inline-flex;
	align-items: center;
	gap: var(--ev-space-2xs);
	color: #f4f6fb;
	text-decoration: none;
}

.ev-topic-panel__heading a:hover {
	color: var(--ev-color-accent-cyan);
}

.ev-topic-panel__list {
	list-style: none;
	margin: 0;
	padding: var(--ev-space-md) var(--ev-space-lg) var(--ev-space-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ev-topic-panel__list li {
	padding-block: var(--ev-space-sm);
	border-top: 1px solid #22304a;
}

.ev-topic-panel__list li:first-child {
	border-top: none;
	padding-top: 0;
}

.ev-topic-panel__list a {
	display: block;
	color: #f4f6fb;
	text-decoration: none;
	font-weight: 600;
	margin-bottom: var(--ev-space-2xs);
}

.ev-topic-panel__list a:hover {
	color: var(--ev-color-accent-cyan);
}

.ev-topic-panel__list .ev-card__meta {
	color: #b9c4d6;
}

/* Home page pillar-overview cards reuse the .ev-topic-panel shell but show a
   summary paragraph instead of a post list, since Home is meant to stay a
   high-level overview rather than a second Insights feed. */
.ev-topic-panel__desc {
	margin: 0;
	padding: var(--ev-space-md) var(--ev-space-lg) var(--ev-space-lg);
	flex: 1;
	color: #b9c4d6;
}

/*
 * Immersed list row (no card box) — separated by a hairline rule instead of
 * a border/shadow, so a long list of posts reads as one continuous column.
 */
.ev-insight-row {
	padding-block: var(--ev-space-lg);
	border-bottom: 1px solid var(--ev-color-border);
}

.ev-insight-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ev-insight-row .ev-card__title {
	margin-top: var(--ev-space-2xs);
}

/*
 * Decorative photo — soft, wide vignette (not a hard box) so a busy
 * photographic scene dissolves at the edges instead of reading as a tile.
 */
.ev-decorative-photo img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
	border-radius: 0;
	box-shadow: none;
	-webkit-mask-image: radial-gradient(ellipse 60% 62% at center, #000 22%, transparent 88%);
	mask-image: radial-gradient(ellipse 60% 62% at center, #000 22%, transparent 88%);
}

.ev-card__body {
	padding: var(--ev-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--ev-space-sm);
	flex: 1;
}

.ev-card__badge {
	display: inline-block;
	width: fit-content;
	background: var(--ev-color-surface-raised);
	color: var(--ev-color-accent-cyan);
	font-size: var(--ev-font-size-sm);
	font-weight: 600;
	padding: var(--ev-space-2xs) var(--ev-space-sm);
	border-radius: var(--ev-radius-sm);
}

.ev-card__title {
	font-size: var(--ev-font-size-lg);
	margin: 0;
}

.ev-card__title a {
	color: var(--ev-color-text);
	text-decoration: none;
}

.ev-card__title a:hover {
	color: var(--ev-color-accent-cyan);
}

.ev-card__meta {
	color: var(--ev-color-text-muted);
	font-size: var(--ev-font-size-sm);
	margin-top: auto;
}

/*
 * Digital product cards (2026-09-02) — navy, for contrast against the
 * Digital Products archive's light .ev-section--soft background, same
 * hardcoded-navy pattern as .ev-topic-panel above and for the same reason:
 * the section redefines --ev-color-* to on-light values, so referencing the
 * tokens here would just hand back the light colors this is replacing.
 */
.ev-card.ev-card--product {
	background: #16223a;
	border-color: #22304a;
}

.ev-card--product .ev-card__media {
	background: #1c2c4a;
}

.ev-card--product .ev-card__title a {
	color: #f4f6fb;
}

.ev-card--product .ev-card__title a:hover {
	color: var(--ev-color-accent-cyan);
}

.ev-card--product .ev-card__body p,
.ev-card--product .ev-card__meta {
	color: #b9c4d6;
}

/*
 * Persona rows — a circular photo layered over a decorative accent ring,
 * not a boxed/bordered card. The ring is pure CSS (no cutout artwork
 * available), offset behind the photo so the composition reads as layered
 * shapes rather than "picture in a box."
 */
.ev-persona-row__media {
	position: relative;
	width: 220px;
	height: 220px;
	margin-inline: auto;
}

.ev-persona-row__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px dashed var(--ev-color-accent-cyan);
	opacity: 0.5;
	transform: translate(14px, -14px);
}

.ev-persona-row__ring::before {
	content: "";
	position: absolute;
	inset: 22px;
	border-radius: 50%;
	background: var(--ev-color-accent-blue);
	opacity: 0.12;
}

.ev-persona-row__photo {
	position: absolute;
	inset: 18px;
	width: calc(100% - 36px);
	height: calc(100% - 36px);
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--ev-color-bg-soft);
	box-shadow: var(--ev-shadow-soft);
}

.ev-section--cream .ev-persona-row__photo {
	border-color: var(--ev-color-bg-cream);
}

.ev-persona-row__content {
	text-align: center;
}

.ev-persona-row__content h3 {
	margin-bottom: var(--ev-space-xs);
}

.ev-persona-row__content p {
	margin: 0 auto;
	max-width: 40ch;
}

@media (min-width: 64em) {
	.ev-persona-row__content {
		text-align: left;
	}

	.ev-persona-row__content p {
		margin: 0;
		max-width: 48ch;
	}

	.ev-persona-row--reverse .ev-persona-row__content {
		text-align: right;
	}

	.ev-persona-row--reverse .ev-persona-row__content p {
		margin-left: auto;
	}
}

/*
 * Product jump nav — sticky in-page anchor links for a long product detail
 * page. Sits below the site header (which isn't sticky, so this is the only
 * thing pinned) with its own semi-opaque background so content scrolling
 * beneath it doesn't show through illegibly.
 */
.ev-jump-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(11, 18, 32, 0.92);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--ev-color-border);
}

.ev-jump-nav__inner ul {
	display: flex;
	gap: var(--ev-space-lg);
	list-style: none;
	margin: 0;
	padding: var(--ev-space-sm) 0;
	overflow-x: auto;
	white-space: nowrap;
}

.ev-jump-nav__inner a {
	color: var(--ev-color-text-muted);
	text-decoration: none;
	font-size: var(--ev-font-size-sm);
	font-weight: 600;
}

.ev-jump-nav__inner a:hover,
.ev-jump-nav__inner a:focus-visible {
	color: var(--ev-color-accent-cyan);
}

/* Setup guide steps */
.ev-step-card {
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-lg);
	padding: var(--ev-space-lg);
}

.ev-step-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--ev-color-surface-raised);
	color: var(--ev-color-accent-cyan);
	font-weight: 700;
	margin-bottom: var(--ev-space-sm);
}

.ev-step-card h3 {
	font-size: var(--ev-font-size-base);
	margin-bottom: var(--ev-space-2xs);
}

.ev-step-card p {
	margin: 0;
	font-size: var(--ev-font-size-sm);
}

.ev-step-card__note {
	margin-top: var(--ev-space-sm);
	padding: var(--ev-space-sm);
	background: var(--ev-color-surface-raised);
	border-radius: var(--ev-radius-sm);
	font-size: var(--ev-font-size-sm);
}

.ev-step-card__note p {
	margin: 0;
}

.ev-setup-steps__download {
	margin-top: var(--ev-space-lg);
	margin-bottom: 0;
}

/*
 * Mockup tour rows — a screenshot framed in a simple "browser chrome" bar
 * (three dots, pure CSS, no icon assets needed) alongside its feature copy.
 * Media sizes at its own natural aspect ratio (same reasoning as
 * .ev-card__media elsewhere): no cropping, no letterboxing.
 */
.ev-mockup-row__frame {
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-lg);
	overflow: hidden;
	background: var(--ev-color-surface);
	box-shadow: var(--ev-shadow-md);
}

.ev-mockup-row__chrome {
	display: flex;
	gap: var(--ev-space-2xs);
	padding: var(--ev-space-sm);
	background: var(--ev-color-surface-raised);
}

.ev-mockup-row__chrome span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ev-color-border);
}

.ev-mockup-row__frame img {
	width: 100%;
	height: auto;
	display: block;
}

/* Reset the <button> wrapper back to looking like plain image content, plus a hover/focus cue that it's clickable. */
.ev-mockup-row__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.ev-mockup-row__trigger img {
	transition: transform 0.2s ease;
}

.ev-mockup-row__trigger:hover img,
.ev-mockup-row__trigger:focus-visible img {
	transform: scale(1.02);
}

.ev-mockup-row__trigger:focus-visible {
	outline: 2px solid var(--ev-color-accent-cyan);
	outline-offset: -2px;
}

/*
 * Scroll-reveal: only animates once a row scrolls into view (JS adds
 * --reveal, then is-visible on intersect) — starts fully visible with no
 * JS/motion, so nothing breaks or stays hidden if either is unavailable.
 */
.ev-mockup-row--reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.ev-mockup-row--reveal.is-visible {
	opacity: 1;
	transform: none;
}

/*
 * Lightbox overlay — one shared dialog reused by every mockup trigger.
 * Starts hidden via the [hidden] attribute (not just opacity), so it's
 * unreachable by keyboard/screen reader until actually opened.
 */
.ev-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The class selector above has higher cascade priority than the UA stylesheet's [hidden] rule, so it needs restating explicitly or the dialog would render even while hidden. */
.ev-lightbox[hidden] {
	display: none;
}

.ev-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 26, 0.85);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ev-lightbox.is-open .ev-lightbox__backdrop {
	opacity: 1;
}

.ev-lightbox__dialog {
	position: relative;
	max-width: min(90vw, 1400px);
	max-height: 90vh;
	transform: scale(0.96);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ev-lightbox.is-open .ev-lightbox__dialog {
	opacity: 1;
	transform: none;
}

.ev-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--ev-radius-lg);
	box-shadow: var(--ev-shadow-md);
}

.ev-lightbox__close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: var(--ev-color-surface);
	color: var(--ev-color-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ev-lightbox__close:hover,
.ev-lightbox__close:focus-visible {
	background: var(--ev-color-accent-cyan);
	color: var(--ev-color-surface);
}

/* Body scroll lock while the lightbox is open */
body.ev-lightbox-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.ev-mockup-row--reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ev-lightbox__backdrop,
	.ev-lightbox__dialog,
	.ev-mockup-row__trigger img {
		transition: none;
	}
}

.ev-mockup-row__eyebrow {
	color: var(--ev-color-accent-cyan);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--ev-font-size-sm);
	font-weight: 700;
}

.ev-mockup-row__content h3 {
	margin-bottom: var(--ev-space-sm);
}

/* Technical architecture / security features */
.ev-feature-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-md);
}

.ev-feature-list__item {
	border-left: 3px solid var(--ev-color-accent-cyan);
	padding-left: var(--ev-space-md);
}

.ev-feature-list__item h3 {
	font-size: var(--ev-font-size-base);
	margin-bottom: var(--ev-space-2xs);
}

.ev-feature-list__item p {
	margin: 0;
}

@media (min-width: 48em) {
	.ev-feature-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* CTA banner */
.ev-cta-banner {
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-lg);
	padding: var(--ev-space-xl);
	text-align: center;
}

/*
 * Photo variant: the image sits above the text in normal document flow — no
 * overlay, no scrim, nothing overlapping — at its own natural aspect ratio
 * (same reasoning as .ev-card__media: a fixed/cropped box behind text either
 * clips content or leaves gutters; stacking avoids both). The content block
 * gets its own solid background below the photo.
 */
.ev-cta-banner--photo {
	overflow: hidden;
	border-color: transparent;
	padding: 0;
}

.ev-cta-banner__media img {
	width: 100%;
	height: auto;
	display: block;
}

.ev-cta-banner--photo .ev-cta-banner__content {
	padding: var(--ev-space-xl);
}

/* Footer */
.ev-footer-columns h3 {
	font-size: var(--ev-font-size-base);
	color: var(--ev-color-text);
}

.ev-footer-columns ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ev-space-xs);
}

.ev-footer-columns a {
	color: var(--ev-color-text-muted);
	text-decoration: none;
}

.ev-footer-columns a:hover {
	color: var(--ev-color-accent-cyan);
}

.ev-footer-bottom {
	margin-top: var(--ev-space-xl);
	padding-top: var(--ev-space-lg);
	border-top: 1px solid var(--ev-color-border);
	color: var(--ev-color-text-muted);
	font-size: var(--ev-font-size-sm);
	text-align: center;
}

/*
 * Article. The container itself isn't width-capped — individual prose
 * elements are (below), so a plain paragraph still reads at a comfortable
 * measure, but a full-width child like .ev-article-media-row can use space
 * a fixed-width container would otherwise have blocked it from.
 */
.ev-article-content > p,
.ev-article-content > h2,
.ev-article-content > h3,
.ev-article-content > ul,
.ev-article-content > ol,
.ev-article-content > blockquote {
	max-width: 70ch;
}

/*
 * Fallback for a bare image not wrapped in .ev-article-media-row — capped
 * so a tall portrait graphic doesn't dominate the reading column the way an
 * uncapped one would (height stays auto, so nothing crops).
 */
.ev-article-content > p > img {
	max-width: 26rem;
	margin-inline: auto;
}

/*
 * A single standalone infographic (not paired with side-by-side text) —
 * deliberately not capped to the 70ch prose measure like .ev-article-media-row,
 * since a dense one-page infographic needs real width to stay legible, but
 * capped well short of full container width so it doesn't dominate the page.
 */
.ev-article-figure {
	max-width: 40rem;
	margin: var(--ev-space-xl) auto;
}

.ev-article-figure img {
	width: 100%;
	display: block;
	border-radius: var(--ev-radius-lg);
	border: 1px solid var(--ev-color-border);
}

.ev-article-figure figcaption {
	margin-top: var(--ev-space-sm);
	color: var(--ev-color-text-muted);
	font-size: var(--ev-font-size-sm);
	text-align: center;
}

/*
 * Pairs an inline image with its related text side by side (see
 * .ev-article-media-row in layout.css for the grid/breakpoint rules) instead
 * of every image stacking above or below a caption.
 */
.ev-article-media-row__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--ev-radius-lg);
	border: 1px solid var(--ev-color-border);
}

/* A decorative-photo nested here (Digital Products page) stays borderless — the bordered rule above is for screenshots/infographics that need a defined edge, not a vignette-blended photo. */
.ev-article-media-row__media .ev-decorative-photo img {
	border: none;
	border-radius: 0;
}

/* A circular persona-photo nested here (pillar pages using 'circle' => true) needs its sizing/crop/radius/border all re-asserted — .ev-article-media-row__media img above otherwise wins on specificity (width:100%/height:auto especially), letting a portrait source image overflow the ring as a tall oval instead of a clipped circle. */
.ev-article-media-row__media .ev-persona-row__photo {
	width: calc(100% - 36px);
	height: calc(100% - 36px);
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid var(--ev-color-bg-soft);
}

.ev-section--cream .ev-article-media-row__media .ev-persona-row__photo {
	border-color: var(--ev-color-bg-cream);
}

/*
 * A portrait-oriented photo (e.g. Home's robot photo, 768×1024) rendered at
 * the row's usual width:100% comes out far taller than a landscape photo at
 * that same width — capped by height instead, centered in the column, so it
 * reads as roughly the same visual size as the other rows' images.
 */
.ev-article-media-row__media--portrait {
	display: flex;
	justify-content: center;
}

.ev-article-media-row__media--portrait .ev-decorative-photo img,
.ev-article-media-row__media--portrait > img {
	width: auto;
	max-width: 100%;
	max-height: 24rem;
}

/* Empty image slot placeholder for a media row awaiting real photography — mirrors .evh-placeholder's intent (never a broken <img>, never an unrelated stand-in photo) for the non-.evh pages. */
.ev-media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--ev-space-md);
	background: var(--ev-color-surface-on-light);
	border-radius: var(--ev-radius-lg);
	border: 1px dashed var(--ev-color-border-on-light-cream);
	color: var(--ev-color-text-muted-on-light);
	font-size: var(--ev-font-size-sm);
}

.ev-article-media-row__text p {
	margin: 0;
}

/* Breadcrumbs */
.ev-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ev-space-2xs);
	list-style: none;
	margin: 0 0 var(--ev-space-lg);
	padding: 0;
	font-size: var(--ev-font-size-sm);
	color: var(--ev-color-text-muted);
}

.ev-back-link {
	font-size: var(--ev-font-size-sm);
	font-weight: 600;
	color: var(--ev-color-accent-cyan);
	text-decoration: none;
	white-space: nowrap;
}

.ev-back-link:hover {
	text-decoration: underline;
}

.ev-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: var(--ev-space-2xs);
	color: var(--ev-color-border);
}

/* Contact form feedback */
.ev-form-notice {
	padding: var(--ev-space-sm) var(--ev-space-md);
	border-radius: var(--ev-radius-sm);
	margin-bottom: var(--ev-space-md);
}

.ev-form-notice--success {
	background: rgba(34, 197, 94, 0.15);
	border: 1px solid var(--ev-color-success);
	color: var(--ev-color-text);
}

.ev-form-notice--error {
	background: rgba(239, 68, 68, 0.15);
	border: 1px solid var(--ev-color-error);
	color: var(--ev-color-text);
}

.ev-form-field {
	margin-bottom: var(--ev-space-md);
}

.ev-form-field textarea {
	width: 100%;
	min-height: 140px;
	resize: vertical;
}

.ev-form-field input[type="text"],
.ev-form-field input[type="email"] {
	width: 100%;
}

/* Honeypot — hidden from real users, still present for bots to fill */
.ev-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Responsive 16:9 box for the Contact page's map embed — the iframe itself can't be sized with plain width/height and stay responsive. */
.ev-map-embed {
	position: relative;
	width: 100%;
	padding-top: 42%;
	margin-block: var(--ev-space-lg);
	border-radius: var(--ev-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ev-color-border);
}

.ev-map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Case-study article components (2026-09-04) — headline stat tiles, data
 * tables, inline SVG charts, and change-management/lessons cards, first
 * built for the agentic AI billing/collections case study. Not capped to
 * .ev-article-content's 70ch prose measure (see the rule below) since a
 * 4-column stat grid or a wide data table needs real width to stay legible.
 */
.ev-stat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-md);
	margin-block: var(--ev-space-xl);
}

.ev-stat-tile {
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-lg);
	padding: var(--ev-space-lg);
	text-align: center;
}

.ev-stat-tile__value {
	display: block;
	font-size: var(--ev-font-size-2xl);
	font-weight: 700;
	color: var(--ev-color-accent-cyan);
	line-height: 1.1;
}

.ev-stat-tile__label {
	display: block;
	margin-top: var(--ev-space-2xs);
	color: var(--ev-color-text-muted);
	font-size: var(--ev-font-size-sm);
}

@media (min-width: 48em) {
	.ev-stat-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Data tables — scrolls within its own container on narrow viewports instead of breaking the page layout. */
.ev-table-wrap {
	overflow-x: auto;
	margin-block: var(--ev-space-lg);
}

.ev-article-content table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: var(--ev-font-size-sm);
}

.ev-article-content th,
.ev-article-content td {
	padding: var(--ev-space-sm) var(--ev-space-md);
	border-bottom: 1px solid var(--ev-color-border);
	text-align: left;
	vertical-align: top;
}

.ev-article-content th {
	color: var(--ev-color-text);
	font-weight: 700;
	background: var(--ev-color-surface);
}

.ev-article-content tbody tr:last-child td {
	border-bottom: none;
}

.ev-article-content caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	margin-bottom: var(--ev-space-xs);
}

/* Chart block — inline SVG scales to its container; the data table immediately below it (in the article markup) is the screen-reader text-equivalent. */
.ev-chart-block {
	margin-block: var(--ev-space-xl);
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-lg);
	padding: var(--ev-space-lg);
}

.ev-chart-block svg {
	width: 100%;
	height: auto;
	display: block;
}

.ev-chart-block figcaption {
	margin-top: var(--ev-space-sm);
	color: var(--ev-color-text-muted);
	font-size: var(--ev-font-size-sm);
	text-align: center;
}

/* Change-management challenge/action/result narrative cards. */
.ev-playbook-card {
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	border-left: 4px solid var(--ev-color-accent-cyan);
	border-radius: var(--ev-radius-md);
	padding: var(--ev-space-lg);
	margin-block: var(--ev-space-lg);
}

.ev-playbook-card__row {
	margin: 0;
	padding-block: var(--ev-space-2xs);
}

.ev-playbook-card__row + .ev-playbook-card__row {
	border-top: 1px solid var(--ev-color-border);
	padding-top: var(--ev-space-sm);
	margin-top: var(--ev-space-sm);
}

.ev-playbook-card__tag {
	display: inline-block;
	font-size: var(--ev-font-size-sm);
	font-weight: 700;
	color: var(--ev-color-accent-cyan);
	margin-right: var(--ev-space-xs);
}

/* Numbered "lessons" list — a shareable, scannable takeaway section, not a wall of text. */
.ev-lessons-list {
	list-style: none;
	margin: var(--ev-space-lg) 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-md);
	max-width: none;
}

.ev-lessons-list li {
	display: flex;
	gap: var(--ev-space-md);
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	border-radius: var(--ev-radius-md);
	padding: var(--ev-space-md) var(--ev-space-lg);
}

.ev-lessons-list__num {
	flex: none;
	font-size: var(--ev-font-size-lg);
	font-weight: 700;
	color: var(--ev-color-accent-cyan);
}

@media (min-width: 64em) {
	.ev-lessons-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Video showcase — a centered product-demo video with heading/CTA, for the
 * Digital Products archive page (2026-09-05). Deliberately not paired with
 * side text like .ev-article-media-row; the video is the whole point of
 * this block, so it's centered and capped for a comfortable viewing width
 * rather than sized to fill a two-column grid.
 */
.ev-video-showcase {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

.ev-video-showcase__player {
	width: 100%;
	display: block;
	margin-top: var(--ev-space-lg);
	border-radius: var(--ev-radius-lg);
	border: 1px solid var(--ev-color-border);
	box-shadow: var(--ev-shadow-md);
	background: #000;
}

.ev-video-showcase__cta {
	margin-top: var(--ev-space-lg);
}

/*
 * Flip carousel — a click-through, fade-transition preview of a handful of
 * product screens (Digital Products archive page, 2026-09-05). Deliberately
 * plain "swap the active slide" rather than a sliding-track carousel: fewer
 * moving parts, and .ev-flip-carousel__slide's own object-fit/aspect-ratio
 * keeps every screen the same frame size regardless of source image shape.
 */
.ev-flip-carousel {
	max-width: 48rem;
	margin: var(--ev-space-xl) auto 0;
}

.ev-flip-carousel__viewport {
	position: relative;
}

.ev-flip-carousel__slide {
	display: none;
}

.ev-flip-carousel__slide.is-active {
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.ev-flip-carousel__slide.is-active {
		animation: ev-flip-fade 300ms ease;
	}
}

@keyframes ev-flip-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.ev-flip-carousel__slide img {
	width: 100%;
	display: block;
	border-radius: var(--ev-radius-lg);
	border: 1px solid var(--ev-color-border);
}

.ev-flip-carousel__caption {
	margin-top: var(--ev-space-sm);
	color: var(--ev-color-text-muted);
	font-size: var(--ev-font-size-sm);
	text-align: center;
}

.ev-flip-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ev-space-md);
	margin-top: var(--ev-space-md);
}

.ev-flip-carousel__arrow {
	background: var(--ev-color-surface);
	border: 1px solid var(--ev-color-border);
	color: var(--ev-color-text);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ev-flip-carousel__arrow:hover {
	color: var(--ev-color-accent-cyan);
	border-color: var(--ev-color-accent-cyan);
}

.ev-flip-carousel__counter {
	color: var(--ev-color-text-muted);
	font-size: var(--ev-font-size-sm);
	min-width: 3.5rem;
	text-align: center;
}