/* ==========================================
   ULTRAKIT INTERACTIVE CARDS — Premium
   6 Hover Effects × 4 Skins
   ========================================== */

.ultrakit-icc-wrapper { --ultrakit-icc-accent: #6c5ce7; width: 100%; }
.ultrakit-icc-empty { text-align: center; color: #aaa; padding: 30px; }

.ultrakit-icc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.ultrakit-icc-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,0.07);
    transition: all 0.35s ease;
}

.ultrakit-icc-media { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #f0f0f0; }
.ultrakit-icc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }

.ultrakit-icc-overlay {
    position: absolute; inset: 0;
    background: rgba(20,20,30,0.8);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 20px; text-align: center; box-sizing: border-box;
    opacity: 0; transition: opacity 0.35s ease;
}
.ultrakit-icc-icon { font-size: 26px; color: #ffffff; }
.ultrakit-icc-desc { font-size: 13.5px; color: #eeeeee; margin: 0; line-height: 1.6; }
.ultrakit-icc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ultrakit-icc-accent); color: #ffffff !important;
    padding: 8px 18px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
    text-decoration: none; margin-top: 4px;
}

.ultrakit-icc-body { padding: 20px 22px; }
.ultrakit-icc-title { font-size: 17px; font-weight: 800; color: #1a1a2e; margin: 0; }

/* ---- Effect: Zoom + Dark Overlay ---- */
.ultrakit-icc-effect-zoom-overlay .ultrakit-icc-card:hover .ultrakit-icc-overlay { opacity: 1; }
.ultrakit-icc-effect-zoom-overlay .ultrakit-icc-card:hover img { transform: scale(1.1); }

/* ---- Effect: Lift + Shadow ---- */
.ultrakit-icc-effect-lift .ultrakit-icc-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

/* ---- Effect: Border Draw ---- */
.ultrakit-icc-effect-border-draw .ultrakit-icc-card { border: 2px solid transparent; }
.ultrakit-icc-effect-border-draw .ultrakit-icc-card:hover { border-color: var(--ultrakit-icc-accent); box-shadow: 0 10px 30px rgba(108,92,231,0.2); }

/* ---- Effect: Slide Content Up ---- */
.ultrakit-icc-effect-slide-up .ultrakit-icc-overlay { justify-content: flex-end; opacity: 1; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 60%); }
.ultrakit-icc-effect-slide-up .ultrakit-icc-icon,
.ultrakit-icc-effect-slide-up .ultrakit-icc-desc,
.ultrakit-icc-effect-slide-up .ultrakit-icc-btn { transform: translateY(20px); opacity: 0; transition: all 0.35s ease; }
.ultrakit-icc-effect-slide-up .ultrakit-icc-card:hover .ultrakit-icc-icon,
.ultrakit-icc-effect-slide-up .ultrakit-icc-card:hover .ultrakit-icc-desc,
.ultrakit-icc-effect-slide-up .ultrakit-icc-card:hover .ultrakit-icc-btn { transform: translateY(0); opacity: 1; }

/* ---- Effect: 3D Mouse Tilt (JS-driven transform) ---- */
.ultrakit-icc-effect-tilt-3d .ultrakit-icc-card { transition: transform 0.1s ease-out, box-shadow 0.3s ease; will-change: transform; }
.ultrakit-icc-effect-tilt-3d .ultrakit-icc-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.18); }
.ultrakit-icc-effect-tilt-3d .ultrakit-icc-card:hover .ultrakit-icc-overlay { opacity: 1; }

/* ---- Effect: 3D Flip ---- */
.ultrakit-icc-effect-flip .ultrakit-icc-card { background: none; box-shadow: none; overflow: visible; perspective: 1200px; }
.ultrakit-icc-flip-inner {
    position: relative; width: 100%; aspect-ratio: 4/3;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.ultrakit-icc-card:hover .ultrakit-icc-flip-inner { transform: rotateY(180deg); }
.ultrakit-icc-flip-front, .ultrakit-icc-flip-back {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,0.07);
}
.ultrakit-icc-flip-front { background: #ffffff; }
.ultrakit-icc-flip-front img { width: 100%; height: 70%; object-fit: cover; display: block; }
.ultrakit-icc-flip-front .ultrakit-icc-title { padding: 14px 18px 0; }
.ultrakit-icc-flip-back {
    background: var(--ultrakit-icc-accent);
    color: #ffffff;
    transform: rotateY(180deg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px; gap: 10px;
}
.ultrakit-icc-flip-back .ultrakit-icc-title { color: #ffffff; }
.ultrakit-icc-flip-back .ultrakit-icc-desc { color: rgba(255,255,255,0.9); }
.ultrakit-icc-flip-back .ultrakit-icc-btn { background: #ffffff; color: var(--ultrakit-icc-accent) !important; }

/* ---- Skins ---- */
.icc-skin-2 .ultrakit-icc-card, .icc-skin-2 .ultrakit-icc-flip-front { background: #1a1a2e; }
.icc-skin-2 .ultrakit-icc-title { color: #ffffff; }

.icc-skin-3 .ultrakit-icc-card, .icc-skin-3 .ultrakit-icc-flip-front { box-shadow: none; border: 1.5px solid #ececf2; }

.icc-skin-4 .ultrakit-icc-body { background: linear-gradient(135deg, rgba(108,92,231,0.06) 0%, rgba(255,255,255,0) 100%); }

@media (max-width: 768px) {
    .ultrakit-icc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ultrakit-icc-grid { grid-template-columns: 1fr; }
}