/* =====================================================================================================
   portfolio-tabs.css: category tabs in one row ("All" first), that group's photos in a grid underneath.
   Pair with portfolio-tabs.js. Restyled with the tokens; keep the structure.
   ===================================================================================================== */

:where(:root) {
  --pt-fg: currentColor;
  --pt-muted: color-mix(in srgb, currentColor 62%, transparent);
  --pt-line: color-mix(in srgb, currentColor 22%, transparent);
  --pt-on-bg: #121417;          /* selected tab */
  --pt-on-fg: #FFFFFF;
  --pt-focus: #121417;
  --pt-radius: 999px;           /* tab shape */
  --pt-tile-radius: 6px;
  --pt-min: 150px;              /* smallest tile width: 2 columns on a phone, 4-6 on a laptop */
  --pt-ratio: 4 / 5;            /* every tile the same shape, so switching never jumps */
  --pt-gap: 10px;
}

.pt { min-width: 0; }
/* one horizontal row that scrolls sideways on phones; the page itself never overflows */
.pt .pt-tabs { display: flex; gap: 6px; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 4px; margin: -4px -4px 14px; scroll-padding-inline: 24px;
  -webkit-mask-image: var(--_edge, none); mask-image: var(--_edge, none); }
.pt .pt-tabs::-webkit-scrollbar { display: none; }
/* a soft fade on whichever edge has more tabs hidden behind it (portfolio-tabs.js sets data-more) */
.pt .pt-tabs[data-more="end"] { --_edge: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.pt .pt-tabs[data-more="start"] { --_edge: linear-gradient(90deg, transparent, #000 40px); }
.pt .pt-tabs[data-more="both"] { --_edge: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

.pt .pt-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; margin: 0;
  border: 1px solid var(--pt-line); border-radius: var(--pt-radius); background: transparent; color: var(--pt-fg);
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.pt .pt-tab[aria-selected="true"] { background: var(--pt-on-bg); border-color: var(--pt-on-bg); color: var(--pt-on-fg); }
.pt .pt-tab:focus-visible { outline: 2px solid var(--pt-focus); outline-offset: 2px; }
.pt .pt-n { font-size: .8em; font-weight: 500; opacity: .7; }
@media (hover: hover) and (pointer: fine) { .pt .pt-tab:not([aria-selected="true"]):hover { border-color: currentColor; } }

.pt .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--pt-min), 100%), 1fr)); gap: var(--pt-gap);
  list-style: none; margin: 0; padding: 0; }
.pt .pt-grid > [hidden] { display: none !important; }
.pt .pt-grid figure { margin: 0; }
.pt .pt-grid img { display: block; width: 100%; height: auto; aspect-ratio: var(--pt-ratio); object-fit: cover; border-radius: var(--pt-tile-radius); background: var(--pt-line); }
.pt .pt-grid figcaption { margin-top: 6px; font-size: .9rem; line-height: 1.35; color: var(--pt-muted); }
.pt .pt-grid > .pt-in { animation: pt-in .35s ease both; }
@keyframes pt-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .pt .pt-tab { transition: none; }
  .pt .pt-grid > .pt-in { animation: none; }
}