/* Photos & videos */
.gallery-item { margin: 0; }
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 16px 12px; background: linear-gradient(transparent, rgba(19,19,19,.88)); color: var(--white); display: flex; justify-content: space-between; gap: 10px; align-items: end; pointer-events: none; }
.gallery-item figcaption strong { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.gallery-item figcaption span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #ffb3b6; white-space: nowrap; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--concrete); }
.work-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-card figcaption { position: absolute; left: 0; bottom: 0; background: var(--red); color: var(--white); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; padding: 8px 14px; }
.work-cta { text-align: center; margin: 34px 0 0; }

.video-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.video-card { background: var(--black); aspect-ratio: 9/16; overflow: hidden; border-bottom: 4px solid var(--red); }
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--black); }

@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; }
  .video-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  .video-card { flex: 0 0 68%; max-width: 280px; scroll-snap-align: start; }
}

/* Hero photo (home) */
.hero-bg {
  background:
    linear-gradient(120deg, rgba(19,19,19,0.92) 0%, rgba(19,19,19,0.66) 46%, rgba(19,19,19,0.28) 100%),
    url("../images/skillvio-hero-truck.jpg") center / cover no-repeat,
    #131313 !important;
}

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; padding: 20px; }
.lb.open { display: flex; }
.lb img { max-width: 100%; max-height: 88vh; object-fit: contain; }
.lb button { position: absolute; background: var(--red); color: var(--white); border: 0; width: 46px; height: 46px; font-size: 1.5rem; cursor: pointer; }
.lb .lb-x { top: 14px; right: 14px; } .lb .lb-p { left: 14px; top: 50%; } .lb .lb-n { right: 14px; top: 50%; }
.lb p { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--font-mono); font-size: .85rem; margin: 0; }

/* Hero layout over photo */
.hero-content { width: 100%; max-width: var(--max); }
.hero-content h1, .hero-content p.lead { max-width: 700px; }
.hero .eyebrow, .hero-content .eyebrow { color: #ff6a70; }
.hero-content h1 mark { color: #ff5a60; }
.hero-bg { background-position: 70% center !important; }
.hero-content { padding-left: 24px; padding-right: 24px; }