@import url(https://fonts.bunny.net/css?family=jura:300,500,700);

.gdk-ms-architectural-scene {
    width: 100%;
    height: var(--wrapper-h, 100vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gdk-ms-architectural-wrapper {
    display: grid;
    /* Controlled by JS for expansion logic */
    grid-template-columns: var(--dynamic-grid, repeat(11, 1fr));
    width: min(100%, var(--gallery-width, 850px));
    height: var(--gallery-h, 500px);
    margin-inline: auto;
    /* aspect-ratio removed in favor of explicit height */
    transition: grid-template-columns var(--transition-speed, 300ms) ease-in-out;
    background-color: transparent;
    overflow: hidden;
    position: relative;
}

.gdk-ms-architectural-slide {
    position: relative;
    grid-row: 1;
    background-image: var(--bg-img);
    background-repeat: no-repeat;
    background-position: var(--bg-pos-x, center) center;

    /* If object-fit is cover, use it. Otherwise use the fixed zoom width. */
    background-size: var(--object-fit, cover);

    /* Notch Architecture - Uses per-item notch Y override if provided */
    border-radius: 0 0 0 var(--notch-x, 30%) / 0 0 0 var(--item-notch-y, var(--notch-y, 50%));
    corner-shape: notch;

    border: var(--border-size, 5px) solid var(--border-color, #f8fafc);
    background-clip: padding-box;

    /* Optimized transition to prevent snap */
    /* Transition background-size and position as well to prevent jumps */
    transition:
        grid-column var(--transition-speed, 300ms) ease-in-out,
        border-radius var(--transition-speed, 300ms) ease-in-out,
        border-width 200ms ease,
        background-size var(--transition-speed, 300ms) ease-in-out,
        background-position var(--transition-speed, 300ms) ease-in-out,
        z-index 0ms;
    cursor: pointer;

    z-index: var(--z-index, 1);
}

/* Specific logic for Fixed Width: if object-fit is not 'cover/contain', it might be a specific value */
/* We'll handle this by setting the variable in PHP more carefully or just using a fallback */

.gdk-ms-architectural-slide:first-child {
    border-radius: 0 0 0 0 / 0 0 0 200px;
}

.gdk-ms-architectural-slide:hover {
    z-index: 100 !important;
    /* Flatten the notch smoothly */
    border-radius: 0 0 0 0 / 0 0 0 0 !important;
    corner-shape: notch;
}

/* Sync neighbor notch */
.gdk-ms-architectural-slide:hover+.gdk-ms-architectural-slide {
    border-radius: 0 0 0 0 / 0 0 0 0 !important;
}

.gdk-ms-architectural-content {
    position: absolute;
    top: var(--t-top, 50%);
    left: var(--t-left, 50%);
    transform: translate(-50%, -50%);

    color: var(--title-color, #ffffff);
    font-family: 'Jura', sans-serif;
    font-size: var(--title-size, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    pointer-events: none;

    opacity: 0;
    transition: opacity 200ms ease, transform 300ms ease;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.gdk-ms-architectural-slide:hover .gdk-ms-architectural-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}