/* =====================================================================
   DMT Mate — Projects portfolio
   Grid, before/after comparison slider and mixed-media gallery.
   ===================================================================== */

/* ---------- Shared bits ---------- */
.pf-note{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:2.5rem 1.5rem;text-align:center}
.pf-note h2{font-size:var(--step-1);margin:0 0 .4rem}
.pf-note p{color:var(--slate);margin:0}
.text-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--royal);font-weight:600;font-size:.88rem}
.text-link:hover{color:var(--signal-700,#3f7a12)}
.text-link svg{width:1em;height:1em;transition:transform .18s ease}
.text-link:hover svg{transform:translateX(3px)}

/* ---------- Filter bar ---------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;align-items:center}
.pf-filters__label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin-right:.3rem}
.pf-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--slate);font-size:.86rem;font-weight:500;
  transition:all .18s var(--ease,ease)}
.pf-chip:hover{border-color:var(--royal);color:var(--royal)}
.pf-chip.is-on{background:var(--royal);border-color:var(--royal);color:#fff}
.pf-chip__n{font-size:.72rem;opacity:.7}

/* ---------- Project grid ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.pf-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.pf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pf-card__body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.pf-card__body h3{font-size:var(--step-1);margin:0;color:var(--ink);line-height:1.28}
.pf-card__body h3 a{color:inherit}
.pf-card__body h3 a:hover{color:var(--royal)}
.pf-card__summary{color:var(--slate);font-size:.93rem;line-height:1.65;margin:0}
.pf-card__foot{margin-top:auto;padding-top:.4rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}

.pf-status{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .8rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.pf-status::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.pf-status--completed{background:var(--signal-50,#eef8e4);color:var(--signal-700,#3f7a12)}
.pf-status--ongoing{background:#fff4e0;color:#9a5f00}
.pf-status--upcoming{background:#eef2ff;color:var(--royal)}

.pf-meta{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .9rem;margin:0;padding:0;list-style:none}
.pf-meta li{font-size:.82rem;color:var(--slate);line-height:1.45}
.pf-meta strong{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);font-weight:700;margin-bottom:.05rem}

/* ---------- Before / after comparison ---------- */
.ba{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--mist,#eef1f6);
  user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

/* The "after" layer sits underneath and fills the frame.
   The "before" layer is clipped from the left up to the handle position. */
.ba__after{z-index:1}
.ba__before{z-index:2;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}

.ba__tag{position:absolute;bottom:.75rem;z-index:4;padding:.3rem .75rem;border-radius:999px;
  background:rgba(6,14,36,.72);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;backdrop-filter:blur(4px);pointer-events:none;transition:opacity .2s ease}
.ba__tag--before{left:.75rem}
.ba__tag--after{right:.75rem}

/* Slid fully to one end — show only the label that still applies, promoted
   to the centre so it reads as "this is the full before / after". */
.ba__tag{transition:opacity .25s ease,transform .25s ease,left .25s ease,right .25s ease,
  background .25s ease,padding .25s ease}
.ba.is-after-only  .ba__tag.ba__tag--before{opacity:0;transform:translateY(6px);pointer-events:none}
.ba.is-before-only .ba__tag.ba__tag--after {opacity:0;transform:translateY(6px);pointer-events:none}
.ba.is-after-only  .ba__tag.ba__tag--after,
.ba.is-before-only .ba__tag.ba__tag--before{left:50%;right:auto;transform:translateX(-50%) scale(1.06);
  padding:.4rem 1.1rem;background:var(--signal);color:var(--ink);
  box-shadow:0 8px 22px rgba(101,191,5,.32)}
.ba.is-after-only.is-dragging  .ba__tag--after,
.ba.is-before-only.is-dragging .ba__tag--before{opacity:1}
/* The divider line has nothing left to divide at the extremes. */
.ba.is-after-only .ba__line,.ba.is-before-only .ba__line{opacity:0}

.ba__line{position:absolute;top:0;bottom:0;z-index:3;width:2px;margin-left:-1px;transition:opacity .25s ease;
  left:var(--pos,50%);background:#fff;box-shadow:0 0 0 1px rgba(6,14,36,.18);pointer-events:none}
.ba__handle{position:absolute;top:50%;left:var(--pos,50%);z-index:5;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;border:0;cursor:ew-resize;
  display:grid;place-items:center;color:var(--royal);
  box-shadow:0 6px 20px rgba(6,14,36,.28);transition:transform .15s ease}
.ba__handle:hover{transform:translate(-50%,-50%) scale(1.08)}
.ba__handle:active{cursor:grabbing}
.ba__handle:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.ba__handle svg{width:20px;height:20px;pointer-events:none}
.ba.is-dragging .ba__handle{transform:translate(-50%,-50%) scale(1.08)}
.ba.is-dragging .ba__tag{opacity:.35}

.ba__hint{position:absolute;top:.75rem;left:50%;transform:translateX(-50%);z-index:4;
  padding:.3rem .8rem;border-radius:999px;background:rgba(6,14,36,.72);color:#fff;font-size:.72rem;
  pointer-events:none;transition:opacity .35s ease}
.ba.is-touched .ba__hint{opacity:0}

/* Single-image fallback when only one of the two is set */
.pf-single{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--mist,#eef1f6)}
.pf-single img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Detail page ---------- */
.pd-top{display:grid;grid-template-columns:1.35fr .65fr;gap:2.4rem;align-items:start;margin-bottom:3rem}
.pd-lead{font-size:var(--step-1);color:var(--slate);line-height:1.72;margin:0 0 1.2rem}
.pd-scope{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:var(--radius);padding:1.2rem 1.4rem;margin:0 0 1.2rem}
.pd-scope h2{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);margin:0 0 .4rem}
.pd-scope p{margin:0;color:var(--graphite);line-height:1.7}
.pd-body{color:var(--slate);line-height:1.75}
.pd-body p{margin:0 0 1rem}

.pd-facts{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;
  position:sticky;top:5.5rem}
.pd-facts dl{margin:0;display:grid;gap:.95rem}
.pd-facts dt{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);font-weight:700}
.pd-facts dd{margin:.15rem 0 0;color:var(--ink);font-weight:500;font-size:.94rem;line-height:1.4}
.pd-facts dd a{color:var(--royal)}
.pd-facts dd a:hover{text-decoration:underline}
.pd-facts .btn{width:100%;justify-content:center;margin-top:1.2rem}

.pd-section-head{margin-bottom:1.2rem}
.pd-section-head h2{font-size:var(--step-2);margin:.25rem 0 .3rem}
.pd-section-head p{color:var(--slate);margin:0;font-size:.95rem}

.pd-ba{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.pd-ba .ba{aspect-ratio:16/9}

/* ---------- Media gallery ---------- */
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pm-item{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:#0b1430;aspect-ratio:16/10;display:block}
.pm-item img,.pm-item video{width:100%;height:100%;object-fit:cover;display:block}
.pm-item--wide{grid-column:span 2}
.pm-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,14,36,.35);
  color:#fff;transition:background .2s ease}
.pm-item:hover .pm-play{background:rgba(6,14,36,.15)}
.pm-play span{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--royal);
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.pm-play svg{width:22px;height:22px;margin-left:2px}
.pm-caption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;color:#fff;font-size:.82rem;
  background:linear-gradient(180deg,transparent,rgba(6,14,36,.82));pointer-events:none}
.pm-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.pm-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .pd-top{grid-template-columns:1fr;gap:1.6rem}
  .pd-facts{position:static}
  .pm-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pf-grid{grid-template-columns:1fr}
  .pf-meta{grid-template-columns:1fr 1fr}
  .ba__handle{width:38px;height:38px}
  .ba__tag{font-size:.63rem;padding:.25rem .55rem}
}
@media(max-width:560px){
  .pm-grid{grid-template-columns:1fr}
  .pm-item--wide{grid-column:span 1}
  .pf-meta{grid-template-columns:1fr}
}