/* ECPD CTA Box 1.0.0 - Safe & Clean */
.ecpd-cta-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
}
.ecpd-cta-box:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }

/* Thumb */
.ecpd-cta-thumb { position: relative; overflow: hidden; line-height: 0; background: #f3f4f6; }
.ecpd-cta-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: all .6s cubic-bezier(.2,.8,.2,1); }

/* Ratios */
.ecpd-ratio-1-1 .ecpd-cta-thumb { aspect-ratio: 1/1; }
.ecpd-ratio-4-3 .ecpd-cta-thumb { aspect-ratio: 4/3; }
.ecpd-ratio-3-4 .ecpd-cta-thumb { aspect-ratio: 3/4; }
.ecpd-ratio-16-9 .ecpd-cta-thumb { aspect-ratio: 16/9; }
.ecpd-ratio-21-9 .ecpd-cta-thumb { aspect-ratio: 21/9; }
.ecpd-ratio-2-3 .ecpd-cta-thumb { aspect-ratio: 2/3; }
.ecpd-ratio-auto .ecpd-cta-thumb { aspect-ratio: auto; }
.ecpd-ratio-auto .ecpd-cta-thumb img { height: auto; }

/* Overlay base */
.ecpd-cta-overlay { position: absolute; inset: 0; opacity: 0; transition: all .4s ease; pointer-events: none; }

/* Hover Effects */
.ecpd-hover-none .ecpd-cta-thumb img { transform: none !important; }

.ecpd-hover-zoom-in:hover .ecpd-cta-thumb img { transform: scale(1.08); }
.ecpd-hover-zoom-out .ecpd-cta-thumb img { transform: scale(1.08); }
.ecpd-hover-zoom-out:hover .ecpd-cta-thumb img { transform: scale(1); }

.ecpd-hover-grayscale .ecpd-cta-thumb img { filter: grayscale(100%); }
.ecpd-hover-grayscale:hover .ecpd-cta-thumb img { filter: grayscale(0%); }

.ecpd-hover-blur .ecpd-cta-thumb img { filter: blur(0); }
.ecpd-hover-blur:hover .ecpd-cta-thumb img { filter: blur(0); }
.ecpd-hover-blur .ecpd-cta-thumb img { transition: filter .4s ease, transform .6s ease; }
.ecpd-hover-blur:hover .ecpd-cta-thumb img { filter: blur(2px); transform: scale(1.05); }

.ecpd-hover-overlay-color .ecpd-cta-overlay { background: rgba(37,99,235,0.7); opacity: 0; }
.ecpd-hover-overlay-color:hover .ecpd-cta-overlay { opacity: 1; }

.ecpd-hover-slide-up .ecpd-cta-overlay { background: linear-gradient(transparent, rgba(0,0,0,0.7)); opacity: 0; transform: translateY(20%); }
.ecpd-hover-slide-up:hover .ecpd-cta-overlay { opacity: 1; transform: translateY(0); }

/* Shine effect */
.ecpd-cta-shine { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.ecpd-hover-shine:hover .ecpd-cta-shine { left: 130%; }

/* Content */
.ecpd-cta-content { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.ecpd-cta-title { margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 1.3; color: #111827; }
.ecpd-cta-desc { font-size: 15px; line-height: 1.7; color: #4b5563; margin-bottom: 18px; }
.ecpd-cta-desc p { margin: 0 0 8px; }
.ecpd-cta-desc p:last-child { margin-bottom: 0; }
.ecpd-cta-desc a { color: #2563eb; text-decoration: underline; }
.ecpd-cta-desc strong { color: #111827; }

/* Button */
.ecpd-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #111827; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .25s ease; align-self: flex-start; border: 1px solid #111827; }
.ecpd-cta-btn:hover { background: #000; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); color: #fff; }
.ecpd-cta-content[style*="text-align: center"] .ecpd-cta-btn { align-self: center; }
.ecpd-cta-content[style*="text-align: left"] .ecpd-cta-btn { align-self: flex-end; }
.ecpd-btn-icon { display: inline-flex; line-height: 1; }

/* Responsive */
@media(max-width:767px){
  .ecpd-cta-content { padding: 18px; }
  .ecpd-cta-title { font-size: 20px; }
}