/* ═════════════════════════════════════════════════════════
   SOLUTIONS v3 — VIDEO BACKGROUND BAND
   Pair to /includes/sections/solutions-v3.php.
   v1 (light gradient + decorative glows) lives at solutions.v1.backup.php.
   v2 (particle orb canvas) lives at solutions-v2.php / .css / .js.
   ═════════════════════════════════════════════════════════ */
.wn-solutions-v3 {
    position: relative;
    padding: var(--wn-s-7) 0;
    overflow: hidden;
    /* Deep navy-to-ink poster. Visible while the Vimeo iframe loads,
       and as the permanent fallback if Vimeo is blocked / data-saver
       suppresses autoplay. Pulled from the brand's dark palette so the
       section sits in the same dark-mode family as hero + CTA. */
    background:
        linear-gradient(135deg, #0a1730 0%, #060a18 55%, #02030a 100%);
    color: var(--wn-ink-inv);
    isolation: isolate;
}
.wn-solutions-v3::before,
.wn-solutions-v3::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--wn-line-inv);
    pointer-events: none;
    z-index: 3;
}
.wn-solutions-v3::before { top: 0; }
.wn-solutions-v3::after  { bottom: 0; }

/* Video layer — sized the same way as the hero iframe so 16:9 sources
   cover the section at any aspect ratio without letterboxing. */
.wn-solutions-v3-video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.wn-solutions-v3-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    pointer-events: none;
    /* Slight base saturation lift so the video feels alive even at very
       slow scrub speeds. Tune if your liquid-particle clip already has
       this baked in. */
    filter: saturate(1.05);
}

/* Overlay — light darken + brand tint. Tuned softer so the video reads
   clearly through the layer; cards carry their own contrast via blur
   + inner fill so we don't need to rely on the overlay to make text
   legible. */
.wn-solutions-v3-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(13, 16, 21, 0.12) 0%,
            rgba(13, 16, 21, 0.20) 55%,
            rgba(13, 16, 21, 0.30) 100%),
        radial-gradient(ellipse at 70% 30%,
            rgba(63, 152, 166, 0.08),
            transparent 60%);
}

/* Section header — centred layout */
.wn-solutions-v3-head {
    position: relative;
    z-index: 2;
    max-width: 62rem;
    margin: 0 auto var(--wn-s-5);
    text-align: center;
}
.wn-solutions-v3-eyebrow {
    font-size: var(--wn-t-label);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wn-ink-inv);
    margin: 0 0 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    /* Use ::before + ::after lines flanking the label so the eyebrow
       reads as a centred motif rather than a stray dash on one side. */
}
.wn-solutions-v3-eyebrow::before,
.wn-solutions-v3-eyebrow::after {
    content: '';
    width: 26px; height: 1px;
    background: var(--wn-ink-inv);
}
.wn-solutions-v3-title {
    font-family: var(--font-display);
    font-size: var(--wn-t-h2);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--wn-ink-inv);
    margin: 0 auto 1.4rem;
    max-width: 20ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.wn-solutions-v3-title strong { font-weight: 700; }
.wn-solutions-v3-lead {
    font-family: var(--font-body);
    font-size: var(--wn-t-lead);
    font-weight: 300;
    line-height: 1.6;
    color: var(--wn-ink-inv);
    margin: 0 auto;
    max-width: 60ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
}

/* Grid — three glass cards over video */
.wn-solutions-v3-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.wn-solution-v3-card {
    position: relative;
    padding: 2.4rem 2rem 2.2rem;
    background: rgba(20, 25, 34, 0.42);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--wn-r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02),
        0 30px 80px -30px rgba(0, 0, 0, 0.55),
        0 0 0 0 rgba(0, 212, 255, 0);              /* glow placeholder, animates on hover */
    color: var(--wn-ink-inv);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
    isolation: isolate;
    overflow: hidden;
    /* Two transition modes layered into one declaration:
         1. opacity + transform follow the anim-in entrance timing so
            the .is-in toggle still produces the slow rise + fade in.
            Per-property delay reads from the inline --delay variable
            so each card's stagger is respected (otherwise the
            shorthand resets transition-delay to 0 and overrides
            anim-in's delay rule).
         2. background / blur / shadow follow the long 2.4s ease so
            the hover feels like steam clearing from glass. These get
            an explicit 0s delay so the hover effect isn't delayed by
            the entrance stagger. */
    transition:
        opacity 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s),
        transform 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0s),
        background 2400ms var(--wn-ease) 0s,
        border-color 2400ms var(--wn-ease) 0s,
        backdrop-filter 2400ms var(--wn-ease) 0s,
        -webkit-backdrop-filter 2400ms var(--wn-ease) 0s,
        box-shadow 2400ms var(--wn-ease) 0s;
}
.wn-solution-v3-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, 0) 62%,
        rgba(255, 255, 255, 0.06) 100%
    );
    z-index: 0;
}
.wn-solution-v3-card > * { position: relative; z-index: 1; }

.wn-solution-v3-card:hover {
    background: rgba(20, 25, 34, 0.26);
    border-color: rgba(255, 255, 255, 0.22);
    /* Steam clears — drop the blur from 22px to 8px and keep saturation
       so the video bleeds through more vividly behind the glass. */
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02),
        0 36px 100px -30px rgba(0, 0, 0, 0.50),
        0 0 56px -4px rgba(0, 212, 255, 0.28);     /* gentle cyan halo */
}

.wn-solution-v3-heading {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.5vw, 1.55rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--wn-ink-inv);
    margin: 0;
    max-width: 22ch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

/* Icon container — thin-line lucide-style SVG, sized once via this rule.
   Colour inherits from the heading via currentColor on the SVG. */
.wn-solution-v3-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: var(--wn-ink-inv);
}
.wn-solution-v3-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wn-solution-v3-copy {
    font-family: var(--font-body);
    font-size: var(--wn-t-lead);
    font-weight: 300;
    line-height: 1.6;
    color: var(--wn-ink-inv);
    margin: 0;
    flex: 1;
}

/* Reduced-transparency: drop the blur, bump the fill for legibility. */
@media (prefers-reduced-transparency: reduce) {
    .wn-solution-v3-card {
        background: rgba(13, 16, 21, 0.78);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Responsive */
@media (max-width: 960px) {
    .wn-solutions-v3 { padding: 5rem 0; }
    .wn-solutions-v3-grid { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 600px) {
    .wn-solutions-v3 { padding: 4rem 0; }
}