/*
 * media-blend.css
 * DARK THEME ONLY. Brand-forward treatment (blue/gold gradient plate, CT
 * logo colors) behind AI-generated promo/hero images that have near-white
 * backgrounds baked in, so they read as an intentional framed graphic on
 * the dark theme instead of a washed-out light rectangle on a black page.
 *
 * Founder has explicitly confirmed TWICE: light theme already looks
 * correct and must NOT be touched by this file in any way. Every rule
 * below is scoped under :root[data-theme="dark"]. If you are editing this
 * file and are about to add a rule without that scope, stop -- that is
 * the exact regression that was already caught and reverted once.
 *
 * Token-driven: reads var(--brand) / var(--gold) already defined per page
 * (sourced from CloviDOS). No hardcoded hex literals (hex only appears as
 * the final var() fallback rung).
 *
 * Specificity note: uses plain `:root[data-theme="dark"] .class` selectors
 * (real, non-zero specificity), not :where(...) -- a :where()-wrapped
 * version of this file was previously shipped and silently did nothing,
 * because pages' own inline <style> blocks define normal class selectors
 * for the same containers which always beat zero-specificity :where().
 *
 * Applies via shared container classes used across clovitek.ai:
 *   .pcard-media   our-work / how-we-work platform card grids
 *   .media, .media-wrap   generic content-page media blocks
 *   .hero-media, .ctx-media, .heroart   hero image slots
 *   .legal-hero, .tn-hero, .eng-hero, .cx-hero, .ag-hero
 *   (.hhero intentionally excluded — it is a full hero section, not an
 *   image/media frame, and has its own dedicated dark-theme tone-matched
 *   background in assets/menu.css)
 *   (.hs-media / .device-view intentionally excluded 2026-07-27 — this is
 *   the homepage hero carousel's own browser-window mockup (.device: dots
 *   + address bar chrome, real product screenshots with no near-white
 *   padding baked in). Applying the AI-image gradient plate here stacked a
 *   second decorative frame on top of the browser chrome and forced
 *   object-fit:contain, shrinking each screenshot into a floating card.
 *   The carousel now owns its own consistent frame; do not re-add these
 *   two classes without re-checking that regression.)
 *     page-specific hero variants sharing the same media-frame need
 */

