/* ============================================================
   dnd-showcase.css
   Bloco "Drag & Drop" (Template Especial, ver core/dnd-showcase.js) —
   media principal + lista de thumbnails arrastáveis (ver
   media/dnd-showcase-runtime.js). Cópia gémea desta folha existe em
   js/core/export-html.js (EXPORT_CSS) — mantida em sincronia manualmente
   (sem build step, ver convenção geral do projeto).

   Dois data-attributes no próprio .dnd-showcase controlam TODO o layout,
   sem nenhuma classe condicional construída em JS:
     data-layout-mode="overlay" | "outside"
     data-thumb-position="top" | "top-left" | "top-right" |
       "bottom" | "bottom-left" | "bottom-right" | "left" | "right"
       (grelha visual 3×3 sem centro no painel, ver dnd-showcase-panel.js —
       top/top-*/bottom/bottom-* ficam em LINHA, left/right em COLUNA)
   ============================================================ */

.dnd-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    box-sizing: border-box; /* padding do bloco nunca aumenta o tamanho total (ver dnd-showcase-widget.js) */
}

.dnd-showcase__main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dnd-showcase__main img,
.dnd-showcase__main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Feedback visual ao arrastar um thumbnail por cima do principal — ver
   dnd-showcase-runtime.js: mainEl.classList.toggle(..., isOverMain). */
.dnd-showcase__main--drop-target {
    outline: 3px dashed rgba(255, 255, 255, 0.85);
    outline-offset: -3px;
}

/* ============================================================
   Modo "outside" (default): thumbnails em espaço PRÓPRIO, fora do
   principal — .dnd-showcase é um flex container, thumbPosition decide a
   flex-direction (linha para top/top-*/bottom/bottom-*, coluna para
   left/right) e a ORDEM (a lista antes ou depois do principal).
   ============================================================ */
.dnd-showcase[data-layout-mode="outside"] {
    flex-direction: column;
    gap: var(--dnd-gap, 8px);
}

.dnd-showcase[data-layout-mode="outside"][data-thumb-position^="top"] .dnd-showcase__thumbs {
    order: -1;
}

.dnd-showcase[data-layout-mode="outside"][data-thumb-position="left"] {
    flex-direction: row;
}
.dnd-showcase[data-layout-mode="outside"][data-thumb-position="left"] .dnd-showcase__thumbs {
    order: -1;
}

.dnd-showcase[data-layout-mode="outside"][data-thumb-position="right"] {
    flex-direction: row;
}

/* ============================================================
   Modo "overlay": thumbnails SOBREPOSTOS ao principal, absolute dentro
   do .dnd-showcase (que passa a ser o contexto de posicionamento) — o
   principal ocupa sempre o espaço TODO do bloco.
   ============================================================ */
.dnd-showcase[data-layout-mode="overlay"] .dnd-showcase__main {
    position: absolute;
    inset: 0;
    flex: none;
}

.dnd-showcase[data-layout-mode="overlay"] .dnd-showcase__thumbs {
    position: absolute;
    z-index: 2;
}

.dnd-showcase[data-layout-mode="overlay"][data-thumb-position^="top"] .dnd-showcase__thumbs {
    top: var(--dnd-gap, 8px);
}
.dnd-showcase[data-layout-mode="overlay"][data-thumb-position^="bottom"] .dnd-showcase__thumbs {
    bottom: var(--dnd-gap, 8px);
}
.dnd-showcase[data-layout-mode="overlay"][data-thumb-position="top"] .dnd-showcase__thumbs,
.dnd-showcase[data-layout-mode="overlay"][data-thumb-position="bottom"] .dnd-showcase__thumbs {
    left: var(--dnd-gap, 8px);
    right: var(--dnd-gap, 8px);
}
.dnd-showcase[data-layout-mode="overlay"][data-thumb-position$="-left"] .dnd-showcase__thumbs {
    left: var(--dnd-gap, 8px);
}
.dnd-showcase[data-layout-mode="overlay"][data-thumb-position$="-right"] .dnd-showcase__thumbs {
    right: var(--dnd-gap, 8px);
}
.dnd-showcase[data-layout-mode="overlay"][data-thumb-position="left"] .dnd-showcase__thumbs {
    top: var(--dnd-gap, 8px);
    bottom: var(--dnd-gap, 8px);
    left: var(--dnd-gap, 8px);
}
.dnd-showcase[data-layout-mode="overlay"][data-thumb-position="right"] .dnd-showcase__thumbs {
    top: var(--dnd-gap, 8px);
    bottom: var(--dnd-gap, 8px);
    right: var(--dnd-gap, 8px);
}

