/**
 * CSS Partilhado — Blocos Fortunna Lusitanos
 *
 * Este ficheiro é carregado em todas as páginas que contenham
 * pelo menos um bloco do plugin fortunnalusitanos-blocks.
 * É também carregado no editor Gutenberg.
 *
 * Responsabilidades:
 *  1. Variáveis CSS dos blocos (fallbacks para quando o tema não está activo)
 *  2. Classes de tipografia reutilizáveis entre blocos
 *  3. Animações e transições partilhadas
 *  4. Layout utilitários (wrappers, grids comuns)
 *  5. Estilos de estado (hover, focus, active)
 *  6. Estilos do editor Gutenberg para blocos dinâmicos
 *
 * NOTA: As variáveis aqui declaradas usam o mesmo nome das variáveis
 * do tema (--fl-*) para garantir consistência visual quando o tema
 * fortunnalusitanos-theme está activo. Se o tema não estiver activo
 * (ex: noutro tema), os valores padrão aqui definidos são usados.
 *
 * @package FortunnaLusitanosBlocks
 * @since   1.0.0
 */

/* ════════════════════════════════════════════════════════════════════════════
   1. VARIÁVEIS CSS — Fallbacks para uso sem o tema
════════════════════════════════════════════════════════════════════════════ */

:root {

    /* Paleta — espelha o design system v5 "TREVOS" */
    --fl-champagne:           var(--fl-champagne,          #D8CAAF);
    --fl-champagne-lt:        var(--fl-champagne-lt,        #EDE5D5);
    --fl-champagne-bg:        var(--fl-champagne-bg,        #F5F1EA);
    --fl-champagne-pale:      var(--fl-champagne-pale,      rgba(216,202,175,.13));
    --fl-champagne-border:    var(--fl-champagne-border,    rgba(216,202,175,.38));

    --fl-noir:                var(--fl-noir,                #141210);
    --fl-noir-mid:            var(--fl-noir-mid,            #2A2620);
    --fl-noir-light:          var(--fl-noir-light,          #443D35);
    --fl-noir-dim:            var(--fl-noir-dim,            rgba(20,18,16,.72));
    --fl-noir-muted:          var(--fl-noir-muted,          rgba(20,18,16,.55));

    --fl-white:               var(--fl-white,               #FDFCFA);
    --fl-off-white:           var(--fl-off-white,           #F7F4EF);
    --fl-linen:               var(--fl-linen,               #EDE8DF);
    --fl-stone:               var(--fl-stone,               #B0A898);
    --fl-stone-dim:           var(--fl-stone-dim,           rgba(176,168,152,.5));

    /* Tipografia */
    --fl-font-heading:        var(--fl-font-heading,        'Cinzel','Times New Roman',Georgia,serif);
    --fl-font-body:           var(--fl-font-body,           'Raleway',system-ui,sans-serif);

    /* Layout */
    --fl-max-w:               var(--fl-max-w,               1320px);
    --fl-pad:                 var(--fl-pad,                 clamp(1.5rem,5.5vw,6rem));
    --fl-nav-h:               var(--fl-nav-h,               80px);
    --fl-gap-section:         var(--fl-gap-section,         clamp(5rem,10vw,9rem));

    /* Animações */
    --fl-ease:                var(--fl-ease,                cubic-bezier(0.16,1,0.3,1));
    --fl-ease-soft:           var(--fl-ease-soft,           cubic-bezier(0.25,0.46,0.45,0.94));
    --fl-duration:            var(--fl-duration,            0.3s);
    --fl-duration-slow:       var(--fl-duration-slow,       0.65s);
    --fl-duration-slower:     var(--fl-duration-slower,     0.9s);

    /* Filtros de Imagem */
    --fl-img-filter:          var(--fl-img-filter,          grayscale(35%) brightness(0.88) sepia(10%));
    --fl-img-filter-hover:    var(--fl-img-filter-hover,    grayscale(20%) brightness(0.92) sepia(7%));
    --fl-img-filter-hero:     var(--fl-img-filter-hero,     grayscale(55%) brightness(0.58) sepia(18%));
    --fl-img-filter-card:     var(--fl-img-filter-card,     grayscale(30%) brightness(0.90) sepia(10%));

    /* Sombras */
    --fl-shadow:              var(--fl-shadow,              0 2px 8px rgba(20,18,16,.1));
    --fl-shadow-md:           var(--fl-shadow-md,           0 4px 16px rgba(20,18,16,.1));
    --fl-shadow-lg:           var(--fl-shadow-lg,           0 8px 32px rgba(20,18,16,.12));

    /* Reveal */
    --fl-reveal-distance-y:   var(--fl-reveal-distance-y,   22px);
    --fl-reveal-dur:          var(--fl-reveal-dur,          0.9s);
    --fl-reveal-ease:         var(--fl-reveal-ease,         cubic-bezier(0.16,1,0.3,1));

    /* Blocos específicos */
    --flb-hero-min-height:    100svh;
    --fl-admin-bar-h:         0px;   /* Sobrescrito por .admin-bar { --fl-admin-bar-h: 32px } no tema */
    --flb-section-pad:        clamp(5rem, 10vw, 9rem);
    --flb-section-pad-sm:     clamp(3.5rem, 7vw, 6rem);
    --flb-eyebrow-size:       9px;
    --flb-eyebrow-tracking:   0.38em;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. CONTENTOR PARTILHADO
════════════════════════════════════════════════════════════════════════════ */

/* Wrapper padrão para conteúdo de blocos */
.flb-wrap {
    width:          100%;
    max-width:      var(--fl-max-w);
    margin-inline:  auto;
    padding-inline: var(--fl-pad);
}

.flb-wrap--narrow {
    max-width:      820px;
    margin-inline:  auto;
    padding-inline: var(--fl-pad);
}

.flb-wrap--mid {
    max-width:      1060px;
    margin-inline:  auto;
    padding-inline: var(--fl-pad);
}

/* ════════════════════════════════════════════════════════════════════════════
   3. TIPOGRAFIA PARTILHADA
   Classes reutilizáveis nos render.php de todos os blocos
════════════════════════════════════════════════════════════════════════════ */

/* Eyebrow — label pequena acima do título */
.flb-eyebrow {
    font-family:    var(--fl-font-heading);
    font-size:      var(--flb-eyebrow-size);
    font-weight:    400;
    letter-spacing: var(--flb-eyebrow-tracking);
    text-transform: uppercase;
    color:          var(--fl-champagne);
    filter:         brightness(0.82);
    display:        block;
}

.flb-eyebrow--white { color: rgba(216,202,175,.7); filter: none; }
.flb-eyebrow--stone { color: var(--fl-stone); filter: none; }
.flb-eyebrow--dark  { color: var(--fl-champagne); filter: brightness(0.72); }

/* Título de secção */
.flb-section-title {
    font-family:    var(--fl-font-heading);
    font-size:      clamp(1.8rem, 3.5vw, 3rem);
    font-weight:    700;
    color:          var(--fl-noir);
    letter-spacing: 0.04em;
    line-height:    1.08;
    margin-top:     0.75rem;
}

.flb-section-title--white { color: var(--fl-white); }
.flb-section-title--champ { color: var(--fl-champagne); }

/* Lead / subtítulo */
.flb-lead {
    font-family:    var(--fl-font-body);
    font-style:     italic;
    font-size:      clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight:    200;
    color:          rgba(20,18,16,.55);
    line-height:    1.72;
    margin-top:     1rem;
    max-width:      580px;
}

.flb-lead--white { color: rgba(253,252,250,.5); }

/* Corpo de texto */
.flb-body {
    font-family:    var(--fl-font-body);
    font-size:      clamp(0.9375rem, 1.1vw, 1rem);
    font-weight:    300;
    color:          var(--fl-noir-dim);
    line-height:    1.88;
    margin-bottom:  1.35rem;
}

.flb-body--white { color: rgba(253,252,250,.65); }

/* ════════════════════════════════════════════════════════════════════════════
   4. BOTÕES PARTILHADOS
   Idênticos aos do tema — definidos aqui para uso em render.php
════════════════════════════════════════════════════════════════════════════ */

.flb-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.65rem;
    font-family:     var(--fl-font-heading);
    font-size:       9.5px;
    font-weight:     400;
    letter-spacing:  0.26em;
    text-transform:  uppercase;
    padding:         1rem 2.4rem;
    transition:      all 0.32s var(--fl-ease-soft);
    white-space:     nowrap;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    line-height:     1;
}

.flb-btn svg {
    width:          13px;
    height:         13px;
    flex-shrink:    0;
    fill:           none;
    stroke:         currentColor;
    stroke-width:   1.5;
    stroke-linecap: round;
    transition:     transform 0.3s var(--fl-ease);
}

.flb-btn:hover svg,
.flb-btn:focus svg { transform: translateX(5px); }

.flb-btn--champ {
    background:   var(--fl-champagne);
    color:        var(--fl-noir);
    border:       1.5px solid var(--fl-champagne);
}
.flb-btn--champ:hover { background: #C4B596; border-color: #C4B596; }

.flb-btn--noir {
    background:   var(--fl-noir);
    color:        var(--fl-white);
    border:       1.5px solid var(--fl-noir);
}
.flb-btn--noir:hover { background: var(--fl-noir-mid); border-color: var(--fl-noir-mid); }

.flb-btn--ghost {
    background:   transparent;
    color:        rgba(253,252,250,.72);
    border:       1.5px solid rgba(253,252,250,.22);
}
.flb-btn--ghost:hover { border-color: rgba(253,252,250,.55); color: var(--fl-white); }

.flb-btn--outline {
    background:   transparent;
    color:        var(--fl-noir);
    border:       1.5px solid rgba(20,18,16,.25);
}
.flb-btn--outline:hover { background: var(--fl-noir); color: var(--fl-white); border-color: var(--fl-noir); }

.flb-btn--sm { font-size: 9px; padding: 0.75rem 1.75rem; }

/* ════════════════════════════════════════════════════════════════════════════
   5. TREFOIL SVG
════════════════════════════════════════════════════════════════════════════ */

.flb-trefoil        { display: block; }
.flb-trefoil--sm    { width: 32px; height: 32px; }
.flb-trefoil--md    { width: 48px; height: 48px; }
.flb-trefoil--lg    { width: 72px; height: 72px; }
.flb-trefoil--center{ margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════════════
   6. REVEAL / SCROLL ANIMATIONS
   Classes aplicadas nos render.php; activadas pelo JS do tema (main.js)
   ou pelo blocks-frontend.js se o tema não estiver activo
════════════════════════════════════════════════════════════════════════════ */

.flb-reveal {
    opacity:    0;
    transform:  translateY(var(--fl-reveal-distance-y));
    transition: opacity   var(--fl-reveal-dur) var(--fl-reveal-ease),
                transform var(--fl-reveal-dur) var(--fl-reveal-ease);
}

.flb-reveal.is-visible {
    opacity:   1;
    transform: none;
}

.flb-reveal--left  { transform: translateX(-28px); }
.flb-reveal--right { transform: translateX(28px); }
.flb-reveal--left.is-visible,
.flb-reveal--right.is-visible { transform: none; }

.flb-d1 { transition-delay: 0.10s; }
.flb-d2 { transition-delay: 0.22s; }
.flb-d3 { transition-delay: 0.34s; }
.flb-d4 { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
    .flb-reveal,
    .flb-reveal--left,
    .flb-reveal--right {
        opacity:    1 !important;
        transform:  none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   7. GRAIN OVERLAY
   Aplicado nos blocos que precisam do efeito de papel
════════════════════════════════════════════════════════════════════════════ */

.flb-grain::before {
    content:          '';
    position:         absolute;
    inset:            0;
    pointer-events:   none;
    z-index:          1;
    opacity:          0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════════════════
   8. IMAGENS EDITORIAIS
   Filtro v5 aplicado às imagens nos blocos
════════════════════════════════════════════════════════════════════════════ */

.flb-img-editorial {
    filter:     var(--fl-img-filter);
    transition: filter var(--fl-duration-slow, 0.65s) var(--fl-ease);
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.flb-img-editorial:hover { filter: var(--fl-img-filter-hover); }
.flb-img-hero             { filter: var(--fl-img-filter-hero); }
.flb-img-card             { filter: var(--fl-img-filter-card); }

/* Inset frame sobre imagens */
.flb-img-frame {
    position: relative;
}

.flb-img-frame::after {
    content:        '';
    position:       absolute;
    inset:          10px;
    border:         1px solid rgba(216,202,175,.22);
    z-index:        2;
    pointer-events: none;
    transition:     border-color 0.3s;
}

.flb-img-frame:hover::after { border-color: rgba(216,202,175,.45); }

/* ════════════════════════════════════════════════════════════════════════════
   9. HEADER DE SECÇÃO (eyebrow + título + lead)
   Padrão reutilizável em todos os blocos
════════════════════════════════════════════════════════════════════════════ */

.flb-section-hd {
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.flb-section-hd--center {
    text-align:     center;
    margin-inline:  auto;
}

.flb-section-hd--between {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    gap:             2rem;
    flex-wrap:       wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   10. ESTILOS NO EDITOR GUTENBERG
   Regras aplicadas especificamente no editor (via .is-root-container)
════════════════════════════════════════════════════════════════════════════ */

/* No editor, os blocos dinâmicos mostram um placeholder enquanto renderizam */
.wp-block[data-type^="fortunnalusitanos/"] .components-placeholder {
    background:     var(--fl-champagne-bg, #F5F1EA);
    border:         1px dashed var(--fl-champagne-border, rgba(216,202,175,.38));
    border-radius:  4px;
    padding:        2rem;
    text-align:     center;
    min-height:     120px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-direction: column;
    gap:            0.75rem;
}

.wp-block[data-type^="fortunnalusitanos/"] .components-placeholder__label {
    font-family:    var(--fl-font-heading, 'Cinzel', serif);
    font-size:      10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          var(--fl-stone, #B0A898);
}

/* Preview de blocos no editor — respeitam as variáveis do tema */
.editor-styles-wrapper .flb-wrap {
    padding-inline: 1.5rem;
}

/* No editor, desactiva transições para performance */
.editor-styles-wrapper .flb-reveal {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. UTILITÁRIOS
════════════════════════════════════════════════════════════════════════════ */

/* Display */
.flb-hidden   { display: none !important; }

/* Flex helpers */
.flb-flex-center  { display: flex; align-items: center; justify-content: center; }
.flb-flex-between { display: flex; align-items: center; justify-content: space-between; }
.flb-flex-col     { display: flex; flex-direction: column; }

/* Cores de texto rápidas */
.flb-text-champagne { color: var(--fl-champagne); }
.flb-text-white     { color: var(--fl-white); }
.flb-text-noir      { color: var(--fl-noir); }
.flb-text-stone     { color: var(--fl-stone); }

/* Fundos rápidos */
.flb-bg-noir     { background: var(--fl-noir); }
.flb-bg-white    { background: var(--fl-white); }
.flb-bg-champagne{ background: var(--fl-champagne-bg); }
.flb-bg-linen    { background: var(--fl-linen); }
.flb-bg-offwhite { background: var(--fl-off-white); }

/* Divisor com ornamento */
.flb-divider {
    border:         none;
    border-top:     1px solid var(--fl-linen);
    margin:         3rem 0;
    position:       relative;
}

.flb-divider::after {
    content:    '◆';
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%,-50%);
    font-size:  8px;
    background: var(--fl-white);
    padding:    0 0.5rem;
    color:      var(--fl-champagne-border);
}

.flb-divider--dark { border-color: rgba(253,252,250,.08); }
.flb-divider--dark::after { background: var(--fl-noir); color: rgba(216,202,175,.2); }

/* ════════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE UTILITÁRIOS
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .flb-hide-desktop { display: none !important; }
}

@media (max-width: 768px) {
    .flb-hide-tablet  { display: none !important; }
    .flb-section-hd--between {
        flex-direction: column;
        align-items:    flex-start;
    }
}

@media (max-width: 560px) {
    .flb-hide-mobile  { display: none !important; }
    .flb-btn { padding: 0.9rem 1.8rem; }
}