so card art doesn't eager-load when the section is below the fold (codex perf pattern, Task 3). */
/* ── Applications 2026 ─────────────────────────────────────────────────────
*
* Light-bg section, 3-col grid (2 at mid, single-column horizontal
* scroll-snap row ≤900px). Cards: dark green base gradient, lazy-loaded
* editorial photo behind a left-weighted green overlay for legibility,
* orange bare-icon, numeric label, title/body, footer Explore link.
* Selectors: .vig-applications-2026__* (BEM, section-scoped).
* ─────────────────────────────────────────────────────────────────────── */
/* Section root */
.vig-applications-2026 {
background: var(--color-bg-light);
padding: 80px 32px;
}
/* Inner wrapper */
.vig-applications-2026__inner {
max-width: 1320px;
margin: 0 auto;
}
/* Head: eyebrow + heading stacked, sits above the card grid. */
.vig-applications-2026__head {
max-width: 760px;
margin: 0 0 48px;
}
/* Orange-on-light: use --color-secondary-700 (#A85107) for AA contrast. */
.vig-applications-2026__eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-secondary-700);
margin: 0;
}
.vig-applications-2026__heading {
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--color-primary-900);
margin: 24px 0 0;
}
/*
renders as accent orange, not italic, matching mockup. */
.vig-applications-2026__heading em {
font-style: normal;
color: var(--color-secondary-600);
}
/* ── Card grid ───────────────────────────────────────────────────────────── */
.vig-applications-2026__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.vig-applications-2026__item {
display: flex;
min-width: 0;
}
/* The card itself (anchor or div) — base green gradient acts as a fallback
* when no photo is supplied, and as the colour underneath the overlay when
* one is. */
.vig-applications-2026__card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 280px;
padding: 26px 28px 24px;
border-radius: 20px;
overflow: hidden;
color: #fff;
text-decoration: none;
background: linear-gradient(160deg, #08471B 0%, #063715 100%);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.vig-applications-2026__card:hover,
.vig-applications-2026__card:focus {
color: #fff;
text-decoration: none;
}
.vig-applications-2026__card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(6, 28, 14, 0.18);
}
/* Lazy-loaded background photo wrapper. Inner ![]()
uses object-fit: cover
* + object-position: center right (people/subject in the photo skews right
* so the left side of the card stays cleaner for the green overlay). */
.vig-applications-2026__card-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.vig-applications-2026__card-bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
/* Slight desaturation so the green overlay reads cohesively (mockup). */
filter: saturate(85%) contrast(95%);
}
/* Left-weighted green gradient overlay for legibility over the photo. */
.vig-applications-2026__card-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(6, 55, 21, 0.98) 0%,
rgba(6, 55, 21, 0.96) 45%,
rgba(6, 55, 21, 0.82) 75%,
rgba(6, 55, 21, 0.55) 100%
);
}
/* Content sits above photo + overlay. */
.vig-applications-2026__card-body-wrap {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.vig-applications-2026__card-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 28px;
}
/* Bare icon (no chip background). The uploaded SVGs are already authored in
* brand orange (#F48113) + white, so no tint filter is applied — an orange
* filter would shift the orange and muddy the white. */
.vig-applications-2026__card-icon {
margin: 0 0 16px;
width: 56px;
height: 56px;
}
.vig-applications-2026__card-icon img {
display: block;
width: 56px;
height: 56px;
}
.vig-applications-2026__card-title {
font-size: 28px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
color: #fff;
margin: 0 0 10px;
}
.vig-applications-2026__card-body {
font-size: 13px;
font-weight: 300;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 24px;
flex: 1 1 auto;
}
/* Footer Explore link with circle-arrow. */
.vig-applications-2026__card-link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
}
.vig-applications-2026__card-link-arr {
display: inline-flex;
width: 22px;
height: 22px;
border-radius: 999px;
align-items: center;
justify-content: center;
background: var(--color-secondary-500);
color: #000;
font-size: 12px;
font-weight: 700;
transition: transform 200ms ease;
}
.vig-applications-2026__card:hover .vig-applications-2026__card-link-arr {
transform: translateX(3px);
}
/* ── Wide-screen overflow protection ─────────────────────────────────────── */
.vig-applications-2026__grid,
.vig-applications-2026__item,
.vig-applications-2026__card {
min-width: 0;
}
.vig-applications-2026__card-title,
.vig-applications-2026__card-body {
overflow-wrap: anywhere;
word-break: break-word;
}
/* ── Breakpoints ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.vig-applications-2026__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 980px) {
.vig-applications-2026 {
padding: 60px 20px;
}
}
/* Mobile: switch to single-row horizontal scroll-snap, matching mockup. */
@media (max-width: 900px) {
.vig-applications-2026__grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 78vw);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
scroll-padding-inline: 16px;
}
.vig-applications-2026__item {
scroll-snap-align: start;
}
}
/* Respect reduced-motion preference: suppress hover lift + transitions. */
@media (prefers-reduced-motion: reduce) {
.vig-applications-2026__card,
.vig-applications-2026__card-link-arr {
transition: none;
}
.vig-applications-2026__card:hover {
transform: none;
}
.vig-applications-2026__card:hover .vig-applications-2026__card-link-arr {
transform: none;
}
}