/* ============================================================
   ISOMETRIC SHOWCASE
   Per-project color scoping via CSS variables on the mount wrap.
   Original isometric.css used `svg > g` etc. globally — here
   we scope everything under .isometric-mount so multiple
   isometries on the page can have different palettes without
   bleeding into each other.
   ============================================================ */

/* Default palette (overridden per project below) */
.isometric-mount {
    --iso-self-fill:           #6481a0;
    --iso-self-stroke:         #ffffff;
    --iso-sibling-fill:        #94aac2;
    --iso-sibling-stroke:      #ffffff;
    --iso-selected-fill:       #5d81a8;
    --iso-selected-stroke:     #ffffff;
    --iso-selected-sib-fill:   #a0b6ce;
    --iso-selected-sib-stroke: #ffffff;
    --iso-selected-sibhov-fill:   #5d7597;
    --iso-selected-sibhov-stroke: #ffffff;
    --iso-disabled-fill:       #a5a5a5;
    --iso-disabled-stroke:     #ebebeb;
    --iso-color-duration:      .25s;
    --iso-upper-offset:        -1250px;
    --iso-upper-opacity:       0;
    --iso-upper-offset-dur:    .5s;
    --iso-upper-opacity-dur:   .25s;
}

/* Project-specific palettes — pulled from each original isometric.css */
.isometric-mount[data-isometry="cityspaceseebach"] {
    --iso-self-fill: #6481a0;       --iso-sibling-fill: #94aac2;
    --iso-selected-fill: #5d81a8;   --iso-selected-sib-fill: #a0b6ce;
    --iso-selected-sibhov-fill: #5d7597;
}
.isometric-mount[data-isometry="hausdavosmorosani"] {
    --iso-self-fill: #888072;       --iso-sibling-fill: #ada79c;
    --iso-selected-fill: #888072;   --iso-selected-sib-fill: #ada79c;
    --iso-selected-sibhov-fill: #6e6760;
}
.isometric-mount[data-isometry="im-himmelrich"] {
    --iso-self-fill: #998774;       --iso-sibling-fill: #beab97;
    --iso-selected-fill: #998774;   --iso-selected-sib-fill: #f6efe5;
    --iso-selected-sibhov-fill: #7f6f5d;
}
.isometric-mount[data-isometry="oetlisberg22"] {
    --iso-self-fill: #585e50;       --iso-sibling-fill: #8d9286;
    --iso-selected-fill: #585e50;   --iso-selected-sib-fill: #909787;
    --iso-selected-sibhov-fill: #444a3d;
}
.isometric-mount[data-isometry="viveajonen"] {
    --iso-self-fill: #343b3b;       --iso-sibling-fill: #535a5a;
    --iso-selected-fill: #485050;   --iso-selected-sib-fill: #818b8b;
    --iso-selected-sibhov-fill: #2a3030;
}

/* Slider container */
.isometric-showcase-section { overflow: hidden; }
.isometric-showcase-slider .splide__arrow { background: var(--color-black); opacity: 0.85; }
.isometric-showcase-slider .splide__arrow:hover { opacity: 1; }
.isometric-showcase-slider .splide__arrow svg { fill: var(--color-white); }
.isometric-showcase-slider .splide__pagination__page.is-active { background: var(--color-black); }

/* Slide inner wrapper */
.isometric-slide-inner {
    height: 100%;
    overflow: hidden;
    background: #f7f7f7;
}

.isometric-showcase-section .splide__arrow--prev {
    left: -3em;
}

.isometric-showcase-section .splide__arrow--next {
    right: -3em;
}

/* Mount wrap — holds loading placeholder + SVG */
.isometric-mount-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.isometric-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.isometric-mount {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* SVG sizing inside the mount */
.isometric-mount svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Interaction — scoped to .isometric-mount svg only */
.isometric-mount svg > g,
.isometric-mount svg > g polygon,
.isometric-mount svg > g path,
.isometric-mount svg > g polyline,
.isometric-mount svg > polygon,
.isometric-mount svg > path {
    cursor: pointer;
    transition:
        fill var(--iso-color-duration),
        stroke var(--iso-color-duration),
        opacity var(--iso-upper-opacity-dur),
        transform var(--iso-upper-offset-dur);
}

/* Hover — self */
.isometric-mount svg > g.selectable.hovered polygon,
.isometric-mount svg > g.selectable.hovered path,
.isometric-mount svg > polygon.selectable.hovered,
.isometric-mount svg > path.selectable.hovered {
    stroke: var(--iso-self-stroke);
    fill:   var(--iso-self-fill);
}

/* Hover — siblings */
.isometric-mount svg > g.selectable.hovered.sibling polygon,
.isometric-mount svg > g.selectable.hovered.sibling path,
.isometric-mount svg > polygon.selectable.hovered.sibling,
.isometric-mount svg > path.selectable.hovered.sibling {
    stroke: var(--iso-sibling-stroke);
    fill:   var(--iso-sibling-fill);
}

/* Selected — self */
.isometric-mount svg > g.selectable.selected polygon,
.isometric-mount svg > g.selectable.selected path,
.isometric-mount svg > polygon.selectable.selected,
.isometric-mount svg > path.selectable.selected {
    stroke: var(--iso-selected-stroke);
    fill:   var(--iso-selected-fill);
}

/* Selected — siblings */
.isometric-mount svg > g.selectable.selected.sibling polygon,
.isometric-mount svg > g.selectable.selected.sibling path,
.isometric-mount svg > polygon.selectable.selected.sibling,
.isometric-mount svg > path.selectable.selected.sibling {
    stroke: var(--iso-selected-sib-stroke);
    fill:   var(--iso-selected-sib-fill);
}

/* Selected + hovered sibling */
.isometric-mount svg > g.selectable.selected.hovered.sibling polygon,
.isometric-mount svg > g.selectable.selected.hovered.sibling path,
.isometric-mount svg > polygon.selectable.selected.hovered.sibling,
.isometric-mount svg > path.selectable.selected.hovered.sibling {
    stroke: var(--iso-selected-sibhov-stroke);
    fill:   var(--iso-selected-sibhov-fill);
}

/* Disabled */
.isometric-mount svg > g.disabled,
.isometric-mount svg > g.disabled polygon,
.isometric-mount svg > g.disabled path,
.isometric-mount svg > g.disabled polyline,
.isometric-mount svg > polygon.disabled,
.isometric-mount svg > path.disabled {
    stroke: var(--iso-disabled-stroke);
    fill:   var(--iso-disabled-fill);
}

/* Upper floors — animate up + fade out when a flat is selected */
.isometric-mount svg > g.upper,
.isometric-mount svg > polygon.upper,
.isometric-mount svg > path.upper {
    transform: translateY(var(--iso-upper-offset));
    opacity:   var(--iso-upper-opacity);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .isometric-mount-wrap { aspect-ratio: 16 / 11; }
}

@media (max-width: 575.98px) {
    .isometric-mount-wrap { aspect-ratio: 4 / 3; }
}