/* RISTA Projects Page Styles */
:root{
	--bg:#0f141a;
	--panel:#1a222c;
	--panel-2:#0f1b28;
	--text:#e8eef5;
	--muted:#b8c2cf;
	--primary:#ff4d4d;
	--accent:#f7b733;
	--success:#10b981;
	--ring:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
	background: radial-gradient(1200px 600px at 10% 0%, #14202b 0%, var(--bg) 60%);
	color:var(--text);
	line-height:1.6;
}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:0 auto}

.hero{
	background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)), url('../images/civil.jpg') center/cover no-repeat;
	min-height: 48vh;
	display:flex;align-items:center;justify-content:center;
	text-align:center;
	position:relative;
}
.hero__content{padding:3rem 1rem}
.hero h1{margin:0 0 .5rem;font-size: clamp(1.8rem, 3vw, 3rem);letter-spacing:.3px}
.subtitle{color:var(--muted);margin:.25rem 0 1.25rem}
.hero__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:600;border:1px solid transparent;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);transition:left .5s ease}
.btn:hover::before{left:100%}
.btn--primary{background:linear-gradient(135deg, var(--primary), #ff4757);color:#fff;border-color:transparent;box-shadow:0 8px 30px rgba(255,77,77,.25);transform:translateY(0)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,77,77,.4);background:linear-gradient(135deg, #ff4757, var(--primary))}
.btn--primary:active{transform:translateY(0)}
.btn--light{background:transparent;color:var(--text);border-color:var(--ring);backdrop-filter:blur(10px)}
.btn--light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-1px);box-shadow:0 5px 15px rgba(0,0,0,.1)}

.section{padding:3.5rem 0;animation:fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1)}
.section__title{margin:0 0 .5rem;font-size:clamp(1.3rem,2vw,1.8rem);animation:slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1)}
.section__subtitle{color:var(--muted);margin:0 0 2rem;font-size:1.1rem;animation:fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both}

.project-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}
.project-card{animation:fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);animation-fill-mode:both}
.project-card:nth-child(1){animation-delay:0.1s}
.project-card:nth-child(2){animation-delay:0.2s}
.project-card:nth-child(3){animation-delay:0.3s}
.project-card:nth-child(4){animation-delay:0.4s}
.project-card:nth-child(5){animation-delay:0.5s}
.project-card:nth-child(6){animation-delay:0.6s}
@media (max-width: 768px){.project-grid{grid-template-columns:1fr}}

.card{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
	border:1px solid var(--ring);border-radius:16px;overflow:hidden}
.card--elevated{box-shadow:0 10px 40px rgba(0,0,0,.25)}
.card--gradient{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:linear-gradient(135deg, #1b2633 0%, #1a222c 40%, #2a1b1b 100%)}
.card--gradient h2{margin:.25rem 0}
.card--gradient p{color:var(--muted);margin:.25rem 0 0}

.project-card{transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1)}
.project-card:hover{transform:translateY(-6px) rotateX(2deg);box-shadow:0 25px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05)}
.project-card:active{transform:translateY(-2px) rotateX(1deg)}

.project-image{position:relative;height:200px;overflow:hidden}
.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.project-card:hover .project-image img{transform:scale(1.05)}

/* Media Gallery Styles */
.project-media{position:relative;height:200px;overflow:hidden;background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite}
.media-gallery{position:relative;width:100%;height:100%}
.media-item{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .4s cubic-bezier(0.4, 0, 0.2, 1)}
.media-item.active{opacity:1}
.media-item img, .media-item video{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1)}
.project-card:hover .media-item img{transform:scale(1.05)}
.media-item.loaded{background:none;animation:none}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Play Overlay */
.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:5;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3)}
.play-overlay:hover{background:rgba(0,0,0,.9);transform:translate(-50%,-50%) scale(1.1);border-color:var(--primary)}
.play-overlay i{font-size:1.5rem}

/* Media Navigation */
.media-nav{position:absolute;bottom:.75rem;left:.75rem;display:flex;gap:.5rem;z-index:10}
.media-btn{background:rgba(0,0,0,.7);border:none;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}
.media-btn:hover{background:rgba(0,0,0,.9);transform:scale(1.15) rotate(5deg);border-color:rgba(255,255,255,.3);box-shadow:0 5px 15px rgba(0,0,0,.3)}
.media-btn.active{background:linear-gradient(135deg, var(--primary), #ff4757);color:#fff;transform:scale(1.1);box-shadow:0 5px 20px rgba(255,77,77,.4)}
.media-btn:active{transform:scale(1.05)}
.media-btn i{font-size:.9rem;transition:transform .2s ease}
.media-btn:hover i{transform:scale(1.2)}

.project-status{position:absolute;top:.75rem;right:.75rem}
.status-badge{padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.status--active{background:var(--accent);color:#000}
.status--completed{background:var(--success);color:#fff}

.project-content{padding:1.25rem}
.project-content h3{margin:0 0 .5rem;font-size:1.2rem}
.project-location{color:var(--muted);margin:.25rem 0 .75rem;font-size:.9rem}
.project-description{color:var(--text);margin:.5rem 0 1rem;line-height:1.6}
.project-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--ring)}
.project-meta span{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.stat-card{text-align:center;padding:1.5rem;border-radius:12px;background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid var(--ring);transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);animation:fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1)}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.2);border-color:rgba(255,255,255,.1)}
.stat-card:nth-child(1){animation-delay:0.1s}
.stat-card:nth-child(2){animation-delay:0.2s}
.stat-card:nth-child(3){animation-delay:0.3s}
.stat-card:nth-child(4){animation-delay:0.4s}
.stat-icon{font-size:2rem;color:var(--accent);margin:0 auto .5rem;transition:transform .3s ease}
.stat-card:hover .stat-icon{transform:scale(1.1) rotate(5deg)}
.stat-card h3{margin:.25rem 0;font-size:1.8rem;color:#fff;font-weight:700}
.stat-card p{color:var(--muted);margin:0;font-size:.9rem}

.footer{padding:2rem 0;border-top:1px solid var(--ring);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}
.footer__grid{display:grid;gap:1rem;grid-template-columns:2fr 1fr 1fr;align-items:start}
.footer__links{list-style:none;margin:0;padding:0}
.footer__links a{color:var(--muted);text-decoration:none}
.footer__links a:hover{color:#fff}
.footer__contact a{display:block;color:var(--muted);text-decoration:none}
.footer__contact a:hover{color:#fff}
.footer__copy{text-align:center;color:var(--muted);margin:.8rem 0 0;font-size:.85rem}

@media (max-width: 768px){
	.card--gradient{flex-direction:column;text-align:center}
	.footer__grid{grid-template-columns:1fr;text-align:center}
	.project-meta{justify-content:center}
}