/* ===== BLUEPRINT CAROUSEL ===== */
/* Reusable slide carousel for Prevention Blueprint graphics */
/* Add this CSS to any page, then use blueprint-carousel.js */

.blueprint-section{
  padding:60px 40px;
  background:linear-gradient(180deg,#f5f8fc 0%,#edf2fa 100%);
}
.blueprint-section .section-pill{
  display:inline-block;background:var(--soft-1,#EDF2FA);color:var(--blue,#3E67B1);
  padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;
}
.blueprint-section h2{
  font-size:28px;font-weight:bold;color:var(--dark,#1F2937);margin-bottom:8px;
}
.blueprint-section .blueprint-subtitle{
  font-size:15px;color:var(--gray,#6B7280);margin-bottom:32px;max-width:600px;margin:0 auto 32px;
}
.blueprint-section .bp-header{
  text-align:center;margin-bottom:32px;
}
.blueprint-carousel{
  position:relative;
  max-width:800px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,0.08),0 12px 40px rgba(62,103,177,0.1);
  background:#fff;
}
.bp-track{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#1F2937;
}
.bp-slide{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  opacity:0;
  transition:opacity 0.5s ease;
}
.bp-slide.active{
  opacity:1;
}
.bp-slide img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  background:#1F2937;
}
.bp-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,#033794,#3E67B1);
  color:#fff;
  font-family:Arial,sans-serif;
}
.bp-placeholder-name{
  font-size:18px;font-weight:bold;margin-bottom:6px;opacity:0.9;
}
.bp-placeholder-sub{
  font-size:13px;opacity:0.6;
}

/* Navigation arrows */
.bp-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.9);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--dark,#1F2937);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  transition:all 0.2s;
  z-index:10;
}
.bp-arrow:hover{
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transform:translateY(-50%) scale(1.08);
}
.bp-arrow-prev{left:12px;}
.bp-arrow-next{right:12px;}

/* Dots */
.bp-dots{
  display:flex;justify-content:center;gap:8px;
  padding:16px 0;background:#fff;
}
.bp-dot{
  width:10px;height:10px;border-radius:50%;
  background:#D1D5DB;border:none;cursor:pointer;
  transition:all 0.2s;padding:0;
}
.bp-dot.active{
  background:var(--blue,#3E67B1);
  width:28px;border-radius:5px;
}

/* Slide counter */
.bp-counter{
  position:absolute;bottom:12px;right:12px;
  background:rgba(0,0,0,0.5);color:#fff;
  padding:4px 10px;border-radius:12px;
  font-size:12px;font-weight:600;
  z-index:10;
}

/* Mobile responsive */
@media(max-width:768px){
  .blueprint-section{padding:40px 20px;}
  .blueprint-section h2{font-size:22px;}
  .blueprint-carousel{max-width:100%;border-radius:12px;}
  .bp-arrow{width:32px;height:32px;font-size:14px;}
  .bp-arrow-prev{left:8px;}
  .bp-arrow-next{right:8px;}
}