/* =====================================================================
   Cambridge Industrialisation — Visual layer (photography + motion)
   Loaded AFTER style.css / conference.css / ces.css.
   Adds photographic surfaces and restrained Stripe-Press-style motion
   on top of the existing flat editorial design system. No colour,
   type or component styles are redefined here.
   ===================================================================== */

/* ============================================================
   1. Editorial figures — square corners, no shadow, quiet caption
   ============================================================ */
.v-figure { margin: 0 0 var(--spacing-xl, 4rem); }
.v-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.v-figure figcaption {
    font-size: 0.8rem;
    color: var(--muted, #6B7785);
    margin-top: 0.55rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
/* wide variant (used inside long text columns / CES body) */
.v-figure--wide img { aspect-ratio: 21 / 9; }
/* figures placed on dark surfaces */
.v-on-dark figcaption { color: rgba(255, 255, 255, 0.55); }

/* ============================================================
   2. Home hero — photographic (Royal Society register)
   ============================================================ */
.hero.v-hero-photo {
    background-color: var(--blue-900, #001E3C);
    background-image:
        linear-gradient(105deg, rgba(0, 30, 60, 0.92) 0%, rgba(0, 30, 60, 0.72) 55%, rgba(0, 30, 60, 0.45) 100%),
        url('../assets/img/cambridge-kings-college.jpg?v=2');
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
}
/* On the photographic hero the standard gold tagline sits on a photo
   scrim rather than flat navy — lift it one step for 7:1 contrast.
   Scoped to the photo hero only; the global gold token is untouched. */
.hero.v-hero-photo .hero-subtitle {
    color: #D9BC7A;
}

/* Mobile: the 105° gradient reads unevenly on tall narrow screens —
   swap to a uniform scrim so text contrast is constant. */
@media (max-width: 768px) {
    .hero.v-hero-photo {
        background-image:
            linear-gradient(rgba(0, 30, 60, 0.82), rgba(0, 30, 60, 0.82)),
            url('../assets/img/cambridge-kings-college.jpg?v=2');
    }
}

/* ============================================================
   2b. About hero — photographic (same treatment as the home
       v-hero-photo, own background so the home class stays put)
   ============================================================ */
.hero.v-hero-about {
    background-color: var(--blue-900, #001E3C);
    background-image:
        linear-gradient(105deg, rgba(0, 30, 60, 0.92) 0%, rgba(0, 30, 60, 0.72) 55%, rgba(0, 30, 60, 0.45) 100%),
        url('../assets/img/industry-solar-farm-panorama.jpg');
    background-size: cover;
    background-position: center 55%;
    background-repeat: no-repeat;
}
.hero.v-hero-about .hero-tagline {
    color: #D9BC7A; /* same one-step lift as the home photo hero */
}
@media (max-width: 768px) {
    .hero.v-hero-about {
        background-image:
            linear-gradient(rgba(0, 30, 60, 0.82), rgba(0, 30, 60, 0.82)),
            url('../assets/img/industry-solar-farm-panorama.jpg');
    }
}

/* ============================================================
   2c. About framework-stage photos — 3:2, square corners,
       pairs with .v-tone-navy for the site-wide navy tint
   ============================================================ */
.v-stage-photo { position: relative; margin: 0 0 1rem; }
.v-stage-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* one-line caption under a full-bleed .v-banner */
.v-banner-caption {
    font-size: 0.8rem;
    color: var(--muted, #6B7785);
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: 0.55rem 0 2.5rem;
}

/* ============================================================
   3. Home conference-band thumbnails
   ============================================================ */
.v-conf-thumb { margin: 0 0 var(--spacing-xl, 4rem); position: relative; }
.v-conf-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    display: block;
}
/* unify industrial photography with the navy band it sits on */
.v-tone-navy img { filter: saturate(0.85); }
.v-tone-navy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 30, 60, 0.28);
    pointer-events: none;
}

/* ============================================================
   4. WIC hero — industrial photography / muted video background
   ============================================================ */
.conference-hero.v-hero-media-host,
.ces-hero.v-hero-media-host {
    position: relative;
    overflow: hidden;
}
.conference-hero .v-hero-media,
.ces-hero .v-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.conference-hero .v-hero-media video,
.ces-hero .v-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* CES hero footage (robot-chess) runs warm — desaturate and dim it so it
   sits in the same navy register as the WIC industrial footage */
.ces-hero .v-hero-media video {
    filter: saturate(0.65) brightness(0.85);
}
/* navy scrim — keeps white hero text at high contrast (left darker) */
.conference-hero .v-hero-media::after,
.ces-hero .v-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(0, 30, 60, 0.94) 0%, rgba(0, 30, 60, 0.87) 55%, rgba(0, 30, 60, 0.76) 100%);
}
.conference-hero.v-hero-media-host .container,
.ces-hero.v-hero-media-host .ces-hero-inner {
    position: relative;
    z-index: 1;
}
/* CES hero theme line — same register as the WIC .conference-subtitle */
.ces-hero.v-hero-media-host .ces-hero-theme {
    font-family: var(--ces-serif, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
    color: #C8A85E;
}
.ces-hero.v-hero-media-host .ces-hero-theme em { color: inherit; }
/* Mobile: uniform scrim instead of the 105° gradient (see home hero note) */
@media (max-width: 768px) {
    .conference-hero .v-hero-media::after,
    .ces-hero .v-hero-media::after {
        background: rgba(0, 30, 60, 0.82);
    }
}

/* ============================================================
   5. Full-bleed narrow photo banner (WIC, between sections)
   ============================================================ */
.v-banner {
    height: clamp(280px, 30vw, 360px);
    overflow: hidden;
    position: relative;
}
.v-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* pull the golden-hour port photo into the site's navy register */
    filter: saturate(0.7) brightness(0.9);
}