/* ============================================================
   Lista de thumbnails — a MESMA regra de orientação serve os dois
   layoutModes: top/top-*/bottom/bottom-* = linha (row), left/right =
   coluna (empilhado, pedido explícito do utilizador: "quando a linha de
   thumbnails ficar do lado esquerdo ou direito, em vez de serem linha,
   tem de estar empilhados"). O sufixo -left/-right (ex: "top-left") só
   decide o ALINHAMENTO da faixa dentro da linha (justify-content),
   nunca o eixo — cobre as 8 posições da grelha visual do painel.
   ============================================================ */
.dnd-showcase__thumbs {
    display: flex;
    gap: var(--dnd-gap, 8px);
    flex-wrap: wrap;
}

.dnd-showcase[data-thumb-position="top"] .dnd-showcase__thumbs,
.dnd-showcase[data-thumb-position="bottom"] .dnd-showcase__thumbs {
    flex-direction: row;
    justify-content: center;
}

.dnd-showcase[data-thumb-position$="-left"] .dnd-showcase__thumbs {
    flex-direction: row;
    justify-content: flex-start;
}

.dnd-showcase[data-thumb-position$="-right"] .dnd-showcase__thumbs {
    flex-direction: row;
    justify-content: flex-end;
}

.dnd-showcase[data-thumb-position="left"] .dnd-showcase__thumbs,
.dnd-showcase[data-thumb-position="right"] .dnd-showcase__thumbs {
    flex-direction: column;
    align-content: flex-start;
}

.dnd-showcase__thumb {
    width: var(--dnd-thumb-size, 72px);
    height: var(--dnd-thumb-size, 72px);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.dnd-showcase__thumb:active {
    cursor: grabbing;
}

/* Thumbnail atualmente a ser arrastado (a "origem") — esmaecido enquanto
   o fantasma o substitui visualmente (ver dnd-showcase-runtime.js). */
.dnd-showcase__thumb--source {
    opacity: 0.35;
}

.dnd-showcase__thumb-img {
    width: 100%;
    height: var(--dnd-thumb-size, 72px);
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.dnd-showcase__thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.dnd-showcase__thumb-img i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
}

.dnd-showcase__thumb-caption {
    font-size: 11px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fantasma que segue o dedo/rato durante o arrasto — clone do próprio
   thumbnail, anexado a document.body (fora do fluxo/scale do preview,
   sempre à escala real do ecrã). Enquanto segue o rato (sem a classe
   --dropping) fica sem transition nenhuma — teria de reagir a CADA
   pointermove instantaneamente, uma transition aqui deixaria o
   arrasto "atrasado"/elástico em vez de fluido e 1:1 com o gesto. */
.dnd-showcase__thumb-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.85;
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5));
}

/* Soltar em cima do principal ("drop" válido) — o fantasma encolhe e
   desvanece no sítio onde foi largado, como se caísse/afundasse no
   espaço principal, em vez de desaparecer instantaneamente (pedido
   explícito do utilizador). Só a transition/classe aplicadas no MOMENTO
   do drop (ver dnd-showcase-runtime.js: onPointerUp) — o arrasto em si
   nunca passa por aqui. */
.dnd-showcase__thumb-ghost--dropping {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease-out;
    transform: scale(0.15);
    opacity: 0;
}

/* Hint automático de onboarding (ver dnd-showcase-runtime.js:
   playDragHint) — anima o PRÓPRIO 1º thumbnail (não um clone) até ao
   centro do principal e de volta, 3 vezes, só ao carregar e só se o
   utilizador ainda não arrastou nada. A transition só existe enquanto a
   classe está presente — o resto do tempo o thumbnail não tem transition
   (evita qualquer atraso quando o próprio utilizador o arrasta a sério
   logo de seguida). */
.dnd-showcase__thumb--hint {
    transition: transform 0.55s ease-in-out;
    z-index: 3;
}

/* ============================================================
   Seletor visual de layoutMode (painel Configurar Bloco > Drag & Drop) —
   2 botões grandes lado a lado, cada um com uma miniatura CSS pura
   ilustrando a disposição (sobreposta ou fora), nunca um <select> —
   mesmo idioma visual do dropdown de templates (ver templates.css).
   ============================================================ */
.nv-dnd-layout-picker {
    display: flex;
    gap: 8px;
}

