/* ===========================================================================
   Single Case Study — internal case page (single-case_study.php)
   The page markup uses the ORIGINAL compiled Tailwind utilities from
   selfhost/css/main.css. That stylesheet references image assets with
   site-root paths (/images/…) which do not exist locally, so the only job
   of this file is to repoint those url() values at the theme's own copies
   in firmwork/assets/img/. Everything else comes from main.css.
   =========================================================================== */

/* "What we did" checklist marker (lime pill + check) */
.voctos-case-single [class*="before:bg-checkbox"]::before {
    background-image: url(../assets/img/checkbox.png) !important;
}

/* "The task" dashed circle icon */
.voctos-case-single [class*="tasks.svg"]::before {
    background-image: url(../assets/img/tasks.svg) !important;
}

/* Rich-text (wysiwyg) blocks: restore paragraph/list spacing lost to the Tailwind reset */
.voctos-case-single .csp-rich p + p { margin-top: 0.6em; }
.voctos-case-single .csp-rich ul,
.voctos-case-single .csp-rich ol { margin: 0.6em 0 0.6em 1.1em; list-style: disc; }
.voctos-case-single .csp-rich ol { list-style: decimal; }
.voctos-case-single .csp-rich a { text-decoration: underline; }

/* Dark URL card globe icon */
.voctos-case-single [class*="internet-icon"]::before {
    background-image: url(../assets/img/internet-icon.svg) !important;
}

/* Description CTA — always its own line below the paragraph, sized to its
   own content (not full-width). `w-fit` isn't in the precompiled Tailwind
   bundle here, so this is plain CSS instead of an arbitrary utility class. */
.voctos-case-single .csp-desc-cta {
    width: fit-content;
}

/* ── Hero photo — brand gradient (same recipe as Contact/Reviews hero) ──
   Reuses the exact pattern already established on .voctos-contact-hero and
   .voctos-reviews-hero (contact-hero.css / reviews-hero.css):
     1) a small dark vignette PINNED right under the header — fixed 134px
        tall, black -> transparent, vertical — identical to
        .voctos-contact-hero::before, so it reads as "the same" fixed strip,
        not something that fades away as you scroll past the header.
     2) the brand's horizontal card gradient — dark navy #101A2F on the left
        fading to the lighter blue-grey #7B8DAF on the right — same two
        colors as .chero-card's `linear-gradient(90deg, #101A2F 0%,
        #7B8DAF 100%)` — kept semi-transparent here (unlike the solid card)
        so the client photo still shows through underneath it. This lives on
        its own ::after element with a vertical mask-image fade so it dies
        out smoothly before the bottom (a hard background-size cutoff here
        left a visible seam line across the photo, and painting it the full
        height kept the URL-card corner muddy grey instead of white).
     3) a fade to solid white over the last stretch (on ::before, full
        height) so the photo visually dissolves into the white section below
        instead of cutting off hard.
   Real, non-overlapping layout (no negative margins): a previous attempt at
   physically overlapping the next section clipped the info-cards' own
   rounded/shadow corners and looked worse, not better — reverted. */
.voctos-case-single .csp-hero {
    position: relative;
}
.voctos-case-single .csp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(137, 137, 137, 0) 100%),
        /* Bottom dissolve — same recipe as the Media teaser cards
           (transparent -> solid white), but starting earlier and reaching
           full white well before the section edge so the photo melts into
           the white content below instead of stopping at a visible line. */
        /* NOTE: the page background under the hero is bg-eighth (#EFF0F4), not
           pure white — fading to white left a visible seam where the two met.
           Fade to the exact page color so the photo dissolves seamlessly. */
        linear-gradient(180deg, rgba(239, 240, 244, 0) 0%, rgba(239, 240, 244, 0) 55%, rgba(239, 240, 244, .85) 82%, #EFF0F4 94%);
    background-repeat: no-repeat;
    background-size: 100% 134px, 100% 100%;
    background-position: top left, top left;
    pointer-events: none;
    z-index: 0;
}
.voctos-case-single .csp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 26, 47, .72) 0%, rgba(16, 26, 47, .4) 55%, rgba(16, 26, 47, .18) 100%);
    /* Stays fully strength for longer (matches the darker look approved
       earlier) and only tapers out right at the very end, so it still
       reaches transparent before the info-card row instead of cutting off
       with a hard edge. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 88%);
    pointer-events: none;
    z-index: 0;
}
.voctos-case-single .csp-hero-inner {
    position: relative;
    z-index: 1;
}