/* Public Styles - Islam Projects Showcase */
:root{--ips-wa-color:#25D366;--ips-demo-color:#111827;--ips-radius:16px;--ips-transition:.3s ease;--ips-overlay:rgba(0,0,0,.5);--ips-carousel-transition:600ms}
.ips-projects-wrapper{direction:rtl;font-family:inherit}

/* Grid Page - reduce top gap */
.ips-projects-wrapper:not(.ips-single-wrapper){margin-top:-20px}

/* Grid */
.ips-projects-grid{display:grid;gap:24px}

/* Card */
.ips-project-card{position:relative;border-radius:var(--ips-radius);overflow:hidden;cursor:pointer;background:#f0f0f0;aspect-ratio:4/3;display:block;text-decoration:none;color:inherit;outline:none}
.ips-project-card:focus-visible{box-shadow:0 0 0 3px var(--ips-demo-color)}
.ips-card-image-wrap{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--ips-transition)}
.ips-card-no-image{background:linear-gradient(135deg,#1a1a2e,#16213e)!important}
.ips-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 50%,transparent 100%);transition:background var(--ips-transition)}
.ips-card-title-wrap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px}
.ips-card-title{color:#fff;font-size:1.15rem;font-weight:700;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.5);transform:translateY(10px);opacity:.9;transition:all var(--ips-transition)}
.ips-project-card:hover .ips-card-image-wrap,.ips-project-card:focus-visible .ips-card-image-wrap{transform:scale(1.06)}
.ips-project-card:hover .ips-card-title,.ips-project-card:focus-visible .ips-card-title{transform:translateY(0);opacity:1}
.ips-project-card:hover .ips-card-overlay,.ips-project-card:focus-visible .ips-card-overlay{background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 60%,transparent 100%)}

/* Single Project Page - reduce top gap */
.ips-single-wrapper{max-width:90vw;margin-inline:auto;margin-top:-20px;padding:0 16px 32px;display:flex;flex-direction:column;align-items:center}
.ips-single-project{background:#fff;border-radius:var(--ips-radius);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.08);width:100%}
.ips-back-link{display:inline-flex;align-items:center;gap:6px;color:#6b7280;font-size:.95rem;font-weight:500;text-decoration:none;margin-bottom:12px;padding:8px 0;transition:color var(--ips-transition);align-self:flex-start}
.ips-back-link:hover,.ips-back-link:focus-visible{color:var(--ips-demo-color)}

/* Carousel - transparent bg, elegant fade */
.ips-carousel{position:relative;width:100%;height:70vh;background:transparent;overflow:hidden;user-select:none}
.ips-carousel-track{position:relative;width:100%;height:100%}
.ips-carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--ips-carousel-transition) cubic-bezier(.4,0,.2,1),visibility var(--ips-carousel-transition) cubic-bezier(.4,0,.2,1)}
.ips-carousel-slide.ips-slide-active{opacity:1;visibility:visible}
.ips-carousel-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:8px}
.ips-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:none;border-radius:50%;cursor:pointer;z-index:5;transition:all var(--ips-transition);display:flex;align-items:center;justify-content:center;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ips-carousel-arrow:hover,.ips-carousel-arrow:focus-visible{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.15);transform:translateY(-50%) scale(1.05)}
.ips-carousel-arrow.ips-arrow-next{inset-inline-start:12px}
.ips-carousel-arrow.ips-arrow-prev{inset-inline-end:12px}
.ips-carousel-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.ips-carousel-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(0,0,0,.2);cursor:pointer;transition:all var(--ips-transition);padding:0}
.ips-carousel-dot.ips-dot-active{background:var(--ips-demo-color);transform:scale(1.3)}
.ips-carousel-dot:hover:not(.ips-dot-active){background:rgba(0,0,0,.4)}

/* Buttons */
.ips-sp-buttons{display:flex;flex-wrap:wrap;gap:12px;padding:20px 24px 0;justify-content:center}
.ips-sp-buttons-top{padding-top:20px}
.ips-sp-buttons-bottom{padding:0 24px 24px;border-top:1px solid #e5e7eb;margin-top:24px;padding-top:16px}
.ips-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all var(--ips-transition);line-height:1.4}
.ips-btn svg{width:20px;height:20px;flex-shrink:0}
.ips-btn-wa{background:var(--ips-wa-color);color:#fff}
.ips-btn-wa:hover,.ips-btn-wa:focus-visible{filter:brightness(1.1);transform:translateY(-1px)}
.ips-btn-demo{background:var(--ips-demo-color);color:#fff}
.ips-btn-demo:hover,.ips-btn-demo:focus-visible{filter:brightness(1.15);transform:translateY(-1px)}

/* Single project content */
.ips-sp-title{font-size:1.75rem;font-weight:700;margin:0;padding:20px 24px 16px;color:#111827;text-align:center}
.ips-sp-description{padding:0 24px;font-size:1rem;line-height:1.85;color:#374151;margin-bottom:8px;text-align:center}
.ips-sp-description p{margin-bottom:14px}
.ips-sp-description img{max-width:100%;height:auto;border-radius:8px}
.ips-no-project{text-align:center;padding:60px 20px;color:#6b7280;font-size:1.1rem}

/* Responsive */
@media(max-width:768px){
.ips-projects-grid{grid-template-columns:1fr!important;gap:16px}
.ips-carousel{height:50vh}
.ips-btn{padding:10px 18px;font-size:14px}
.ips-sp-title{font-size:1.4rem;padding:16px 16px 12px}
.ips-sp-buttons,.ips-sp-description,.ips-sp-buttons-bottom{padding-inline:16px}
.ips-single-wrapper{padding:0 12px 24px}
.ips-card-title{font-size:1rem}
.ips-carousel-arrow{width:34px;height:34px}
}
@media(min-width:769px) and (max-width:1024px){
.ips-projects-grid[style*="repeat(3"],.ips-projects-grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
}