/* Videothek — ported from design_104/videothek.html (video cards, featured,
   filters, YouTube lightbox). */

/* Page hero — this page doesn't load page-products.css, so it carries its own
   copy of the hero rules (incl. the calc(72px+…) top padding that clears the
   fixed header — without it the breadcrumb/title slide under the nav). */
.product-hero { position: relative; padding: calc(72px + 2.5rem) 0 4rem; border-bottom: 1px solid var(--border); overflow: hidden; }
.page-content { padding: 4rem 0 6rem; background: var(--bg); }

.video-filters { display: flex; gap: 0.5rem; margin: 0 0 2.5rem; flex-wrap: wrap; }
.vf-btn { font-family: var(--font); font-size: 0.82rem; font-weight: 500; padding: 0.5rem 1.25rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: rgba(255,255,255,0.5); cursor: pointer; transition: var(--transition); }
.vf-btn:hover { border-color: var(--primary); color: var(--primary); }
.vf-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Override design.css's homepage `.video-featured` grid — here it's just a
   full-width wrapper around the featured card (else the button is squeezed
   into a 1.4fr column ≈ 686px instead of 100%). */
.video-featured { display: block; margin-bottom: 2.5rem; }
.vcard-featured { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; width: 100%; text-align: left; font-family: inherit; padding: 0; background: linear-gradient(145deg,#1a1a1a,#141414); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: var(--transition); }
.vcard-featured:hover { border-color: var(--border-hover); }
/* Thumbnail stretches to the grid row (align-items:stretch) with a min-height
   floor — fills the left column cleanly regardless of the text panel height,
   no black gap and no overflow into the text column. */
.vcard-featured .vf-thumb { position: relative; min-height: 300px; display: block; overflow: hidden; }
.vcard-featured .vf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.vcard-featured:hover .vf-thumb img { transform: scale(1.04); }
.vcard-featured .vf-info { padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; gap: 0.65rem; }
.vcard-featured .vf-info h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: #fff; }
.vcard-featured .vf-info p { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vf-cue { font-size: 0.8rem; font-weight: 500; color: var(--primary-light); letter-spacing: 0.03em; margin-top: 0.4rem; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.vcard { display: block; width: 100%; text-align: left; font-family: inherit; padding: 0; background: linear-gradient(145deg,#1a1a1a,#141414); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: var(--transition); }
.vcard:hover { border-color: var(--border-hover); }
.vcard-thumb { position: relative; display: block; aspect-ratio: 16/9; background: #111; overflow: hidden; }
.vcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.vcard:hover .vcard-thumb img { transform: scale(1.04); }
.video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.25s ease; }
.vcard:hover .video-play-overlay, .vcard-featured:hover .video-play-overlay { opacity: 1; }
.play-btn-overlay { width: 54px; height: 54px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; padding-left: 3px; }
.vcard-body { padding: 0.875rem 1rem; display: flex; align-items: center; gap: 0.75rem; }
.vcard-tag { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: rgba(38,149,124,0.1); border: 1px solid rgba(38,149,124,0.2); color: var(--primary); white-space: nowrap; flex-shrink: 0; }
.vcard-tag--teal { background: rgba(128,175,168,0.1); border-color: rgba(128,175,168,0.2); color: var(--primary-light); }
.vcard-title { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.75); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-banner { margin-top: 3.5rem; text-align: center; padding: 2.5rem 1.5rem; background: linear-gradient(145deg,#161616,#101010); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.yt-banner h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.yt-banner p { color: rgba(255,255,255,0.5); margin-bottom: 1.25rem; font-size: 0.9rem; }
/* Lightbox */
.vlb { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.vlb.open { display: flex; }
.vlb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.82); backdrop-filter: blur(4px); }
.vlb-dialog { position: relative; width: min(960px, 100%); }
.vlb-frame { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.vlb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlb-caption { margin-top: 0.85rem; color: rgba(255,255,255,0.7); font-size: 0.9rem; text-align: center; }
.vlb-close { position: absolute; top: -2.7rem; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: var(--transition); }
.vlb-close:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 768px) {
  .product-hero { padding: calc(72px + 2.5rem) 0 1.5rem; }
  .video-grid { grid-template-columns: 1fr; }
  .vcard-featured { grid-template-columns: 1fr; }
  .vlb-close { top: 0.5rem; right: 0.5rem; background: rgba(0,0,0,0.6); }
}