/* ================================================================
   Puzzle Widget v8 — Real interlocking puzzle pieces with 3D flip
   ================================================================ */

.pwv4-wrap {
    position: relative;
    width: 100%;
    background: transparent;
    overflow: visible;
    perspective: 1500px;
    perspective-origin: 50% 50%;
}

/* ────────────────────────────────────────────────────────────────
   FLIP CONTAINER — each piece's cell
   ──────────────────────────────────────────────────────────────── */
.pwv-flip {
    position: absolute;
    /* left/top/width/height inline */
    transform-style: preserve-3d;
    overflow: visible;
}

.pwv-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--pwv-flip-speed, .7s) cubic-bezier(.45, 1.4, .55, 1);
    will-change: transform;
}

@media (hover: hover) {
    .pwv-flip:not(.pwv-flip--no-back):hover .pwv-flip-inner {
        transform: rotateY(180deg);
    }
}

/* ────────────────────────────────────────────────────────────────
   FACES — front and back of the flip card
   ──────────────────────────────────────────────────────────────── */
.pwv-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Tiny translateZ prevents z-fighting between front/back during flip */
    transform: translateZ(0);
}

.pwv-front {
    transform: rotateY(0deg) translateZ(0.5px);
}

.pwv-back {
    transform: rotateY(180deg) translateZ(0.5px);
}

/* SVG inside each face — the puzzle shape. Sits behind the content. */
.pwv-face-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   CONTENT — sits above the SVG inside each face
   ──────────────────────────────────────────────────────────────── */
.pwv-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 9% 11% 11%;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}

.pwv-content-back {
    justify-content: center;
    text-align: left;
}

/* Link covers the whole flip area — captures clicks on either face */
.pwv4-piece-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: pointer;
}

/* ────────────────────────────────────────────────────────────────
   FRONT CONTENT — icon, title, text
   ──────────────────────────────────────────────────────────────── */
.pwv4-piece-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwv4-piece-icon img,
.pwv4-piece-icon svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.pwv4-piece-icon i,
.pwv4-piece-icon i::before {
    color: inherit !important;
    font-size: 28px;
    line-height: 1;
}
.pwv4-piece-icon svg {
    color: inherit;
    fill: currentColor;
}
.pwv4-piece-icon svg path,
.pwv4-piece-icon svg g,
.pwv4-piece-icon svg circle,
.pwv4-piece-icon svg rect,
.pwv4-piece-icon svg polygon,
.pwv4-piece-icon svg ellipse,
.pwv4-piece-icon svg line,
.pwv4-piece-icon svg polyline,
.pwv4-piece-icon svg use {
    fill: currentColor !important;
}
.pwv4-piece-icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

.pwv4-piece-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px 0;
    color: inherit;
}

.pwv4-piece-text {
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
    opacity: .9;
    color: inherit;
}

/* ────────────────────────────────────────────────────────────────
   BACK CONTENT — hover text
   ──────────────────────────────────────────────────────────────── */
.pwv-back-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
    color: inherit;
}

/* ================================================================
   TABLET — slightly compress text
   ================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .pwv4-piece-title { font-size: 12.5px; }
    .pwv4-piece-text  { font-size: 10.5px; line-height: 1.5; }
    .pwv-back-text    { font-size: 11.5px; line-height: 1.5; }
    .pwv-content      { padding: 7% 8% 8%; }
    .pwv4-piece-icon  { width: 26px; height: 26px; margin-bottom: 10px; }
    .pwv4-piece-icon i { font-size: 22px; line-height: 1; }
}

/* ================================================================
   MOBILE — stacked card layout (≤ 767px)
   • Flip is disabled (no perspective trickery).
   • Each piece becomes a full-width card with the piece's bg color
     and (if set) border.
   • The hover_text is shown below the regular text so mobile users
     still see the longer description.
   ================================================================ */
@media (max-width: 767px) {
    .pwv4-wrap {
        aspect-ratio: auto !important;
        height: auto;
        perspective: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: transparent !important;
    }

    .pwv-flip {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform-style: flat;
        background: var(--pwv-piece-bg, #141414);
        border: var(--pwv-piece-border-w, 0) solid var(--pwv-piece-border, transparent);
        border-radius: 14px;
        padding: 20px 18px;
        color: inherit;
    }

    .pwv-flip-inner {
        transform: none !important;
        transition: none;
        position: static;
        width: 100%;
        height: auto;
    }

    .pwv-face {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        backface-visibility: visible;
    }

    /* Hide the SVG and back face on mobile — front content is all we need */
    .pwv-face-svg { display: none; }
    .pwv-back { display: none; }

    .pwv-content {
        position: static !important;
        padding: 0 !important;
    }

    .pwv4-piece-title { font-size: 16px; margin-bottom: 8px; }
    .pwv4-piece-text  { font-size: 13.5px; line-height: 1.55; opacity: 1; }
    .pwv4-piece-icon  { width: 36px; height: 36px; margin-bottom: 12px; }
    .pwv4-piece-icon i { font-size: 32px; line-height: 1; }

    /* Mobile fallback for the hover text — append it under the regular text */
    .pwv-content-front::after {
        content: attr(data-mobile-hover);
        display: block;
        margin-top: 10px;
        font-size: 12.5px;
        line-height: 1.5;
        opacity: .75;
    }
}