/* ============================================================
   VOLT — IMAGE SLOTS
   Free-licence photos from images.unsplash.com (commercial use,
   no attribution required). Nothing from plus.unsplash.com,
   which requires a paid Unsplash+ plan.

   SELECTION RULE APPLIED HERE:
   No photo that shows another company's website, storefront, ad
   or logo. Those imply a client relationship you don't have, put
   someone else's marketing on your page, and can raise trademark
   problems. Only abstract commerce renders, neutral desk shots
   and typography remain.

   Removed for that reason: a crypto brokerage landing page, a
   Mango storefront, an unidentified fashion store, and two
   screenshots whose on-screen brand couldn't be verified.

   TO SWAP: change the photo-XXXX id.
   BEFORE LAUNCH: download these, upload to your Media Library,
   and point the URLs at your own server.
   ============================================================ */

/* ---------- shared ---------- */
.volt-shot{position:relative;overflow:hidden;background-color:var(--bg-2);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.volt-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(7,27,18,.62),rgba(14,122,70,.44) 60%,rgba(198,242,78,.16));
  mix-blend-mode:multiply}
.volt-shot--plain::after{display:none}

/* ============================================================
   1. HOMEPAGE HERO
   Off by default. The hero already carries the gradient, the 3D
   objects and the project card — a photo behind all of that is
   noise. Add class `hero--photo` to the section to switch it on.
   ============================================================ */
body .hero{position:relative}
body .hero.hero--photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("https://images.unsplash.com/photo-1674027392887-751d6396b710?fm=jpg&q=70&w=1900&auto=format&fit=crop") right center/cover no-repeat;
  opacity:.10;filter:grayscale(.65)}
body .hero .wrap{position:relative;z-index:1}

/* ============================================================
   2. PAGE HEADER / MARKETPLACE HERO
   Add `has-art` to .phead plus a .phead-media div.
   ============================================================ */
body .phead.has-art .phead-media{
  background-image:url("https://images.unsplash.com/photo-1487014679447-9f8336841d58?fm=jpg&q=70&w=1900&auto=format&fit=crop");
  opacity:.10;filter:grayscale(.55)}
body .phead.has-art.phead--market .phead-media{
  background-image:url("https://images.unsplash.com/photo-1674027392842-29f8354e236c?fm=jpg&q=70&w=1900&auto=format&fit=crop");
  opacity:.13;filter:none}
body .phead.has-art.phead--services .phead-media{
  background-image:url("https://images.unsplash.com/photo-1763872038252-e6c4e0a11067?fm=jpg&q=70&w=1900&auto=format&fit=crop");
  opacity:.10;filter:grayscale(.5)}
/* on a dark header the art can carry more weight */
body .phead--dark.has-art .phead-media{opacity:.22;filter:none}

/* ============================================================
   3. FEATURE ROWS  — abstract commerce renders only
   ============================================================ */
body .frow-media{position:relative;overflow:hidden;min-height:300px;
  background-size:cover !important;background-position:center !important}
body .frow:nth-of-type(odd) .frow-media{
  background-image:linear-gradient(150deg,rgba(7,27,18,.5),rgba(14,122,70,.3)),
    url("https://images.unsplash.com/photo-1674027392857-9aed6e8ecab9?fm=jpg&q=70&w=1200&auto=format&fit=crop") !important}
body .frow:nth-of-type(even) .frow-media{
  background-image:linear-gradient(150deg,rgba(7,27,18,.5),rgba(14,122,70,.3)),
    url("https://images.unsplash.com/photo-1674027392838-d85710a5121d?fm=jpg&q=70&w=1200&auto=format&fit=crop") !important}
body .frow-media img{position:relative;z-index:1}

/* ============================================================
   4. CATEGORY CARDS
   ============================================================ */
body .catc .catc-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
body .cat-grid>.catc:nth-child(4n+1) .catc-bg{
  background-image:url("https://images.unsplash.com/photo-1674027392857-9aed6e8ecab9?fm=jpg&q=70&w=900&auto=format&fit=crop")}
