/* Fase 5 (Home) — grade de banners secundária ($bannersGrade).
   Restruturação pro padrão "2 quadrados + 1 retângulo" (posicional: item 0 = retângulo,
   itens 1-2 = quadrados — ver nota de assunção no home.blade.php acima da seção). */

.banner-grade-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--bs-border-radius, .375rem);
}

.banner-grade-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Peça larga (posição 0 quando há 3+ banners, ou banner único). */
.banner-grade-retangulo {
    aspect-ratio: 21 / 9;
}

/* Peças quadradas (posições 1-2). */
.banner-grade-quadrado {
    aspect-ratio: 1 / 1;
}

/* Achado (Fase 5): o overlay de texto (título/subtítulo sobre a imagem) só tinha `start-0`
   (sem `end-0`), então uma `<div>` position:absolute sem largura própria — títulos longos
   esticavam/empilhavam linhas de forma feia perto da borda inferior da imagem. `end-0` fixa a
   largura no tamanho da imagem; line-clamp corta o excesso com reticências em vez de deixar
   crescer sem limite. */
.banner-grade-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: .75rem 1rem;
    color: #FFF;
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}

.banner-grade-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.banner-grade-subtitulo {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}