/**
 * Layout primitives: page container, header/footer grid, generic section rhythm.
 * Mobile-first — base rules are the small-screen layout, breakpoints add complexity up.
 */

.ev-container {
	width: 100%;
	max-width: var(--ev-content-max-width);
	margin-inline: auto;
	padding-inline: var(--ev-space-md);
}

/* Wider variant for a section that should spread further toward the page edges than the standard 1200px reading-width container (e.g. Home's Latest Insights rows, which looked cramped/centered at the standard width on wide screens). */
.ev-container--wide {
	max-width: 1500px;
}

.ev-section {
	padding-block: var(--ev-space-2xl);
}

/*
 * Section color variants. Redefining the core tokens here — rather than
 * overriding every component's colors individually — means any component
 * dropped into one of these sections re-themes itself automatically via the
 * var(--ev-color-*) references already in components.css.
 */
.ev-section--soft {
	background: var(--ev-color-bg-soft);
	--ev-color-text: var(--ev-color-text-on-light);
	--ev-color-text-muted: var(--ev-color-text-muted-on-light);
	--ev-color-surface: var(--ev-color-surface-on-light);
	--ev-color-surface-raised: #e4e9f8;
	--ev-color-border: var(--ev-color-border-on-light-soft);
	--ev-color-accent-cyan: var(--ev-color-accent-cyan-on-light);
	--ev-color-accent-blue: var(--ev-color-accent-blue-on-light);
}

/*
 * Background texture (media 134, bentley-co, a subtle plaster-wall photo)
 * applied 2026-09-02 across every sitewide (non-Home) cream section — tinted
 * with the section's own cream color so it reads as texture, not a photo,
 * and every existing --ev-color-* override below (set for card/text
 * contrast on a light background) stays correct regardless of the image.
 */
.ev-section--cream {
	background-image: linear-gradient(rgba(247, 244, 238, 0.85), rgba(247, 244, 238, 0.85)), url('/wp-content/uploads/2026/09/bentley-co-oZg4YuTAQek-unsplash-864x1536.jpg');
	background-size: cover;
	background-position: center;
	--ev-color-text: var(--ev-color-text-on-light);
	--ev-color-text-muted: var(--ev-color-text-muted-on-light);
	--ev-color-surface: var(--ev-color-surface-on-light);
	--ev-color-surface-raised: #f0e9d8;
	--ev-color-border: var(--ev-color-border-on-light-cream);
	--ev-color-accent-cyan: var(--ev-color-accent-cyan-on-light);
	--ev-color-accent-blue: var(--ev-color-accent-blue-on-light);
}

.ev-section--soft .ev-card,
.ev-section--cream .ev-card {
	border-color: transparent;
	box-shadow: var(--ev-shadow-soft);
}

.ev-site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ev-space-md);
	padding-block: var(--ev-space-sm);
	border-bottom: 1px solid var(--ev-color-border);
}

.ev-site-footer {
	background: var(--ev-color-bg-alt);
	border-top: 1px solid var(--ev-color-border);
	padding-block: var(--ev-space-2xl) var(--ev-space-lg);
	margin-top: var(--ev-space-3xl);
}

.ev-footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-xl);
}

.ev-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-xl);
	align-items: center;
	padding-block: var(--ev-space-2xl);
}

/*
 * Full-bleed background art, the raw photo untinted (2026-09-02, originally
 * a wall-texture photo; swapped 2026-09-05 to the keyboard/mouse photo —
 * see the $overview_bg comment in single-digital_product.php). Text below
 * is bold black to stay readable against this light background.
 *
 * Lives on its own full-bleed wrapper (.ev-hero--product-bg, the outer
 * <section>) rather than on .ev-hero--product itself, since that class also
 * carries .ev-container's max-width/centering — putting the background image
 * there left the page's navy body background visible on both sides beyond
 * the capped content width instead of spanning edge to edge.
 */
.ev-hero--product-bg {
	background-image: var(--overview-bg-image);
	background-size: cover;
	background-position: center;
}

#overview .ev-hero__tagline,
#overview .ev-hero__eyebrow,
#overview .ev-hero__content h1,
#overview .ev-hero__content p {
	color: #000;
	font-weight: 700;
}

/*
 * The default secondary button (transparent fill, teal border/text — see
 * .ev-button--secondary in components.css) reads as nearly invisible against
 * this section's light photo background. Solid fill instead, matching the
 * bold-black text treatment above.
 */
#overview .ev-button--secondary {
	background: #ffffff;
	border-color: #101a2e;
	color: #101a2e;
}

#overview .ev-button--secondary:hover {
	background: #101a2e;
	border-color: #101a2e;
	color: #ffffff;
}

/* No hero media image passed — let the content take the full row instead of leaving a blank column. */
.ev-hero__content:only-child {
	grid-column: 1 / -1;
	max-width: 42rem;
}

.ev-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-lg);
}

.ev-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-xl);
	align-items: center;
}

.ev-persona-rows {
	display: flex;
	flex-direction: column;
	gap: var(--ev-space-2xl);
}

.ev-persona-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-lg);
	align-items: center;
}

/*
 * Article media row: pairs an inline post image with its related text
 * side by side instead of stacking them, and — unlike the plain-text
 * elements in .ev-article-content (capped to a readable measure) —
 * deliberately spans the full article width so a post isn't just a narrow
 * column of vertically stacked image/caption pairs.
 */
.ev-article-media-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-lg);
	align-items: center;
	margin-block: var(--ev-space-xl);
}

