/* ============================================================
   MechaPaint shorts section - styles for shorts-gallery.js
   Lives only on the /videos/ page. Its own banded section under
   the 16:9 grid, because a vertical card in a horizontal grid
   makes both look broken. Dark, same panel/line/accent language
   as styles2.css, so it reads as part of the site and not as a
   widget bolted onto it.
   ============================================================ */

.shorts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

/* ---------- one short ---------- */

.short-card {
  display: block;
}

.short-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  cursor: pointer;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.short-thumb:hover { border-color: var(--accent); }

/* YouTube serves a 16:9 thumbnail for a vertical video, so it is
   cropped to the 9:16 frame rather than letterboxed. */
.short-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}

.short-thumb:hover img { opacity: 1; }

.short-thumb iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.short-live { cursor: default; }
.short-live:hover { border-color: var(--line); }

.short-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13, 16, 23, 0.75);
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.short-play::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--accent);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.short-thumb:hover .short-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(13, 16, 23, 0.9);
}

.short-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 10px;
}

.short-yt-link {
  display: inline-block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.short-yt-link:hover { text-decoration: underline; }

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  .shorts-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}