/* split-slider.css
   Estilo do bloco "Slider" (Template Especial) — transcrito do protótipo
   em IntraOnline/prototypes/splitSlider/index.html (sem o "demo chrome":
   controlos/frame da página de demonstração não fazem parte do template
   em si). Usado tanto no editor (preview-panel.js) como no export
   publicado (export-html.js tem uma cópia gémea deste bloco).
*/
.split-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* Cada "lado" ocupa sempre a área toda; o que muda é o clip-path do lado
   "before" (A), que fica por cima e é cortado, revelando o "after" (B),
   que fica por baixo e está sempre 100% visível. */
.split-slider__side {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.split-slider__side--after {
    z-index: 1;
}

.split-slider__side--before {
    z-index: 2;
    /* clip-path é atualizado via JS consoante a posição do handle — ver
       split-slider-runtime.js. */
}

/* Vídeo de fundo (alternativa à imagem de fundo, ver split-slider-panel.js:
   buildSideElement) — cobre o lado todo tal como background-size:cover
   fazia para a imagem, sem distorcer. */
.split-slider__side-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay-item: imagem extra por cima do fundo de um lado (ex: logo), com
   posicionamento livre — ver split-slider-panel.js: buildOverlayItemElement.
   left/top/width/height/z-index vêm inline (mesmo formato dos blocos).

   object-position:left top (NUNCA o default 50% 50%) — bug real
   confirmado: com object-fit:contain, se a caixa (width/height em %) tiver
   uma proporção diferente da imagem real, o CONTEÚDO visível encolhe para
   caber sem distorcer e fica CENTRADO dentro da caixa por padrão do
   object-fit — ou seja, mesmo com top:0% (a caixa a começar mesmo no topo
   do bloco), o conteúdo real da imagem aparecia deslocado para baixo
   (sobrando espaço transparente acima dele, DENTRO da própria caixa).
   Fixando object-position ao canto superior esquerdo, o conteúdo real
   encosta-se sempre ao canto top-left da caixa — X/Y passam a controlar de
   facto onde a imagem aparece, sem esse deslocamento invisível. */
.split-slider__overlay-item {
    position: absolute;
    object-fit: contain;
    object-position: left top;
    pointer-events: none;
}

/* Wrapper de um overlay-item de VÍDEO — leva o left/top/width/height/
   z-index que normalmente iam direto no <video> (ver
   split-slider-panel.js: buildOverlayItemElement), para poder ancorar o
   botão de som (canto inferior direito) sem depender do tamanho real do
   vídeo lá dentro. */
.split-slider__overlay-wrap {
    position: absolute;
    pointer-events: none;
}

.split-slider__overlay-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
}

/* Botão de som (mute toggle) de um vídeo do Slider — mesmo visual base do
   botão de som dos media items normais (ver css/blocks.css:
   .nv-inner .preview-sound-btn), mas com tamanho/cor configuráveis via
   style inline (--split-slider-panel.js: buildSoundButton). Canto
   inferior direito, sempre por cima do vídeo (z-index alto: overlay-items
   de vídeo já têm o seu próprio z-index no layout, o botão precisa de
   ficar sempre visível por cima do PRÓPRIO vídeo, não relativo aos
   outros itens). */
.split-slider__sound-btn,
.split-slider__side .preview-sound-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 5;
    pointer-events: auto;
    touch-action: manipulation;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.split-slider__sound-btn:hover {
    opacity: 0.85;
}

.split-slider__line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--slider-line-width, 3px);
    background: var(--slider-line-color, #ffffff);
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.split-slider__handle {
    position: absolute;
    top: 50%;
    width: var(--slider-handle-size, 56px);
    height: var(--slider-handle-size, 56px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--slider-handle-bg, #ffffff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 4;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

/* Preset de setas <> em CSS puro — única variante de handle nesta primeira
   versão (sem imagem custom, ver split-slider.js: createDefaultSliderSide). */
.split-slider__handle-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.split-slider__handle-arrows span {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.split-slider__handle-arrows span:first-child {
    border-right: 8px solid var(--slider-handle-arrow-color, #333333);
}

.split-slider__handle-arrows span:last-child {
    border-left: 8px solid var(--slider-handle-arrow-color, #333333);
}