/* Homepage-only layout — loaded only on the front page.
   Shared primitives (.section, .section-inner, .cta-band) live in the
   base child theme style.css since they're used site-wide, not just here.

   This page is built with genuine Elementor containers (not plain HTML).
   Every row-level class below is also an Elementor container, which always
   carries Elementor's own ".e-con e-flex" classes regardless of the
   container_type setting we pass. Elementor's display/grid-template values
   are set via CSS custom properties consumed at the SAME specificity as our
   class selectors (single class), so our rule wins on load-order alone
   (child theme CSS is enqueued after Elementor's) — but the two-class
   ".e-con.e-flex { flex: ... }" sizing rule is NOT a tie, it beats a single
   class outright (see handoff.md gotcha #2). "!important" below is
   defensive insurance against that, not strictly required for "display". */

/* Hero */

.hero__inner {
	max-width: var( --cpod-container-width );
	margin: 0 auto;
	padding: var( --cpod-space-xl ) var( --cpod-space-md );
	display: grid !important;
	grid-template-columns: 1.1fr 1fr;
	gap: var( --cpod-space-xl );
	align-items: center;
}

.hero__text p {
	color: var( --cpod-color-text-muted );
	font-size: 1.0625rem;
}

.hero__image img {
	width: 100%;
	height: auto;
	border-radius: var( --cpod-radius-md );
	display: block;
}

@media ( max-width: 782px ) {
	.hero__inner {
		grid-template-columns: 1fr;
	}

	.hero__image {
		order: -1;
	}
}

/* Trust bar */

.trust-bar {
	background: var( --cpod-color-primary );
	color: var( --cpod-color-on-primary );
	padding: var( --cpod-space-lg ) var( --cpod-space-md );
}

.trust-bar__grid {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --cpod-space-md );
	text-align: center;
	justify-items: center;
}

.trust-bar__item {
	display: flex;
	flex-direction: column !important;
	align-items: center;
	gap: var( --cpod-space-3xs );
	max-width: 220px;
}

/*
 * The icon (svg), bold stat, and description text are all raw HTML inside
 * a SINGLE Elementor text-editor widget (not three separate flex items),
 * so ".trust-bar__item"'s own flex-column setting has nothing to act on —
 * it only ever had one child. Stack + center *within* that one widget here
 * instead. Also: Elementor's kit CSS sets ".elementor-widget-text-editor
 * { color: var(--e-global-color-text) }" (a dark colour) directly on this
 * same element — an explicit rule on the element itself, which overrides
 * whatever it would otherwise have inherited from ".trust-bar" regardless
 * of specificity/load order, since inheritance always loses to any
 * explicit (even equal-specificity-elsewhere) rule on the element itself.
 * Re-declaring color here fixes that.
 */
.trust-bar__item .elementor-widget-text-editor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --cpod-space-3xs );
	color: var( --cpod-color-on-primary );
}

.trust-bar__item svg {
	width: 28px;
	height: 28px;
}

.trust-bar__item strong {
	font-family: var( --cpod-font-heading );
	font-size: 1.375rem;
}

@media ( max-width: 782px ) {
	.trust-bar__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.trust-bar__grid {
		grid-template-columns: 1fr;
	}
}

/* Card grids */

.card-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --cpod-space-md );
}

/* ".card" used to only ever be a plain "<a class=card>" (pre-Elementor
   homepage). Elementor-built cards are containers (a <div>, since Elementor
   containers have no working "link to" control in this free version — see
   handoff.md) with a ".card-link-overlay" stretched-link <a> absolutely
   positioned inside, so these rules target the class generically rather
   than requiring an anchor element, and cover both cases. */

.card {
	position: relative;
	text-decoration: none;
	color: var( --cpod-color-text );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover,
.card:focus-within,
a.card:focus-visible {
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

.card h3 {
	margin-top: 0;
	font-size: 1.125rem;
}

.card p {
	color: var( --cpod-color-text-muted );
	margin-bottom: 0;
}

/* Stretched-link pattern: makes the whole card clickable while the visible
   heading/description stay as separate, individually Elementor-editable
   widgets. The link text itself is visually hidden but still announced to
   screen readers (kept in normal flow width 1px, not display:none). */

/*
 * Every Elementor widget wrapper div gets "position: relative" by default
 * (Elementor's own frontend.min.css, ".elementor-widget{position:relative}").
 * Since the overlay <a> lives inside its own text-editor widget, without
 * this reset it positions itself relative to that tiny widget wrapper
 * (sized to its near-invisible content) instead of the whole ".card" —
 * making the "stretched link" cover almost no clickable area at all. This
 * class goes on the widget wrapper (via cpod_text_editor()'s $css_classes
 * argument) to opt it back out, so the browser's containing-block search
 * continues up to ".card" (position: relative) instead.
 */
.card-link-overlay-wrap {
	position: static;
}

.card-link-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card-link-overlay span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Approach section */

.approach {
	display: grid !important;
	grid-template-columns: 1fr 1.2fr;
	gap: var( --cpod-space-xl );
	align-items: center;
}

.approach__image img {
	width: 100%;
	height: auto;
	border-radius: var( --cpod-radius-md );
	display: block;
}

.approach__steps {
	padding-left: 1.25em;
	color: var( --cpod-color-text-muted );
}

.approach__steps li {
	margin-bottom: var( --cpod-space-2xs );
}

@media ( max-width: 782px ) {
	.approach {
		grid-template-columns: 1fr;
	}
}

/* Team grid */

.team-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --cpod-space-md );
}

.team-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var( --cpod-radius-sm );
	margin-bottom: var( --cpod-space-xs );
}

.team-card h3 {
	margin: 0;
	font-size: 1.125rem;
}

.team-card__role {
	color: var( --cpod-color-primary );
	font-weight: 600;
	margin: 0 0 var( --cpod-space-2xs );
}

.section__link {
	text-align: center;
	margin-top: var( --cpod-space-md );
	margin-bottom: 0;
}

/* Specialist interests */

.interests {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: var( --cpod-space-xl );
	align-items: center;
}

.interests__list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --cpod-space-xs );
}

.interests__list a {
	font-weight: 600;
}

.interests__image img {
	width: 100%;
	height: auto;
	border-radius: var( --cpod-radius-md );
	display: block;
}

@media ( max-width: 782px ) {
	.interests {
		grid-template-columns: 1fr;
	}

	.interests__image {
		order: -1;
	}
}

/* Locations */

.location-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var( --cpod-radius-sm );
	margin-bottom: var( --cpod-space-xs );
}