.hb-main-gallery-wrapper { margin: 30px 0; }
.hb-sub-gallery-title { margin: 0 0 10px 0; font-size: 1.4em; }
.hb-sub-gallery-desc { margin: 0 0 15px 0; color: #666; font-size: 0.95em; }

.hb-gallery-grid-container { position: relative; }
.hb-gallery-grid { 
    display: grid; 
    gap: var(--hb-gap, 15px); 
}

/* Sarakkeet */
.hb-cols-2 .hb-gallery-grid { grid-template-columns: repeat(2, 1fr); }
.hb-cols-3 .hb-gallery-grid { grid-template-columns: repeat(3, 1fr); }
.hb-cols-4 .hb-gallery-grid { grid-template-columns: repeat(4, 1fr); }

/* Asettelut */
.hb-layout-masonry .hb-gallery-grid { display: block; column-gap: var(--hb-gap, 15px); }
.hb-layout-masonry.hb-cols-2 .hb-gallery-grid { column-count: 2; }
.hb-layout-masonry.hb-cols-3 .hb-gallery-grid { column-count: 3; }
.hb-layout-masonry.hb-cols-4 .hb-gallery-grid { column-count: 4; }
.hb-layout-masonry .hb-gallery-item { break-inside: avoid; margin-bottom: var(--hb-gap, 15px); }

.hb-layout-justified .hb-gallery-grid { display: flex; flex-wrap: wrap; gap: var(--hb-gap, 10px); }
.hb-layout-justified .hb-gallery-item { flex: 1 1 200px; height: 220px; margin: 0; }
.hb-layout-justified .hb-gallery-item img { height: 100%; width: 100%; object-fit: cover; }

.hb-layout-horizontal .hb-gallery-grid { display: flex; flex-wrap: nowrap; gap: var(--hb-gap, 15px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.hb-layout-horizontal .hb-gallery-item { flex: 0 0 280px; scroll-snap-align: start; margin: 0; }

.hb-layout-mosaic .hb-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hb-gap, 10px); }
.hb-layout-mosaic .hb-gallery-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }

.hb-layout-bento .hb-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hb-gap, 12px); }
.hb-layout-bento .hb-gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.hb-layout-bento .hb-gallery-item:nth-child(6n+4) { grid-column: span 2; }

.hb-layout-packed .hb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-flow: dense; gap: var(--hb-gap, 10px); }

.hb-layout-carousel .hb-gallery-grid { display: flex; flex-wrap: nowrap; gap: var(--hb-gap, 15px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.hb-layout-carousel .hb-gallery-item { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.hb-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 24px; padding: 10px 15px; cursor: pointer; z-index: 10; border-radius: 4px; }
.hb-carousel-arrow.hb-prev { left: 10px; }
.hb-carousel-arrow.hb-next { right: 10px; }

.hb-layout-card .hb-gallery-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

.hb-layout-feed .hb-gallery-grid { display: flex; flex-direction: column; gap: var(--hb-gap, 25px); max-width: 650px; margin: 0 auto; }

/* Kuvien yleisefektit */
.hb-gallery-item { margin: 0; overflow: hidden; border-radius: 6px; position: relative; }

/* KORJATTU: Korkeus automaattinen, jotta kuvat näkyvät oikein */
.hb-gallery-item img { 
    width: 100%; 
    height: auto; 
    display: block; 
    transition: all 0.3s ease; 
}

/* Hover-efektit */
.hb-hover-zoom .hb-gallery-item:hover img { transform: scale(1.06); }
.hb-hover-fade .hb-gallery-item:hover img { opacity: 0.75; }

/* Overlay-efekti kuvan päälle */
.hb-hover-overlay .hb-overlay-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 10px;
    font-size: 13px;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
}

.hb-hover-overlay .hb-gallery-item:hover .hb-overlay-caption {
    opacity: 1;
    transform: translateY(0);
}

.hb-gallery-caption { padding: 8px; font-size: 12px; color: #666; text-align: center; }

@media (max-width: 768px) {
    .hb-cols-3 .hb-gallery-grid, .hb-cols-4 .hb-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .hb-layout-bento .hb-gallery-grid, .hb-layout-mosaic .hb-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}