/* ─── dr Image Accordion ─────────────────────────────────────────────────── */

/*
 * Wrapper produced by the <image-accordion> tag helper.
 * Displays images as a horizontal accordion: each panel is a narrow strip
 * that expands smoothly when active, contracting all others.
 * The active panel is driven by a data-active attribute toggled by the
 * inline JS timer emitted by the tag helper.
 */

/* ── Outer block reserves a stable height so page content never jumps ────── */
.dr-image-accordion {
    display: flex;
    width: 100%;
    /* Default height — overridden by the inline style from the tag helper */
    height: 400px;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    gap: 4px;
}

/* ── Each panel is a flex child that grows/shrinks ───────────────────────── */
.dr-image-accordion__panel {
    position: relative;
    overflow: hidden;
    /* Collapsed width — narrow strip showing a sliver of the image */
    flex: 0 0 48px;
    transition: flex 0.6s ease, opacity 0.6s ease;
    cursor: pointer;
    background-color: #000;
}

/* Active panel expands to fill remaining space */
.dr-image-accordion__panel[data-active="true"] {
    flex: 1 1 auto;
}

/* ── Image fills the panel entirely ─────────────────────────────────────── */
.dr-image-accordion__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.6s ease;
    opacity: 0.45;
}

/* Active panel shows the image at full opacity */
.dr-image-accordion__panel[data-active="true"] .dr-image-accordion__img {
    opacity: 1;
}

/* ── Overlay label shown on the collapsed (inactive) strips ─────────────── */
.dr-image-accordion__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.25rem 0.4rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    max-height: 90%;
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* Hide the label when the panel is active (image is fully visible) */
.dr-image-accordion__panel[data-active="true"] .dr-image-accordion__label {
    opacity: 0;
    pointer-events: none;
}