/* Portfolio List widget. Reuses the theme's own CSS custom properties
   (--bg/--ink/--accent/--line/--ease, defined in the theme's main.css
   :root) rather than hard-coding hex values here, so it stays in sync with
   the site's design tokens automatically. */

.ab-portfolio { position: relative; }

/* Deliberately not reusing the theme's .filters class here: it looked like a
   free win (identical pill styling already exists) but main.js also attaches
   its own click handlers and a hardcoded 4-item cap to anything sharing that
   class, which silently fought this widget's own filtering. Same story with
   .case below -- it carries the old card-grid display:grid rule. Replicating
   the pill look here keeps the visual match without the hidden coupling. */
.pf-filters { display: flex; gap: .55rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.pf-filters button {
  background: none; border: 1px solid var(--line, rgba(245,244,241,.11)); color: var(--ink-3, #87847d);
  padding: .65rem 1.4rem; border-radius: 999px; font-size: 15.2px; letter-spacing: .03em;
  transition: all .3s var(--ease, ease); cursor: pointer; font-family: inherit;
}
.pf-filters button:hover { color: var(--ink, #f5f4f1); border-color: var(--ink-3, #87847d); }
.pf-filters button.active { background: var(--accent, #FF5A1F); border-color: var(--accent, #FF5A1F); color: #0b0b0c; font-weight: 700; }
.pf-filters .count { font-variant-numeric: tabular-nums; opacity: .6; margin-left: .35rem; }

.pf-list { position: relative; }

/* Shared preview surface, one element reused for every row rather than one
   image per item -- only ever one photo loading/painting at a time. Rows
   were made taller (see .pf-item padding below) specifically so this stays
   a meaningful visual surface even on a short, category-filtered list
   (e.g. a 3-4 item service-page "proof" section) rather than a thin sliver. */
/* Breaks out of .pf-list's own padded width to the true viewport edge --
   a cinematic full-bleed background, independent of however much padding
   the section around it has (and of that padding changing per breakpoint,
   since 100vw always means the real viewport regardless). left:0;right:0
   alone would only fill the padded column, not the page.
   Uses left:50%+margin-left, NOT transform:translateX -- portfolio.js sets
   this element's `transform` directly (translateY, the scroll-follow
   effect) via inline style, which would silently overwrite a CSS
   translateX and re-collapse this back to the padded width. */
.pf-preview {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 500ms var(--ease, ease), background-image 10ms;
  pointer-events: none;
  z-index: 0;
}
.pf-preview.is-active { opacity: .32; }


.pf-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--line, rgba(245,244,241,.11));
  cursor: pointer;
}
.pf-item:first-child { border-top: 1px solid var(--line, rgba(245,244,241,.11)); }

.pf-n {
  font-size: 12.48px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3, #87847d);
  flex: none;
  width: 2.4rem;
  padding-top: .3rem;
}

.pf-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}

.pf-title {
  font-size: clamp(24px, 3.4vw, 41.6px);
  font-weight: 700;
  letter-spacing: -.01em;
  opacity: .62; /* .4 measured too close to --ink-3's contrast, which this
    site only ever uses for captions -- these are primary clickable titles,
    not captions, so they need to stay readable even without hover/focus. */
  transform: translateX(0);
  transition: opacity 400ms var(--ease, ease), transform 400ms var(--ease, ease), color 400ms var(--ease, ease);
  color: var(--ink, #f5f4f1);
}
.pf-item:hover .pf-title,
.pf-item:focus-visible .pf-title { opacity: 1; transform: translateX(.6rem); color: var(--accent, #FF5A1F); }

.pf-desc {
  font-size: 14.72px; line-height: 1.55; color: var(--ink-2, #a8a6a0);
  max-width: 54ch;
}

.pf-tags.chips { margin-top: .1rem; gap: .5rem; }
.pf-tags.chips span { font-size: 13.12px; padding: .4rem .9rem; color: var(--ink-2, #a8a6a0); }

/* The filter JS sets both the native [hidden] attribute and this class, but
   .pf-item's own display:flex (an author style) overrides the browser's
   default [hidden]{display:none} -- author styles always win over
   user-agent defaults regardless of specificity. Without this rule, hidden
   items are marked hidden in the DOM but stay fully visible on screen. */
.pf-item.hidden,
.pf-item[hidden] { display: none; }

.pf-meta {
  flex: none;
  text-align: right;
  font-size: 11.52px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3, #87847d);
  padding-top: .3rem;
}

.pf-more-wrap { display: flex; justify-content: center; margin-top: 2.4rem; }
.pf-more {
  background: none; border: 1px solid var(--line, rgba(245,244,241,.11)); color: var(--ink-2, #a8a6a0);
  padding: .75rem 1.9rem; border-radius: 999px; font-size: 14.4px; letter-spacing: .03em;
  transition: all .3s var(--ease, ease); cursor: pointer; font-family: inherit;
}
.pf-more:hover { color: var(--ink, #f5f4f1); border-color: var(--accent, #FF5A1F); }
.pf-more[hidden] { display: none; }
.pf-more-count { opacity: .6; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .pf-item { flex-wrap: wrap; }
  .pf-main { flex-basis: 100%; order: 1; }
  .pf-meta { order: 2; }
}