/* Wadewow V1 — Video section styles
   - Video grid (3 col desktop, 2 col tablet, 1 col mobile)
   - Horizontal thumbnail strip (for shop.html above buy button)
   - Lazy-loaded iframes (click-to-play)
   - YouTube / TikTok / Instagram unified card style
*/

:root {
  --video-radius: 14px;
  --video-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --video-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.18);
  --video-play-bg: rgba(232, 112, 76, 0.95);
}

/* ============================================
   Section wrapper (shared)
   ============================================ */
.wd-video-section {
  padding: 64px 0;
  background: var(--bg-soft, #f9fafb);
  border-top: 1px solid var(--line, #e6e8eb);
  border-bottom: 1px solid var(--line, #e6e8eb);
}
.wd-video-section--soft {
  background: var(--bg-elevated, #fff);
}
.wd-video-section__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent, #E8704C);
  margin: 0 0 8px;
  text-align: center;
}
.wd-video-section__title {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink, #1a1a1a);
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  line-height: 1.15;
}
.wd-video-section__sub {
  font-size: 16px;
  color: var(--ink-soft, #4b5563);
  margin: 0 0 36px;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ============================================
   Video grid (3 col)
   ============================================ */
.wd-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .wd-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wd-video-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Video strip (horizontal scroll, shop.html)
   ============================================ */
.wd-video-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .wd-video-strip {
    grid-template-columns: repeat(3, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .wd-video-strip > * {
    scroll-snap-align: start;
  }
}
@media (max-width: 560px) {
  .wd-video-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   Video card (shared)
   ============================================ */
.wd-video-card {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--line, #e6e8eb);
  border-radius: var(--video-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.wd-video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--video-shadow-hover);
}
.wd-video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.wd-video-card__thumb img,
.wd-video-card__thumb .wd-video-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wd-video-card__placeholder {
  background: linear-gradient(135deg, #2a2a2a, #4a4a4a);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  padding: 16px;
  position: relative;
}
.wd-video-card__placeholder::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--video-play-bg);
  z-index: 2;
}
.wd-video-card__placeholder::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 22px;
  width: 0;
  height: 0;
  border-left: 10px solid white;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  z-index: 3;
}
.wd-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--video-play-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 4;
  pointer-events: none;
}
.wd-video-card__play::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 18px solid white;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}
.wd-video-card__thumb:hover .wd-video-card__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #c9593a;
}
.wd-video-card__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 3;
}
.wd-video-card__platform {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 3;
}
.wd-video-card__platform--youtube { background: #c00; }
.wd-video-card__platform--tiktok { background: #000; }
.wd-video-card__platform--instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.wd-video-card__body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wd-video-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wd-video-card__creator {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  margin: 0;
}
.wd-video-card__category {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-soft, #f3f4f6);
  color: var(--ink-soft, #6b7280);
  margin-top: 8px;
}

/* Loading state */
.wd-video-card--loading .wd-video-card__thumb {
  background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
  background-size: 200% 100%;
  animation: wd-skel 1.5s ease-in-out infinite;
}
@keyframes wd-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* View more link */
.wd-video-view-more {
  text-align: center;
  margin-top: 32px;
}
.wd-video-view-more a {
  display: inline-block;
  padding: 12px 28px;
  background: var(--ink, #1a1a1a);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s ease;
}
.wd-video-view-more a:hover {
  background: #000;
}

/* Disclosure (3rd-party content honesty) */
.wd-video-disclosure {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft, #9ca3af);
  margin-top: 24px;
  font-style: italic;
}