/*
 * Wraps the Home page's three Latest Insights rows with a bigger gap than
 * .ev-article-media-row's own margin-block gives it on its own (siblings'
 * top/bottom margins collapse to the larger of the two, not their sum) — the
 * rows were reading as cluttered together without it. Zeroes out each row's
 * own margin so the two don't stack.
 */
.ev-insights-rows {
	display: flex;
	flex-direction: column;
	gap: var(--ev-space-3xl);
}

.ev-insights-rows .ev-article-media-row {
	margin-block: 0;
}

.ev-setup-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-lg);
}

/* Insights page's three pillar cards — one column stacked until there's room for all three side by side, so they never end up two-and-a-half wide. */
.ev-topic-panels {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-xl);
}

.ev-breadcrumb-bar {
	padding-block: var(--ev-space-md) var(--ev-space-xs);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ev-space-sm);
}

/*
 * Mockup tour: same criss-cross reasoning as .ev-persona-row — a page full
 * of screenshots reads as a wall of near-identical stacked blocks unless
 * alternating sides breaks up the rhythm.
 */
.ev-mockup-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ev-space-xl);
	align-items: center;
	padding-block: var(--ev-space-xl);
}

/* Anchor targets land below the sticky jump nav instead of tucked under it. */
#overview,
#setup-guide,
#mockup-tour,
#features,
#cta {
	scroll-margin-top: 4.5rem;
}

/* md: 768px */
@media (min-width: 48em) {
	.ev-footer-columns {
		grid-template-columns: repeat(3, 1fr);
	}

	.ev-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ev-persona-row {
		grid-template-columns: 220px 1fr;
	}

	.ev-setup-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * Criss-cross: even-indexed rows keep photo-left/text-right (source
	 * order), odd rows swap to text-left/photo-right — so two rows never
	 * read as identical stacked blocks.
	 */
	.ev-persona-row--reverse {
		grid-template-columns: 1fr 220px;
	}

	.ev-persona-row--reverse .ev-persona-row__media {
		order: 2;
	}

	.ev-persona-row--reverse .ev-persona-row__content {
		order: 1;
	}
}

/* lg: 1024px */
@media (min-width: 64em) {
	.ev-hero,
	.ev-two-col {
		grid-template-columns: 1fr 1fr;
	}

	.ev-hero--product {
		grid-template-columns: 0.9fr 1.6fr;
		gap: var(--ev-space-xl);
	}

	/*
	 * Bleeds past the container's own right edge — both to render the mockup
	 * roughly double its previous size, and because a hard container-width
	 * cutoff on the right would itself read as another visible seam right
	 * next to the one the mask already fixes on the other three sides.
	 * body has overflow-x: hidden as a safety net for this on narrow screens.
	 */
	.ev-hero--product .ev-hero__media {
		width: 145%;
		max-width: none;
		margin-right: calc(-45% - var(--ev-space-md));
	}

	.ev-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * Criss-cross layouts: flip the hero's image/text order per-instance
	 * (pass reverse:true to the hero component) instead of every page
	 * repeating the same image-on-the-right arrangement.
	 */
	.ev-hero--reverse .ev-hero__content {
		order: 2;
	}

	.ev-hero--reverse .ev-hero__media {
		order: 1;
	}

	/*
	 * A "featured" grid gives its first card a larger, two-column spotlight
	 * treatment instead of every card being an identical grid cell — pass
	 * featured:true to the card-grid component where a lead item makes sense.
	 */
	.ev-card-grid--featured .ev-card:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		gap: 0;
	}

	/*
	 * A tall portrait graphic stretched to fill the column's full width
	 * dominates the featured card. Capping it and centering leaves it as a
	 * clean supporting visual instead of the whole column being one giant
	 * image (height stays auto throughout, so this is a size cap, not a crop).
	 */
	.ev-card-grid--featured .ev-card:first-child .ev-card__media img {
		max-width: 18rem;
		margin-inline: auto;
	}

	.ev-card-grid--featured .ev-card:first-child .ev-card__title {
		font-size: var(--ev-font-size-xl);
	}

	.ev-card-grid--featured .ev-card:first-child .ev-card__body {
		justify-content: center;
	}

	.ev-article-media-row {
		grid-template-columns: 1fr 1fr;
		gap: var(--ev-space-2xl);
	}

	/* Extra column gap for the Home Latest Insights rows specifically — text and image read as too close together at the standard gap once the row itself got wider. */
	.ev-insights-rows .ev-article-media-row {
		gap: var(--ev-space-3xl);
	}

	/* Three equal, symmetric columns — grid's default row stretch also keeps all three panels the same height regardless of how many posts each pillar has. */
	.ev-topic-panels {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ev-space-xl);
	}

	/* Alternate sides per-row (pass reverse:true-equivalent via the --reverse class) so a post with more than one paired image doesn't repeat the same side every time. */
	.ev-article-media-row--reverse .ev-article-media-row__media {
		order: 2;
	}

	.ev-article-media-row--reverse .ev-article-media-row__text {
		order: 1;
	}

	.ev-setup-steps {
		grid-template-columns: repeat(4, 1fr);
	}

	.ev-mockup-row {
		grid-template-columns: 1fr 1fr;
		gap: var(--ev-space-2xl);
	}

	.ev-mockup-row--reverse .ev-mockup-row__media {
		order: 2;
	}

	.ev-mockup-row--reverse .ev-mockup-row__content {
		order: 1;
	}
}