/**
 * Horses Grid Block — Fortunna Lusitanos
 * Imagem: aspect-ratio:3/4 na <img>, não no container.
 */

.flb-horses-grid {
    padding-block: var(--fl-gap-section, clamp(5rem,10vw,9rem));
}

.flb-horses-grid__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--fl-gap-md, 1.5rem);
}

.flb-horses-grid .hcard {
    background:     var(--fl-white, #FDFCFA);
    position:       relative;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    border:         1px solid var(--fl-linen, #EDE8DF);
    transition:     box-shadow .4s, transform .4s, border-color .35s;
    cursor:         pointer;
}
.flb-horses-grid .hcard:hover {
    box-shadow:   0 8px 40px rgba(20,18,16,.1);
    transform:    translateY(-3px);
    border-color: rgba(216,202,175,.38);
}
.flb-horses-grid .hcard::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--fl-champagne, #D8CAAF);
    z-index: 4; transform: scaleX(0); transform-origin: left;
    transition: transform .45s cubic-bezier(0.16,1,0.3,1);
}
.flb-horses-grid .hcard:hover::before { transform: scaleX(1); }

.flb-horses-grid .hcard__photo {
    display:         block;
    position:        relative;
    overflow:        hidden;
    background:      var(--fl-noir, #141210);
    flex-shrink:     0;
    text-decoration: none;
    line-height:     0;
}

.flb-horses-grid .hcard__photo > a,
.flb-horses-grid .hcard__photo > figure,
.flb-horses-grid .hcard__photo > p {
    display:     block;
    line-height: 0;
}

/* aspect-ratio na <img> — define a própria altura */
.flb-horses-grid .hcard__photo img {
    display:         block;
    width:           100%;
    height:          auto;
    aspect-ratio:    3 / 4;
    object-fit:      cover;
    object-position: center;
    filter:          grayscale(30%) brightness(.90) sepia(10%);
    transition:      transform .8s cubic-bezier(0.16,1,0.3,1), filter .5s;
}
.flb-horses-grid .hcard:hover .hcard__photo img {
    transform: scale(1.05);
    filter:    grayscale(20%) brightness(.92) sepia(7%);
}

/* <picture> (imagem de computador + telemóvel, plugin Cavalos 1.5.4) */
.flb-horses-grid .hcard__picture { display: block; }

/* Telemóvel (1 coluna): 4:5 em vez de 3:4 — o cartão fica menos alto */
@media (max-width: 640px) {
    .flb-horses-grid .hcard__photo img { aspect-ratio: 4 / 5; }
}

@media (max-width: 1100px) {
    .flb-horses-grid__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .flb-horses-grid__grid { grid-template-columns: 1fr !important; }
}


/* ── Paginação (bloco 1.5.0) ───────────────────────────────────────────── */
/* Âncora dos links de página: compensa o menu fixo */
.flb-horses-grid__anchor {
    display:           block;
    scroll-margin-top: calc(var(--fl-nav-h, 80px) + var(--fl-admin-bar-h, 0px) + 1.5rem);
}
.flb-pager {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             .35rem;
    margin-top:      clamp(2.5rem, 5vw, 3.5rem);
    font-family:     var(--fl-font-heading, 'Cinzel', serif);
    --pg-ink:        var(--fl-noir, #141210);
    --pg-muted:      var(--fl-stone, #B0A898);
    --pg-line:       rgba(20,18,16,.18);
}
.flb-pager--dark {
    --pg-ink:   var(--fl-white, #FDFCFA);
    --pg-muted: rgba(253,252,250,.45);
    --pg-line:  rgba(253,252,250,.22);
}
.flb-pager__num,
.flb-pager__step,
.flb-pager__gap {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    min-width:       2.75rem;
    height:          2.75rem;
    padding:         0 .5rem;
    font-size:       .78rem;
    font-weight:     600;
    letter-spacing:  .08em;
    line-height:     1;
    color:           var(--pg-ink);
    text-decoration: none;
    border:          1px solid transparent;
    transition:      border-color .25s, background .25s, color .25s;
}
.flb-pager__gap { color: var(--pg-muted); min-width: 1.5rem; padding: 0; }
.flb-pager a.flb-pager__num:hover,
.flb-pager a.flb-pager__step:hover { border-color: var(--pg-ink); }
.flb-pager__num.is-current {
    background: var(--pg-ink);
    color:      var(--fl-off-white, #F7F4EF);
}
.flb-pager--dark .flb-pager__num.is-current { color: var(--fl-noir, #141210); }
.flb-pager__step { border-color: var(--pg-line); }
.flb-pager__step svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.flb-pager__step.is-disabled { opacity: .3; }
.flb-pager__step:first-child { margin-right: .5rem; }
.flb-pager__step:last-child  { margin-left: .5rem; }
.flb-pager a:focus-visible { outline: 2px solid var(--pg-ink); outline-offset: 2px; }
/* Telemóvel: ← 1 … 5 … 10 → (sem as vizinhas da actual), numa só linha */
@media (max-width: 480px) {
    .flb-pager { gap: .15rem; }
    .flb-pager__num--near { display: none; }
    .flb-pager__step:first-child { margin-right: .35rem; }
    .flb-pager__step:last-child  { margin-left: .35rem; }
}