/* ==========================================================
   DELIOX CARD STYLE PRESETS — v2.3.0
   Applies to both slider (.dlx-card) and grid (.dlx-grid-card).
   Each preset adds its own depth, edges, and frame.

   CSS variables are set inline by Elementor controls.
========================================================== */

/* ──────────────────────────────────────────────────────
   HARDCOVER BOOK (v2.4.1 redesign)
   - Asymmetric silhouette: straight spine edge (left),
     softly rounded fore-edge (right)
   - Hinge groove: a narrow darker channel near the spine
     with a thin highlight, like the crease where the
     cover board meets the spine
   - Page block: a slim warm-paper edge on the right with
     LOW-CONTRAST horizontal page lines (subtle, not zebra)
   - Layered, soft, modern shadow
─────────────────────────────────────────────────────── */
.dlx-card.dlx-style-hardcover,
.dlx-grid-card.dlx-style-hardcover {
    position: relative;
    border-radius: 3px 10px 10px 3px !important;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.12),
        0 6px 12px rgba(0,0,0,0.16),
        0 18px 36px rgba(0,0,0,0.22) !important;
}
/* Match the inner clip to the asymmetric silhouette */
.dlx-card.dlx-style-hardcover .dlx-card-clip,
.dlx-card.dlx-style-hardcover .dlx-card-img,
.dlx-card.dlx-style-hardcover .dlx-card-overlay {
    border-radius: 3px 10px 10px 3px !important;
}

/* HINGE GROOVE — instead of a wide dark smear, a believable
   crease: thin shadow channel + hairline highlight, sitting a
   few px in from the spine edge. */
.dlx-card.dlx-style-hardcover::before,
.dlx-grid-card.dlx-style-hardcover::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: calc(var(--dlx-spine-width, 10px) + 8px);
    background:
        /* soft edge shading from the very left */
        linear-gradient(to right,
            var(--dlx-spine-color, rgba(0,0,0,0.32)) 0%,
            rgba(0,0,0,0.10) 38%,
            rgba(0,0,0,0) 72%),
        /* the groove itself: dark channel */
        linear-gradient(to right,
            transparent calc(var(--dlx-spine-width, 10px) - 2px),
            rgba(0,0,0,0.22) var(--dlx-spine-width, 10px),
            rgba(0,0,0,0.10) calc(var(--dlx-spine-width, 10px) + 2px),
            transparent calc(var(--dlx-spine-width, 10px) + 5px)),
        /* hairline highlight right after the groove (light catch) */
        linear-gradient(to right,
            transparent calc(var(--dlx-spine-width, 10px) + 4px),
            rgba(255,255,255,0.14) calc(var(--dlx-spine-width, 10px) + 5px),
            transparent calc(var(--dlx-spine-width, 10px) + 7px));
    pointer-events: none;
    z-index: 5;
    border-radius: 3px 0 0 3px;
}

/* PAGE BLOCK — slim warm paper edge on the right. Horizontal
   page lines at LOW contrast (8%), 3px rhythm, over a gentle
   paper gradient. A 1px seam separates it from the cover. */
