/* Shared imagerail styles. Theme-agnostic structure with CSS variables —
   themes will typically override layout via their own utility classes
   (purefragrance ships its own tailwind layout) and only rely on the
   --active accent here.

   Custom properties (set on .cms-imagerail or any ancestor):
     --cms-imagerail-thumb-size           thumb tile width/height (default 80px)
     --cms-imagerail-gap                  gap between thumbs (default 0.75rem)
     --cms-imagerail-rail-gap             gap between rail and main (default 1rem)
     --cms-imagerail-active-outline-w     active thumb outline width (default 2px)
     --cms-imagerail-active-outline       active thumb outline color (default currentColor)
     --cms-imagerail-thumb-bg             thumb background (default #f5f5f5)
     --cms-imagerail-main-aspect          main image aspect ratio (default 4/5)
*/
.cms-imagerail {
    --cms-imagerail-thumb-size: 80px;
    --cms-imagerail-gap: 0.75rem;
    --cms-imagerail-rail-gap: 1rem;
    --cms-imagerail-active-outline-w: 2px;
    --cms-imagerail-active-outline: currentColor;
    --cms-imagerail-thumb-bg: #f5f5f5;
    --cms-imagerail-main-aspect: 4 / 5;

    display: grid;
    grid-template-columns: var(--cms-imagerail-thumb-size) 1fr;
    gap: var(--cms-imagerail-rail-gap);
    align-items: start;
}

/* When the thumb rail isn't rendered (single image, or no images),
   collapse to a single column so the main image fills the container
   instead of being squeezed into the 80px thumb-rail slot. */
.cms-imagerail:not(:has(.cms-imagerail__thumbs)) {
    grid-template-columns: 1fr;
}

@media (max-width: 640px) {
    .cms-imagerail {
        grid-template-columns: 1fr;
    }
}

.cms-imagerail__thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--cms-imagerail-gap);
}

@media (max-width: 640px) {
    .cms-imagerail__thumbs {
        flex-direction: row;
        order: 2;
    }
    .cms-imagerail__main {
        order: 1;
    }
}

.cms-imagerail__thumb {
    appearance: none;
    background: var(--cms-imagerail-thumb-bg);
    border: 0;
    padding: 0;
    margin: 0;
    width: var(--cms-imagerail-thumb-size);
    height: var(--cms-imagerail-thumb-size);
    cursor: pointer;
    overflow: hidden;
    display: block;
    outline: 0 solid transparent;
    transition: outline-width 0.12s ease;
}

@media (max-width: 640px) {
    .cms-imagerail__thumb {
        flex: 1 1 0;
        height: auto;
        aspect-ratio: 1 / 1;
        width: auto;
    }
}

.cms-imagerail__thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.cms-imagerail__thumb:focus-visible {
    outline: var(--cms-imagerail-active-outline-w) solid var(--cms-imagerail-active-outline);
    outline-offset: 2px;
}

.cms-imagerail__thumb--active,
.cms-imagerail__thumb[aria-current="true"] {
    outline: var(--cms-imagerail-active-outline-w) solid var(--cms-imagerail-active-outline);
    outline-offset: 0;
}

.cms-imagerail__main {
    background: var(--cms-imagerail-thumb-bg);
    overflow: hidden;
    aspect-ratio: var(--cms-imagerail-main-aspect);
    position: relative;
}

.cms-imagerail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}