/* ==========================================================================
   HOME

   The home page. Loads only on the home page.

   Design values are in style.css. Never write a raw colour or size here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The hero

   A rounded picture panel with the header floating over it. The panel is inset
   from the edge of the window on all four sides, which is why the whole thing
   has a margin rather than running edge to edge.
   -------------------------------------------------------------------------- */

/* The panel runs the full width of the window with only the design's thin
   gutter around it. It is deliberately NOT held to the content width: a
   photograph scales happily and the design draws it almost edge to edge. The
   wording inside is what gets held to a column, further down. */
.nex-hero {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 var(--gutter-bleed) var(--gutter-bleed);
    /* The hero fills the screen, so the bottom of the picture and the dots that
       change it are visible without scrolling. That is also what the design
       draws: its panel is 1043 tall, which is a 1080 screen less the gutter.

       min-height rather than height, so a phone where the wording is taller than
       the screen grows instead of clipping. The 640px floor stops the panel
       being squashed on a short laptop or a landscape phone.

       svh rather than vh: on a phone vh measures the screen with the browser's
       own bars hidden, so the bottom of the panel sits under them until you
       scroll. svh is the space actually visible. vh is left above it for older
       browsers that do not know svh.

       The 1600px ceiling stops the panel chasing a window taller than any real
       screen. A full height hero on a 2000px tall window would be a wall of
       photograph, and it also made the whole-page screenshot seven screens
       tall, which meant the rest of the page could not be checked. */
    min-height: clamp(640px, 100vh, 1600px);
    min-height: clamp(640px, 100svh, 1600px);
    display: flex;
    align-items: center;
    isolation: isolate;
    /* The gutter under the picture belongs to the picture, not to the gap below
       it, so the hero owes a little more than the usual half gap. */
    margin-bottom: var(--space-6);
}

/* WordPress's own bar takes 32px off the top of the screen for anyone signed
   in, so the hero has to be that much shorter or its bottom falls below the
   fold. Visitors never see either. */
.admin-bar .nex-hero {
    min-height: clamp(640px, calc(100vh - 32px), 1600px);
    min-height: clamp(640px, calc(100svh - 32px), 1600px);
}

@media (max-width: 782px) {
    .admin-bar .nex-hero {
        min-height: clamp(640px, calc(100vh - 46px), 1600px);
        min-height: clamp(640px, calc(100svh - 46px), 1600px);
    }
}

/* The picture sits inside the rounded panel, not behind the whole section, so
   the corners stay round whatever the picture is. */
.nex-hero-media {
    position: absolute;
    inset: var(--gutter-bleed);
    border-radius: var(--radius-large);
    overflow: hidden;
    z-index: -1;
}

/* Held to the top rather than the middle.

   Chad, 4 September. On a wide screen the panel is wider in proportion than the
   photograph, so the photograph is scaled up until it fills the width and the
   top and bottom are cut off. Centred, that cut was split evenly: on an ordinary
   1920 screen, 65 pixels came off the top of every picture, taking the headroom
   above the person's head with it and leaving their face right up against the
   floating menu.

   Held to the top, the whole 130 comes off the bottom instead, which on all
   three of these is floor and shoulder. Nothing is lost and the faces sit that
   much further down the panel.

   It does nothing on a tablet or a phone, where the panel is narrower in
   proportion than the photograph and the cutting is sideways instead. That is
   what the focal point below is for. */
.nex-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.nex-hero-slide.is-active {
    opacity: 1;
}

/* The wording sits on the left over a light part of the picture. A soft wash
   from the left keeps it readable on all three slides without dimming the
   photograph the way a flat overlay would. */
.nex-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(235, 243, 246, 0.92) 0%,
        rgba(235, 243, 246, 0.72) 32%,
        rgba(235, 243, 246, 0) 62%
    );
}

/* The wording sits on the same column every section below it uses, so the whole
   page shares one left edge. On a very wide monitor the column stops growing
   and the picture carries on, which is the design's own behaviour. */
/* The column does the indenting, and it is the same column the header, the
   bands and the footer use, set in base.css. There is no padding on top of it. */
.nex-hero-inner {
    position: relative;
    padding: var(--space-24) 0;
}

/* Widths measured off the design rather than guessed, so the wording breaks
   where the designer broke it. The hero heading breaks after "supported": at
   14.3em the line holds "Trusted technology, supported" and not the "on". */
.nex-hero-heading {
    max-width: 14.3em;
}

.nex-hero-body,
.nex-hero-actions {
    max-width: 620px;
}