.dlx-card.dlx-style-hardcover::after,
.dlx-grid-card.dlx-style-hardcover::after {
    content: '';
    position: absolute;
    right: 0; top: 3px; bottom: 3px;
    width: var(--dlx-pages-width, 6px);
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(120,100,70,0.10) 0px,
            rgba(120,100,70,0.10) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(to right,
            color-mix(in srgb, var(--dlx-pages-color, #f3ecda) 88%, #000) 0%,
            var(--dlx-pages-color, #f3ecda) 45%,
            color-mix(in srgb, var(--dlx-pages-color, #f3ecda) 92%, #000) 100%);
    border-left: 1px solid rgba(0,0,0,0.18);
    border-radius: 0 6px 6px 0;
    box-shadow: inset -1px 0 1px rgba(0,0,0,0.10);
    pointer-events: none;
    z-index: 5;
}
/* Fallback for browsers without color-mix support */
@supports not (background: color-mix(in srgb, #fff 50%, #000)) {
    .dlx-card.dlx-style-hardcover::after,
    .dlx-grid-card.dlx-style-hardcover::after {
        background:
            repeating-linear-gradient(
                to bottom,
                rgba(120,100,70,0.10) 0px,
                rgba(120,100,70,0.10) 1px,
                transparent 1px,
                transparent 3px
            ),
            var(--dlx-pages-color, #f3ecda);
    }
}

/* Push the title overlay clear of the hinge so text never sits
   under the groove shading */
.dlx-card.dlx-style-hardcover .dlx-card-overlay,
.dlx-grid-card.dlx-style-hardcover .dlx-grid-overlay {
    padding-left: calc(var(--dlx-spine-width, 10px) + 14px);
    padding-right: calc(var(--dlx-pages-width, 6px) + 12px);
}

/* ──────────────────────────────────────────────────────
   PAPERBACK BOOK
   - Subtle spine shadow only
   - Lighter overall depth
─────────────────────────────────────────────────────── */
.dlx-card.dlx-style-paperback,
.dlx-grid-card.dlx-style-paperback {
    position: relative;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.14),
        0 4px 10px rgba(0,0,0,0.15),
        0 10px 22px rgba(0,0,0,0.12) !important;
}
.dlx-card.dlx-style-paperback::before,
.dlx-grid-card.dlx-style-paperback::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(
        to right,
        var(--dlx-pb-spine, rgba(0,0,0,0.28)),
        rgba(0,0,0,0)
    );
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
}

/* ──────────────────────────────────────────────────────
   POLAROID PHOTO
   - White frame around the image (border on the clip)
   - Larger bottom band for caption
   - Soft drop shadow
─────────────────────────────────────────────────────── */
/* Slider variant — the visual container is .dlx-card-clip */
.dlx-card.dlx-style-polaroid .dlx-card-clip {
    border: 10px solid var(--dlx-polaroid-frame, #ffffff) !important;
    border-bottom-width: var(--dlx-polaroid-bottom, 36px) !important;
    background: var(--dlx-polaroid-frame, #ffffff) !important;
    border-radius: 2px !important;
}
.dlx-card.dlx-style-polaroid {
    box-shadow:
        0 1px 2px rgba(0,0,0,0.12),
        0 6px 14px rgba(0,0,0,0.18),
        0 16px 32px rgba(0,0,0,0.14) !important;
}

/* Grid variant — apply the frame directly on .dlx-grid-card */
.dlx-grid-card.dlx-style-polaroid {
    border: 10px solid var(--dlx-polaroid-frame, #ffffff) !important;
    border-bottom-width: var(--dlx-polaroid-bottom, 36px) !important;
    background: var(--dlx-polaroid-frame, #ffffff) !important;
    border-radius: 2px !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.12),
        0 6px 14px rgba(0,0,0,0.18),
        0 16px 32px rgba(0,0,0,0.14) !important;
}

/* Title overlay positions itself in the bottom white band */
.dlx-card.dlx-style-polaroid .dlx-card-overlay,
.dlx-grid-card.dlx-style-polaroid .dlx-grid-overlay {
    position: absolute !important;
    inset: auto 0 calc(-1 * var(--dlx-polaroid-bottom, 36px)) 0 !important;
    height: var(--dlx-polaroid-bottom, 36px) !important;
    background: transparent !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
.dlx-card.dlx-style-polaroid .dlx-card-title,
.dlx-card.dlx-style-polaroid .dlx-card-subtitle,
.dlx-grid-card.dlx-style-polaroid .dlx-grid-title,
.dlx-grid-card.dlx-style-polaroid .dlx-grid-subtitle {
    color: var(--dlx-polaroid-text, #222222) !important;
    letter-spacing: 0.4px !important;
    text-transform: none !important;
}

/* ──────────────────────────────────────────────────────
   VINYL SLEEVE / RECORD ALBUM COVER
   - Sharper corners (records aren't rounded)
   - Diagonal sheen overlay (matte gloss)
   - Heavy ambient shadow
─────────────────────────────────────────────────────── */
.dlx-card.dlx-style-vinyl,
.dlx-grid-card.dlx-style-vinyl {
    position: relative;
    border-radius: 2px !important;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.25),
        0 10px 20px rgba(0,0,0,0.28),
        0 24px 48px rgba(0,0,0,0.20) !important;
}
.dlx-card.dlx-style-vinyl .dlx-card-clip,
.dlx-grid-card.dlx-style-vinyl {
    border-radius: 2px !important;
}
/* Diagonal sheen — simulates light catching the album sleeve */
.dlx-card.dlx-style-vinyl::after,
.dlx-grid-card.dlx-style-vinyl::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,var(--dlx-vinyl-sheen, 0.15)) 0%,
            transparent 35%,
            transparent 65%,
            rgba(0,0,0,var(--dlx-vinyl-sheen, 0.15)) 100%
        );
    pointer-events: none;
    z-index: 4;
    border-radius: inherit;
    mix-blend-mode: overlay;
}
/* Subtle inner border to suggest the sleeve's outer edge */
.dlx-card.dlx-style-vinyl::before,
.dlx-grid-card.dlx-style-vinyl::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
    pointer-events: none;
    z-index: 4;
    border-radius: inherit;
}

/* ──────────────────────────────────────────────────────
   CASCADE INTEGRATION
   The cascade slider adds a filter: drop-shadow() to each
   slide. When a card preset already provides depth (any
   of the four above), we drop the cascade's filter so
   shadows don't stack and double up.
─────────────────────────────────────────────────────── */
.dlx-section.layout-cascade.style-hardcover .dlx-slide,
.dlx-section.layout-cascade.style-paperback .dlx-slide,
.dlx-section.layout-cascade.style-polaroid  .dlx-slide,
.dlx-section.layout-cascade.style-vinyl     .dlx-slide {
    filter: none !important;
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE — keep proportions usable on small screens
─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Slimmer spines on phones so the cover stays readable */
    .dlx-card.dlx-style-hardcover,
    .dlx-grid-card.dlx-style-hardcover {
        --dlx-spine-width: 7px;
    }
    .dlx-card.dlx-style-polaroid .dlx-card-clip,
    .dlx-grid-card.dlx-style-polaroid {
        border-width: 7px !important;
        border-bottom-width: 28px !important;
    }
    .dlx-card.dlx-style-polaroid .dlx-card-overlay,
    .dlx-grid-card.dlx-style-polaroid .dlx-grid-overlay {
        height: 28px !important;
        inset: auto 0 -28px 0 !important;
    }
}