body .cat-grid>.catc:nth-child(4n+2) .catc-bg{
  background-image:url("https://images.unsplash.com/photo-1674027392842-29f8354e236c?fm=jpg&q=70&w=900&auto=format&fit=crop")}
body .cat-grid>.catc:nth-child(4n+3) .catc-bg{
  background-image:url("https://images.unsplash.com/photo-1674027392838-d85710a5121d?fm=jpg&q=70&w=900&auto=format&fit=crop")}
body .cat-grid>.catc:nth-child(4n+4) .catc-bg{
  background-image:url("https://images.unsplash.com/photo-1674027392887-751d6396b710?fm=jpg&q=70&w=900&auto=format&fit=crop")}

/* ============================================================
   5. BLOG THUMBNAILS — typography shots, no branded screens.
   Only fills in when a post has no featured image.
   ============================================================ */
body .blog-card .blog-thumb:not(:has(img)),
body .blog-thumb.is-empty{background-size:cover;background-position:center}
body .blog-grid>*:nth-child(3n+1) .blog-thumb:not(:has(img)){
  background-image:url("https://images.unsplash.com/photo-1657812159055-7bae416f386d?fm=jpg&q=70&w=900&auto=format&fit=crop")}
body .blog-grid>*:nth-child(3n+2) .blog-thumb:not(:has(img)){
  background-image:url("https://images.unsplash.com/photo-1657812159075-7f0abd98f7b8?fm=jpg&q=70&w=900&auto=format&fit=crop")}
body .blog-grid>*:nth-child(3n+3) .blog-thumb:not(:has(img)){
  background-image:url("https://images.unsplash.com/photo-1657812159103-1b2a52a7f5e8?fm=jpg&q=70&w=900&auto=format&fit=crop")}

/* ============================================================
   6. PRODUCT CARD FALLBACK
   ============================================================ */
body .rc-noimg{
  background:linear-gradient(150deg,rgba(7,27,18,.6),rgba(14,122,70,.36)),
    url("https://images.unsplash.com/photo-1674027392838-d85710a5121d?fm=jpg&q=70&w=800&auto=format&fit=crop") center/cover no-repeat;
  color:#fff;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}

/* ============================================================
   7. NEWSLETTER TEXTURE
   ============================================================ */
body .news::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("https://images.unsplash.com/photo-1674027392887-751d6396b710?fm=jpg&q=70&w=1400&auto=format&fit=crop") center/cover no-repeat;
  opacity:.09;filter:grayscale(1)}
body .news>*{position:relative;z-index:1}

/* ============================================================
   NOT WIRED ON PURPOSE: .work-card / .work-thumb (Showcase).
   Those images claim "this is our work". Use real screenshots.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){
  body .frow-media,body .catc-bg,body .blog-thumb{animation:voltShotIn .6s ease backwards}
}
@keyframes voltShotIn{from{opacity:0}to{opacity:1}}

/* ============================================================
   8. FEATURE ROW — INNER PLATE
   The widget prints an inner div carrying an INLINE
   `background:var(--violet-deep)` plus an aspect-ratio. Inline
   styles beat stylesheets, so a photo set on `.frow-media` was
   being painted over completely.

   Fix: keep the photo on `.frow-media`, and turn that inner plate
   into a translucent wash so the photo reads through it. The
   aspect-ratio on the inline style is left alone — it is what
   gives the panel its height.
   ============================================================ */
body .frow-media{position:relative}
body .frow-media>div{
  background-color:transparent !important;
  background-image:linear-gradient(150deg,rgba(7,27,18,.58),rgba(14,122,70,.34) 62%,rgba(198,242,78,.12)) !important;
  min-height:300px}

/* the oversized ghost word the widget drops in */
body .frow-media .vfr-ghost{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:clamp(52px,7vw,104px);letter-spacing:-.05em;
  line-height:1;color:rgba(255,255,255,.14);text-transform:uppercase;pointer-events:none;
  user-select:none;overflow:hidden;padding:0 16px;text-align:center}

/* if the row has a real <img>, it wins and the wash sits above it */
body .frow-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
body .frow-media:has(img)>div{position:absolute;inset:0;z-index:2;min-height:0}