/* ==========================================================================
   Agrivencia — premium refinements
   Three jobs, in order:
   1. Style the media slots the existing sections gained.
   2. Style the typeahead the header search builds.
   3. Raise the finish of the whole platform — type detail, edge quality,
      focus craft — without changing any layout that already works.
   ========================================================================== */

/* ==========================================================================
   1. Media inside the existing sections
   ========================================================================== */

/* --- Hero: the photograph sits under the existing grain/field scrim ---
   The hero already paints the module colour. The photograph goes beneath
   that treatment rather than replacing it, so the module stays identifiable
   at a glance and the headline keeps its contrast either way. */

.agv-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 0;
	aspect-ratio: auto;
}

.agv-hero__media::after { box-shadow: none; }
.agv-hero__media .agv-media__img { height: 100%; }

/* When a real photograph is present, deepen the scrim so the type holds. */
.agv-hero__media.agv-media--real ~ .agv-hero__bg {
	background: linear-gradient(
		105deg,
		color-mix(in srgb, var(--agv-mod-deep) 88%, transparent) 0%,
		color-mix(in srgb, var(--agv-mod-base) 62%, transparent) 52%,
		color-mix(in srgb, var(--agv-mod-deep) 42%, transparent) 100%
	);
}

/* An unfilled slot must not fight the module colour, so it drops right back. */
.agv-hero__media.agv-media--slot { opacity: .28; }
.agv-hero__media.agv-media--slot .agv-media__brief,
.agv-hero__media.agv-media--slot .agv-media__badge { display: none; }

.agv-hero__inner { z-index: 2; }
.agv-hero__bg { z-index: 1; }

/* --- Hero split: the panel carries a 4:3 crop --------------------- */

.agv-hero__panelmedia {
	margin-top: var(--agv-s4);
	border-radius: var(--agv-r-sm);
}

/* --- Gallery: real screens replace the abstract frames ------------ */

.agv-shot__media { border-radius: var(--agv-r-sm); }
.agv-shot .agv-figure { gap: 0; }
.agv-shot__media .agv-media__brief { max-width: 26ch; }

/* --- Case study: portrait beside the subject, scene below --------- */

.agv-case__media {
	width: 68px;
	flex: none;
	border-radius: var(--agv-r-pill);
	aspect-ratio: 1;
}
.agv-case__media .agv-media__brief,
.agv-case__media .agv-media__badge { display: none; }
.agv-case__media .agv-media__mark { grid-row: 1 / -1; align-self: center; width: 32px; height: 32px; }
.agv-case__media .agv-media__mark .agv-icon { width: 16px; height: 16px; }

.agv-case__head { display: flex; align-items: center; gap: var(--agv-s4); flex-wrap: wrap; }

/* --- Personas and persona detail: portraits ----------------------- */

.agv-persona__media,
.agv-pdetail__media {
	width: 56px;
	flex: none;
	aspect-ratio: 1;
	border-radius: var(--agv-r-pill);
}
.agv-persona__media .agv-media__brief,
.agv-persona__media .agv-media__badge,
.agv-pdetail__media .agv-media__brief,
.agv-pdetail__media .agv-media__badge { display: none; }
.agv-persona__media .agv-media__mark,
.agv-pdetail__media .agv-media__mark { grid-row: 1 / -1; align-self: center; width: 28px; height: 28px; background: none; }
.agv-persona__media .agv-media__mark .agv-icon,
.agv-pdetail__media .agv-media__mark .agv-icon { width: 15px; height: 15px; }

.agv-pdetail__media { width: 76px; }

/* Dormant until real attributed testimonials exist. */
.agv-quote__media { width: 52px; aspect-ratio: 1; border-radius: var(--agv-r-pill); flex: none; }

/* --- Video: the facade replaces the old button -------------------- */

.agv-video__stage { width: 100%; }

/* --- Map ---------------------------------------------------------- */

.agv-mapsec__media {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	aspect-ratio: auto;
	z-index: 0;
}
.agv-mapsec__media::after { box-shadow: none; }
.agv-mapsec__media .agv-media__img { height: 100%; }
.agv-mapsec__media.agv-media--slot { opacity: .5; }
.agv-mapsec__canvas { position: relative; isolation: isolate; }
.agv-mapsec__pin { z-index: 2; }

