/* ============================================================
   Homepage hero slider + screenshot gallery
   ============================================================ */

.hero-slider {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: var(--ink);
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    background-size: cover;
    background-position: center;
}
.hero-slide.active { opacity: 1; }
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.75) 100%);
    display: flex;
    align-items: flex-end;
    padding: 28px 40px;
}
.hero-slide-text h3 { color: #fff; font-size: 1.3rem; margin-bottom: 4px; }
.hero-slide-text p { color: rgba(255,255,255,0.85); font-size: 0.9rem; max-width: 60ch; }

.hero-slider-dots {
    position: absolute;
    bottom: 14px;
    right: 24px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.hero-slider-dots button {
    width: 8px; height: 8px; border-radius: 50%;
    border: none; background: rgba(255,255,255,0.4); cursor: pointer; padding: 0;
}
.hero-slider-dots button.active { background: #fff; width: 20px; border-radius: 4px; }

.hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15,23,42,0.35);
    color: #fff;
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.hero-slider-arrow:hover { background: rgba(15,23,42,0.6); }
.hero-slider-arrow.prev { left: 16px; }
.hero-slider-arrow.next { right: 16px; }

/* Gallery — mixed big/small grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    gap: 14px;
}
.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--surface);
}
.gallery-item.big { grid-column: span 2; grid-row: span 2; }
.gallery-item.small { grid-column: span 1; grid-row: span 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(15,23,42,0.82));
    color: #fff;
    font-size: 0.8rem;
    padding: 18px 12px 10px;
}

.gallery-lightbox {
    position: fixed; inset: 0; background: rgba(15,23,42,0.85);
    display: none; align-items: center; justify-content: center;
    z-index: 10000; padding: 24px;
}
.gallery-lightbox.open { display: flex; }
.gallery-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 10px; }
.gallery-lightbox-close {
    position: absolute; top: 20px; right: 24px;
    background: rgba(255,255,255,0.15); color: #fff; border: none;
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.1rem;
}

@media (max-width: 720px) {
    .hero-slider { height: 260px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
    .gallery-item.big { grid-column: span 2; grid-row: span 1; }
}