/* === Our Company Videos section === */
.company-videos { padding: 60px 0; background: #f8fafc; }
.company-videos h2 { text-align: center; }

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
    margin-top: 10px;
}

.video-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: none;
    border: none;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }

.video-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #0f172a;
}
.video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.video-play i {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(15,23,42,.6);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.video-card:hover .video-play i { background: #16a34a; }

.video-card-title { font-size: .95rem; font-weight: 600; color: #0f172a; padding: 0 4px 4px; }
.videos-empty { text-align: center; color: #6b7280; padding: 20px 0; }

/* === Lightbox === */
.video-modal { position: fixed; inset: 0; z-index: 1010; display: none; }
.video-modal.open { display: block; }
.video-modal-overlay { position: absolute; inset: 0; background: rgba(2,6,23,.92); }
.video-modal-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
}
.vm-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(960px, 92vw);
}
.vm-stage video {
    width: 100%;
    max-height: 78vh;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.vm-title { color: #e5e7eb; font-size: 1rem; font-weight: 600; text-align: center; margin: 0; }

.vm-btn {
    border: none;
    cursor: pointer;
    color: #fff;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    width: 48px; height: 48px;
    font-size: 1.2rem;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.vm-btn:hover { background: rgba(255,255,255,.28); }
.vm-close { position: absolute; top: 18px; right: 22px; font-size: 1.8rem; line-height: 1; }
.vm-prev, .vm-next { z-index: 2; }

@media (max-width: 640px) {
    .vm-prev, .vm-next { position: absolute; bottom: 18px; }
    .vm-prev { left: 24px; }
    .vm-next { right: 24px; }
    .video-modal-inner { padding: 12px; }
}