/*
 * Case studies - the only CSS this feature adds.
 *
 * Loaded by inc/case-studies.php on single case studies and the case study
 * archive only. Everything else in the templates is styled by components that
 * already ship. Keep it that way: if this file starts growing, the section is
 * probably reaching for a component it should be reusing instead.
 */

/* ------------------------------------------------------------------
 * Odd card counts in .we-build
 *
 * .section-we-build .we-build is a three-column grid that drops to two
 * columns between 601px and 1024px, and to one below 600px
 * (custom.min.css). With an even number of cards that lands cleanly -
 * /installations-and-custom-fit-outs/, the page this layout is taken
 * from, has six. Case studies have three, so at tablet widths the last
 * card was left stranded in a half-width slot on a row of its own.
 *
 * The last card spans the full row instead, and loses some height so it
 * reads as a deliberate wide card rather than an oversized hero. The
 * gradient and caption are anchored to the bottom of the card, so they
 * survive the change in aspect without adjustment.
 *
 * Scoped to a modifier the templates only add when the count is actually
 * odd, so an even set still lays out in a clean 2 x n and nothing outside
 * case studies is touched.
 * ------------------------------------------------------------------ */

@media (min-width: 601px) and (max-width: 1024px) {
    .section-we-build--fill-last .we-build > *:last-child {
        grid-column: 1 / -1;
        height: 300px;
    }
}

/* ------------------------------------------------------------------
 * BugHerd 585 - Outcome block
 *
 * `.outcome` is a two-column flex with a green uppercase label beside
 * the value, which pushed the value into a narrow indented column that
 * wrapped badly. Stacked and left aligned, with a black label.
 * The mobile breakpoint already stacks it; this matches at all widths.
 * ------------------------------------------------------------------ */

.section-our-work .our-work-row .outcome {
    flex-direction: column;
    gap: 6px;
}

.section-our-work .our-work-row .outcome div:first-child {
    color: #0a0a0a;
}

/* ------------------------------------------------------------------
 * BugHerd 590 - Intro paragraph line height
 *
 * `.section-our-work .section-heading p` sets a 24px font size and no
 * line-height, so it inherited a tight one.
 * ------------------------------------------------------------------ */

.section-our-work .section-heading p {
    line-height: 1.45;
}

/* ------------------------------------------------------------------
 * BugHerd 588 / 591 - Linked archive rows
 *
 * The heading and the image are links now. `.our-work-row h3` has no
 * link styling of its own, so an <a> inside it would pick up the
 * default underline; and `.image` is a grid child that needs to stay a
 * block for its height and background to apply.
 * ------------------------------------------------------------------ */

.section-our-work .our-work-row h3 a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.section-our-work .our-work-row h3 a:hover {
    opacity: 0.65;
}

a.image {
    display: block;
}

.section-our-work .our-work-row a.image {
    transition: opacity 0.2s ease;
}

.section-our-work .our-work-row a.image:hover {
    opacity: 0.9;
}

/* ------------------------------------------------------------------
 * BugHerd 580 - Long stat values
 *
 * `.stat` is 50px, which suits "24h" and "Free" but made "No lease"
 * about twice the width of its neighbours and left the row unbalanced.
 * The template adds --long past a character threshold, so this scales
 * with the content rather than hard-coding one string.
 * ------------------------------------------------------------------ */

.section-form .image-wrap .stat.stat--long {
    font-size: 34px;
    line-height: 1.15;
}

/* ------------------------------------------------------------------
 * BugHerd 579 - Doubled form padding
 *
 * `.section-form .flex` already supplies the grey panel and radius and
 * `.form-wrap` already supplies 50px of padding. `.contact-form` then
 * added its own 24px, background and radius on top, insetting the
 * fields from the heading above them. The concierge block solves this
 * the same way (`#connect-concierge .contact-form.v2`).
 * ------------------------------------------------------------------ */

.section-form .form-wrap .contact-form {
    padding: 0 !important;
    background: transparent;
    border-radius: 0;
}

/* ------------------------------------------------------------------
 * BugHerd 593 - Smooth scroll
 *
 * The cover's "See the work" and "Enquire about a space" are in-page
 * anchors. scroll-margin-top keeps the target clear of the header,
 * which the cover sits under (`.cover-header` pulls up by 86px).
 * ------------------------------------------------------------------ */

/* No scroll-behavior here: the native jump this styles is the thing that gets
 * cancelled on load. assets/js/case-studies.js performs the scroll instead.
 * scroll-margin-top stays as the fallback if that script does not run. */

#case-studies,
#case-study-story,
#contact {
    scroll-margin-top: 100px;
}

/* ------------------------------------------------------------------
 * BugHerd 586 - Archive cover background video
 *
 * .section-hero-cover is a shared component and position: static, so the
 * video layer needs a positioned parent. Scoped to the --video modifier,
 * which only the archive adds and only when a video is set, so no other
 * cover is affected.
 *
 * The cover image stays as the poster and as the CSS background behind
 * the video, so the section still reads if the file 404s, the browser
 * refuses autoplay, or the viewer prefers reduced motion.
 *
 * The scrim is the reason this needs care: the headline is white and the
 * footage is bright and moving, so contrast cannot be left to the frame.
 * ------------------------------------------------------------------ */

.section-hero-cover--video {
    position: relative;
    overflow: hidden;
}

.section-hero-cover--video .hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.section-hero-cover--video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.1) 35%,
        rgba(0, 0, 0, 0.75) 100%
    );
}

.section-hero-cover--video .wrap {
    position: relative;
    z-index: 2;
}

/* Motion is decorative here; the poster carries the same image. */
@media (prefers-reduced-motion: reduce) {
    .section-hero-cover--video .hero-video {
        display: none;
    }
}