/* =====================================================================
   Vega Homes – Projects page (ongoing / completed / 3D) + photo viewer
   ===================================================================== */
.vp { --vp-navy: #00294a; --vp-navy-3: #001a30; --vp-gold: #c9a24b; --vp-gold-2: #ecd08a; }
.vp .our-Project-nav sup { font-size: 11px; font-weight: 700; margin-left: 2px; opacity: .7; }
.vp-empty { padding: 70px 0; text-align: center; font-size: 17px; color: #6a7889; }

.vp-item { cursor: pointer; outline: none; }
.vp-item .project-image { position: relative; overflow: hidden; border-radius: 20px; }
.vp-item .project-featured-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.vp-item:hover .project-featured-image img { transform: scale(1.06); }
.vp-item:focus-visible .project-image { box-shadow: 0 0 0 3px rgba(201, 162, 75, .8); }
.vp-noimg { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; font-size: 40px; color: #9bb0c5; background: #eaf0f6; }

.vp-badge {
    display: inline-block; padding: 6px 14px; border-radius: 30px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff;
    background: var(--vp-navy); border: 1px solid rgba(255, 255, 255, .25);
}
.vp-item .vp-badge { position: absolute; left: 16px; top: 16px; z-index: 3; backdrop-filter: blur(4px); }
.vp-badge--ongoing { color: #001a30; background: linear-gradient(90deg, var(--vp-gold-2), var(--vp-gold)); border-color: transparent; }
.vp-badge--completed { background: #1b8a4b; }
.vp-badge--design { background: #4a3fa8; }
.vp-count { position: absolute; right: 14px; bottom: 14px; z-index: 3; padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 26, 48, .72); backdrop-filter: blur(4px); }
.vp-count i { margin-right: 5px; color: var(--vp-gold-2); }
.vp-meta { margin: 6px 0 0; font-size: 14px; color: #6a7889; }
.vp-meta i { margin-right: 6px; color: var(--vp-gold); }
.vp-progress { margin-top: 14px; }
.vp-progress > div { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: #4b5d70; }
.vp-progress i { display: block; height: 8px; border-radius: 8px; background: #e6ebf1; overflow: hidden; }
.vp-progress u { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--vp-gold), var(--vp-gold-2)); }

/* ---------- Photo viewer ---------- */
html.vp-lock, html.vp-lock body { overflow: hidden !important; }
.vp-lb { position: fixed; inset: 0; z-index: 2000000000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vp-lb[hidden] { display: none; }
.vp-lb, .vp-lb * { box-sizing: border-box; }
.vp-lb button { cursor: pointer; }
.vp-lb__backdrop { position: absolute; inset: 0; background: rgba(0, 12, 22, .9); backdrop-filter: blur(8px); }
.vp-lb__dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1180px; max-height: calc(100vh - 40px); color: #fff; }
.vp-lb__close { position: absolute; right: 0; top: -2px; z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 18px; color: #fff; background: rgba(255, 255, 255, .14); transition: .25s; }
.vp-lb__close:hover { background: #fff; color: #00294a; transform: rotate(90deg); }
.vp-lb__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 52px; }
.vp-lb__stage img { max-width: 100%; max-height: calc(100vh - 330px); min-height: 160px; object-fit: contain; border-radius: 14px; background: #001a30; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.vp-lb__nav { position: absolute; top: 50%; z-index: 4; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; font-size: 18px; color: #fff; background: rgba(0, 26, 48, .7); backdrop-filter: blur(4px); transition: .2s; }
.vp-lb__nav:hover { background: #c9a24b; color: #001a30; }
.vp-lb__nav--prev { left: 14px; }
.vp-lb__nav--next { right: 14px; }
.vp-lb__counter { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700; background: rgba(0, 26, 48, .75); }
.vp-lb__info { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 18px 4px 6px; }
.vp-lb__info h3 { margin: 8px 0 2px; font-size: 22px; font-weight: 700; color: #fff; }
.vp-lb__info .vp-badge { position: static; }
.vp-lb__meta { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .7); }
.vp-lb__desc { max-width: 520px; max-height: 84px; overflow-y: auto; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.vp-lb__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; scrollbar-width: thin; }
.vp-lb__thumbs button { flex: 0 0 auto; width: 78px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; opacity: .55; background: #001a30; transition: .2s; }
.vp-lb__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-lb__thumbs button:hover { opacity: .9; }
.vp-lb__thumbs button.is-active { opacity: 1; border-color: #c9a24b; }

@media (max-width: 767px) {
    .vp-lb { padding: 10px; }
    .vp-lb__stage img { max-height: calc(100vh - 300px); }
    .vp-lb__nav { width: 40px; height: 40px; margin-top: -20px; }
    .vp-lb__info { flex-direction: column; gap: 8px; }
    .vp-lb__thumbs button { width: 62px; height: 44px; }
}