/* =====================================================================
   Scoped styles for /projects, /projects/<slug> and /before-and-after
   ONLY. Loaded exclusively by those generated pages, so nothing here
   affects protected routes. Reuses global tokens.
   ===================================================================== */

/* Filters */
.pj-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.pj-filter {
  font: inherit; font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  background: var(--white-warm); color: var(--forest-900); cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px; padding: .55rem 1.1rem; min-height: 44px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pj-filter:hover { border-color: var(--forest-600); }
.pj-filter.active { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }

/* Project grid + cards */
.pj-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.pj-card {
  background: var(--white-warm); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pj-card[hidden] { display: none; }
.pj-card__media { display: block; aspect-ratio: 4 / 3; background: var(--sage-100); }
.pj-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pj-card__body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.pj-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.pj-card__tags span {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--sage-100); color: var(--forest-800); border-radius: 999px; padding: .2rem .6rem;
}
.pj-card__body h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.pj-card__body p { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
.pj-card__link {
  margin-top: auto; font-family: var(--font-display); font-weight: 600; text-decoration: none;
  color: var(--forest-800); display: inline-flex; align-items: center; gap: .4rem;
}
.pj-card__link:hover { gap: .65rem; color: var(--forest-600); }
.pj-card__link svg { width: 1em; height: 1em; }
.pj-empty { color: var(--muted); text-align: center; padding: 2rem; }

/* Detail layout */
.pj-layout { display: grid; gap: 2.4rem; align-items: start; }
.pj-h2 { margin-top: 2.2rem; }
.hint-line { color: var(--muted); font-size: .9rem; margin: .2rem 0 .9rem; }
.pj-gallery { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.pj-gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--sage-100); }
.pj-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.pj-gallery figure:hover img { transform: scale(1.03); }
.pj-pagenav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.pj-pagenav a { font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.pj-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pj-facts li { display: flex; flex-direction: column; gap: .1rem; }
.pj-facts span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pj-facts strong { color: var(--forest-900); font-size: .95rem; }

/* Before/after items on /before-and-after */
.pj-ba-item { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.pj-ba-item h2 { margin-bottom: .2rem; }
.pj-ba-item .ba { margin-bottom: 1rem; }
.pj-ba-item > p { max-width: 46rem; }

/* Comparison slider (shares .ba classes with the global sheet; these
   declarations keep it self-sufficient if globals change) */
.ba {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; background: var(--sage-100); touch-action: pan-y;
  box-shadow: var(--shadow-md); user-select: none; max-width: 900px;
}
.ba:focus-visible { outline: 3px solid var(--sage-200); outline-offset: 3px; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { clip-path: inset(0 50% 0 0); }
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,.35); transform: translateX(-50%); pointer-events: none;
}
.ba__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--forest-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); pointer-events: none;
}
.ba__handle svg { width: 20px; height: 20px; }
.ba__label {
  position: absolute; top: 1rem; z-index: 2; pointer-events: none;
  background: rgba(255,255,255,.95); color: var(--forest-900);
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  border-radius: 999px; padding: .4rem .95rem; box-shadow: var(--shadow-sm);
}
.ba__label--after { left: 1rem; }
.ba__label--before { right: 1rem; }
/* JS-off fallback: show the after photo fully, no divider chrome */
html:not(.js) .ba__after { clip-path: none; }
html:not(.js) .ba__divider, html:not(.js) .ba__handle { display: none; }

@media (min-width: 560px) {
  .pj-grid { grid-template-columns: repeat(2, 1fr); }
  .pj-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .pj-grid { grid-template-columns: repeat(3, 1fr); }
  .pj-layout { grid-template-columns: 1.7fr 1fr; gap: 3rem; }
}