/**
 * Duotone Color Overlay Effect
 * Uses Core Framework color palette
 * Supports both class-based (.duotone-*) and attribute-based ([data-duotone])
 * Contrast control via data-contrast attribute or --duotone-contrast CSS variable
 */

/* CSS Custom Properties for duotone control */
:root {
    --duotone-contrast: 1.5;
    --duotone-brightness: 0.95;
    --duotone-contrast-light: 1.0;
    --duotone-brightness-light: 1.25;
}

/* Basic duotone wrapper */
.duotone-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* Data-attribute based duotone for Bricks components */
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) {
    position: relative;
}

/* Hero-style duotone: image positioned absolute behind content */
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) figure,
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) .brxe-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) figure img,
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) .brxe-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Apply grayscale to images inside data-duotone containers (dark mode) */
/* Contrast is controllable via --duotone-contrast or data-contrast attribute */
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]):not([data-duotone*="-light"]) img,
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]):not([data-duotone*="-light"]) figure img {
    filter: grayscale(100%) contrast(var(--duotone-contrast, 1.5)) brightness(var(--duotone-brightness, 0.95));
}

/* Light variants - softer, brighter filter */
[data-duotone*="-light"] img,
[data-duotone*="-light"] figure img {
    filter: grayscale(100%) contrast(var(--duotone-contrast-light, 1.0)) brightness(var(--duotone-brightness-light, 1.25));
}

/* Intensity presets via data-intensity attribute */
/* Soft end: lower contrast, brighter (washed out) */
[data-intensity="softer"] { --duotone-contrast: 0.6; --duotone-brightness: 1.3; }
[data-intensity="soft"] { --duotone-contrast: 0.8; --duotone-brightness: 1.2; }
[data-intensity="light"] { --duotone-contrast: 1.0; --duotone-brightness: 1.1; }
/* Neutral - no modification */
[data-intensity="neutral"] { --duotone-contrast: 1.0; --duotone-brightness: 1.0; }
[data-intensity="normal"] { --duotone-contrast: 1.2; --duotone-brightness: 1.0; }
/* Punchy end: higher contrast, darker (dramatic) */
[data-intensity="punchy"] { --duotone-contrast: 1.5; --duotone-brightness: 0.9; }
[data-intensity="intense"] { --duotone-contrast: 1.8; --duotone-brightness: 0.8; }

