@charset "UTF-8";
/**
 * @file
 * Featured video card styles — mobile-first.
 * Figma: Desktop 26:2549, Mobile 26:6302.
 *
 * Mobile: vertical layout (image top + content bottom).
 * Desktop (>=992px): horizontal layout (image ~60% + content ~40%).
 * Content must NEVER be clipped at any viewport width.
 */
/* ==========================================================================
   Mobile base (xs)
   ========================================================================== */
.vel-video-featured {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vel-video-featured__image-wrapper {
  flex-shrink: 0;
  width: 100%;
  height: 250px;
  border-radius: var(--vel-card-radius-mobile);
  overflow: hidden;
  box-shadow: var(--vel-shadow-deep-mobile);
  background: var(--vel-gradient-section);
}

.vel-video-featured__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.vel-video-featured__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.vel-video-featured__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.vel-video-featured__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-sm);
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: var(--vel-primary);
}

.vel-video-featured__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vel-video-featured__title {
  font-family: var(--vel-font-heading);
  font-size: var(--vel-text-2xl);
  font-weight: 700;
  line-height: var(--vel-leading-card-title);
  letter-spacing: 0.37px;
  color: var(--vel-primary);
  margin: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.vel-video-featured__title a {
  color: inherit;
  text-decoration: none;
}

.vel-video-featured__title a:hover {
  text-decoration: underline;
}

.vel-video-featured__excerpt {
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-lg);
  font-weight: 400;
  line-height: var(--vel-leading-card-body);
  letter-spacing: -0.4395px;
  color: var(--vel-primary);
  margin: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   sm (576px)
   ========================================================================== */
@media (min-width: 576px) {
  .vel-video-featured__image-wrapper {
    height: 300px;
  }
}
/* ==========================================================================
   md (768px)
   ========================================================================== */
@media (min-width: 768px) {
  .vel-video-featured__image-wrapper {
    height: 380px;
  }
  .vel-video-featured__title {
    font-size: var(--vel-text-3xl);
    line-height: 36px;
  }
}
/* ==========================================================================
   lg (992px) — Switch to horizontal layout
   ========================================================================== */
@media (min-width: 992px) {
  .vel-video-featured {
    flex-direction: row;
    gap: 32px;
    align-items: center;
  }
  .vel-video-featured__image-wrapper {
    flex: 1 1 55%;
    min-width: 0;
    height: 420px;
    border-radius: 24px;
    box-shadow: var(--vel-shadow-deep);
  }
  .vel-video-featured__content {
    flex: 1 1 40%;
    min-width: 0;
    gap: 24px;
  }
  .vel-video-featured__text {
    gap: 20px;
  }
  .vel-video-featured__title {
    font-size: 28px;
    line-height: 34px;
  }
  .vel-video-featured__excerpt {
    font-size: var(--vel-text-lg);
    line-height: var(--vel-leading-relaxed);
  }
}
/* ==========================================================================
   xl (1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .vel-video-featured {
    gap: 40px;
  }
  .vel-video-featured__image-wrapper {
    height: 460px;
  }
  .vel-video-featured__title {
    font-size: 32px;
    line-height: 38px;
  }
  .vel-video-featured__excerpt {
    font-size: var(--vel-text-xl);
    line-height: var(--vel-leading-body);
  }
}
/* ==========================================================================
   xxl (1600px) — Full Figma spec sizes
   ========================================================================== */
@media (min-width: 1600px) {
  .vel-video-featured {
    gap: 49px;
  }
  .vel-video-featured__image-wrapper {
    height: 500px;
  }
  .vel-video-featured__title {
    font-size: var(--vel-text-3xl-plus);
    line-height: 40px;
  }
}
/*# sourceMappingURL=video-card-featured.css.map */