/* ============================================================
KA$CH — GALERIA MASONRY (componente reutilizável)
============================================================
Grid estilo Pinterest/masonry — colunas com alturas variadas,
14 posições de foto, cantos arredondados, hover com zoom leve.
COMO USAR EM QUALQUER PÁGINA DO SITE:
1. Inclua este arquivo no :
2. Copie o bloco de markup do index.html (14x .kasch-masonry-item)
dentro de um container
.
ISOLAMENTO: todas as classes usam o prefixo "kasch-masonry" / "km-"
e não reaproveitam nomes de nenhuma outra galeria do site
(ex.: .galeria-grid do Casting, .portfolio-pg-galeria do Portfólio),
então este arquivo pode ser incluído em qualquer página sem
sobrescrever ou ser sobrescrito por outros estilos de galeria.
DEPENDÊNCIA: usa apenas os tokens globais definidos em :root no
style.css (--gold, --radius-md, --transition, --text-muted), que
já é carregado em todas as páginas do site.
============================================================ */
.kasch-masonry {
column-count: 5;
column-gap: 12px;
padding: 40px 0;
}
.kasch-masonry-item {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 12px;
border-radius: var(--radius-md, 16px);
overflow: hidden;
position: relative;
display: block;
background: linear-gradient(135deg, #1a1a15 0%, #0d0d0a 100%);
cursor: pointer;
}
.kasch-masonry-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform var(--transition, 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94));
}
.kasch-masonry-item:hover img { transform: scale(1.06); }
/* Fade sutil no rodapé de cada foto, igual ao restante do site */
.kasch-masonry-fade {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(to top, rgba(30,30,29,0.75) 0%, transparent 100%);
z-index: 1;
pointer-events: none;
}
/* ---- Alturas variadas — ritmo masonry inspirado na referência ---- */
.km-1 { aspect-ratio: 1 / 1; }
.km-2 { aspect-ratio: 4 / 5; }
.km-3 { aspect-ratio: 3 / 4; }
.km-4 { aspect-ratio: 1 / 1.35; }
.km-5 { aspect-ratio: 4 / 5; }
.km-6 { aspect-ratio: 3 / 5; }
.km-7 { aspect-ratio: 1 / 1; }
.km-8 { aspect-ratio: 3 / 4; }
.km-9 { aspect-ratio: 1 / 1.6; }
.km-10 { aspect-ratio: 4 / 5; }
.km-11 { aspect-ratio: 1 / 1; }
.km-12 { aspect-ratio: 3 / 4; }
.km-13 { aspect-ratio: 1 / 1.4; }
.km-14 { aspect-ratio: 4 / 5; }
/* ---- Responsivo — segue os breakpoints do site (1200 / 1024 / 640) ---- */
@media (max-width: 1200px) {
.kasch-masonry { column-count: 4; }
}
@media (max-width: 1024px) {
.kasch-masonry { column-count: 3; }
}
@media (max-width: 640px) {
.kasch-masonry { column-count: 2; column-gap: 10px; padding: 24px 0; }
.kasch-masonry-item { margin-bottom: 10px; }
}