.nex-hero-heading {
    margin: 0 0 var(--space-6);
    color: var(--brand);
    font-family: var(--font-display);
    font-size: var(--size-4xl);
    font-weight: var(--weight-normal);
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.nex-hero-body {
    margin: 0 0 var(--space-8);
    color: var(--ink);
    font-size: var(--size-base);
    line-height: 1.7;
    max-width: 46ch;
}

.nex-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   2. The hero dots
   -------------------------------------------------------------------------- */

.nex-hero-dots {
    position: absolute;
    left: 50%;
    bottom: calc(var(--gutter-bleed) + var(--space-8));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nex-hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: rgba(0, 62, 78, 0.35);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.nex-hero-dot.is-active {
    width: 34px;
    background: var(--brand);
}

/* --------------------------------------------------------------------------
   3. Smaller screens

   The wash turns from a left-to-right one into a top-to-bottom one, because on
   a narrow screen the wording sits over the middle of the picture rather than
   to one side of it.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    /* Chad, 3 September: a full screen hero is right on a desktop, where the
       whole panel and the dots under it are one glance. On a phone or a tablet
       held upright the screen is far taller than it is wide, so filling it
       gives you a wall of photograph and nothing else until you scroll. A set
       height instead, deep enough for the wording and a good look at the
       picture, and the section below it shows at the bottom so there is
       something to scroll towards.

       This has to override the signed-in rule further up as well, which is
       more specific than a plain ".nex-hero". */
    .nex-hero,
    .admin-bar .nex-hero {
        min-height: 700px;
        padding: 0 var(--gutter-bleed) var(--gutter-bleed);
    }

    .nex-hero-media {
        inset: var(--gutter-bleed);
    }

    /* On a narrow screen the panel is far taller than it is wide, so the
       browser keeps the middle of a wide photograph and throws both sides away.
       On all three of these the subject is right of centre, which is how a phone
       ended up showing a wall, a shoulder and half a face.

       Each slide carries its own focal point, set on the picture in
       front-page.php next to the picture it belongs to, because it is a fact
       about that photograph rather than about the layout. The fallback is the
       ordinary centred crop, so a slide added without one still behaves. */
    .nex-hero-slide {
        background-position: var(--focus, center) top;
    }

    .nex-hero-media::after {
        background: linear-gradient(
            180deg,
            rgba(235, 243, 246, 0.94) 0%,
            rgba(235, 243, 246, 0.86) 55%,
            rgba(235, 243, 246, 0.35) 100%
        );
    }

    /* On a phone the column gutter and the padding were stacking, pushing the
       wording a long way in and squeezing the heading onto five lines. One
       inset, not two. */
    .nex-hero-inner {
        width: 100%;
        max-width: none;
        padding: calc(var(--space-24) + var(--space-8)) var(--space-6) var(--space-24);
    }

    .nex-hero-heading,
    .nex-hero-body,
    .nex-hero-actions {
        max-width: none;
    }


    .nex-hero-dots {
        bottom: calc(var(--gutter-bleed) + var(--space-6));
    }
}


/* --------------------------------------------------------------------------
   WHAT LEFT THIS FILE, AND WHY

   3 September. The bands, the section headings, the two column split, the four
   cards and the closing "Let's talk" panel all moved to base.css, because
   About Nexeva, Meet The Team and Contact Us use exactly the same ones. What
   is left here is genuinely only the home page: the hero, the three picture
   tiles, the partner logo belt and the four numbers.

   If something below turns out to be wanted on a second page, move it to
   base.css rather than copying it.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. What we do: the three picture tiles

   The whole tile is the link, so the arrow is decoration rather than a second
   thing to click.
   -------------------------------------------------------------------------- */

.nex-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.nex-tile {
    position: relative;
    display: block;
    aspect-ratio: 1064 / 1368;
    overflow: hidden;
    text-decoration: none;
}

.nex-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* The desktop crop is the same shape as the photo itself, so this only ever
   changes anything on the wide, short crop a phone uses. Chad, 1 September:
   the default centred crop was cutting into the Oncology tile's face, since
   she sits in the top third of that photo, not the middle. Renal care has the
   same problem, two faces near the top. Technical service is the opposite: its
   subject is the hands lower in the frame, so that one keeps the centred crop
   rather than being pulled up onto the equipment above them. */
.nex-tile-img--crop-top {
    object-position: center top;
}

/* The name sits over the bottom of the picture, so it needs a wash behind it or
   it disappears on the lighter photographs. */
.nex-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 62, 78, 0) 0%, rgba(0, 62, 78, 0.55) 100%);
    pointer-events: none;
}

/* Naomi, 1 September: was reading too small against the photo. Fades out on
   hover, since the panel below shows its own, larger copy of the same title. */
.nex-tile-title {
    position: absolute;
    left: var(--space-8);
    bottom: var(--space-8);
    z-index: 1;
    color: var(--page);
    font-size: var(--size-2xl);
    transition: opacity 0.3s ease;
}

/* The hover panel. Naomi, 1 September: each tile reveals its own copy on
   hover, sliding up over the photo behind a frosted, darker version of the
   header's glass, so the text stays readable over any of the three photos.
   Chad, 1 September, second pass: this is a rounded card inset within the
   tile, not a flat strip flush with its edges, so the photo still shows,
   blurred, all the way round it. */
