.wof-image-slices {
    --wof-height: 420px;
    --wof-radius: 16px;
    --wof-expanded: 2.2;
    --wof-overlay: 0.35;
    --wof-brightness: 1.08;
    --wof-skew: 4%;
    --wof-back-expand-end: calc(48% + ((var(--wof-expanded) - 1.2) * 10%));
    --wof-mid-expand-start: calc(26% - ((var(--wof-expanded) - 1.2) * 6%));
    --wof-mid-expand-end: calc(74% + ((var(--wof-expanded) - 1.2) * 6%));
    --wof-front-expand-start: calc(52% - ((var(--wof-expanded) - 1.2) * 10%));

    position: relative;
    min-height: var(--wof-height);
    height: var(--wof-height);
    overflow: hidden;
    border-radius: var(--wof-radius);
    background: #08090b;
    isolation: isolate;
}

.wof-image-slices .wof-slice {
    position: absolute;
    inset: 0;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-decoration: none;
    color: #fff;
    background-image: var(--wof-bg-image);
    background-size: cover;
    background-position: center;
    outline: none;
    filter: saturate(0.95) brightness(var(--wof-brightness));
    transition: clip-path 460ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease, z-index 0s linear 120ms;
}

.wof-image-slices .wof-slice-back {
    z-index: 1;
}

.wof-image-slices .wof-slice-mid {
    z-index: 2;
}

.wof-image-slices .wof-slice-front {
    z-index: 3;
}

.wof-image-slices .wof-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, calc(var(--wof-overlay) + 0.2)) 0%,
        rgba(0, 0, 0, var(--wof-overlay)) 45%,
        rgba(0, 0, 0, 0.08) 100%
    );
    transition: opacity 320ms ease;
}

.wof-image-slices .wof-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    padding: 20px;
    width: 100%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.wof-image-slices .wof-title {
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    line-height: 1.2;
    font-weight: 700;
    color: var(--wof-text-color, #fff);
}

.wof-image-slices .wof-subtext {
    font-size: clamp(0.85rem, 1.15vw, 1rem);
    line-height: 1.35;
    opacity: 0.94;
    color: var(--wof-text-color, #fff);
}

.wof-image-slices .wof-slice:hover .wof-title,
.wof-image-slices .wof-slice:hover .wof-subtext,
.wof-image-slices .wof-slice:focus-visible .wof-title,
.wof-image-slices .wof-slice:focus-visible .wof-subtext {
    color: var(--wof-text-hover-color, #fff);
}

.wof-image-slices .wof-slice:hover .wof-overlay,
.wof-image-slices .wof-slice:focus-visible .wof-overlay {
    opacity: 0.45;
}

.wof-image-slices:hover .wof-slice,
.wof-image-slices:focus-within .wof-slice {
    filter: saturate(0.88) brightness(calc(var(--wof-brightness) - 0.08));
}

.wof-image-slices:hover .wof-slice:hover,
.wof-image-slices:focus-within .wof-slice:focus-visible {
    filter: saturate(1.05) brightness(calc(var(--wof-brightness) + 0.08));
    z-index: 4;
    transition: clip-path 460ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease, z-index 0s;
}

.wof-image-slices .wof-slice:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Straight seams: exact one-third visible for each panel */
.wof-image-slices.seam-straight .wof-slice-back {
    clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%);
}

.wof-image-slices.seam-straight .wof-slice-mid {
    clip-path: polygon(33% 0, 67% 0, 67% 100%, 33% 100%);
}

.wof-image-slices.seam-straight .wof-slice-front {
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%);
}

/* Diagonal seams: still one-third slices but angled edges */
.wof-image-slices.seam-diagonal .wof-slice-back {
    clip-path: polygon(0 0, calc(34% - var(--wof-skew)) 0, calc(34% + var(--wof-skew)) 100%, 0 100%);
}

.wof-image-slices.seam-diagonal .wof-slice-mid {
    clip-path: polygon(
        calc(33% - var(--wof-skew)) 0,
        calc(67% - var(--wof-skew)) 0,
        calc(67% + var(--wof-skew)) 100%,
        calc(33% + var(--wof-skew)) 100%
    );
}

.wof-image-slices.seam-diagonal .wof-slice-front {
    clip-path: polygon(calc(66% - var(--wof-skew)) 0, 100% 0, 100% 100%, calc(66% + var(--wof-skew)) 100%);
}

/* Hover/focus expansion behavior */
.wof-image-slices.seam-straight:hover .wof-slice-back:hover,
.wof-image-slices.seam-straight:focus-within .wof-slice-back:focus-visible {
    clip-path: polygon(0 0, var(--wof-back-expand-end) 0, var(--wof-back-expand-end) 100%, 0 100%);
}

.wof-image-slices.seam-straight:hover .wof-slice-back:hover ~ .wof-slice-mid,
.wof-image-slices.seam-straight:focus-within .wof-slice-back:focus-visible ~ .wof-slice-mid {
    clip-path: polygon(54% 0, 82% 0, 82% 100%, 54% 100%);
}

.wof-image-slices.seam-straight:hover .wof-slice-back:hover ~ .wof-slice-front,
.wof-image-slices.seam-straight:focus-within .wof-slice-back:focus-visible ~ .wof-slice-front {
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);
}