/* --- Product, vendor, logo and resource cards --------------------- */

.agv-product__media { border-radius: var(--agv-r-sm); margin-bottom: var(--agv-s3); }

.agv-vendor__logo {
	width: 96px;
	border-radius: var(--agv-r-xs);
	margin-bottom: var(--agv-s3);
	background: var(--agv-surface-2);
}

.agv-logos__media {
	width: 100%;
	max-width: 148px;
	border-radius: var(--agv-r-xs);
	background: none;
}
.agv-logos__media::after { box-shadow: none; }
.agv-logos__media .agv-media__wash { opacity: .5; }
.agv-logos__media .agv-media__img { object-fit: contain; padding: var(--agv-s2); }

.agv-rescard__cover { border-radius: var(--agv-r-sm); margin-bottom: var(--agv-s3); }

.agv-leadgen__cover {
	width: 168px;
	margin-top: var(--agv-s5);
	border-radius: var(--agv-r-xs);
	box-shadow: var(--agv-sh-3);
}

@media (max-width: 700px) {
	.agv-leadgen__cover { width: 120px; }
	.agv-case__media { width: 52px; }
}

/* ==========================================================================
   2. The header typeahead
   ========================================================================== */

.agv-search { position: relative; }

.agv-typeahead {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: var(--agv-z-panel);
	margin: 0;
	padding: var(--agv-s2);
	list-style: none;
	max-height: min(62vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--agv-surface);
	color: var(--agv-ink);
	border: 1px solid var(--agv-line);
	border-radius: var(--agv-r);
	box-shadow: var(--agv-sh-4);
}

.agv-typeahead[hidden] { display: none !important; }

.agv-typeahead__option {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "kind title" ". summary";
	align-items: baseline;
	gap: 2px var(--agv-s3);
	margin: 0;
	padding: var(--agv-s3);
	border-radius: var(--agv-r-sm);
	cursor: pointer;
	scroll-margin: var(--agv-s2);
}

.agv-typeahead__option:hover,
.agv-typeahead__option[aria-selected="true"] {
	background: var(--agv-mod-wash);
	outline: 1px solid var(--agv-mod-ring);
}

.agv-typeahead__kind {
	grid-area: kind;
	font-family: var(--agv-mono);
	font-size: var(--agv-t-xs);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--agv-mod-base);
	background: var(--agv-mod-tint);
	padding: .12rem .4rem;
	border-radius: var(--agv-r-xs);
	white-space: nowrap;
}

.agv-typeahead__title {
	grid-area: title;
	font-weight: 600;
	font-size: var(--agv-t-base);
	line-height: 1.3;
}