/* Create overlay pseudo-element for data-duotone containers */
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) figure::after,
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) .brxe-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Primary colors - multiply (dark) */
[data-duotone="duotone-primary"] .brxe-image::after,
[data-duotone="duotone-primary"] figure::after {
    background: var(--primary, #633368);
    mix-blend-mode: multiply;
}

[data-duotone="duotone-primary--alt"] .brxe-image::after,
[data-duotone="duotone-primary--alt"] figure::after {
    background: var(--primary--alt);
    mix-blend-mode: multiply;
}

/* Secondary colors - multiply (dark) */
[data-duotone="duotone-secondary"] .brxe-image::after,
[data-duotone="duotone-secondary"] figure::after {
    background: var(--secondary, #A0EACE);
    mix-blend-mode: multiply;
}

[data-duotone="duotone-secondary--alt"] .brxe-image::after,
[data-duotone="duotone-secondary--alt"] figure::after {
    background: var(--secondary--alt);
    mix-blend-mode: multiply;
}

/* Tertiary colors - multiply (dark) */
[data-duotone="duotone-tertiary"] .brxe-image::after,
[data-duotone="duotone-tertiary"] figure::after {
    background: var(--tertiary);
    mix-blend-mode: multiply;
}

[data-duotone="duotone-tertiary--alt"] .brxe-image::after,
[data-duotone="duotone-tertiary--alt"] figure::after {
    background: var(--tertiary--alt);
    mix-blend-mode: multiply;
}

/* Light mode (screen blend - brighter) */
[data-duotone="duotone-primary-light"] .brxe-image::after,
[data-duotone="duotone-primary-light"] figure::after {
    background: var(--primary, #633368);
    mix-blend-mode: screen;
}

[data-duotone="duotone-secondary-light"] .brxe-image::after,
[data-duotone="duotone-secondary-light"] figure::after {
    background: var(--secondary, #A0EACE);
    mix-blend-mode: screen;
}

[data-duotone="duotone-tertiary-light"] .brxe-image::after,
[data-duotone="duotone-tertiary-light"] figure::after {
    background: var(--tertiary);
    mix-blend-mode: screen;
}

/* Overlay mode (balanced) */
[data-duotone="duotone-primary-overlay"] .brxe-image::after,
[data-duotone="duotone-primary-overlay"] figure::after {
    background: var(--primary, #633368);
    mix-blend-mode: overlay;
}

[data-duotone="duotone-secondary-overlay"] .brxe-image::after,
[data-duotone="duotone-secondary-overlay"] figure::after {
    background: var(--secondary, #A0EACE);
    mix-blend-mode: overlay;
}

[data-duotone="duotone-tertiary-overlay"] .brxe-image::after,
[data-duotone="duotone-tertiary-overlay"] figure::after {
    background: var(--tertiary);
    mix-blend-mode: overlay;
}

/* Ensure images stay below overlay */
[data-duotone] img {
    position: relative;
    z-index: 0;
    display: block;
}

/* ==============================================
   AUTO-COLOR TEXT BASED ON DUOTONE SELECTION
   All text inherits color from the duotone theme
   ============================================== */

/* Primary (Dark) - text uses alt color for contrast */
[data-duotone="duotone-primary"] {
    --duotone-text-color: var(--primary--alt);
}

/* Primary Alt (Dark) */
[data-duotone="duotone-primary--alt"] {
    --duotone-text-color: var(--primary);
}

/* Secondary (Dark) */
[data-duotone="duotone-secondary"] {
    --duotone-text-color: var(--secondary--alt);
}

/* Secondary Alt (Dark) */
[data-duotone="duotone-secondary--alt"] {
    --duotone-text-color: var(--secondary);
}

/* Tertiary (Dark) */
[data-duotone="duotone-tertiary"] {
    --duotone-text-color: var(--tertiary--alt);
}

/* Tertiary Alt (Dark) */
[data-duotone="duotone-tertiary--alt"] {
    --duotone-text-color: var(--tertiary);
}

/* Light variants - darker text for readability */
[data-duotone="duotone-primary-light"] {
    --duotone-text-color: var(--primary);
}

[data-duotone="duotone-secondary-light"] {
    --duotone-text-color: var(--secondary);
}

[data-duotone="duotone-tertiary-light"] {
    --duotone-text-color: var(--tertiary);
}

/* Overlay variants */
[data-duotone="duotone-primary-overlay"] {
    --duotone-text-color: var(--primary--alt);
}

[data-duotone="duotone-secondary-overlay"] {
    --duotone-text-color: var(--secondary--alt);
}

[data-duotone="duotone-tertiary-overlay"] {
    --duotone-text-color: var(--tertiary--alt);
}

/* Apply text color to ALL text elements within duotone containers */
/* Exclude .callout elements - they maintain their own color scheme */
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]):not(.callout):not(.callout *) {
    color: var(--duotone-text-color);
}

/* Prevent inheritance into callout */
[data-duotone] .callout {
    color: initial;
}

[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) h1:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) h2:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) h3:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) h4:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) h5:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) h6:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) p:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) span:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) li:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) a:not(.brxe-button):not([class*="button"]):not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) .brxe-text:not(.callout):not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) .brxe-heading:not(.callout):not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) .brxe-text-basic:not(.callout):not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) .brxe-rich-text:not(.callout):not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) label:not(.callout *),
[data-duotone]:not([data-duotone=""]):not([data-duotone="false"]) blockquote:not(.callout *) {
    color: var(--duotone-text-color);
}

/* Callout text uses primary color */
[data-duotone] .callout p,
[data-duotone] .callout span,
[data-duotone] .callout .brxe-text,
[data-duotone] .callout .brxe-text-basic {
    color: var(--primary);
}

