/* =============================================================================
   Ficheiro: blocks.css
   Pasta: /assets/css/
   Ultima Actualizacao: 2026-04-03 01:21 UTC
   Versao: 4
   Copyright: Easygate, Lda
   Codificacao: UTF-8 sem BOM | Fim de linha: LF

   CSS publico de renderizacao dos blocos de layout gerados pelo plugin
   TinyMCE Blocks (assets/js/tinymce-blocks-plugin.js).

   BLOCOS COM LARGURA FIXA EM PX:
     data-blk-fixed="1": flex:0 0 auto -- largura exacta no inline style (Npx).
     Os restantes blocos no mesmo row recebem flex:1 via :has([data-blk-fixed]).

   ALTERACOES:
   2026-04-03 01:21 - Versao 4: suporte a blocos com largura fixa em px.
                      .blk[data-blk-fixed]: flex:0 0 auto.
                      .blk-row:has([data-blk-fixed]) .blk:not([data-blk-fixed]):
                        flex:1; width:auto.
                      Responsive: fixos tambem ficam 100% em mobile.
   2026-04-01 13:00 - Versao 3: print-color-adjust:exact.
   2026-04-01 12:00 - Versao 2: width:100% fallback no .blk.
   2026-03-02 09:55 - Versao 1: criacao inicial.
   ============================================================================= */


/* =============================================================================
   LINHA DE BLOCOS (.blk-row)
   ============================================================================= */

.blk-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    gap: 0;
}


/* =============================================================================
   BLOCO BASE (.blk)
   ============================================================================= */

.blk {
    box-sizing: border-box;
    min-width: 0;
    min-height: 1em;
    display: flex;
    flex-direction: column;
    width: 100%;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}


/* =============================================================================
   BLOCOS COM LARGURA FIXA EM PX (data-blk-fixed="1")
   ============================================================================= */

/* Bloco fixo: nao cresce nem encolhe; largura exacta no inline style. */
.blk[data-blk-fixed] {
    flex: 0 0 auto;
}

/* Quando ha um bloco fixo no row, os flexiveis partilham o espaco restante. */
.blk-row:has([data-blk-fixed]) .blk:not([data-blk-fixed]) {
    flex: 1;
    width: auto;
}


/* =============================================================================
   TIPO A: CONTEUDO LIVRE
   ============================================================================= */

.blk-content {
    flex: 1;
    padding: 6px 10px;
    box-sizing: border-box;
}

.blk-content > *:first-child { margin-top: 0; }
.blk-content > *:last-child  { margin-bottom: 0; }


/* =============================================================================
   TIPO B: FICHA TECNICA
   ============================================================================= */

.blk-b-body {
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.blk-b-row {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    min-height: 1.8em;
}

.blk-b-hsep {
    border-bottom: 1px solid #dde2ea;
}

.blk-b-row:last-child {
    border-bottom: none !important;
}

.blk-b-c1 {
    padding: 4px 8px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.8em;
    min-height: 1.8em;
    background: #f4f6fa;
    font-weight: 500;
    font-size: 0.875em;
    color: #4a5568;
}

.blk-b-c2 {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    box-sizing: border-box;
    line-height: 1.8em;
    min-height: 1.8em;
    font-size: 0.875em;
    color: #2d3748;
}

.blk-b-vsep {
    width: 1px;
    background: #d0d8e8;
    flex-shrink: 0;
    align-self: stretch;
}


/* =============================================================================
   ELEMENTOS EDITOR-ONLY (salvaguarda para frontend)
   NAO usar !important: o editor sobrepoe com !important proprio.
   ============================================================================= */

.blk-toggle,
.blk-ui-bar,
.blk-rh {
    display: none;
}


/* =============================================================================
   RESPONSIVE -- viewport <= 600px
   ============================================================================= */

@media (max-width: 600px) {

    .blk-row {
        flex-wrap: wrap;
    }

    /* Todos os blocos (incluindo fixos em px) ocupam 100% em mobile */
    .blk,
    .blk[data-blk-fixed] {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .blk-b-c1 {
        white-space: normal;
    }
}


/* =============================================================================
   IMPRESSAO
   ============================================================================= */

@media print {

    .blk,
    .blk-b-body,
    .blk-b-row,
    .blk-b-c1,
    .blk-b-vsep {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .blk-row {
        page-break-inside: avoid;
    }
}