/* Image accordion — adapted from Bencho (MIT), https://bencho.dev/licence.
   A row of pictures cropped to slivers, one of which opens under the pointer.
   The flex grow arithmetic lives in ImageAccordion.js. */
.image-accordion {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 1200px;
    height: clamp(300px, 40vw, 520px);
    gap: 8px;
    border-radius: 14px;
    /* The same radius as every cell: the clip only catches fractional overflow. */
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}
.image-accordion-cell {
    position: relative;
    /* flex-basis: 0 makes grow numbers the whole story. min-width: 0
       prevents intrinsic image widths from overruling the negotiation. */
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f5f7;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.image-accordion-cell:focus-visible { outline: 3px solid #007aff; outline-offset: -5px; }
.image-accordion-cell img {
    display: block;
    width: 100%;
    height: 100%;
    /* cover re-frames instead of stretching. There is deliberately no caption
       or scrim over the photograph the visitor has just asked to see more of. */
    object-fit: cover;
    -webkit-user-drag: none;
    pointer-events: none;
}
@media (max-width: 768px) {
    .image-accordion { height: 340px; max-height: 60svh; }
}