/* =====================================================================
   Projects – cards, About slider, Portfolio grid (filters, search, load more), zoom popup
   File: projects-modern.css   Prefix: ps-
   ===================================================================== */
.ps-section{ --ps-ink:#0b1b2e; --ps-muted:#5a6a7d; --ps-blue:#256199; --ps-accent:#ffc83d; --ps-line:rgba(11,27,46,.1); }

/* ---------- cards ---------- */
.ps-card{
  display:block; height:100%; padding:8px; background:#fff; border:1px solid var(--ps-line); border-radius:22px;
  cursor:pointer; outline:0; transition:transform .4s ease, border-color .4s ease;
}
.ps-card:hover,.ps-card:focus-visible{ transform:translateY(-6px); border-color:rgba(37,97,153,.4); }
.ps-card:focus-visible{ outline:3px solid var(--ps-accent); outline-offset:3px; }

.ps-media{ position:relative; aspect-ratio:16/11; overflow:hidden; border-radius:16px; background:#e8f0f9; }
.ps-media img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:object-position .8s ease-out; -webkit-user-drag:none; user-select:none;
}
@media (hover:hover) and (pointer:fine){
  .ps-card:hover .ps-media img,.ps-card:focus-visible .ps-media img{
    object-position:bottom center; transition:object-position var(--ps-time,10s) linear;   /* --ps-time set by JS from screenshot height */
  }
}
@media (prefers-reduced-motion:reduce){ .ps-media img,.ps-card:hover .ps-media img{ transition:none; } }

.ps-chip{ position:absolute; left:12px; top:12px; padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1; color:#fff;
  background:rgba(7,17,31,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ps-badge{ position:absolute; right:12px; bottom:12px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--ps-accent); color:var(--ps-ink); opacity:0; transform:scale(.8); transition:.3s ease; pointer-events:none; }
.ps-card:hover .ps-badge,.ps-card:focus-visible .ps-badge{ opacity:1; transform:scale(1); }
.ps-badge svg,.ps-arrow svg,.ps-btn svg,.ps-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.ps-info{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 10px 8px; }
.ps-title{ margin:0 0 3px; font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.3; color:var(--ps-ink); }
.ps-cat{ display:block; font-size:13px; line-height:1.5; color:var(--ps-muted); }
.ps-arrow{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#256199,#1f7bff); transition:.35s ease; }
.ps-card:hover .ps-arrow{ background:var(--ps-accent); color:var(--ps-ink); transform:rotate(45deg); }

/* ---------- About: slider ---------- */
.ps-swiper{ overflow:hidden; padding:8px 0 6px; }
.ps-section .swiper-wrapper{ display:flex !important; flex-wrap:nowrap !important; gap:0 !important; }       /* keep Swiper's maths intact */
.ps-section .swiper-slide{ display:block !important; flex-shrink:0 !important; float:none !important; margin-left:0 !important; padding:0 !important; height:auto; }
.ps-ui{ display:flex; align-items:center; gap:28px; margin-top:34px; }
.ps-ui .ps-progress{ position:relative !important; flex:1; top:auto !important; left:auto !important; width:auto !important; height:4px !important; border-radius:4px; background:rgba(11,27,46,.12); overflow:hidden; }
.ps-ui .swiper-pagination-progressbar-fill{ background:linear-gradient(100deg,#256199,#8a4dff) !important; border-radius:4px; }
.ps-nav{ display:flex; gap:10px; }
.ps-nav button{ width:50px; height:50px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--ps-ink); background:#fff; border:1.5px solid rgba(11,27,46,.16); transition:.3s ease; }
.ps-nav button:hover:not(.swiper-button-disabled){ background:var(--ps-accent); border-color:var(--ps-accent); }
.ps-nav button.swiper-button-disabled{ opacity:.35; cursor:default; }

/* ---------- Portfolio: toolbar (filters + search), grid, load more ---------- */
.ps-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; margin-bottom:18px; }
.ps-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 20px }
.ps-filter{ padding:11px 20px; border-radius:999px; border:1.5px solid rgba(11,27,46,.14); background:#fff; font:inherit; font-size:14px; font-weight:600; line-height:1; color:var(--ps-ink); cursor:pointer; transition:.3s ease; }
.ps-filter small{ margin-left:7px; font-size:11.5px; font-weight:600; opacity:.55; }
.ps-filter:hover{ border-color:var(--ps-blue); color:var(--ps-blue); }
.ps-filter.is-active{ background:var(--ps-ink); border-color:var(--ps-ink); color:#fff; }
.ps-search{ position:relative; display:block; flex:0 1 300px; min-width:220px; margin:0; }
.ps-search svg{ position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; fill:none; stroke:#8a99ab; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.ps-search input{ width:100%; height:46px; padding:0 18px 0 44px; border:1.5px solid rgba(11,27,46,.14); border-radius:999px; background:#fff; font:inherit; font-size:14.5px; color:var(--ps-ink); outline:0; box-shadow:none; transition:border-color .25s, box-shadow .25s; }
.ps-search input::placeholder{ color:#8a99ab; }
.ps-search input:focus{ border-color:var(--ps-blue); box-shadow:0 0 0 4px rgba(37,97,153,.13); }
.ps-countline{ margin:0 0 26px; font-size:14px; color:var(--ps-muted); }
.ps-countline b{ color:var(--ps-ink); }

.ps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ps-item.is-hidden,.ps-item.is-more{ display:none; }
.ps-item.ps-anim{ animation:psIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes psIn{ from{ opacity:0; transform:translateY(18px); } }
@media (max-width:991.98px){ .ps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px){ .ps-grid{ grid-template-columns:1fr; gap:18px; } .ps-search{ flex-basis:100%; } }

.ps-empty{ padding:60px 20px; text-align:center; border:1.5px dashed rgba(11,27,46,.18); border-radius:22px; color:var(--ps-muted); }
.ps-empty[hidden]{ display:none; }
.ps-empty strong{ display:block; margin-bottom:6px; font-size:18px; color:var(--ps-ink); }
.ps-empty button{ margin-top:16px; padding:11px 22px; border-radius:999px; border:1.5px solid var(--ps-ink); background:transparent; font:inherit; font-size:14px; font-weight:600; color:var(--ps-ink); cursor:pointer; transition:.3s; }
.ps-empty button:hover{ background:var(--ps-ink); color:#fff; }

.ps-more{ display:flex; justify-content:center; margin-top:44px; }
.ps-more[hidden]{ display:none; }
.ps-more-btn{ display:inline-flex; align-items:center; gap:12px; padding:17px 32px; border-radius:999px; border:1.5px solid var(--ps-ink); background:transparent; font:inherit; font-size:15.5px; font-weight:600; line-height:1; color:var(--ps-ink); cursor:pointer; transition:.3s ease; }
.ps-more-btn span{ font-weight:500; opacity:.6; }
.ps-more-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease; }
.ps-more-btn:hover{ background:var(--ps-ink); color:#fff; transform:translateY(-3px); }
.ps-more-btn:hover svg{ transform:translateY(3px); }

/* ---------- Zoom popup ---------- */
.ps-modal .modal-content{ background:#0b1d2e; border:0; border-radius:0; }
.ps-modal-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 20px; background:#0f2f4f; color:#fff; }
.ps-modal-title{ margin:0; font-size:16px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ps-tools{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ps-btn{ min-width:38px; height:38px; padding:0 10px; border:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:600; transition:.2s; }
.ps-btn:hover:not(:disabled){ background:#ffc83d; color:#0f2f4f; }
.ps-btn:disabled{ opacity:.35; cursor:not-allowed; }
.ps-zoom-level,.ps-count{ min-width:48px; text-align:center; font-size:13px; font-weight:600; }
.ps-sep{ width:1px; height:22px; background:rgba(255,255,255,.2); margin:0 4px; }
.ps-viewer{ position:relative; flex:1 1 auto; min-height:0; overflow:auto; cursor:grab; touch-action:pan-x pan-y; overscroll-behavior:contain; }
.ps-viewer.is-dragging{ cursor:grabbing; user-select:none; }
.ps-viewer img{ display:block; margin:0 auto; max-width:none; height:auto; user-select:none; -webkit-user-drag:none; background:#fff; }
.ps-loader{ position:absolute; top:50%; left:50%; margin:-16px 0 0 -16px; }
@media (max-width:575.98px){
  .ps-modal-title,.ps-sep{ display:none; }
  .ps-modal-bar{ padding:8px 10px; justify-content:center; }
  .ps-btn{ min-width:34px; height:34px; }
}

/* ---------- Performance and full portfolio grid ---------- */
.ps-section .ps-grid {
  contain: layout style;
}
.ps-section .ps-grid .ps-item {
  min-width: 0;
  opacity: 1;
  transform: none;
  animation: none !important;
  transition: none;
}
.ps-section .ps-grid .ps-item.is-hidden,
.ps-section .ps-grid .ps-item.is-more {
  display: none;
}
/* Keep the screenshot preview smooth without triggering a layout-heavy transition. */
.ps-section .ps-card {
  transition: border-color .2s ease;
}
.ps-section .ps-media img {
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .ps-section .ps-media img,
  .ps-section .ps-card,
  .ps-section .ps-card:hover {
    transition: none !important;
    animation: none !important;
  }
}