/* ═══════════════════════════════════════════════════════════════
   card-theme.css — Card Visual Theme Engine (layers + tokens)

   Applied by ds-card-theme.directive.js, which stamps each card with:
     .dsc  data-dsc-theme="finance"  data-dsc-pattern="grid"
     --dsc-accent / --dsc-accent-2 / --dsc-glow  (from the theme registry)

   Layer stack (bottom → top):
     .dsc-backdrop          gradient wash (whole card)
     .dsc-backdrop::before  decorative pattern (grid/dots/rings/circuit)
     .dsc-backdrop::after   soft glow
     .dsc-hero              in-flow illustration area (top ~45% of card)
     card content           (.ds-card-body / footer / check)

   Every colour derives from the theme variables via color-mix over
   `transparent`, so the same tokens read correctly on light and dark
   themes — no per-theme colour forks, no opaque backgrounds.
   ═══════════════════════════════════════════════════════════════ */

.dsc {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Tint strengths — raised slightly on dark backgrounds below */
    --dsc-wash-a: 14%;
    --dsc-wash-b: 5%;
    --dsc-pattern-a: 9%;
    --dsc-glow-a: 22%;
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 200ms ease;
}

[data-bs-theme="dark"] .dsc {
    --dsc-wash-a: 20%;
    --dsc-wash-b: 8%;
    --dsc-pattern-a: 13%;
    --dsc-glow-a: 30%;
}

/* Existing card content sits above the decorative layers */
.dsc > .ds-card-body,
.dsc > .ds-card-footer,
.dsc > .ds-card-check {
    position: relative;
    z-index: 2;
}

/* ── Layer 1+2+3: backdrop (gradient → pattern → glow) ────────── */
.dsc-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--dsc-accent) var(--dsc-wash-a), transparent) 0%,
        color-mix(in srgb, var(--dsc-accent-2) var(--dsc-wash-b), transparent) 55%,
        transparent 100%);
}

/* Decorative pattern — fades out before the text zone so copy stays
   readable. Pattern picked per theme via data-dsc-pattern. */
.dsc-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

.dsc[data-dsc-pattern="grid"] .dsc-backdrop::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--dsc-accent) var(--dsc-pattern-a), transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--dsc-accent) var(--dsc-pattern-a), transparent) 1px, transparent 1px);
    background-size: 22px 22px;
}

.dsc[data-dsc-pattern="dots"] .dsc-backdrop::before {
    background-image: radial-gradient(color-mix(in srgb, var(--dsc-accent) calc(var(--dsc-pattern-a) * 2), transparent) 1.5px, transparent 1.6px);
    background-size: 16px 16px;
}

.dsc[data-dsc-pattern="rings"] .dsc-backdrop::before {
    background-image:
        radial-gradient(circle at 85% 12%, transparent 28px, color-mix(in srgb, var(--dsc-accent) calc(var(--dsc-pattern-a) * 2), transparent) 29px, transparent 31px),
        radial-gradient(circle at 8% 45%, transparent 44px, color-mix(in srgb, var(--dsc-accent) calc(var(--dsc-pattern-a) * 2), transparent) 45px, transparent 47px),
        radial-gradient(circle at 85% 12%, transparent 48px, color-mix(in srgb, var(--dsc-accent) var(--dsc-pattern-a), transparent) 49px, transparent 51px);
    background-repeat: no-repeat;
}

.dsc[data-dsc-pattern="circuit"] .dsc-backdrop::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--dsc-accent) var(--dsc-pattern-a), transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--dsc-accent) var(--dsc-pattern-a), transparent) 1px, transparent 1px),
        radial-gradient(color-mix(in srgb, var(--dsc-accent) calc(var(--dsc-pattern-a) * 3), transparent) 1.5px, transparent 1.6px);
    background-size: 34px 34px, 34px 34px, 34px 34px;
    background-position: 0 0, 0 0, 17px 17px;
}

/* Soft glow — brightens on hover */
.dsc-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(130px 90px at 80% 8%,
        color-mix(in srgb, var(--dsc-glow) var(--dsc-glow-a), transparent), transparent 70%);
    opacity: 0.7;
    transition: opacity 300ms ease;
}

/* ── Layer 4: hero illustration (top ~45–55% of the card) ─────── */
.dsc-hero {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    height: 92px;
    /* bleed to the card edges past .ds-card's own padding */
    margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dsc-illustration {
    width: 76%;
    height: 84%;
    max-width: 230px;
    transition: transform 350ms ease;
}

/* Raster hero (theme heroImage — AI-generated WebP with transparent
   background). Shadow comes from CSS, tinted by the theme accent, so
   source images should be generated WITHOUT a baked ground shadow. */
.dsc-hero-img {
    display: none;
    max-width: 72%;
    max-height: 96%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--dsc-accent) 28%, transparent));
    transition: transform 350ms ease;
}

.dsc-hero--img .dsc-hero-img {
    display: block;
}

.dsc-hero--img .dsc-illustration {
    display: none;
}

.dsc:hover .dsc-hero-img {
    transform: translateY(-3px) scale(1.03);
}

/* Datasource catalogue cards use the clay renders as the primary visual,
   with an image-to-copy ratio matching the reference card family. */
.ds-card--clay-hero .dsc-hero {
    height: 136px;
    margin-bottom: var(--space-md);
    align-items: flex-end;
}

.ds-card--clay-hero .dsc-hero-img {
    width: 84%;
    height: 100%;
    max-width: 250px;
    max-height: 132px;
    object-position: center bottom;
}

/* ── Theme-token tinting of existing card chrome ──────────────── */
.dsc .ds-card-icon-wrap {
    color: var(--dsc-accent);
    border-color: color-mix(in srgb, var(--dsc-accent) 35%, var(--border));
    background: color-mix(in srgb, var(--dsc-accent) 10%, transparent);
}

.dsc .ds1-status {
    color: var(--dsc-accent);
}

.dsc .ds1-status__dot {
    background: var(--dsc-accent);
}

.dsc .ds-act-pill,
.dsc .source-section-pill {
    color: var(--dsc-accent);
    border-color: color-mix(in srgb, var(--dsc-accent) 30%, transparent);
}

.dsc .ds-card-add {
    color: var(--dsc-accent);
}

/* ── Hover — premium but restrained ───────────────────────────── */
.dsc:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dsc-accent) 45%, var(--border));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--dsc-accent) 16%, transparent);
}

.dsc:hover .dsc-illustration {
    transform: translateY(-3px) scale(1.03);
}

.dsc:hover .dsc-backdrop::after {
    opacity: 1;
}

/* Keep the selection ring authoritative over the hover border */
.dsc.ds-card--selected {
    transform: none;
}

/* ── Responsive / compact contexts ────────────────────────────── */
@media (max-width: 768px) {
    .dsc-hero {
        height: 72px;
    }

    .ds-card--clay-hero .dsc-hero {
        height: 112px;
    }

    .ds-card--clay-hero .dsc-hero-img {
        max-height: 108px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsc,
    .dsc:hover,
    .dsc-illustration,
    .dsc:hover .dsc-illustration,
    .dsc-hero-img,
    .dsc:hover .dsc-hero-img {
        transition: none;
        transform: none;
    }
}