/* ============================================================
   Vopace Image Placeholder System
   Replaces empty webp images with styled category placeholders
   ============================================================ */

/* Shared base for all placeholders */
.img-ph-wire-strippers,
.img-ph-multimeter,
.img-ph-voltage-tester,
.img-ph-mc4-crimping,
.img-ph-pv-cable,
.img-ph-mounting-rails,
.img-ph-solar-install,
.img-ph-electrical-testing,
.img-ph-solar-cable-tools,
.img-ph-prime-day {
  display: block;
  width: 100%;
  min-height: 180px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  animation: imgPulse 4s ease-in-out infinite;
  background-size: 200% 200%;
}

/* Within ranked cards, match image sizing */
.ranked-card .img-ph-wire-strippers,
.ranked-card .img-ph-multimeter,
.ranked-card .img-ph-voltage-tester,
.ranked-card .img-ph-mc4-crimping,
.ranked-card .img-ph-pv-cable,
.ranked-card .img-ph-mounting-rails,
.ranked-card .img-ph-solar-install,
.ranked-card .img-ph-electrical-testing,
.ranked-card .img-ph-solar-cable-tools,
.ranked-card .img-ph-prime-day {
  height: clamp(180px, 24vw, 260px);
}

/* Hero image sizing */
.article-hero-image .img-ph-wire-strippers,
.article-hero-image .img-ph-multimeter,
.article-hero-image .img-ph-voltage-tester,
.article-hero-image .img-ph-mc4-crimping,
.article-hero-image .img-ph-pv-cable,
.article-hero-image .img-ph-mounting-rails,
.article-hero-image .img-ph-solar-install,
.article-hero-image .img-ph-electrical-testing,
.article-hero-image .img-ph-solar-cable-tools,
.article-hero-image .img-ph-prime-day {
  aspect-ratio: 70 / 41;
  min-height: 260px;
}

/* Responsive hero */
@media (max-width: 768px) {
  .article-hero-image .img-ph-wire-strippers,
  .article-hero-image .img-ph-multimeter,
  .article-hero-image .img-ph-voltage-tester,
  .article-hero-image .img-ph-mc4-crimping,
  .article-hero-image .img-ph-pv-cable,
  .article-hero-image .img-ph-mounting-rails,
  .article-hero-image .img-ph-solar-install,
  .article-hero-image .img-ph-electrical-testing,
  .article-hero-image .img-ph-solar-cable-tools,
  .article-hero-image .img-ph-prime-day {
    aspect-ratio: 4 / 3;
  }
}

