.image-accordion {
    display: flex;
    gap: var(--ia-gap, 12px);
    width: 100%;
    margin-block: 1.5em;
    color: var(--ia-text, #fff);
    isolation: isolate;
}

.image-accordion, .image-accordion * { box-sizing: border-box; }

.image-accordion .image-accordion__panel {
    position: relative;
    flex: 1 1 0;
    min-width: 56px;
    height: var(--ia-height, 480px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ia-radius, 20px);
    background: #171b20;
    overflow: hidden;
    transition: flex-grow var(--ia-duration, 450ms) ease;
}

.image-accordion .image-accordion__panel[open] { flex-grow: 6; }

.image-accordion .image-accordion__summary {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    margin: 0;
    color: var(--ia-text, #fff);
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
}

.image-accordion__summary::-webkit-details-marker { display: none; }
.image-accordion__summary::marker { content: ''; }
.image-accordion__summary:focus-visible { outline: 3px solid var(--ia-accent, #fff); outline-offset: -6px; }

.image-accordion .image-accordion__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}

.image-accordion__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgb(0 0 0 / var(--ia-overlay, .55)) 0%,
        rgb(0 0 0 / calc(var(--ia-overlay, .55) * .6)) 18%,
        transparent 42%,
        transparent 58%,
        rgb(0 0 0 / calc(var(--ia-overlay, .55) * .8)) 82%,
        rgb(0 0 0 / var(--ia-overlay, .55)) 100%);
}

.image-accordion .image-accordion__title {
    color: var(--ia-text, #fff);
    position: absolute;
    inset: 24px auto 76px 50%;
    width: 1.3em;
    transform: translateX(-50%);
    overflow: hidden;
    writing-mode: vertical-rl;
    font: inherit;
    font-size: clamp(1.1rem, 2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 8px rgb(0 0 0 / .5);
}

.image-accordion__panel[open] .image-accordion__title {
    inset: 24px 76px auto 24px;
    width: auto;
    transform: none;
    writing-mode: horizontal-tb;
    max-height: 4.2em;
    overflow-y: auto;
}

.image-accordion__indicator {
    position: absolute;
    bottom: 18px;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translateX(-50%);
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--ia-accent, #fff);
}

.image-accordion__indicator::before, .image-accordion__indicator::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 8px;
    width: 14px;
    height: 2px;
    background: currentColor;
}

.image-accordion__indicator::after { transform: rotate(90deg); transition: transform var(--ia-duration, 450ms) ease; }
.image-accordion__panel[open] .image-accordion__indicator { top: 24px; right: 24px; left: auto; bottom: auto; transform: none; }
.image-accordion__panel[open] .image-accordion__indicator::after { transform: rotate(0); }

.image-accordion .image-accordion__content {
    position: absolute;
    z-index: 1;
    inset: auto 24px 24px;
    max-height: calc(100% - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-wrap: anywhere;
    text-align: left;
    text-shadow: 0 1px 8px rgb(0 0 0 / .5);
}

.image-accordion .image-accordion__panel .image-accordion__content .image-accordion__text {
    margin: 0 0 1em;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ia-text, #fff);
    white-space: pre-wrap;
    text-align: left;
}

.image-accordion .image-accordion__panel .image-accordion__content .image-accordion__link {
    display: inline-block;
    padding: 6px 0;
    color: var(--ia-accent, #fff);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .25em;
}

.image-accordion__link:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.image-accordion .image-accordion__link > span { color: inherit; }

.image-accordion__video-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ia-accent, #fff); font-size: 1.5rem; }
.image-accordion__panel[open] .image-accordion__video-mark { display: none; }
.image-accordion .image-accordion__video-body { position: absolute; inset: 0; }
.image-accordion .image-accordion__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; object-fit: cover; }
/* Keep the heading and collapse control above the video, while leaving its player controls clickable. */
.image-accordion__panel[data-media-type="VIDEO"][open] .image-accordion__summary { z-index: 2; pointer-events: none; }
.image-accordion__panel[data-media-type="VIDEO"][open] .image-accordion__title,
.image-accordion__panel[data-media-type="VIDEO"][open] .image-accordion__indicator { pointer-events: auto; }
.image-accordion .image-accordion__video-body .image-accordion__content { z-index: 3; bottom: 76px; max-height: calc(100% - 190px); pointer-events: none; }
.image-accordion .image-accordion__video-body .image-accordion__link { pointer-events: auto; }
.image-accordion .image-accordion__video-body .image-accordion__content:empty { display: none; }
.image-accordion .image-accordion__video-body .image-accordion__text:last-child { margin-bottom: 0; }

/* Stack in narrow article columns as well as on small screens. */
.image-accordion { container-type: inline-size; }
.image-accordion[data-direction="vertical"] { flex-direction: column; }
.image-accordion[data-direction="vertical"] .image-accordion__panel { flex: none; width: 100%; height: 80px; transition: height var(--ia-duration, 450ms) ease; }
.image-accordion[data-direction="vertical"] .image-accordion__panel[open] { height: var(--ia-height, 480px); }
.image-accordion[data-direction="vertical"] .image-accordion__title { inset: 24px 76px auto 24px; width: auto; transform: none; writing-mode: horizontal-tb; max-height: 2.4em; }
.image-accordion[data-direction="vertical"] .image-accordion__indicator { top: 24px; right: 24px; left: auto; bottom: auto; transform: none; }

@container (max-width: 680px) {
    .image-accordion .image-accordion__panel { flex: none; width: 100%; height: 80px; transition: height var(--ia-duration, 450ms) ease; }
    .image-accordion .image-accordion__panel[open] { height: var(--ia-mobile-height, 360px); }
    .image-accordion .image-accordion__title { inset: 24px 76px auto 24px; width: auto; transform: none; writing-mode: horizontal-tb; max-height: 2.4em; }
    .image-accordion .image-accordion__indicator { top: 24px; right: 24px; left: auto; bottom: auto; transform: none; }
}

.image-accordion { flex-wrap: wrap; }
@media (max-width: 680px) {
    .image-accordion .image-accordion__panel { flex: none; width: 100%; height: 80px; transition: height var(--ia-duration, 450ms) ease; }
    .image-accordion .image-accordion__panel[open] { height: var(--ia-mobile-height, 360px); }
    .image-accordion .image-accordion__title { inset: 24px 76px auto 24px; width: auto; transform: none; writing-mode: horizontal-tb; max-height: 2.4em; }
    .image-accordion .image-accordion__indicator { top: 24px; right: 24px; left: auto; bottom: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .image-accordion .image-accordion__panel, .image-accordion .image-accordion__indicator::after { transition: none; }
}