/*
 * THE VERSIONS OF A CARD, ON ITS THUMBNAIL (brief AI, 2026-10-06) - the stylesheet of view/js/vk_slides.js. His words: "En el body, los elementos que tienen versiones dentro, haz que se
 * puedan visualizar desde el thumbnail, mediante fade slide, con unas flechitas para poder ver a primera instancia que hay dentro desde la grid de los items."
 *
 * A card whose file has versions - the ones that show the «N versiones» badge - carries, inside the link of its picture (parts/category_items.php: a.SeeDetail.vkHasSlides), a layer over
 * the picture with two arrows and a counter («2 / 4»). The script makes one more layer, .vkSl-pic, for each version the first time it is asked for, and fades it in over the card's own
 * picture. Everything sits INSIDE the picture's box and takes no room from it, as the sound card's controls do, so a card never changes size and the grid never moves.
 *
 *   - a computer: the arrows come with the pointer over the card and with the keyboard on them; a touch screen has them always, and a swipe on the picture changes too;
 *   - the counter comes with them, and stays while the card shows anything but its own file;
 *   - a layer is as the card's own picture is: the picture inside the box keeping its ratio (and the same zoom under the pointer), its empty sides filled with the picture blurred - or,
 *     for an element on nothing (a logo, a vector), the grey frame the card gives those (view/css/style.css, view/js/vk_cardfill.js);
 *   - prefers-reduced-motion: no fade, a plain swap.
 * The layer takes no click: the picture still opens the file's detail, and the arrows' own clicks are kept to themselves by the script.
 */
.containernews .capsaitem .SeeDetail.vkHasSlides{ touch-action: pan-y; }        /* the page still scrolls up and down under a finger; a sideways swipe is the script's */

.vkSl{ position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; }

/* ---------------------------------------------------------------- one version's picture */
.vkSl-pic{
    position: absolute; inset: 0; overflow: hidden;
    background-color: #f4f4f6;                          /* the box's own colour (style.css .containernews .capsaitem .SeeDetail); dark: view/css/vk_dark.css */
    opacity: 0; transition: opacity .34s ease;
}
.vkSl-pic.is-in{ opacity: 1; }
.vkSl-bg{
    position: absolute; inset: -12%; visibility: hidden;
    background-position: center; background-size: cover; filter: blur(26px) saturate(1.05);
}
.vkSl-pic.is-fill .vkSl-bg{ visibility: visible; }
.vkSl-img{
    position: absolute; inset: 0;
    background-position: center; background-repeat: no-repeat; background-size: contain;
    transform: scale(1.05); transition: transform .2s ease-in-out;               /* the card's picture is drawn at 1.05 and 1.15 under the pointer (style.css .capsaitem img) */
}
.containernews .capsaitem a:hover .vkSl-img{ transform: scale(1.15); }
.vkSl-pic.is-el{ background-color: #e8e8e8; }                                    /* an element on nothing: the frame the card gives it, with its 14px of room */
.vkSl-pic.is-el .vkSl-img{ inset: 14px; }

/* ---------------------------------------------------------------- the arrows and the counter */
.vkSl-btn{
    position: absolute; top: calc(50% + 8px); z-index: 99999; width: 28px; height: 28px; margin-top: -14px;       /* 8px under the middle: clear of the two badges at the top right of the shortest pictures (140px) */
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #ffffff; background: rgba(22, 22, 26, .58); box-shadow: 0 1px 5px rgba(22, 22, 26, .28);
    cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
    transition: opacity .16s ease, background-color .14s ease, transform .12s ease;
}
.vkSl-btn::before{ content: ""; position: absolute; inset: -9px -6px; }          /* an easier thing to hit than 28px, on a finger above all */
.vkSl-btn::after{
    content: ""; width: 14px; height: 14px; background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}
.vkSl-prev{ left: 6px; }
.vkSl-next{ right: 6px; }
.vkSl-prev::after{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.vkSl-next::after{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.vkSl-btn:hover{ background: rgba(22, 22, 26, .82); transform: scale(1.08); }
.vkSl-btn:active{ transform: scale(.94); }
.vkSl-btn:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff, 0 1px 5px rgba(22, 22, 26, .28); }

.vkSl-count{
    position: absolute; left: 50%; bottom: 8px; z-index: 99999; transform: translateX(-50%);
    padding: 2px 9px; border-radius: 99px; color: #ffffff; background: rgba(22, 22, 26, .58); box-shadow: 0 1px 5px rgba(22, 22, 26, .22);
    font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap;
    pointer-events: none; transition: opacity .16s ease;
}
/* what a screen reader is told when the picture changes («Versión 2 · Actual · name (2 / 4)»); not drawn */
.vkSl-say{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* a computer: the arrows come with the pointer or the keyboard, the counter with them and wherever the card is not showing its own file; a touch screen has them always (not hidden here) */
@media (hover: hover) and (pointer: fine){
    .vkSl-btn, .vkSl-count{ opacity: 0; }
    .capsaitem:hover .vkSl-btn, .capsaitem:hover .vkSl-count,
    .vkSl-btn:focus-visible,
    .SeeDetail.vkHasSlides:focus-visible .vkSl-btn, .SeeDetail.vkHasSlides:focus-visible .vkSl-count,
    .vkSl[data-vk-i]:not([data-vk-i="0"]) .vkSl-count{ opacity: 1; }
    /* with the keyboard on one arrow, both arrows and the counter show (its own rule: a browser without :has() would drop the whole rule it was in) */
    .capsaitem:has(.vkSl-btn:focus-visible) .vkSl-btn, .capsaitem:has(.vkSl-btn:focus-visible) .vkSl-count{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
    .vkSl-pic, .vkSl-img, .vkSl-btn, .vkSl-count{ transition: none; }
}