/* ================================================================
   Base Image – CSS
   ================================================================ */

/* ── Container ─────────────────────────────────────────────────── */

.sz-bi {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: var(--sz-bi-w, 100%);
    height: var(--sz-bi-h, auto);
}

/* ── Background / overlay ──────────────────────────────────────── */

.sz-bi-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.sz-bi-overlay {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    z-index: 2;
    pointer-events: none;
}

/* ── Image source ──────────────────────────────────────────────── */

.sz-bi-source {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--sz-bi-ratio, auto);
    opacity: var(--sz-bi-opacity, 1);
    object-fit: var(--sz-bi-fit, cover);
    z-index: 1;
    position: relative;
}

/* ── Spinner ───────────────────────────────────────────────────── */

.sz-bi-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    border: 3px solid rgba(153, 153, 153, 0.3);
    border-top-color: rgba(153, 153, 153, 0.8);
    animation: sz-bi-spin 0.7s linear infinite;
    z-index: 3;
}

@keyframes sz-bi-spin {
    to { transform: rotate(360deg); }
}

/* ── Lazy loading: fade-in ─────────────────────────────────────── */

.sz-bi--lazy .sz-bi-source {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sz-bi--lazy.sz-bi--loaded .sz-bi-source {
    opacity: var(--sz-bi-opacity, 1);
}

.sz-bi--lazy .sz-bi-bg {
    transition: opacity 0.4s ease;
}

.sz-bi--lazy.sz-bi--loaded .sz-bi-bg {
    opacity: 0;
}

/* ── Explicit height: image fills container ────────────────────── */

.sz-bi--has-height .sz-bi-source {
    height: 100%;
}

/* ── Cover mode ────────────────────────────────────────────────── */

.sz-bi--cover .sz-bi-source {
    width: 100%;
    object-fit: cover;
}

.sz-bi--cover.sz-bi--has-height {
    height: var(--sz-bi-h);
}

.sz-bi--cover.sz-bi--has-height .sz-bi-source {
    height: 100%;
}

/* ── Original mode ─────────────────────────────────────────────── */

.sz-bi--original {
    width: var(--sz-bi-w, auto);
    height: var(--sz-bi-h, auto);
}

.sz-bi--original .sz-bi-source {
    width: auto;
    height: auto;
    object-fit: none;
}

/* ── Alignment ─────────────────────────────────────────────────── */

.sz-bi--align-left   { justify-content: flex-start; }
.sz-bi--align-center { justify-content: center; }
.sz-bi--align-right  { justify-content: flex-end; }

/* ── Parallax ──────────────────────────────────────────────────── */

.sz-bi--parallax {
    overflow: hidden;
}

.sz-bi--parallax .sz-bi-source {
    will-change: transform;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
}

/* ── Empty state (builder only) ────────────────────────────────── */

.sz-bi-empty {
    padding: 40px;
    text-align: center;
    color: #999;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    border-radius: 4px;
    font-size: 14px;
}