/* ==========================================================================
   Projects page
   ========================================================================== */
.pj-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pj-view {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
}
.pj-view__btn {
  width: 38px; height: 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--blue-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.pj-view__btn svg { fill: currentColor; }
.pj-view__btn.is-active { background: var(--blue); color: #fff; }

/* --------------------------------------------------------------------------
   Grid view
   -------------------------------------------------------------------------- */
.pj-list.is-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px 48px;
  align-items: start;
}
.pj-list.is-grid { padding-bottom: 160px; }
.pj-list.is-grid .pj-card { position: relative; }
.pj-list.is-grid .pj-card.is-offset { top: 160px; }

.pj-card__link { display: block; }
.pj-card__media {
  position: relative;
  aspect-ratio: 4 / 3.1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card, #eee);
}
.pj-card__media img,
.pj-card__media svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.1s var(--ease-out);
}
.pj-card__link:hover .pj-card__media img,
.pj-card__link:hover .pj-card__media svg { transform: scale(1.02); }
.pj-card__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
}

.pj-card__info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding-top: 22px;
}
.pj-card__num { font-size: 14px; color: var(--blue-text); }
.pj-card__title {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: var(--track-heading);
  line-height: 1.1;
}
.pj-card__cat {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0,0,0,.14);
  white-space: nowrap;
}
.pj-card__client, .pj-card__year { display: none; }
.pj-card__arrow { display: none; }
.pj-card__blurb {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(0,0,0,.62);
  margin-top: 8px;
  padding-left: calc(2ch + 14px);
  max-width: 30em;
}

/* --------------------------------------------------------------------------
   List view
   -------------------------------------------------------------------------- */
.pj-list.is-list { border-bottom: 1px solid rgba(0,0,0,.12); }
.pj-list.is-list .pj-card { border-top: 1px solid rgba(0,0,0,.12); }
.pj-list.is-list .pj-card__link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pj-list.is-list .pj-card__link::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .55s var(--ease-out);
  z-index: -1;
}
.pj-list.is-list .pj-card__link:hover::before { transform: scaleY(1); }
.pj-list.is-list .pj-card__link:hover { color: #fff; }
.pj-list.is-list .pj-card__media,
.pj-list.is-list .pj-card__blurb { display: none; }
.pj-list.is-list .pj-card__info {
  grid-template-columns: 4ch 1.6fr 1fr 1fr 5ch 40px;
  align-items: center;
  padding: 26px 8px;
  transition: padding .55s var(--ease-out), color .3s;
}
.pj-list.is-list .pj-card__link:hover .pj-card__info { padding-left: 24px; padding-right: 24px; }
.pj-list.is-list .pj-card__title { font-size: clamp(26px, 3.4vw, 46px); }
.pj-list.is-list .pj-card__client,
.pj-list.is-list .pj-card__year { display: block; font-size: 16px; }
.pj-list.is-list .pj-card__cat { justify-self: start; border-color: currentColor; }
.pj-list.is-list .pj-card__num { color: inherit; opacity: .6; }
.pj-list.is-list .pj-card__arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: transform .5s var(--ease-out);
}
.pj-list.is-list .pj-card__link:hover .pj-card__arrow { transform: rotate(-45deg); }

.pj-empty { padding: 60px 0; font-size: 18px; text-align: center; color: rgba(0,0,0,.5); }

/* Cursor-following preview (list view) */
.pj-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: 320px;
  aspect-ratio: 4 / 3;
  margin: -120px 0 0 -160px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.6);
}
.pj-preview__inner {
  position: absolute; inset: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(10,31,92,.45);
}
.pj-preview__inner img,
.pj-preview__inner svg { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .pj-list.is-grid { grid-template-columns: 1fr; gap: 48px; }
  .pj-list.is-grid { padding-bottom: 0; }
  .pj-list.is-grid .pj-card.is-offset { top: 0; }
  .pj-list.is-list .pj-card__info { grid-template-columns: 3ch 1fr auto; padding: 20px 4px; }
  .pj-list.is-list .pj-card__client,
  .pj-list.is-list .pj-card__year,
  .pj-list.is-list .pj-card__arrow { display: none; }
  .pj-preview { display: none; }
}