/**
 * Estilos do Bloco Botões com Imagem — Fortunna Lusitanos
 *
 * @package FortunnaLusitanosBlocks
 */

.flb-tiles {
    padding-block: var(--fl-gap-section, clamp(5rem, 10vw, 9rem));
    background:    var(--fl-white, #FDFCFA);
}
.flb-tiles--off-white { background: var(--fl-champagne-bg, #F5F1EA); }
.flb-tiles--noir      { background: var(--fl-noir, #141210); }
.flb-tiles--noir .flb-section-title { color: var(--fl-white, #FDFCFA); }

.flb-tiles__head {
    text-align:    center;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.flb-tiles__head .flb-eyebrow { margin-inline: auto; }

/* ── Grelha ───────────────────────────────────────────────────────────── */

.flb-tiles__grid {
    display:               grid;
    grid-template-columns: repeat(var(--flb-tiles-cols, 3), minmax(0, 1fr));
    gap:                   .75rem;
}
.flb-tiles--gap-none .flb-tiles__grid { gap: 0; }
.flb-tiles--gap-md   .flb-tiles__grid { gap: 1.5rem; }

@media (max-width: 900px) {
    .flb-tiles--cols-3 .flb-tiles__grid,
    .flb-tiles--cols-4 .flb-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .flb-tiles .flb-tiles__grid { grid-template-columns: 1fr; } /* vence .flb-tiles--cols-N (mesma especificidade, depois) */
}

/* ── Botão ────────────────────────────────────────────────────────────── */

.flb-tile {
    position:        relative;
    display:         block;
    overflow:        hidden;
    background:      var(--fl-noir, #141210);
    color:           var(--fl-white, #FDFCFA);
    text-decoration: none;
    isolation:       isolate;
}
.flb-tile--portrait  { aspect-ratio: 3 / 4; }
.flb-tile--square    { aspect-ratio: 1 / 1; }
.flb-tile--landscape { aspect-ratio: 4 / 3; }
.flb-tile--wide      { aspect-ratio: 16 / 9; }

/* No telemóvel (1 coluna) o retrato fica demasiado alto */
@media (max-width: 560px) {
    .flb-tile--portrait { aspect-ratio: 4 / 3; }
}

.flb-tile__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 1s var(--fl-ease, cubic-bezier(.16,1,.3,1));
    z-index:    -2;
}
.flb-tile__img--empty { display: block; background: var(--fl-noir-mid, #2A2520); }

/* Véu: base escura sob o título + escurecimento geral (opção do bloco) */
.flb-tile__veil {
    position:   absolute;
    inset:      0;
    z-index:    -1;
    background:
        linear-gradient(to top, rgba(20,18,16,.78) 0%, rgba(20,18,16,.25) 45%, rgba(20,18,16,0) 70%),
        rgba(20,18,16, var(--flb-tiles-overlay, .35));
    transition: background-color .5s;
}
.flb-tiles--title-center .flb-tile__veil {
    background:
        radial-gradient(closest-side, rgba(20,18,16,.55), rgba(20,18,16,0)),
        rgba(20,18,16, var(--flb-tiles-overlay, .35));
}

/* ── Texto ────────────────────────────────────────────────────────────── */

.flb-tile__text {
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         0;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            .45rem;
    padding:        clamp(1.25rem, 2.5vw, 2rem);
}
.flb-tiles--title-center .flb-tile__text {
    top:             0;
    align-items:     center;
    justify-content: center;
    text-align:      center;
}

.flb-tile__sub {
    font-family:    var(--fl-font-heading, 'Cinzel', serif);
    font-size:      11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--fl-champagne, #D8CAAF);
}

.flb-tile__title {
    font-family:    var(--fl-font-heading, 'Cinzel', serif);
    font-size:      clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight:    500;
    letter-spacing: .06em;
    line-height:    1.1;
    text-transform: uppercase;
    color:          var(--fl-white, #FDFCFA);
}

/* Filete champanhe que cresce ao passar o rato */
.flb-tile__line {
    display:          block;
    width:            2.25rem;
    height:           1px;
    margin-top:       .35rem;
    background:       var(--fl-champagne, #D8CAAF);
    transform-origin: left;
    transition:       width .6s var(--fl-ease, cubic-bezier(.16,1,.3,1));
}
.flb-tiles--title-center .flb-tile__line { transform-origin: center; }

/* ── Interacção ───────────────────────────────────────────────────────── */

a.flb-tile:hover .flb-tile__img,
a.flb-tile:focus-visible .flb-tile__img { transform: scale(1.05); }
a.flb-tile:hover .flb-tile__line,
a.flb-tile:focus-visible .flb-tile__line { width: 4.5rem; }

a.flb-tile:focus-visible {
    outline:        2px solid var(--fl-champagne, #D8CAAF);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .flb-tile__img, .flb-tile__line { transition: none; }
}