.nex-tile-panel {
    position: absolute;
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-8) var(--space-8);
    border-radius: var(--radius-large);
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur-panel));
    -webkit-backdrop-filter: blur(var(--glass-blur-panel));
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.nex-tile-panel-title {
    color: var(--page);
    font-size: var(--size-2xl);
}

.nex-tile-panel-body {
    color: var(--page);
    font-size: var(--size-sm);
    line-height: 1.6;
}

/* Chad, 1 September: on a phone this reveal doesn't behave like a hover at
   all, there is no pointer sitting still over a tile to trigger it on
   purpose. Instead tapping briefly triggers it as a side effect of the tap,
   and the short, wide phone crop doesn't have the height to show it properly,
   the copy runs off the bottom. So only true hovering, which only exists on a
   mouse or trackpad, is gated here.

   The focus rules below are kept for when the tiles become links again in
   Sprint 2. They do nothing today, because a tile is no longer a link and
   nothing that is not a link can be tabbed to. The wording inside the panel is
   in the page either way, so a screen reader reads it out regardless. */
@media (hover: hover) {
    .nex-tile:hover img {
        transform: scale(1.04);
    }

    .nex-tile:hover .nex-tile-title {
        opacity: 0;
    }

    .nex-tile:hover .nex-tile-panel {
        opacity: 1;
        transform: translateY(0);
    }
}

.nex-tile:focus-visible img {
    transform: scale(1.04);
}

.nex-tile:focus-visible .nex-tile-title {
    opacity: 0;
}

.nex-tile:focus-visible .nex-tile-panel {
    opacity: 1;
    transform: translateY(0);
}



/* --------------------------------------------------------------------------
   5. The partner logos

   A loop rather than a wrapping row. Ten logos will not fit across the content
   column at a readable size, and a stranded second row of three reads as a
   mistake.

   The list is printed twice and both copies slide left together. When the first
   copy has gone, the second is sitting exactly where the first started, so the
   reset is invisible and it reads as one continuous belt.

   The logos are supplied at wildly different proportions, one a 244px circle and
   another 384 x 50, so both height and width are capped to keep the row evenly
   weighted.
   -------------------------------------------------------------------------- */

.nex-marquee {
    display: flex;
    width: 100%;
    margin-top: var(--space-24);
    overflow: hidden;
    /* Fades the logos out at both ends rather than cutting them off mid-letter. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nex-logos {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-16);
    margin: 0;
    padding-right: var(--space-16);
    list-style: none;
    animation: nex-marquee 45s linear infinite;
}

/* Stopping it under the pointer lets somebody actually look at a logo. */
.nex-marquee:hover .nex-logos,
.nex-marquee:focus-within .nex-logos {
    animation-play-state: paused;
}

.nex-logos img {
    max-height: 48px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@keyframes nex-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Somebody who has asked their device for less movement gets a plain row they
   can scroll themselves. The site-wide reduced-motion rule shortens every
   animation to nothing, which on a loop like this would leave the logos parked
   off screen, so it is turned off here rather than merely sped up. */
@media (prefers-reduced-motion: reduce) {
    .nex-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .nex-logos {
        animation: none !important;
    }

    .nex-logos[aria-hidden="true"] {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   6. The team behind the technology

   Four numbers side by side, each with its own outline icon. Left aligned
   inside the column even though the heading above them is centred, which is
   what the design shows.
   -------------------------------------------------------------------------- */

.nex-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
    margin-top: var(--space-12);
}

/* The icons are drawn at different widths but all at the same height, so they
   are held by height and left to keep their own proportions. */
/* Naomi, 1 September: these were reading too heavy next to the stat itself. */
.nex-stat-icon {
    height: 56px;
    width: auto;
    display: block;
    margin-bottom: var(--space-6);
}

.nex-stat h3 {
    margin: 0 0 var(--space-4);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--size-stat);
    font-weight: var(--weight-normal);
    line-height: 1.1;
}

.nex-stat p {
    margin: 0;
    color: var(--ink);
    font-size: var(--size-base);
    line-height: 1.8;
}

/* This one heading is set larger than every other heading on the page. */
.nex-heading--large {
    font-size: var(--size-5xl);
}

/* The sentence under it is held tighter than the usual lede so it breaks onto
   two lines the way the design does, rather than one long one. */
.nex-lede--tight {
    max-width: 38em;
}

/* --------------------------------------------------------------------------
   7. The home page on smaller screens

   The shared bands and headings have their own rules in base.css. Only the
   pieces this page owns are here.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .nex-tiles {
        grid-template-columns: 1fr;
    }

    .nex-tile {
        aspect-ratio: 16 / 11;
    }

    /* Four numbers across will not fit a phone. Two, then one. */
    .nex-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }

    .nex-stat-icon {
        height: 44px;
    }


    .nex-logos {
        gap: var(--space-12);
        padding-right: var(--space-12);
    }

    .nex-logos img {
        max-height: 34px;
        max-width: 100px;
    }
}

@media (max-width: 700px) {
    .nex-stats {
        grid-template-columns: 1fr;
    }
}