:root[data-theme="dark"] .pcard-media,
:root[data-theme="dark"] .pcard-thumb,
:root[data-theme="dark"] .media,
:root[data-theme="dark"] .media-wrap,
:root[data-theme="dark"] .hero-media,
:root[data-theme="dark"] .ctx-media,
:root[data-theme="dark"] .heroart,
:root[data-theme="dark"] .legal-hero,
:root[data-theme="dark"] .tn-hero,
:root[data-theme="dark"] .eng-hero,
:root[data-theme="dark"] .cx-hero,
:root[data-theme="dark"] .ag-hero,
:root[data-theme="dark"] .fr,
:root[data-theme="dark"] .pw-fr,
:root[data-theme="dark"] .rmthumb,
:root[data-theme="dark"] .svc-thumb,
:root[data-theme="dark"] .ccimgwrap,
:root[data-theme="dark"] .pfig,
:root[data-theme="dark"] .rgi,
:root[data-theme="dark"] .tngrid {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--line, var(--border, rgba(255, 255, 255, 0.08)));
  box-shadow: var(--shadow-sm, var(--shadow, 0 8px 24px -12px rgba(0, 0, 0, 0.35)));
  overflow: hidden;
  background:
    radial-gradient(160% 220% at 15% 10%, color-mix(in srgb, var(--brand, #3E6FB0) 24%, transparent), transparent 75%),
    radial-gradient(140% 190% at 100% 100%, color-mix(in srgb, cyan 18%, var(--brand, #3E6FB0) 15%), transparent 78%),
    color-mix(in srgb, var(--brand, #3E6FB0) 6%, var(--bg-3, var(--surface-2, #0b1220))) !important;
  padding: 6% !important;
}

/* Faint AI-style dot grid inside the plate, matching the same tech-dot
   pattern already used on this site's hero sections (radial-gradient dots),
   so this treatment reads as consistent with the rest of the page rather
   than a new invented visual language. */
:root[data-theme="dark"] .pcard-media::before,
:root[data-theme="dark"] .pcard-thumb::before,
:root[data-theme="dark"] .media::before,
:root[data-theme="dark"] .media-wrap::before,
:root[data-theme="dark"] .hero-media::before,
:root[data-theme="dark"] .ctx-media::before,
:root[data-theme="dark"] .heroart::before,
:root[data-theme="dark"] .legal-hero::before,
:root[data-theme="dark"] .tn-hero::before,
:root[data-theme="dark"] .eng-hero::before,
:root[data-theme="dark"] .cx-hero::before,
:root[data-theme="dark"] .ag-hero::before,
:root[data-theme="dark"] .fr::before,
:root[data-theme="dark"] .pw-fr::before,
:root[data-theme="dark"] .rmthumb::before,
:root[data-theme="dark"] .svc-thumb::before,
:root[data-theme="dark"] .ccimgwrap::before,
:root[data-theme="dark"] .pfig::before,
:root[data-theme="dark"] .rgi::before,
:root[data-theme="dark"] .tngrid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--brand, #3E6FB0) 40%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.5;
}

/* The art itself: contain (not cover) so the container's gradient plate is
 * visible as a frame around the edges. The image content is otherwise left
 * completely untouched -- no filters, no opacity, no blend-mode, no fade.
 * Dark theme only -- light theme keeps the page's own object-fit:cover. */
:root[data-theme="dark"] .pcard-media img,
:root[data-theme="dark"] .pcard-thumb img,
:root[data-theme="dark"] .media img,
:root[data-theme="dark"] .media-wrap img,
:root[data-theme="dark"] .hero-media img,
:root[data-theme="dark"] .ctx-media img,
:root[data-theme="dark"] .heroart img,
:root[data-theme="dark"] .legal-hero img,
:root[data-theme="dark"] .tn-hero img,
:root[data-theme="dark"] .eng-hero img,
:root[data-theme="dark"] .cx-hero img,
:root[data-theme="dark"] .ag-hero img,
:root[data-theme="dark"] .fr img,
:root[data-theme="dark"] .pw-fr img,
:root[data-theme="dark"] .rmthumb img,
:root[data-theme="dark"] .svc-thumb img,
:root[data-theme="dark"] .ccimgwrap img,
:root[data-theme="dark"] .pfig img,
:root[data-theme="dark"] .rgi img,
:root[data-theme="dark"] .tngrid img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: calc(var(--radius-lg, 12px) - 4px);
}

/* Inner frame: a subtle inset highlight so the plate edge reads as a
   deliberate frame, using the same brand/gold pairing. Dark theme only. */
:root[data-theme="dark"] .pcard-media::after,
:root[data-theme="dark"] .pcard-thumb::after,
:root[data-theme="dark"] .media::after,
:root[data-theme="dark"] .media-wrap::after,
:root[data-theme="dark"] .hero-media::after,
:root[data-theme="dark"] .ctx-media::after,
:root[data-theme="dark"] .heroart::after,
:root[data-theme="dark"] .legal-hero::after,
:root[data-theme="dark"] .tn-hero::after,
:root[data-theme="dark"] .eng-hero::after,
:root[data-theme="dark"] .cx-hero::after,
:root[data-theme="dark"] .ag-hero::after,
:root[data-theme="dark"] .fr::after,
:root[data-theme="dark"] .pw-fr::after,
:root[data-theme="dark"] .rmthumb::after,
:root[data-theme="dark"] .svc-thumb::after,
:root[data-theme="dark"] .ccimgwrap::after,
:root[data-theme="dark"] .pfig::after,
:root[data-theme="dark"] .rgi::after,
:root[data-theme="dark"] .tngrid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Light theme intentionally has NO rules in this file. Founder confirmed
   twice that light theme already looks correct -- leave it exactly as
   each page's own inline <style> block originally defined it. */