.nv-dnd-layout-option {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.nv-dnd-layout-option:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.nv-dnd-layout-option.active {
    border-color: var(--accent);
    color: var(--accent);
}

.nv-dnd-layout-thumb {
    display: block; /* é um <span> (inline por padrão) — sem isto width/aspect-ratio abaixo são ignorados pelo browser e a miniatura colapsa a 0×0, invisível */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.nv-dnd-layout-thumb-main {
    position: absolute;
    inset: 0;
    background: var(--bg-hover);
}

.nv-dnd-layout-thumb-row {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 22%;
    display: flex;
    gap: 3px;
}

.nv-dnd-layout-thumb-row::before,
.nv-dnd-layout-thumb-row::after {
    content: '';
    flex: 1;
    background: var(--accent);
    opacity: 0.6;
    border-radius: 2px;
}

/* "overlay": a faixa de thumbnails fica DENTRO do retângulo principal,
   colada ao fundo. */
.nv-dnd-layout-thumb--overlay .nv-dnd-layout-thumb-row {
    bottom: 8%;
}

/* "outside": o retângulo principal encolhe para dar lugar à faixa, que
   fica FORA dele, num espaço próprio por baixo. */
.nv-dnd-layout-thumb--outside .nv-dnd-layout-thumb-main {
    bottom: 34%;
    inset: 0 0 34% 0;
}
.nv-dnd-layout-thumb--outside .nv-dnd-layout-thumb-row {
    bottom: 6%;
}

/* ============================================================
   Grelha visual de thumbnails (painel Media > Drag & Drop, ver
   panels/dnd-showcase-panel.js: renderThumbGrid) — quadrados lado a
   lado, o 1º com badge "Principal", cada um clicável para abrir o
   editor desse thumbnail; o último é sempre um quadrado "+" tracejado,
   sem limite de quantidade. Mesmo idioma visual do dropdown de
   templates (miniaturas CSS/imagem lado a lado).
   ============================================================ */
.nv-dnd-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Espaço antes do hint por baixo ("O primeiro é sempre...") — sem
       isto a badge "Principal" (que já sai um pouco por fora da célula,
       ver .nv-dnd-thumb-cell-badge) ficava colada ao texto seguinte. */
    margin-bottom: 14px;
}

.nv-dnd-thumb-cell {
    position: relative;
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    overflow: visible;
    transition: border-color 0.15s;
}

.nv-dnd-thumb-cell:hover {
    border-color: var(--accent);
}

.nv-dnd-thumb-cell.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.nv-dnd-thumb-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-sm) - 2px);
    pointer-events: none;
}

.nv-dnd-thumb-cell i.fa-image {
    font-size: 18px;
}

.nv-dnd-thumb-cell-badge {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--bg-panel);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

.nv-dnd-thumb-cell-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger, #e5484d);
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    cursor: pointer;
}

.nv-dnd-thumb-cell-delete:hover {
    filter: brightness(1.1);
}

.nv-dnd-thumb-cell--add {
    border-style: dashed;
    color: var(--text-secondary);
    background: transparent;
}

.nv-dnd-thumb-cell--add:hover {
    color: var(--accent);
}

.nv-dnd-thumb-cell--add i {
    font-size: 18px;
}

/* ============================================================
   Seletor visual de posição dos thumbnails (painel Configurar Bloco >
   Drag & Drop) — grelha 3×3 SEM o centro (o centro é sempre a pré-visualização
   do principal, nunca clicável): 8 cantos/lados possíveis, ao contrário do
   antigo <select> de só 4 (Topo/Fundo/Esquerda/Direita) — pedido explícito
   do utilizador ("cobrir todas as posições": topo-esq, topo-dir,
   bottom-esq, bottom-dir, centro-esq, centro-dir, além de topo/fundo
   centro). Ver dnd-showcase-panel.js: renderBlockCard/initDndShowcasePanel.
   ============================================================ */
.nv-dnd-position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
}

.nv-dnd-position-cell {
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}

.nv-dnd-position-cell:hover {
    border-color: var(--accent);
}

.nv-dnd-position-cell span {
    display: block; /* <span> é inline por padrão — sem isto width/height acima são ignorados e o ponto colapsa */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.nv-dnd-position-cell[data-selected="true"] {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.nv-dnd-position-cell[data-selected="true"] span {
    background: var(--accent);
}

/* Célula central — nunca clicável, só ilustra "aqui fica o principal". */
.nv-dnd-position-cell--preview {
    cursor: default;
    color: var(--text-secondary);
    font-size: 14px;
    background: var(--bg-panel);
}