/* ============================================================
   CB Steuerberatung – Videos-Seite
   ============================================================ */

.videos-page { position: relative; padding: 90px 0 60px; }
.videos-intro { margin-top: 40px; max-width: 860px; }

.video-grid {
  margin-top: 60px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 34px;
}
.video-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #ececec;
  transition: box-shadow .25s, transform .25s;
}
.video-card:hover { box-shadow: 0 14px 34px rgba(26,42,65,.12); transform: translateY(-3px); }
.video-thumb { position: relative; display: block; overflow: hidden; }
.video-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.video-thumb .dur {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(26,42,65,.9); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 3px;
}
.video-thumb .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(26,42,65,0); transition: background .25s;
}
.video-thumb .play svg {
  width: 54px; height: 54px; fill: #fff; opacity: 0;
  transform: scale(.8); transition: opacity .25s, transform .25s;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.video-card:hover .play { background: rgba(26,42,65,.35); }
.video-card:hover .play svg { opacity: 1; transform: scale(1); }

.video-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.video-body h3 { font-size: 18px; line-height: 1.35; color: var(--navy); font-weight: 700; margin-bottom: 12px; }
.video-body h3 a { color: inherit; }
.video-body p { font-size: 15px; line-height: 1.6; color: var(--text); flex: 1; }
.video-body .video-link {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--navy);
}
.video-body .video-link svg { width: 15px; height: 15px; fill: var(--navy); transition: transform .25s; }
.video-card:hover .video-link svg { transform: translateX(4px); }

.channel-cta { margin-top: 70px; text-align: center; }
.channel-cta .btn-primary { display: inline-flex; align-items: center; gap: 12px; }
.channel-cta .btn-primary svg { width: 20px; height: 20px; fill: #fff; }

@media (max-width: 992px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .video-grid { grid-template-columns: 1fr; }
  .videos-page { padding-top: 60px; }
}