/* ===== Category-specific gradients ===== */
.img-ph-wire-strippers {
  background-image: linear-gradient(135deg, #1e3a4f 0%, #2d6a8a 40%, #1e3a4f 100%);
}
.img-ph-multimeter {
  background-image: linear-gradient(135deg, #2a1e3f 0%, #5a3d7a 40%, #2a1e3f 100%);
}
.img-ph-voltage-tester {
  background-image: linear-gradient(135deg, #3f2a1e 0%, #c8752d 40%, #3f2a1e 100%);
}
.img-ph-mc4-crimping {
  background-image: linear-gradient(135deg, #1e3f2a 0%, #2d8a5a 40%, #1e3f2a 100%);
}
.img-ph-pv-cable {
  background-image: linear-gradient(135deg, #3f1e2e 0%, #8a2d6a 40%, #3f1e2e 100%);
}
.img-ph-mounting-rails {
  background-image: linear-gradient(135deg, #2a2a3f 0%, #5a5a8a 40%, #2a2a3f 100%);
}
.img-ph-solar-install {
  background-image: linear-gradient(135deg, #1e3f3f 0%, #2d8a8a 40%, #1e3f3f 100%);
}
.img-ph-electrical-testing {
  background-image: linear-gradient(135deg, #3f3a1e 0%, #8a7a2d 40%, #3f3a1e 100%);
}
.img-ph-solar-cable-tools {
  background-image: linear-gradient(135deg, #3f251e 0%, #8a4a2d 40%, #3f251e 100%);
}
.img-ph-prime-day {
  background-image: linear-gradient(135deg, #0d1b2a 0%, #1b3a5c 40%, #e8611a 100%);
}

/* ===== SVG icons as ::before ===== */
.img-ph-wire-strippers::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='16' y='22' width='32' height='4' rx='1' fill='rgba(255,255,255,0.18)'/%3E%3Crect x='14' y='30' width='36' height='6' rx='2' fill='rgba(255,255,255,0.12)'/%3E%3Crect x='22' y='40' width='20' height='4' rx='1' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='32' cy='22' r='6' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-multimeter::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='12' y='10' width='40' height='44' rx='4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Crect x='18' y='16' width='28' height='18' rx='2' fill='rgba(255,255,255,0.1)'/%3E%3Ctext x='32' y='30' text-anchor='middle' fill='rgba(255,255,255,0.25)' font-size='10'%3E88.8%3C/text%3E%3Ccircle cx='32' cy='46' r='4' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-voltage-tester::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,6 14,40 28,40 22,58 48,24 34,24 40,6' fill='rgba(255,255,255,0.1)' stroke='rgba(255,255,255,0.2)' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-mc4-crimping::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='14' y='24' width='36' height='16' rx='3' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Ccircle cx='26' cy='32' r='4' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Ccircle cx='38' cy='32' r='4' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Cline x1='14' y1='24' x2='50' y2='24' stroke='rgba(255,255,255,0.12)' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-pv-cable::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 32 Q16 20 32 22 Q48 24 56 32' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='3'/%3E%3Cpath d='M8 38 Q16 28 32 30 Q48 32 56 38' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='26' r='3' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='48' cy='35' r='3' fill='rgba(255,255,255,0.12)'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-mounting-rails::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='24' width='48' height='6' rx='1' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Crect x='8' y='38' width='48' height='6' rx='1' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='2'/%3E%3Cline x1='20' y1='24' x2='20' y2='18' stroke='rgba(255,255,255,0.12)' stroke-width='2'/%3E%3Cline x1='44' y1='24' x2='44' y2='18' stroke='rgba(255,255,255,0.12)' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-solar-install::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='24' width='12' height='24' rx='1' fill='rgba(255,255,255,0.08)' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Crect x='26' y='24' width='12' height='24' rx='1' fill='rgba(255,255,255,0.08)' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Crect x='44' y='24' width='12' height='24' rx='1' fill='rgba(255,255,255,0.08)' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Ccircle cx='32' cy='16' r='6' fill='rgba(255,200,80,0.2)' stroke='rgba(255,200,80,0.3)' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-electrical-testing::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 54 L28 28 L36 36 L54 10' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2.5'/%3E%3Ccircle cx='10' cy='54' r='3' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='28' cy='28' r='3' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='54' cy='10' r='3' fill='rgba(255,255,255,0.2)'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-solar-cable-tools::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='22' cy='32' r='10' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Ccircle cx='42' cy='32' r='10' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Cpath d='M22 22 L42 22' stroke='rgba(255,255,255,0.15)' stroke-width='3'/%3E%3Cpath d='M22 42 L42 42' stroke='rgba(255,255,255,0.15)' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  z-index: 1;
}
.img-ph-prime-day::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,8 38,24 56,24 42,34 48,50 32,40 16,50 22,34 8,24 26,24' fill='rgba(255,200,80,0.18)' stroke='rgba(255,200,80,0.3)' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.8;
  z-index: 1;
}

/* ===== Category label ::after ===== */
.img-ph-wire-strippers::after,
.img-ph-multimeter::after,
.img-ph-voltage-tester::after,
.img-ph-mc4-crimping::after,
.img-ph-pv-cable::after,
.img-ph-mounting-rails::after,
.img-ph-solar-install::after,
.img-ph-electrical-testing::after,
.img-ph-solar-cable-tools::after,
.img-ph-prime-day::after {
  content: attr(data-label);
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}