@layer dx-component-base {
/* ==========================================================================
   Media — basic component + the shared image element

   This file owns BOTH:
     • `.dx-media-component` — the section wrapper rendered by the
       standalone Media basic component (`components/media.php`). Just a
       centering layout helper; visual styling comes from the element below.
     • `.dx-image` — the actual `<img>` element. Used everywhere an image
       appears: standalone Media component, future media slots inside Core
       or section components, etc. Mirrors the `.dx-button` pattern.
     • `.dx-image-link` — optional anchor wrapper used when the user fills
       in the Link field. Display block so the link only covers the image
       (not a full text-line baseline).

   Token fallbacks: tokens consumed below (--dx-effect-border-radius,
   --dx-effect-transition-duration) are emitted unconditionally by
   dx_output_token_styles() (inc/tokens.php), so bare `var(--token)` is
   sufficient — see Token Fallbacks note in style.css.
   ========================================================================== */

/* ---------- Media-component layout (centering wrapper) ---------- */

.dx-media-component__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- Image element ---------- */

.dx-image {
  /* Display block kills the inline-baseline gap that `<img>` inherits by
     default. Combined with max-width:100% this gives a fluid image that
     scales down on narrow viewports without overflowing its container. */
  display: block;
  max-width: 100%;
  height: auto;
  /* Site-wide image border-radius — set on the Media panel of the
     Elegance page (effects.image_radius). When the user leaves it on
     "Default", `--dx-image-radius` isn't emitted and the fallback
     (`--dx-effect-border-radius`, the global radius) takes over.
     Per-instance overrides happen via Custom CSS on the individual
     Media placement — there's deliberately no per-instance field. */
  border-radius: var(--dx-image-radius, var(--dx-effect-border-radius));
}

/* ---------- Inline-SVG colour (Dynamic "SVG" token) ----------

   Uploaded SVGs are rendered as inline `<svg class="dx-image">` (see
   dx_render_image_html) and inherit `currentColor`. Lucide-style icons
   declare `stroke="currentColor"` / `fill="currentColor"`, so pinning
   `color` here recolours them via the mode-aware `--dx-svg` Dynamic
   alias (defaults to a SOLID foreground — that's what stops overlapping
   strokes from compounding into the "layer upon layer" ghosting an
   alpha text colour produced). Multi-colour SVGs carry their own fills
   and are unaffected. Scoped to `svg.dx-image` so it never touches
   raster `<img>` or theme-chrome SVGs (button arrows, etc.). */
svg.dx-image {
  color: hsl(var(--dx-svg));
  transition: color var(--dx-effect-transition-duration) ease;
}

/* Hover → swap to the hover colour (`--dx-svg-hover`, an HSL triplet,
   wrapped in hsl() like the base rule). Two triggers:
     • `svg.dx-image:hover` — hovering the SVG directly (a logo, an
       icon), regardless of any link. The intuitive "I hover it, it
       reacts" case.
     • `.dx-core--has-link:hover svg.dx-image` — hovering ANYWHERE on a
       stretched-link Core also swaps its SVG, so the icon participates
       in the card's hover feedback (not just when the cursor is over
       the icon itself). Same `.dx-core--has-link` gate as the
       border/border_hover pair in core.css.
   The base `transition` on `svg.dx-image` animates both. */
svg.dx-image:hover,
.dx-core--has-link:hover svg.dx-image {
  color: hsl(var(--dx-svg-hover));
}

/* ---------- Link wrapper ----------

   Block display so the anchor's hit area matches the image box exactly,
   no trailing baseline whitespace. The transition lets per-instance
   Custom CSS animate hover effects (opacity, transform, filter, etc.)
   without each rule needing to redeclare its own transition.

   Note on `min-width: 0`: when this anchor sits inside a flex parent
   (e.g. .dx-media-component__inner is `display: flex`), the default
   `min-width: auto` on flex items would force the anchor to the
   intrinsic width of its content. SVGs declared without explicit
   width/height (only a `viewBox`) have *no* intrinsic width — the
   anchor would then collapse to zero, dragging the image with it.
   `min-width: 0` releases that constraint so the anchor can take its
   share of the flex container, and the inner `<img class="dx-image">`
   resolves its `max-width: 100%` against a real width. The SVG should
   ideally also carry width/height attributes (defence in depth), but
   this rule keeps the standalone Media component robust regardless. */
.dx-image-link {
  display: block;
  min-width: 0;
  transition: opacity var(--dx-effect-transition-duration) ease,
              transform var(--dx-effect-transition-duration) ease;
}

/* ── Video embed wrappers ───────────────────────────────────────────────────
   16:9 aspect-ratio container so YouTube / Vimeo iframes scale fluidly. */
.dx-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--dx-effect-border-radius);
    overflow: hidden;
}

.dx-video-embed iframe,
.dx-video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}
}