/* axn-frame.css — moldura decorativa do Template Especial AXN (linha
   vermelha + logo). Transcrito byte-a-byte do IntraOnline (css/editor.css,
   secção "AXN MOLDURA"), com o seletor de contexto trocado de
   ".preview-frame" para "#previewFrame" (o wrapper do preview neste
   builder) — a geometria em si (position:absolute, custom properties) não
   depende de grid nenhum, funciona igual sobre blocos livres. */

/* Botões Left/Center/Right do painel "Moldura" (painel esquerdo). */
.axn-logo-position {
    display: flex;
    gap: 4px;
}

.axn-logo-btn {
    flex: 1;
    padding: 6px 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: all 0.2s;
}

.axn-logo-btn:hover {
    background: var(--bg-hover);
}

.axn-logo-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

#previewFrame .axn-frame {
    position: absolute;
    inset: 35px;
    pointer-events: none;
    z-index: 999998;

    --axn-frame-color: #c30000;
    --axn-frame-thickness: 7px;
    --axn-logo-width: 120px;
    --axn-logo-gap: 16px;
    --axn-cut-width: 18px;
    /* Compensação do recorte inclinado da linha: sem isto o logo ficava com
       ~18px de folga à esquerda e 0 à direita (encostava à barra). Valor
       medido para o logo ficar centrado no espaço da linha EM CIMA; em baixo
       o logo (inclinado) cruza a linha noutra parte e usa outro valor. */
    --axn-logo-balance: 8px;
}

#previewFrame .axn-frame__line {
    position: absolute;
    background: var(--axn-frame-color);
}

#previewFrame .axn-frame__top-left {
    top: 0;
    left: 0;
    height: var(--axn-frame-thickness);
}

#previewFrame .axn-frame__top-left::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    width: var(--axn-cut-width);
    height: 100%;
    background: var(--axn-frame-color);
    transform: skewX(-50deg);
}

#previewFrame .axn-frame__top-right {
    top: 0;
    right: 0;
    height: var(--axn-frame-thickness);
}

#previewFrame .axn-frame__top-right::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    width: var(--axn-cut-width);
    height: 100%;
    background: var(--axn-frame-color);
    transform: skewX(-50deg);
}

#previewFrame .axn-frame__side-left {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--axn-frame-thickness);
}

#previewFrame .axn-frame__side-right {
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--axn-frame-thickness);
}

#previewFrame .axn-frame__bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--axn-frame-thickness);
}

#previewFrame .axn-frame__logo {
    position: absolute;
    top: calc(-1.5 * var(--axn-logo-gap));
    z-index: 999999;
}

#previewFrame .axn-frame__logo img {
    width: var(--axn-logo-width);
    height: auto;
    display: block;
    background: transparent;
}

/* LOGO LEFT */
#previewFrame .axn-frame--logo-left .axn-frame__logo { left: calc(52px + var(--axn-logo-gap)); }
#previewFrame .axn-frame--logo-left .axn-frame__top-left { width: 48px; }
#previewFrame .axn-frame--logo-left .axn-frame__top-right {
    left: calc(48px + var(--axn-logo-width) + (var(--axn-logo-gap) * 2) + var(--axn-logo-balance));
    right: 0;
}

/* LOGO CENTER */
#previewFrame .axn-frame--logo-center .axn-frame__logo { left: 50.35%; transform: translateX(-50%); }
#previewFrame .axn-frame--logo-center .axn-frame__top-left {
    width: calc(50% - (var(--axn-logo-width) / 2) - var(--axn-logo-gap));
}
#previewFrame .axn-frame--logo-center .axn-frame__top-right {
    left: calc(50% + (var(--axn-logo-width) / 2) + var(--axn-logo-gap) + var(--axn-logo-balance));
    right: 0;
}

/* LOGO RIGHT */
#previewFrame .axn-frame--logo-right .axn-frame__logo { right: calc(43px + var(--axn-logo-gap) + var(--axn-logo-balance)); }
#previewFrame .axn-frame--logo-right .axn-frame__top-left {
    width: calc(100% - var(--axn-logo-width) - (var(--axn-logo-gap) * 2) - 48px - var(--axn-logo-balance));
}
#previewFrame .axn-frame--logo-right .axn-frame__top-right { width: 48px; }

/* LOGO EM BAIXO — sem espelhar nada (um espelho mudava o espaçamento do
   logo): a linha partida em duas (com o espaço para o logo, mesmas larguras
   e margens do "Cima") passa para baixo, a linha inteira passa para cima, e
   o logo fica ancorado à base com o mesmo avanço para fora da linha. */
#previewFrame .axn-frame--v-bottom { --axn-logo-balance: 25px; }
#previewFrame .axn-frame--v-bottom .axn-frame__top-left,
#previewFrame .axn-frame--v-bottom .axn-frame__top-right { top: auto; bottom: 0; }
#previewFrame .axn-frame--v-bottom .axn-frame__bottom { bottom: auto; top: 0; }
#previewFrame .axn-frame--v-bottom .axn-frame__logo { top: auto; bottom: calc(-1.5 * var(--axn-logo-gap)); }

@media (max-width: 900px) {
    #previewFrame .axn-frame {
        --axn-frame-thickness: 4px;
        --axn-logo-width: 70px;
        --axn-logo-gap: 12px;
        inset: 20px;
    }
}