.wof-image-slices.seam-straight:hover .wof-slice-mid:hover,
.wof-image-slices.seam-straight:focus-within .wof-slice-mid:focus-visible {
    clip-path: polygon(var(--wof-mid-expand-start) 0, var(--wof-mid-expand-end) 0, var(--wof-mid-expand-end) 100%, var(--wof-mid-expand-start) 100%);
}

.wof-image-slices.seam-straight:hover .wof-slice-mid:hover ~ .wof-slice-front,
.wof-image-slices.seam-straight:focus-within .wof-slice-mid:focus-visible ~ .wof-slice-front {
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);
}

.wof-image-slices.seam-straight:hover .wof-slice-front:hover,
.wof-image-slices.seam-straight:focus-within .wof-slice-front:focus-visible {
    clip-path: polygon(var(--wof-front-expand-start) 0, 100% 0, 100% 100%, var(--wof-front-expand-start) 100%);
}

.wof-image-slices.seam-straight:hover .wof-slice-back:has(+ .wof-slice-mid:hover),
.wof-image-slices.seam-straight:focus-within .wof-slice-back:has(+ .wof-slice-mid:focus-visible),
.wof-image-slices.seam-straight:hover .wof-slice-back:has(+ .wof-slice-mid + .wof-slice-front:hover),
.wof-image-slices.seam-straight:focus-within .wof-slice-back:has(+ .wof-slice-mid + .wof-slice-front:focus-visible) {
    clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
}

.wof-image-slices.seam-straight:hover .wof-slice-mid:has(+ .wof-slice-front:hover),
.wof-image-slices.seam-straight:focus-within .wof-slice-mid:has(+ .wof-slice-front:focus-visible) {
    clip-path: polygon(18% 0, 46% 0, 46% 100%, 18% 100%);
}

.wof-image-slices.seam-diagonal:hover .wof-slice-back:hover,
.wof-image-slices.seam-diagonal:focus-within .wof-slice-back:focus-visible {
    clip-path: polygon(0 0, calc(var(--wof-back-expand-end) - var(--wof-skew)) 0, calc(var(--wof-back-expand-end) + var(--wof-skew)) 100%, 0 100%);
}

.wof-image-slices.seam-diagonal:hover .wof-slice-back:hover ~ .wof-slice-mid,
.wof-image-slices.seam-diagonal:focus-within .wof-slice-back:focus-visible ~ .wof-slice-mid {
    clip-path: polygon(calc(54% - var(--wof-skew)) 0, calc(82% - var(--wof-skew)) 0, calc(82% + var(--wof-skew)) 100%, calc(54% + var(--wof-skew)) 100%);
}

.wof-image-slices.seam-diagonal:hover .wof-slice-back:hover ~ .wof-slice-front,
.wof-image-slices.seam-diagonal:focus-within .wof-slice-back:focus-visible ~ .wof-slice-front {
    clip-path: polygon(calc(80% - var(--wof-skew)) 0, 100% 0, 100% 100%, calc(80% + var(--wof-skew)) 100%);
}

.wof-image-slices.seam-diagonal:hover .wof-slice-mid:hover,
.wof-image-slices.seam-diagonal:focus-within .wof-slice-mid:focus-visible {
    clip-path: polygon(
        calc(var(--wof-mid-expand-start) - var(--wof-skew)) 0,
        calc(var(--wof-mid-expand-end) - var(--wof-skew)) 0,
        calc(var(--wof-mid-expand-end) + var(--wof-skew)) 100%,
        calc(var(--wof-mid-expand-start) + var(--wof-skew)) 100%
    );
}