.agv-typeahead__summary {
	grid-area: summary;
	font-size: var(--agv-t-sm);
	line-height: 1.45;
	color: var(--agv-ink-4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.agv-typeahead__empty {
	padding: var(--agv-s4);
	margin: 0;
	font-size: var(--agv-t-sm);
	color: var(--agv-ink-4);
	text-align: center;
}

/* The status line is for screen readers; it must not take layout space. */
.agv-typeahead-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 760px) {
	.agv-typeahead {
		position: fixed;
		left: var(--agv-gutter);
		right: var(--agv-gutter);
		top: auto;
		max-height: 50vh;
	}
}

/* ==========================================================================
   3. The eligibility result, rendered by JS
   ========================================================================== */

.agv-elig__resultdetail {
	margin: var(--agv-s2) 0 0;
	font-size: var(--agv-t-md);
	line-height: 1.55;
}

.agv-elig__resultnote {
	margin: var(--agv-s3) 0 0;
	padding-top: var(--agv-s3);
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: var(--agv-t-sm);
	opacity: .85;
}

.agv-elig__result:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ==========================================================================
   4. Finish
   ========================================================================== */

/* --- Type detail --------------------------------------------------- */

/* Headings get optical sizing and balanced wrapping; body text gets a
   measure it can actually be read at. */
h1, h2, h3, .agv-hero__title, .agv-surface__title, .agv-shead__title {
	text-wrap: balance;
	letter-spacing: var(--agv-track-tight);
}

.agv-hero__standfirst,
.agv-surface__intro,
.agv-shead__intro { text-wrap: pretty; }

.agv-prose p,
.agv-prose li { max-width: 68ch; }

/* Figures line up on the baseline grid wherever they carry digits. */
.agv-num,
.agv-panel__value,
.agv-hero__statv,
.agv-stat__value,
.agv-kpi__value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Prevent a lone word on its own line at the end of a standfirst. */
.agv-hero__standfirst { text-wrap: balance; }

/* --- Edge quality -------------------------------------------------- */

/* A single consistent focus treatment across the platform. Two variants,
   because the same ring cannot work on white and on the module colour. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--agv-mod-base);
	outline-offset: 2px;
	border-radius: var(--agv-r-xs);
}

:where(.agv-tone--deep, .agv-tone--colour) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: #fff;
}

/* Never remove the outline for mouse users without giving it back for
   keyboard users — this is the rule that keeps that honest. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* Selection in the house colour rather than the browser blue. */
::selection {
	background: color-mix(in srgb, var(--agv-mod-base) 24%, transparent);
	color: var(--agv-ink);
}
:where(.agv-tone--deep, .agv-tone--colour) ::selection {
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

/* Scrollbars, where the platform draws its own scrolling regions. */
.agv-scroll,
.agv-typeahead {
	scrollbar-width: thin;
	scrollbar-color: var(--agv-line) transparent;
}
.agv-scroll::-webkit-scrollbar,
.agv-typeahead::-webkit-scrollbar { height: 10px; width: 10px; }
.agv-scroll::-webkit-scrollbar-track,
.agv-typeahead::-webkit-scrollbar-track { background: transparent; }
.agv-scroll::-webkit-scrollbar-thumb,
.agv-typeahead::-webkit-scrollbar-thumb {
	background: var(--agv-line);
	border-radius: var(--agv-r-pill);
	border: 3px solid transparent;
	background-clip: content-box;
}

/* --- Interaction weight -------------------------------------------- */

/* Buttons lift by a hair, not by a bounce. The platform is used one-handed
   on a tablet in a yard; controls should feel solid, not springy. */
.agv-btn {
	transition:
		background-color var(--agv-fast) var(--agv-ease),
		border-color var(--agv-fast) var(--agv-ease),
		color var(--agv-fast) var(--agv-ease),
		box-shadow var(--agv-fast) var(--agv-ease),
		transform var(--agv-fast) var(--agv-ease);
}
.agv-btn:hover { transform: translateY(-1px); }
.agv-btn:active { transform: translateY(0); }

/* Cards that are links get a considered hover rather than a shadow bloom. */
:where(a).agv-card,
:where(a).agv-shopcard,
:where(a).agv-doccard,
:where(a).agv-rescard {
	transition: border-color var(--agv-base) var(--agv-ease), box-shadow var(--agv-base) var(--agv-ease), transform var(--agv-base) var(--agv-ease);
}
:where(a).agv-card:hover,
:where(a).agv-shopcard:hover,
:where(a).agv-doccard:hover,
:where(a).agv-rescard:hover {
	transform: translateY(-2px);
	box-shadow: var(--agv-sh-3);
}

/* --- Section rhythm ------------------------------------------------ */

/* Two painted sections in a row need no seam; two light ones do. The base
   sheet handles light+light — this covers the remaining pairs so a long
   page never shows a hairline in the middle of a single colour field. */
.agv-tone--deep + .agv-tone--deep,
.agv-tone--colour + .agv-tone--colour { border-top: 1px solid rgba(255, 255, 255, .1); }

/* A painted section following a painted section of a different tone gets a
   crisper transition than a blend. */
.agv-tone--colour + .agv-tone--deep,
.agv-tone--deep + .agv-tone--colour { border-top: 0; }

/* --- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.agv-btn:hover,
	:where(a).agv-card:hover { transform: none; }
}

/* --- Forced colours ------------------------------------------------ */

/* Windows high-contrast mode strips backgrounds, which is exactly when the
   instrument panels and state pills stop being legible. Give the ones that
   carry meaning a border so the meaning survives. */
@media (forced-colors: active) {
	.agv-panel,
	.agv-pill--state,
	.agv-badge,
	.agv-chip,
	.agv-media { border: 1px solid CanvasText; }

	.agv-spark__line,
	.agv-spark__dot { stroke: CanvasText; fill: CanvasText; }
	.agv-spark__area { display: none; }

	.agv-track__marker--done { background: CanvasText; }
}