/*
 * The services page: the shared page head, then ERP, Software and Devices,
 * then a closing band over the Beams. ERP runs across the page under its
 * photo; Software and Devices set their words beside a photo, on alternate
 * sides. Each section numbers itself and lists its services under a rule,
 * each name after a Neon dot. Only the photos rise in as they scroll: the
 * words show at once. The page head, .beams, .lead, .reveal and .button come
 * from site.css.
 */

.service {
    padding-block: var(--space-16);
}

/* ---- The head: the number, the name and one line ---- */

.service-num {
    margin: 0;
    color: var(--green-text);
    font-family: var(--font-heading);
    font-size: var(--text-ui);
    font-variant-numeric: tabular-nums;
}

.service-head h2 {
    margin-block: var(--space-2) 0;
    font-size: var(--text-display-lg);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-heading);
}

.service-lead {
    max-inline-size: var(--container-xl);
    margin-block: var(--space-4) 0;
    color: var(--muted-foreground);
    font-size: var(--text-lead);
    line-height: var(--leading-normal);
    text-wrap: pretty;
}

/* ---- The services: a rule over each, a Neon dot before its name ---- */

.offers {
    display: grid;
    gap: var(--space-8) var(--space-12);
    margin-block: var(--space-12) 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
}

.offers li {
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--border-strong);
}

.offers h3 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-snug);
}

.offers h3::before {
    content: "";
    flex: none;
    inline-size: var(--space-2);
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: var(--green);
}

.offers p {
    max-inline-size: var(--container-md);
    margin-block: var(--space-2) 0;
    color: var(--muted-foreground);
}

/* ---- Photos: a frame the photo fills, so its space is kept before it
   loads. Until then the frame shows the card tone. ---- */

.service-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--card);
}

.service-photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* ---- ERP: the photo across the page, coming up out of the dark, going
   back into it under the heading, which sits over its lower edge, and
   fading into it at either side, so it has no hard edge anywhere ---- */

.service-band {
    padding-block-start: 0;
}

.service-band .service-photo {
    max-block-size: var(--container-3xl);
    background: var(--background);
}

.service-band .service-photo img {
    object-position: 50% 40%;
}

.service-band .service-photo::before,
.service-band .service-photo::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* The sides: the same fade at both, reaching 14% of the way in (22% from
   --breakpoint-md), so it reads the same in either writing direction. */
.service-band .service-photo::before {
    background: linear-gradient(to right,
        var(--background),
        color-mix(in srgb, var(--background) 55%, transparent) 5.6%,
        transparent 14%,
        transparent 86%,
        color-mix(in srgb, var(--background) 55%, transparent) 94.4%,
        var(--background));
}

.service-band .service-photo::after {
    background:
        linear-gradient(var(--background), transparent 30%),
        linear-gradient(to top, var(--background), color-mix(in srgb, var(--background) 70%, transparent) 30%, transparent 70%);
}

.service-band .wrap {
    position: relative;
    margin-block-start: calc(var(--space-12) * -1);
}

/* ---- Software and Devices: the words, then the photo ---- */

.service-split {
    display: grid;
    gap: var(--space-12);
}

.service-split .service-photo {
    border-radius: var(--radius-sm);
}

/* Devices: the concept logger, rendered on the card tone so it fills its
   frame without an edge: a loop over a still of its first frame, the pause
   button in the frame's bottom-end corner, and a caption under it that
   shows at once. At 4:5 the frame shows the loop's middle 60%; the logger
   stays within its middle 54%. */
.service-figure {
    margin: 0;
}

/* The loop fades in over the still once it plays: they're the same frame,
   but a browser can draw a video's tones a little apart from a photo's. */
.service-photo video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
}

.service-photo video.is-live {
    opacity: 1;
}

.logger-pause {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    display: inline-grid;
    place-items: center;
    inline-size: var(--tap-target);
    block-size: var(--tap-target);
    padding: 0;
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--glass);
    color: var(--foreground);
    cursor: pointer;
}

.logger-pause:hover {
    border-color: var(--muted-foreground);
}

.logger-pause[hidden],
.logger-pause .i-play,
.logger-pause.is-paused .i-pause {
    display: none;
}

.logger-pause.is-paused .i-play {
    display: block;
}

.logger-pause svg {
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
}

.service-caption {
    max-inline-size: var(--container-md);
    margin-block-start: var(--space-4);
    color: var(--muted-foreground);
    font-size: var(--text-ui);
    line-height: var(--leading-normal);
}

.service-caption strong {
    color: var(--foreground);
    font-weight: var(--weight-semibold);
}

/* The tiles in focus, toward the screen's end, not the blurred ones at its
   start. */
#software .service-photo img {
    object-position: 60% 50%;
}

/* ---- The close: the action again, over the Beams ---- */

.closing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block-start: var(--border-width) solid var(--border);
}

.closing .wrap {
    padding-block: var(--space-20);
}

.closing h2 {
    max-inline-size: var(--container-2xl);
    margin: 0;
    font-size: var(--text-display-md);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-heading);
}

.closing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-8);
    margin-block-start: var(--space-8);
}

.closing-actions p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-ui);
}

.closing-actions p a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    color: var(--foreground);
    text-underline-offset: var(--space-1);
}

@media (min-width: 48rem) {
    .service {
        padding-block: var(--space-24);
    }

    .service-band {
        padding-block-start: 0;
    }

    .service-band .service-photo {
        aspect-ratio: 21 / 9;
    }

    .service-band .service-photo::before {
        background: linear-gradient(to right,
            var(--background),
            color-mix(in srgb, var(--background) 55%, transparent) 8.8%,
            transparent 22%,
            transparent 78%,
            color-mix(in srgb, var(--background) 55%, transparent) 91.2%,
            var(--background));
    }

    .service-band .wrap {
        margin-block-start: calc(var(--space-24) * -1);
    }

    .service-band .offers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .closing .wrap {
        padding-block: var(--space-32);
    }
}

/* From --breakpoint-lg the words and the photo share a row: Software's photo
   at the end, Devices' at the start. */
@media (min-width: 56.25rem) {
    .service-split {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        align-items: center;
        gap: var(--space-20);
    }

    .service-split .service-photo {
        aspect-ratio: 4 / 5;
    }

    .service-split-flip {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }

    .service-split-flip .service-text {
        grid-column: 2;
    }

    .service-split-flip .service-figure {
        grid-row: 1;
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .service-photo video {
        transition: opacity var(--duration-slower) var(--ease-standard);
    }
}