.wof-image-slices.seam-diagonal:hover .wof-slice-front:hover,
.wof-image-slices.seam-diagonal:focus-within .wof-slice-front:focus-visible {
    clip-path: polygon(calc(var(--wof-front-expand-start) - var(--wof-skew)) 0, 100% 0, 100% 100%, calc(var(--wof-front-expand-start) + var(--wof-skew)) 100%);
}

.wof-image-slices.seam-diagonal:hover .wof-slice-back:has(+ .wof-slice-mid:hover),
.wof-image-slices.seam-diagonal:focus-within .wof-slice-back:has(+ .wof-slice-mid:focus-visible),
.wof-image-slices.seam-diagonal:hover .wof-slice-back:has(+ .wof-slice-mid + .wof-slice-front:hover),
.wof-image-slices.seam-diagonal:focus-within .wof-slice-back:has(+ .wof-slice-mid + .wof-slice-front:focus-visible) {
    clip-path: polygon(0 0, calc(20% - var(--wof-skew)) 0, calc(20% + var(--wof-skew)) 100%, 0 100%);
}

.wof-image-slices.seam-diagonal:hover .wof-slice-mid:has(+ .wof-slice-front:hover),
.wof-image-slices.seam-diagonal:focus-within .wof-slice-mid:has(+ .wof-slice-front:focus-visible) {
    clip-path: polygon(calc(18% - var(--wof-skew)) 0, calc(46% - var(--wof-skew)) 0, calc(46% + var(--wof-skew)) 100%, calc(18% + var(--wof-skew)) 100%);
}

/* Click-to-expand state: selected panel takes full canvas, others fully hide */
.wof-image-slices.wof-click-active .wof-slice {
    transition: clip-path 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
    pointer-events: none;
}

.wof-image-slices.wof-click-active .wof-slice:hover,
.wof-image-slices.wof-click-active .wof-slice:focus-visible {
    z-index: auto;
}

.wof-image-slices.wof-click-active.wof-click-back .wof-slice-back,
.wof-image-slices.wof-click-active.wof-click-back .wof-slice-back:hover,
.wof-image-slices.wof-click-active.wof-click-mid .wof-slice-mid,
.wof-image-slices.wof-click-active.wof-click-mid .wof-slice-mid:hover,
.wof-image-slices.wof-click-active.wof-click-front .wof-slice-front,
.wof-image-slices.wof-click-active.wof-click-front .wof-slice-front:hover {
    pointer-events: auto;
    z-index: 12;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    .wof-image-slices .wof-slice {
        position: relative;
        clip-path: none;
        z-index: auto;
    }

    .wof-image-slices {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

.wof-image-slices .wof-slice.is-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
}

.wof-image-slices .wof-slice.is-bottom-center {
    align-items: flex-end;
    justify-content: center;
}

.wof-image-slices .wof-slice.is-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
}

.wof-image-slices .wof-slice.is-top-left {
    align-items: flex-start;
    justify-content: flex-start;
}

.wof-image-slices .wof-slice.is-top-center {
    align-items: flex-start;
    justify-content: center;
}

.wof-image-slices .wof-slice.is-top-right {
    align-items: flex-start;
    justify-content: flex-end;
}

.wof-image-slices .wof-slice.is-center-left {
    align-items: center;
    justify-content: flex-start;
}

.wof-image-slices .wof-slice.is-center {
    align-items: center;
    justify-content: center;
}

.wof-image-slices .wof-slice.is-center-right {
    align-items: center;
    justify-content: flex-end;
}

.wof-image-slices .wof-slice.is-bottom-center .wof-copy,
.wof-image-slices .wof-slice.is-top-center .wof-copy,
.wof-image-slices .wof-slice.is-center .wof-copy {
    text-align: center;
}

.wof-image-slices .wof-slice.is-bottom-right .wof-copy,
.wof-image-slices .wof-slice.is-top-right .wof-copy,
.wof-image-slices .wof-slice.is-center-right .wof-copy {
    text-align: right;
}

@media (max-width: 767px) {
    .wof-image-slices {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        overflow: visible;
        background: transparent;
    }

    .wof-image-slices .wof-slice {
        position: relative;
        inset: auto;
        clip-path: none;
        min-height: 180px;
        border-radius: max(8px, calc(var(--wof-radius) * 0.75));
        filter: none;
        z-index: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wof-image-slices .wof-slice,
    .wof-image-slices .wof-overlay {
        transition: none;
    }
}