/* Base duotone image styles */
.duotone-wrapper img,
[class*="duotone-"] img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(100%) contrast(1.2) brightness(0.9);
}

/* Core Framework Color Duotones - Multiply Mode (Darker) */

.duotone-primary img {
    filter: grayscale(100%) contrast(1.2) brightness(0.9);
}

.duotone-primary::after,
.duotone-primary--alt::after,
.duotone-secondary::after,
.duotone-secondary--alt::after,
.duotone-tertiary::after,
.duotone-tertiary--alt::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-primary::after {
    background: var(--primary, #633368);
}

.duotone-primary--alt::after {
    background: var(--primary--alt, #633368);
}

.duotone-secondary::after {
    background: var(--secondary, #A0EACE);
}

.duotone-secondary--alt::after {
    background: var(--secondary--alt, #A0EACE);
}

.duotone-tertiary::after {
    background: var(--tertiary);
}

.duotone-tertiary--alt::after {
    background: var(--tertiary--alt);
}

/* Screen Mode (Lighter/Vintage Effect) */

.duotone-primary-light img,
.duotone-primary--alt-light img,
.duotone-secondary-light img,
.duotone-secondary--alt-light img,
.duotone-tertiary-light img,
.duotone-tertiary--alt-light img {
    filter: grayscale(100%) contrast(1.1) brightness(1.1);
}

.duotone-primary-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary, #633368);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-primary--alt-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary--alt);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-secondary-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary, #A0EACE);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-secondary--alt-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary--alt);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-tertiary-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tertiary);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-tertiary--alt-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tertiary--alt);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

/* Overlay Mode (Balanced Effect) */

.duotone-primary-overlay img,
.duotone-secondary-overlay img,
.duotone-tertiary-overlay img {
    filter: grayscale(100%) contrast(1.15) brightness(1.05);
}

.duotone-primary-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary, #633368);
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-secondary-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary, #A0EACE);
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

.duotone-tertiary-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tertiary);
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: var(--duotone-opacity, 1);
}

/* True duotone effect (two colors - shadows and highlights) */
.duotone-true {
    position: relative;
    display: inline-block;
}

.duotone-true img {
    filter: grayscale(100%) contrast(1.3);
}

/* Shadows color */
.duotone-true::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1A1A2E; /* Dark blue for shadows */
    mix-blend-mode: darken;
    pointer-events: none;
}

/* Highlights color */
.duotone-true::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FF6B6B; /* Coral for highlights */
    mix-blend-mode: lighten;
    pointer-events: none;
}

/* Alternative: CSS filter-only approach (no overlay) */
.duotone-filter-only img {
    filter:
        grayscale(100%)
        sepia(100%)
        saturate(400%)
        hue-rotate(340deg) /* Adjust for different colors */
        brightness(0.9)
        contrast(1.2);
}

/* Hover effects */
.duotone-wrapper:hover img {
    filter: none;
    transition: filter 0.5s ease;
}

.duotone-wrapper:hover::after,
.duotone-wrapper:hover::before {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Bricks-specific classes */
.brxe-image[class*="duotone-"],
.brxe-div[class*="duotone-"] {
    position: relative;
}

.brxe-image[class*="duotone-"] img {
    filter: grayscale(100%) contrast(1.2) brightness(0.9);
}

.brxe-image[class*="duotone-"]::after,
.brxe-div[class*="duotone-"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

/* Ensure image is below overlay */
.brxe-image[class*="duotone-"] img {
    position: relative;
    z-index: 0;
}

/* Custom blend modes for experimentation */
.blend-multiply::after { mix-blend-mode: multiply; }
.blend-screen::after { mix-blend-mode: screen; }
.blend-overlay::after { mix-blend-mode: overlay; }
.blend-darken::after { mix-blend-mode: darken; }
.blend-lighten::after { mix-blend-mode: lighten; }
.blend-color::after { mix-blend-mode: color; }
.blend-luminosity::after { mix-blend-mode: luminosity; }
.blend-hue::after { mix-blend-mode: hue; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .duotone-wrapper::after {
        /* Slightly reduce intensity on mobile */
        opacity: 0.95;
    }
}