/* ============================================================
   6. CES hero — code-rain canvas (injected by js/motion.js)
   ============================================================ */
.v-code-rain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* faint readability scrim above the canvas, below the text.
   Same navy as the hero base, so it is invisible when the canvas
   is not running (reduced motion / no JS). */
.ces-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(0, 30, 60, 0.80) 0%, rgba(0, 30, 60, 0.42) 55%, rgba(0, 30, 60, 0.06) 100%);
}
.ces-hero-graphic { z-index: 1; }
.ces-hero-inner { z-index: 2; }

/* ============================================================
   7. Ambient background video sections (CES series)
   ============================================================ */
.v-video-section {
    position: relative;
    overflow: hidden;
}
.v-video-section > .v-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}
/* navy scrim above the video, below the content — protects text contrast */
.v-video-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(0, 30, 60, 0.74) 0%, rgba(0, 30, 60, 0.38) 60%, rgba(0, 30, 60, 0.10) 100%);
}
.v-video-section > .ces-wrap,
.v-video-section > .container {
    position: relative;
    z-index: 1;
}

/* ============================================================
   8. Motion — scroll reveal (tagged by js/motion.js only)
   One-shot: opacity 0→1 + translateY(14px)→0, 550ms.
   Elements only ever receive .v-reveal when JS is running and
   prefers-reduced-motion is 'no-preference', so content is never
   hidden for anyone else.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .v-reveal:not(.v-in) {
        opacity: 0;
        transform: translateY(14px);
    }
    .v-reveal {
        transition:
            opacity 0.55s cubic-bezier(0.2, 0.6, 0.2, 1),
            transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
        will-change: opacity, transform;
    }
    .v-reveal.v-in {
        opacity: 1;
        transform: none;
    }
}

/* Reduced motion: freeze every visual-layer effect (belt & braces —
   motion.js already refuses to start under reduced motion). */
@media (prefers-reduced-motion: reduce) {
    .v-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .v-code-rain { display: none; }
    .v-bg-video { display: none; }
}