/**
 * Estilos do Bloco Hero — Fortunna Lusitanos
 *
 * @package FortunnaLusitanosBlocks
 */

/* ── Container ────────────────────────────────────────────────────────── */

.flb-hero {
    position:       relative;
    min-height:     100svh;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    align-items:    center;
    overflow:       hidden;
    text-align:     center;
    background:     var(--fl-noir, #141210);
}

/* ── Foto de fundo ────────────────────────────────────────────────────── */

.flb-hero__photo {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.flb-hero__photo img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center 28%;
    /* Cores naturais por omissão (pedido do cliente: "mais cor"). Antes a foto
       levava sempre grayscale(55%) sepia(18%) e um brightness() que descia com o
       overlay — escurecia duas vezes: a 0.35 ficava com 27% da luz e 64% da cor.
       O escurecimento é só o do véu (overlay) + o halo atrás do texto. */
    filter:           none;
}

/* Tratamento da foto (opção do bloco) */
.flb-hero--foto-suave    .flb-hero__photo img { filter: grayscale(25%) sepia(8%); }
.flb-hero--foto-classico .flb-hero__photo img { filter: grayscale(55%) sepia(18%); } /* design v5 */

/* ── Vinheta ──────────────────────────────────────────────────────────── */

.flb-hero__veil {
    position: absolute;
    inset:    0;
    z-index:  1;
    opacity:  var(--overlay-opacity, 0.15);
    background-color: #141210;
    background-image:
        radial-gradient(
            ellipse 65% 70% at 50% 48%,
            transparent 30%,
            rgba(20,18,16, 0.88) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(20,18,16, 1) 0%,
            rgba(20,18,16, 0.08) 30%,
            rgba(20,18,16, 0.08) 65%,
            rgba(20,18,16, 1) 100%
        );
}


/* ── Faixa do menu ────────────────────────────────────────────────────── */
/* O menu é transparente sobre o hero. Com overlay baixo (ex.: 0.15) o céu
   claro no topo da foto deixava os links a ~1.4:1 de contraste. Esta faixa
   escurece só a zona do menu, independente do overlay: links ≥ 4.5:1. */

.flb-hero::after {
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    right:          0;
    height:         calc(var(--fl-nav-h, 80px) + var(--fl-admin-bar-h, 0px) + 110px);
    z-index:        1;
    pointer-events: none;
    background:     linear-gradient(
        to bottom,
        rgba(20,18,16, 0.62) 0%,
        rgba(20,18,16, 0.50) 45%,
        rgba(20,18,16, 0.18) 75%,
        rgba(20,18,16, 0) 100%
    );
}

/* ── Conteúdo central ─────────────────────────────────────────────────── */

.flb-hero__content {
    position:       relative;
    z-index:        2;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        calc(var(--fl-nav-h, 80px) + var(--fl-admin-bar-h, 0px) + 2rem)
                    var(--fl-pad, clamp(1.5rem,5.5vw,6rem))
                    clamp(6rem, 14vh, 9rem);
    max-width:      900px;
    width:          100%;
}

/* Halo de legibilidade: escurece só a zona do texto, em vez de escurecer a foto
   toda com o overlay. Elipse com o centro no bloco de texto (do eyebrow aos
   botões), a desvanecer para transparente. Calibrado na foto real do staging
   (cores naturais): todo o texto passa WCAG AA a partir de overlay 0.10, em
   desktop e telemóvel. Fica atrás do texto (z-index -1 dentro do conteúdo). */
.flb-hero__content::before {
    content:        '';
    position:       absolute;
    z-index:        -1;
    top:            calc(var(--fl-nav-h, 80px) + var(--fl-admin-bar-h, 0px) + 2rem - 160px);
    bottom:         calc(clamp(6rem, 14vh, 9rem) - 80px);
    left:           -8vw;
    right:          -8vw;
    background:     radial-gradient(closest-side,
                        rgba(20, 18, 16, 0.70) 0%,
                        rgba(20, 18, 16, 0.55) 60%,
                        rgba(20, 18, 16, 0)    100%);
    pointer-events: none;
}

/* Telemóvel: a coluna de texto ocupa o ecrã — o halo alarga e cresce para
   cobrir o eyebrow (topo) e os botões (fundo) */
@media (max-width: 640px) {
    .flb-hero__content::before {
        top:    calc(var(--fl-nav-h, 80px) + var(--fl-admin-bar-h, 0px) + 2rem - 200px);
        bottom: calc(clamp(6rem, 14vh, 9rem) - 200px);
        left:   -45vw;
        right:  -45vw;
    }
}

/* ── Título ───────────────────────────────────────────────────────────── */

.flb-hero__title {
    font-family:    var(--fl-font-heading, 'Cinzel', serif);
    font-weight:    700;
    font-size:      clamp(2.8rem, 6.5vw, 6rem);
    color:          var(--fl-white, #FDFCFA);
    line-height:    0.92;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin:         0;
}

.flb-hero__title-main,
.flb-hero__title-sub {
    display: block;
}

/* Segunda linha — mais pequena e espaçada, como "LUSITANOS" no logótipo */
.flb-hero__title-sub {
    font-size:      0.36em;
    font-weight:    400;
    letter-spacing: 0.55em;
    padding-left:   0.55em; /* compensa o espaçamento após a última letra */
    line-height:    1.2;
    margin-top:     0.45em;
}

/* ── Linha champanhe ──────────────────────────────────────────────────── */

.flb-hero__rule {
    display:    block;
    width:      1px;
    height:     clamp(22px, 3vh, 36px);
    background: linear-gradient(to bottom, var(--fl-champagne, #D8CAAF), transparent);
    margin:     1rem auto;
}

/* ── Subtítulo ────────────────────────────────────────────────────────── */

.flb-hero__subtitle {
    font-family:    var(--fl-font-body, 'Raleway', sans-serif);
    font-style:     italic;
    font-size:      clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight:    300;            /* era 200 — demasiado fino sobre foto */
    color:          rgba(253,252,250,.96); /* era .62 */
    letter-spacing: 0.18em;
    margin:         0;
}

/* ── Corpo ────────────────────────────────────────────────────────────── */

.flb-hero__body {
    font-family:  var(--fl-font-body, 'Raleway', sans-serif);
    font-size:    clamp(0.9rem, 1.3vw, 1rem);
    font-weight:  300;
    color:        rgba(253,252,250,.96); /* era .45 — nunca chegava a 4,5:1 */
    line-height:  1.8;
    max-width:    460px;
    margin:       1.25rem 0 0;
}

/* ── CTAs ─────────────────────────────────────────────────────────────── */

.flb-hero__actions {
    display:         flex;
    gap:             1rem;
    margin-top:      2.75rem;
    flex-wrap:       wrap;
    justify-content: center;
}

/* ── Banda de estatísticas ────────────────────────────────────────────── */

.flb-hero__stats {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    2;
    border-top: 1px solid rgba(216,202,175,.18);
    /* Fundo próprio: com overlay baixo, os números ficavam sobre a foto clara */
    background: linear-gradient(to top, rgba(20,18,16,.78), rgba(20,18,16,.45));
}

.flb-hero__stats .flb-wrap {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0;
}

.flb-hstat {
    padding:    1.4rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(216,202,175,.12);
}

.flb-hstat:last-child { border-right: none; }

.flb-hstat__val {
    font-family:  var(--fl-font-heading, 'Cinzel', serif);
    font-size:    clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight:  400;
    color:        var(--fl-champagne, #D8CAAF);
    line-height:  1;
}

.flb-hstat__label {
    font-family:    var(--fl-font-body, 'Raleway', sans-serif);
    font-size:      11px;
    font-weight:    300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          rgba(253,252,250,.75); /* era .32 e 8,5px */
    margin-top:     0.35rem;
}

/* ── Indicador de scroll ──────────────────────────────────────────────── */

.flb-hero__scroll {
    position:       absolute;
    bottom:         calc(clamp(60px, 10vh, 90px) + 1rem); /* acima da banda de stats */
    right:          var(--fl-pad, 2rem);
    z-index:        2;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
}

.flb-hero__scroll-dot {
    width:         3px;
    height:        3px;
    border-radius: 50%;
    background:    var(--fl-champagne, #D8CAAF);
    animation:     flbScrollPulse 2s ease-in-out infinite;
}

.flb-hero__scroll-line {
    width:      1px;
    height:     36px;
    background: linear-gradient(to bottom, var(--fl-champagne, #D8CAAF), transparent);
}

.flb-hero__scroll-txt {
    font-family:    var(--fl-font-heading, 'Cinzel', serif);
    font-size:      7px;
    font-weight:    400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color:          rgba(216,202,175,.38);
    writing-mode:   vertical-rl;
}

@keyframes flbScrollPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.6); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .flb-hero__stats .flb-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .flb-hstat:nth-child(2) { border-right: none; }
}

@media (max-width: 560px) {
    .flb-hero__scroll { display: none; }
    .flb-hero__actions { flex-direction: column; align-items: center; }
    .flb-btn { width: 100%; justify-content: center; }
    .flb-hero__stats .flb-wrap {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .flb-hero__scroll-dot { animation: none; }
}

/* ── Legibilidade sobre a foto (1.1.24) ───────────────────────────────────
   Classes partilhadas com outros blocos — ajustadas só dentro do Hero. */
.flb-hero .flb-eyebrow {
    color:     #F5F1EA;   /* champanhe-claro; era champanhe a 70% (2:1) */
    filter:    none;
    font-size: 11px;      /* era 9px */
}
.flb-hero .flb-btn--ghost {
    color:        rgba(253, 252, 250, 0.92); /* era .72 */
    border-color: rgba(253, 252, 250, 0.45); /* era .22 */
}

/* ── Fundo: slideshow (1.4.2) ─────────────────────────────────────────── */
/* Cruzamento lento entre imagens + Ken Burns subtil na imagem activa.
   O intervalo vem de data-interval (blocks-frontend.js). */

.flb-hero__slide {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transition: opacity 1.6s ease;
}
.flb-hero__slide.is-active { opacity: 1; }

.flb-hero__slide img { transform: scale(1.0); }
.flb-hero__slide.is-active img {
    animation: flb-hero-kenburns var(--flb-slide-dur, 8s) linear both;
}
@keyframes flb-hero-kenburns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.07); }
}

/* ── Fundo: vídeo YouTube (1.4.2) ─────────────────────────────────────── */
/* Container queries: o iframe 16:9 cobre o hero como object-fit:cover,
   com 12% de margem para esconder as barras e o título do YouTube. */

.flb-hero__yt { container-type: size; }

.flb-hero__yt iframe {
    position:       absolute;
    top:            50%;
    left:           50%;
    width:          max(100cqw, 177.78cqh);
    height:         max(100cqh, 56.25cqw);
    transform:      translate(-50%, -50%) scale(1.12);
    border:         0;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 1.2s ease;
}
.flb-hero__yt.is-playing iframe { opacity: 1; }
.flb-hero__yt .flb-hero__poster { transition: opacity 1.2s ease; }
.flb-hero__yt.is-playing .flb-hero__poster { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .flb-hero__slide.is-active img { animation: none; }
    .flb-hero__slide { transition-duration: .01s; }
}