/* =============================================================
   Project Portfolio — Public Styles v2.1
   Colors and fonts are injected dynamically via PHP
   (Portfolio_Settings::get_dynamic_css()) so they respond
   to the Settings panel and inherit the active theme font.
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   NOTE: Color values here are fallbacks only.
   The real values are written as inline CSS by Portfolio_Assets
   using the colors saved in Portfolio → Settings.
───────────────────────────────────────────────────────────── */
:root {
  /* Brand — overridden by inline CSS from settings */
  --pp-primary:        #6366f1;
  --pp-primary-dark:   #4f46e5;
  --pp-primary-light:  #818cf8;
  --pp-primary-xlight: #e0e7ff;
  --pp-accent:         #8b5cf6;
  --pp-accent-dark:    #7c3aed;

  /* Neutrals — never overridden, always these values */
  --pp-white:          #ffffff;
  --pp-gray-50:        #f8fafc;
  --pp-gray-100:       #f1f5f9;
  --pp-gray-200:       #e2e8f0;
  --pp-gray-300:       #cbd5e1;
  --pp-gray-400:       #94a3b8;
  --pp-gray-500:       #64748b;
  --pp-gray-600:       #475569;
  --pp-gray-700:       #334155;
  --pp-gray-800:       #1e293b;
  --pp-gray-900:       #0f172a;

  /* Semantic */
  --pp-text:           var(--pp-gray-800);
  --pp-text-muted:     var(--pp-gray-500);
  --pp-text-light:     var(--pp-gray-400);
  --pp-bg:             var(--pp-white);
  --pp-bg-secondary:   var(--pp-gray-50);
  --pp-bg-tertiary:    var(--pp-gray-100);
  --pp-border:         var(--pp-gray-200);
  --pp-border-strong:  var(--pp-gray-300);

  /* Spacing */
  --pp-gap:            1.5rem;
  --pp-gap-sm:         1rem;
  --pp-gap-lg:         2rem;
  --pp-gap-xl:         3rem;

  /* Radius — overridden by inline CSS from settings */
  --pp-radius-xs:      4px;
  --pp-radius-sm:      8px;
  --pp-radius:         12px;
  --pp-radius-lg:      16px;
  --pp-radius-xl:      24px;
  --pp-radius-full:    9999px;

  /* Shadows — shadow intensity overridden by settings */
  --pp-shadow-xs:      0 1px 2px 0 rgb(0 0 0 / .05);
  --pp-shadow-sm:      0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --pp-shadow:         0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);
  --pp-shadow-md:      0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);
  --pp-shadow-lg:      0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --pp-shadow-xl:      0 25px 50px -12px rgb(0 0 0 / .2);
  --pp-shadow-primary: 0 8px 24px -4px rgb(99 102 241 / .35);
  --pp-shadow-inset:   inset 0 1px 3px rgb(0 0 0 / .08);

  /* Transitions */
  --pp-ease:           cubic-bezier(.4, 0, .2, 1);
  --pp-ease-out:       cubic-bezier(0, 0, .2, 1);
  --pp-ease-in:        cubic-bezier(.4, 0, 1, 1);
  --pp-ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
  --pp-duration-fast:  150ms;
  --pp-duration:       250ms;
  --pp-duration-slow:  400ms;
  --pp-transition:     var(--pp-duration) var(--pp-ease);
  --pp-transition-fast:var(--pp-duration-fast) var(--pp-ease);
  --pp-transition-slow:var(--pp-duration-slow) var(--pp-ease);

  /*
   * Font — DO NOT set a static value here.
   * --pp-font is set on .pp-portfolio-wrap etc. by the
   * dynamic CSS from Portfolio_Settings::get_dynamic_css()
   * using a cascade of theme CSS custom properties,
   * ultimately falling back to `inherit`.
   */
  --pp-font:           inherit;

  /* Font sizes */
  --pp-font-size-xs:   .75rem;
  --pp-font-size-sm:   .875rem;
  --pp-font-size-base: 1rem;
  --pp-font-size-lg:   1.125rem;
  --pp-font-size-xl:   1.25rem;
  --pp-font-size-2xl:  1.5rem;
  --pp-font-size-3xl:  1.875rem;
  --pp-font-size-4xl:  2.25rem;
  --pp-line-height:          1.6;
  --pp-line-height-tight:    1.25;
  --pp-line-height-snug:     1.375;

  /* Z-index */
  --pp-z-base:         1;
  --pp-z-overlay:      10;
  --pp-z-sticky:       100;
  --pp-z-modal:        1000;
}

/* Dark mode — only neutrals and shadows change, not brand colors */
@media (prefers-color-scheme: dark) {
  :root {
    --pp-text:          #e2e8f0;
    --pp-text-muted:    #94a3b8;
    --pp-text-light:    #64748b;
    --pp-bg:            #0f172a;
    --pp-bg-secondary:  #1e293b;
    --pp-bg-tertiary:   #334155;
    --pp-border:        #334155;
    --pp-border-strong: #475569;
    --pp-shadow:        0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);
    --pp-shadow-md:     0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);
    --pp-shadow-lg:     0 20px 25px -5px rgb(0 0 0 / .4), 0 8px 10px -6px rgb(0 0 0 / .4);
  }
}

/* ─────────────────────────────────────────────────────────────
   2. BASE RESET (scoped)
───────────────────────────────────────────────────────────── */
.pp-portfolio-wrap,
.pp-portfolio-wrap *,
.pp-portfolio-wrap *::before,
.pp-portfolio-wrap *::after,
.pp-single-wrap,
.pp-single-wrap *,
.pp-single-wrap *::before,
.pp-single-wrap *::after,
.pp-archive-wrap,
.pp-archive-wrap *,
.pp-archive-wrap *::before,
.pp-archive-wrap *::after {
  box-sizing: border-box;
}

/*
 * Font inheritance — portfolio uses the theme font.
 * --pp-font is set dynamically by PHP on these selectors.
 * The `font-family: var(--pp-font)` declaration here
 * picks it up for all child elements automatically.
 */
.pp-portfolio-wrap,
.pp-single-wrap,
.pp-archive-wrap {
  font-family: var(--pp-font);
  font-size: var(--pp-font-size-base);
  line-height: var(--pp-line-height);
  color: var(--pp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pp-portfolio-wrap img,
.pp-single-wrap img,
.pp-archive-wrap img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.pp-portfolio-wrap a,
.pp-single-wrap a,
.pp-archive-wrap a {
  color: inherit;
  text-decoration: none;
}

.pp-portfolio-wrap ul,
.pp-portfolio-wrap ol,
.pp-single-wrap ul,
.pp-single-wrap ol,
.pp-archive-wrap ul,
.pp-archive-wrap ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-portfolio-wrap button,
.pp-single-wrap button,
.pp-archive-wrap button {
  font-family: var(--pp-font);
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
   3. FILTER BAR
───────────────────────────────────────────────────────────── */
.pp-filter-bar {
  margin-bottom: var(--pp-gap-lg);
}

.pp-filter-bar-inner {
  position: relative;
}

.pp-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* Filter button */
.pp-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.125rem;
  background: transparent;
  border: 1.5px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-full);
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color       var(--pp-transition),
    background  var(--pp-transition),
    border-color var(--pp-transition),
    box-shadow  var(--pp-transition),
    transform   var(--pp-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.pp-filter-btn:hover {
  color: var(--pp-primary);
  border-color: var(--pp-primary-light);
  background: var(--pp-primary-xlight);
  transform: translateY(-1px);
}

.pp-filter-btn:active {
  transform: translateY(0);
}

.pp-filter-btn:focus-visible {
  outline: 2px solid var(--pp-primary);
  outline-offset: 3px;
}

.pp-filter-btn.is-active {
  background: var(--pp-primary);
  border-color: var(--pp-primary);
  color: var(--pp-white);
  box-shadow: var(--pp-shadow-primary);
  font-weight: 600;
}

.pp-filter-btn.is-active:hover {
  background: var(--pp-primary-dark);
  border-color: var(--pp-primary-dark);
  transform: translateY(-1px);
}

/* Count badge */
.pp-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: var(--pp-radius-full);
  background: var(--pp-bg-tertiary);
  color: var(--pp-text-muted);
  font-size: .65rem;
  font-weight: 700;
  transition: background var(--pp-transition), color var(--pp-transition);
}

.pp-filter-btn.is-active .pp-filter-count {
  background: rgb(255 255 255 / .25);
  color: var(--pp-white);
}

/* Scrollable filter on small screens */
@media (max-width: 600px) {
  .pp-filter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pp-filter-list::-webkit-scrollbar {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. GRID LAYOUTS
───────────────────────────────────────────────────────────── */

/* --- Grid --- */
.pp-grid {
  display: grid;
  gap: var(--pp-gap);
  --pp-cols: 3;
  grid-template-columns: repeat(var(--pp-cols), 1fr);
}

.pp-grid-cols-1 { --pp-cols: 1; }
.pp-grid-cols-2 { --pp-cols: 2; }
.pp-grid-cols-3 { --pp-cols: 3; }
.pp-grid-cols-4 { --pp-cols: 4; }
.pp-grid-cols-5 { --pp-cols: 5; }
.pp-grid-cols-6 { --pp-cols: 6; }

/* --- Masonry (CSS columns) --- */
.pp-masonry {
  --pp-cols: 3;
  columns: var(--pp-cols);
  column-gap: var(--pp-gap);
}

.pp-masonry-cols-1 { --pp-cols: 1; }
.pp-masonry-cols-2 { --pp-cols: 2; }
.pp-masonry-cols-3 { --pp-cols: 3; }
.pp-masonry-cols-4 { --pp-cols: 4; }
.pp-masonry-cols-5 { --pp-cols: 5; }
.pp-masonry-cols-6 { --pp-cols: 6; }

.pp-masonry .pp-item {
  break-inside: avoid;
  margin-bottom: var(--pp-gap);
  display: block;
}

/* --- List --- */
.pp-list {
  display: flex;
  flex-direction: column;
  gap: var(--pp-gap);
}

/* ─────────────────────────────────────────────────────────────
   5. PORTFOLIO ITEM — GRID / MASONRY CARD
───────────────────────────────────────────────────────────── */
.pp-item {
  --pp-card-radius: var(--pp-radius-lg);
  position: relative;
}

/* Hidden/visible states for filter animation */
.pp-item.pp-is-hidden {
  display: none;
}

.pp-item-inner {
  position: relative;
  background: var(--pp-bg);
  border-radius: var(--pp-card-radius);
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform     var(--pp-transition),
    box-shadow    var(--pp-transition),
    border-color  var(--pp-transition);
  will-change: transform, box-shadow;
}

.pp-item-inner:hover {
  transform: translateY(-6px);
  box-shadow: var(--pp-shadow-lg);
  border-color: var(--pp-border-strong);
}

/* ── Image container ── */
.pp-item-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--pp-bg-tertiary);
  flex-shrink: 0;
}

.pp-item-image a {
  display: block;
  height: 100%;
}

.pp-item-image img.pp-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pp-duration-slow) var(--pp-ease);
}

.pp-item-inner:hover .pp-thumb {
  transform: scale(1.06);
}

/* ── Placeholder image ── */
.pp-placeholder-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--pp-bg-secondary) 0%,
    var(--pp-bg-tertiary) 100%
  );
}

.pp-placeholder-icon {
  width: 64px;
  height: 64px;
  color: var(--pp-gray-300);
  opacity: .6;
}

/* ── Overlay ── */
.pp-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgb(23 73 151 / 65%) 0%, rgb(23 73 151 / 58%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  opacity: 0;
  transition: opacity var(--pp-transition);
  z-index: var(--pp-z-overlay);
}

.pp-item-inner:hover .pp-item-overlay {
  opacity: 1;
}

.pp-overlay-actions {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  transform: translateY(16px);
  transition: transform var(--pp-duration-slow) var(--pp-ease-spring);
}

.pp-item-inner:hover .pp-overlay-actions {
  transform: translateY(0);
}

/* Overlay action buttons */
.pp-overlay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.5rem;
  border-radius: var(--pp-radius-full);
  font-size: var(--pp-font-size-sm);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: all var(--pp-transition-fast);
  border: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.pp-overlay-btn-primary {
  background: var(--pp-white);
  color: var(--pp-primary);
  border-color: var(--pp-white);
}

.pp-overlay-btn-primary:hover {
  background: var(--pp-primary-xlight);
  color: var(--pp-primary-dark);
}

.pp-overlay-btn-outline {
  background: transparent;
  color: var(--pp-white);
  border-color: rgb(255 255 255 / .7);
}

.pp-overlay-btn-outline:hover {
  background: rgb(255 255 255 / .15);
  border-color: var(--pp-white);
}

/* ── Category ribbon ── */
.pp-item-ribbon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: var(--pp-z-base);
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  pointer-events: none;
}

/* ── Card body ── */
.pp-item-body {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.375rem;
  flex: 1;
}

/* Category badges */
.pp-item-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.pp-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .625rem;
  border-radius: var(--pp-radius-full);
  background: var(--pp-primary-xlight);
  color: var(--pp-primary-dark);
  font-size: var(--pp-font-size-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--pp-transition-fast), color var(--pp-transition-fast);
}

.pp-cat-badge:hover {
  background: var(--pp-primary);
  color: var(--pp-white);
}

/* Title */
.pp-item-title {
  font-size: var(--pp-font-size-lg);
  font-weight: 700;
  line-height: var(--pp-line-height-snug);
  color: var(--pp-text);
}

.pp-item-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--pp-primary), var(--pp-primary));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: background-size var(--pp-transition), color var(--pp-transition-fast);
}

.pp-item-title a:hover,
.pp-item-title a:focus-visible {
  color: var(--pp-primary);
  background-size: 100% 2px;
  outline: none;
}

/* Excerpt */
.pp-item-excerpt {
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-sm);
  line-height: 1.7;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tech stack */
.pp-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.pp-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  border-radius: var(--pp-radius-xs);
  background: var(--pp-bg-tertiary);
  border: 1px solid var(--pp-border);
  color: var(--pp-text-muted);
  font-size: .7rem;
  font-weight: 600;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  letter-spacing: .02em;
  transition: background var(--pp-transition-fast), color var(--pp-transition-fast);
}

.pp-tech-tag:hover {
  background: var(--pp-primary-xlight);
  color: var(--pp-primary-dark);
  border-color: var(--pp-primary-light);
}

/* Footer row */
.pp-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .875rem;
  margin-top: auto;
  border-top: 1px solid var(--pp-border);
}

.pp-item-link-primary {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--pp-primary);
  font-size: var(--pp-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--pp-transition), color var(--pp-transition-fast);
}

.pp-item-link-primary:hover {
  color: var(--pp-primary-dark);
  gap: .625rem;
}

.pp-item-link-primary svg {
  width: 16px;
  height: 16px;
  transition: transform var(--pp-transition);
}

.pp-item-link-primary:hover svg {
  transform: translateX(3px);
}

.pp-item-link-secondary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--pp-text-light);
  font-size: var(--pp-font-size-xs);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--pp-transition-fast);
}

.pp-item-link-secondary:hover {
  color: var(--pp-gray-700);
}

.pp-item-link-secondary svg {
  width: 14px;
  height: 14px;
}

/* ─────────────────────────────────────────────────────────────
   6. LIST ITEM
───────────────────────────────────────────────────────────── */
.pp-item-list {
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
  transition:
    transform     var(--pp-transition),
    box-shadow    var(--pp-transition),
    border-color  var(--pp-transition);
}

.pp-item-list:hover {
  transform: translateY(-3px);
  box-shadow: var(--pp-shadow-md);
  border-color: var(--pp-border-strong);
}

.pp-item-list-image {
  position: relative;
  overflow: hidden;
  background: var(--pp-bg-tertiary);
  aspect-ratio: unset;
  min-height: 200px;
}

.pp-item-list-image a {
  display: block;
  height: 100%;
}

.pp-item-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pp-duration-slow) var(--pp-ease);
}

.pp-item-list:hover .pp-item-list-image img {
  transform: scale(1.04);
}

.pp-item-list-image .pp-placeholder-wrap {
  height: 100%;
  min-height: 200px;
}

/* Status badge on list image */
.pp-list-badge {
  position: absolute;
  top: .875rem;
  left: .875rem;
  z-index: var(--pp-z-base);
}

.pp-item-list-body {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.75rem;
}

.pp-item-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.pp-item-list-date {
  display: flex;
  align-items: center;
  gap: .3rem;
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-xs);
}

.pp-item-list-date svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.pp-meta-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--pp-gray-300);
}

.pp-item-list-title {
  font-size: var(--pp-font-size-xl);
  font-weight: 700;
  line-height: var(--pp-line-height-snug);
  color: var(--pp-text);
}

.pp-item-list-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--pp-transition-fast);
}

.pp-item-list-title a:hover {
  color: var(--pp-primary);
}

.pp-item-list-excerpt {
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-sm);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pp-item-list-client {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--pp-font-size-sm);
  color: var(--pp-text-muted);
}

.pp-item-list-client strong {
  color: var(--pp-text);
  font-weight: 600;
}

.pp-item-list-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding-top: .875rem;
  border-top: 1px solid var(--pp-border);
  margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────
   7. BUTTON SYSTEM
───────────────────────────────────────────────────────────── */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.375rem;
  border-radius: var(--pp-radius-sm);
  font-size: var(--pp-font-size-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    background     var(--pp-transition),
    color          var(--pp-transition),
    border-color   var(--pp-transition),
    box-shadow     var(--pp-transition),
    transform      var(--pp-transition-fast);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.pp-btn:focus-visible {
  outline: 2px solid var(--pp-primary);
  outline-offset: 3px;
}

.pp-btn:active {
  transform: scale(.97);
}

.pp-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--pp-transition-fast);
}

/* Primary */
.pp-btn-primary {
  background: var(--pp-primary);
  color: var(--pp-white);
  border-color: var(--pp-primary);
  box-shadow: var(--pp-shadow-primary);
}

.pp-btn-primary:hover {
  background: var(--pp-primary-dark);
  border-color: var(--pp-primary-dark);
  color: var(--pp-white);
  box-shadow: 0 12px 28px -4px rgb(99 102 241 / .45);
  transform: translateY(-2px);
}

.pp-btn-primary svg { color: var(--pp-white); }

/* Secondary / Outline */
.pp-btn-secondary {
  background: transparent;
  color: var(--pp-primary);
  border-color: var(--pp-primary);
}

.pp-btn-secondary:hover {
  background: var(--pp-primary);
  color: var(--pp-white);
  transform: translateY(-2px);
}

/* Ghost */
.pp-btn-ghost {
  background: transparent;
  color: var(--pp-text-muted);
  border-color: var(--pp-border);
}

.pp-btn-ghost:hover {
  background: var(--pp-bg-tertiary);
  color: var(--pp-text);
  border-color: var(--pp-border-strong);
}

/* Sizes */
.pp-btn-sm {
  padding: .4rem 1rem;
  font-size: var(--pp-font-size-xs);
  gap: .375rem;
}

.pp-btn-sm svg {
  width: 14px;
  height: 14px;
}

.pp-btn-lg {
  padding: .875rem 2rem;
  font-size: var(--pp-font-size-base);
  border-radius: var(--pp-radius);
}

.pp-btn-full {
  width: 100%;
}

/* GitHub specific */
.pp-btn-github {
  background: var(--pp-gray-800);
  color: var(--pp-white);
  border-color: var(--pp-gray-800);
}

.pp-btn-github:hover {
  background: var(--pp-gray-900);
  border-color: var(--pp-gray-900);
  color: var(--pp-white);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────
   8. PAGINATION
───────────────────────────────────────────────────────────── */
.pp-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--pp-gap-xl);
}

.pp-page-list {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pp-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .75rem;
  border-radius: var(--pp-radius-sm);
  border: 1.5px solid var(--pp-border);
  background: var(--pp-bg);
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background     var(--pp-transition-fast),
    border-color   var(--pp-transition-fast),
    color          var(--pp-transition-fast),
    box-shadow     var(--pp-transition-fast),
    transform      var(--pp-transition-fast);
}

.pp-page-btn:hover:not(:disabled) {
  border-color: var(--pp-primary);
  color: var(--pp-primary);
  background: var(--pp-primary-xlight);
  transform: translateY(-1px);
}

.pp-page-btn:focus-visible {
  outline: 2px solid var(--pp-primary);
  outline-offset: 2px;
}

.pp-page-btn.is-current {
  background: var(--pp-primary);
  border-color: var(--pp-primary);
  color: var(--pp-white);
  box-shadow: var(--pp-shadow-primary);
  font-weight: 700;
  cursor: default;
}

.pp-page-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.pp-page-btn svg {
  width: 16px;
  height: 16px;
}

.pp-page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--pp-text-light);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────
   9. LOAD MORE
───────────────────────────────────────────────────────────── */
.pp-load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: var(--pp-gap-xl);
}

.pp-load-more-progress {
  width: 100%;
  max-width: 320px;
  height: 4px;
  background: var(--pp-bg-tertiary);
  border-radius: var(--pp-radius-full);
  overflow: hidden;
}

.pp-load-more-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--pp-primary) 0%, var(--pp-accent) 100%);
  border-radius: var(--pp-radius-full);
  transition: width .4s var(--pp-ease-out);
}

.pp-load-more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 2.25rem;
  background: var(--pp-bg);
  color: var(--pp-text);
  border: 2px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-full);
  font-size: var(--pp-font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition:
    background     var(--pp-transition),
    border-color   var(--pp-transition),
    color          var(--pp-transition),
    box-shadow     var(--pp-transition),
    transform      var(--pp-transition-fast);
  overflow: hidden;
}

.pp-load-more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pp-primary) 0%, var(--pp-accent) 100%);
  opacity: 0;
  transition: opacity var(--pp-transition);
}

.pp-load-more-btn:hover:not(:disabled) {
  border-color: var(--pp-primary);
  color: var(--pp-white);
  box-shadow: var(--pp-shadow-primary);
  transform: translateY(-2px);
}

.pp-load-more-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.pp-load-more-btn:focus-visible {
  outline: 2px solid var(--pp-primary);
  outline-offset: 3px;
}

.pp-load-more-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.pp-load-more-btn span {
  position: relative;
  z-index: 1;
}

/* Spinner */
.pp-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pp-load-more-btn.is-loading .pp-spinner {
  display: block;
  animation: pp-spin .7s linear infinite;
}

.pp-load-more-count {
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-sm);
}

/* ─────────────────────────────────────────────────────────────
   10. EMPTY STATE
───────────────────────────────────────────────────────────── */
.pp-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
}

.pp-empty-icon {
  width: 64px;
  height: 64px;
  color: var(--pp-gray-300);
}

.pp-empty-title {
  font-size: var(--pp-font-size-xl);
  font-weight: 700;
  color: var(--pp-text);
}

.pp-empty-desc {
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-sm);
  max-width: 360px;
}

/* ─────────────────────────────────────────────────────────────
   11. LOADING SKELETON
───────────────────────────────────────────────────────────── */
.pp-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--pp-bg-tertiary);
  border-radius: var(--pp-radius);
}

.pp-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / .6) 50%,
    transparent 100%
  );
  animation: pp-shimmer 1.5s infinite;
}

@media (prefers-color-scheme: dark) {
  .pp-skeleton::after {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(255 255 255 / .08) 50%,
      transparent 100%
    );
  }
}

/* Grid loading overlay */
.pp-grid.is-loading,
.pp-masonry.is-loading,
.pp-list.is-loading {
  position: relative;
  pointer-events: none;
}

.pp-grid.is-loading::after,
.pp-masonry.is-loading::after,
.pp-list.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / .7);
  border-radius: var(--pp-radius);
  z-index: var(--pp-z-overlay);
  backdrop-filter: blur(2px);
}

@media (prefers-color-scheme: dark) {
  .pp-grid.is-loading::after,
  .pp-masonry.is-loading::after,
  .pp-list.is-loading::after {
    background: rgb(15 23 42 / .7);
  }
}

/* ─────────────────────────────────────────────────────────────
   12. ANIMATIONS
───────────────────────────────────────────────────────────── */
@keyframes pp-spin {
  to { transform: rotate(360deg); }
}

@keyframes pp-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes pp-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pp-zoom-in {
  from {
    opacity: 0;
    transform: scale(.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pp-slide-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation classes applied by JS */
.pp-anim-fade  .pp-item,
.pp-anim-fade  .pp-item-list { animation: pp-fade-up var(--pp-duration-slow) var(--pp-ease-out) both; }

.pp-anim-zoom  .pp-item,
.pp-anim-zoom  .pp-item-list { animation: pp-zoom-in var(--pp-duration-slow) var(--pp-ease-out) both; }

.pp-anim-slide .pp-item,
.pp-anim-slide .pp-item-list { animation: pp-slide-left var(--pp-duration-slow) var(--pp-ease-out) both; }

/* Stagger (up to 12 items, then constant) */
.pp-item:nth-child(1),  .pp-item-list:nth-child(1)  { animation-delay: .04s; }
.pp-item:nth-child(2),  .pp-item-list:nth-child(2)  { animation-delay: .08s; }
.pp-item:nth-child(3),  .pp-item-list:nth-child(3)  { animation-delay: .12s; }
.pp-item:nth-child(4),  .pp-item-list:nth-child(4)  { animation-delay: .16s; }
.pp-item:nth-child(5),  .pp-item-list:nth-child(5)  { animation-delay: .20s; }
.pp-item:nth-child(6),  .pp-item-list:nth-child(6)  { animation-delay: .24s; }
.pp-item:nth-child(7),  .pp-item-list:nth-child(7)  { animation-delay: .28s; }
.pp-item:nth-child(8),  .pp-item-list:nth-child(8)  { animation-delay: .32s; }
.pp-item:nth-child(9),  .pp-item-list:nth-child(9)  { animation-delay: .36s; }
.pp-item:nth-child(10), .pp-item-list:nth-child(10) { animation-delay: .40s; }
.pp-item:nth-child(11), .pp-item-list:nth-child(11) { animation-delay: .44s; }
.pp-item:nth-child(n+12),.pp-item-list:nth-child(n+12) { animation-delay: .48s; }

/* ─────────────────────────────────────────────────────────────
   13. SINGLE PROJECT PAGE
───────────────────────────────────────────────────────────── */
.pp-single-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding: 2rem 1.5rem 4rem;
}

/* Breadcrumb */
.pp-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: var(--pp-font-size-sm);
  color: var(--pp-text-muted);
}

.pp-breadcrumb a {
  color: var(--pp-text-muted);
  text-decoration: none;
  transition: color var(--pp-transition-fast);
}

.pp-breadcrumb a:hover {
  color: var(--pp-primary);
}

.pp-breadcrumb svg {
  width: 14px;
  height: 14px;
  color: var(--pp-gray-300);
}

/* Hero */
.pp-single-hero {
  position: relative;
  margin-bottom: var(--pp-gap-xl);
}

.pp-single-header {
  padding: 2.5rem 0 2rem;
}

.pp-single-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: 1.25rem;
}

.pp-single-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: var(--pp-line-height-tight);
  color: var(--pp-text);
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}

.pp-single-subtitle {
  font-size: var(--pp-font-size-lg);
  color: var(--pp-text-muted);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 2rem;
}

.pp-single-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
}

/* Hero image */
.pp-single-image-wrap {
  position: relative;
  border-radius: var(--pp-radius-xl);
  overflow: hidden;
  box-shadow: var(--pp-shadow-xl);
  aspect-ratio: 16 / 7;
  background: var(--pp-bg-tertiary);
  margin-bottom: var(--pp-gap-xl);
}

.pp-single-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay on hero image */
.pp-single-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgb(0 0 0 / .15) 100%
  );
  pointer-events: none;
}

/* Content layout */
.pp-single-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3.5rem;
  align-items: start;
}

/* Main content */
.pp-single-content {
  min-width: 0;
}

.pp-entry-content {
  font-size: var(--pp-font-size-base);
  line-height: 1.8;
  color: var(--pp-text);
}

.pp-entry-content h2,
.pp-entry-content h3,
.pp-entry-content h4 {
  font-weight: 700;
  line-height: var(--pp-line-height-snug);
  margin-top: 2em;
  margin-bottom: .75em;
  color: var(--pp-text);
}

.pp-entry-content h2 { font-size: var(--pp-font-size-2xl); }
.pp-entry-content h3 { font-size: var(--pp-font-size-xl); }
.pp-entry-content h4 { font-size: var(--pp-font-size-lg); }

.pp-entry-content p {
  margin-bottom: 1.5em;
}

.pp-entry-content a {
  color: var(--pp-primary);
  text-decoration: underline;
  text-decoration-color: var(--pp-primary-light);
  text-underline-offset: 3px;
  transition: color var(--pp-transition-fast);
}

.pp-entry-content a:hover {
  color: var(--pp-primary-dark);
}

.pp-entry-content ul,
.pp-entry-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5em;
  list-style: revert;
}

.pp-entry-content li {
  margin-bottom: .5em;
}

.pp-entry-content blockquote {
  border-left: 4px solid var(--pp-primary);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--pp-primary-xlight);
  border-radius: 0 var(--pp-radius-sm) var(--pp-radius-sm) 0;
  font-style: italic;
  color: var(--pp-gray-700);
}

.pp-entry-content img {
  border-radius: var(--pp-radius);
  max-width: 100%;
}

.pp-entry-content code {
  background: var(--pp-bg-tertiary);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xs);
  padding: .1em .4em;
  font-size: .875em;
  font-family: ui-monospace, monospace;
}

/* Gallery */
.pp-single-gallery {
  margin-top: 3rem;
}

.pp-gallery-heading {
  font-size: var(--pp-font-size-xl);
  font-weight: 700;
  color: var(--pp-text);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .625rem;
}

.pp-gallery-heading svg {
  width: 22px;
  height: 22px;
  color: var(--pp-primary);
}

.pp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .875rem;
}

.pp-gallery-item {
  position: relative;
  border-radius: var(--pp-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pp-bg-tertiary);
  display: block;
  cursor: pointer;
}

.pp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pp-duration-slow) var(--pp-ease);
}

.pp-gallery-item:hover img {
  transform: scale(1.06);
}

.pp-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--pp-transition);
}

.pp-gallery-item:hover .pp-gallery-item-overlay {
  opacity: 1;
}

.pp-gallery-item-overlay svg {
  width: 32px;
  height: 32px;
  color: var(--pp-white);
}

/* Sidebar */
.pp-single-sidebar {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Detail card */
.pp-detail-card {
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow-sm);
  overflow: hidden;
}

.pp-detail-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-bg-secondary);
}

.pp-detail-card-title {
  font-size: var(--pp-font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pp-text-muted);
}

.pp-detail-list {
  padding: .5rem 0;
}

.pp-detail-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1rem;
  align-items: start;
  padding: .875rem 1.5rem;
  border-bottom: 1px solid var(--pp-border);
  transition: background var(--pp-transition-fast);
}

.pp-detail-row:last-child {
  border-bottom: none;
}

.pp-detail-row:hover {
  background: var(--pp-bg-secondary);
}

.pp-detail-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-primary-xlight);
  color: var(--pp-primary);
  flex-shrink: 0;
}

.pp-detail-icon svg {
  width: 16px;
  height: 16px;
}

.pp-detail-content {}

.pp-detail-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pp-text-muted);
  margin-bottom: .2rem;
}

.pp-detail-value {
  font-size: var(--pp-font-size-sm);
  font-weight: 500;
  color: var(--pp-text);
}

.pp-detail-value a {
  color: var(--pp-primary);
  text-decoration: none;
}

.pp-detail-value a:hover {
  text-decoration: underline;
}

/* CTA card */
.pp-cta-card {
  background: linear-gradient(135deg, var(--pp-primary) 0%, var(--pp-accent) 100%);
  border-radius: var(--pp-radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  box-shadow: var(--pp-shadow-primary);
}

.pp-cta-title {
  font-size: var(--pp-font-size-base);
  font-weight: 700;
  color: var(--pp-white);
  line-height: var(--pp-line-height-snug);
}

.pp-cta-desc {
  font-size: var(--pp-font-size-sm);
  color: rgb(255 255 255 / .8);
  line-height: 1.6;
}

/* Back nav */
.pp-back-nav {
  display: flex;
  align-items: center;
}

.pp-back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--pp-text-muted);
  font-size: var(--pp-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  padding: .5rem .875rem;
  border-radius: var(--pp-radius-full);
  border: 1px solid var(--pp-border);
  background: var(--pp-bg);
  transition:
    color         var(--pp-transition-fast),
    border-color  var(--pp-transition-fast),
    background    var(--pp-transition-fast),
    transform     var(--pp-transition-fast);
}

.pp-back-link:hover {
  color: var(--pp-primary);
  border-color: var(--pp-primary-light);
  background: var(--pp-primary-xlight);
  transform: translateX(-3px);
}

.pp-back-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--pp-transition-fast);
}

.pp-back-link:hover svg {
  transform: translateX(-3px);
}

/* Related projects */
.pp-related {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--pp-border);
}

.pp-related-heading {
  font-size: var(--pp-font-size-2xl);
  font-weight: 800;
  color: var(--pp-text);
  margin-bottom: 1.75rem;
  letter-spacing: -.01em;
}

.pp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pp-gap);
}

/* ─────────────────────────────────────────────────────────────
   14. RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────────────── */

/* Large screens: cap 5-6 column grids */
@media (max-width: 1400px) {
  .pp-grid-cols-6 { --pp-cols: 5; }
  .pp-masonry-cols-6 { --pp-cols: 5; }
}

@media (max-width: 1200px) {
  .pp-grid-cols-5,
  .pp-grid-cols-6 { --pp-cols: 4; }
  .pp-masonry-cols-5,
  .pp-masonry-cols-6 { --pp-cols: 4; }

  .pp-single-layout {
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
  }

  .pp-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .pp-grid-cols-4,
  .pp-grid-cols-5,
  .pp-grid-cols-6 { --pp-cols: 3; }
  .pp-masonry-cols-4,
  .pp-masonry-cols-5,
  .pp-masonry-cols-6 { --pp-cols: 3; }

  .pp-single-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .pp-single-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .pp-back-nav {
    grid-column: 1 / -1;
  }

  .pp-single-image-wrap {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .pp-grid-cols-3,
  .pp-grid-cols-4,
  .pp-grid-cols-5,
  .pp-grid-cols-6 { --pp-cols: 2; }
  .pp-masonry-cols-3,
  .pp-masonry-cols-4,
  .pp-masonry-cols-5,
  .pp-masonry-cols-6 { --pp-cols: 2; }

  /* List layout goes stacked */
  .pp-item-list {
    grid-template-columns: 1fr;
  }

  .pp-item-list-image {
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }

  .pp-item-list-body {
    padding: 1.375rem;
  }

  .pp-single-sidebar {
    grid-template-columns: 1fr;
  }

  .pp-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pp-related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .pp-grid-cols-2,
  .pp-grid-cols-3,
  .pp-grid-cols-4,
  .pp-grid-cols-5,
  .pp-grid-cols-6 { --pp-cols: 1; }
  .pp-masonry-cols-2,
  .pp-masonry-cols-3,
  .pp-masonry-cols-4,
  .pp-masonry-cols-5,
  .pp-masonry-cols-6 { --pp-cols: 1; }

  .pp-single-wrap {
    padding: 1rem 1rem 3rem;
  }

  .pp-gallery-grid {
    grid-template-columns: 1fr;
  }

  .pp-single-image-wrap {
    border-radius: var(--pp-radius-lg);
    aspect-ratio: 4 / 3;
  }
}

/* ─────────────────────────────────────────────────────────────
   15. ACCESSIBILITY
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pp-portfolio-wrap *,
  .pp-portfolio-wrap *::before,
  .pp-portfolio-wrap *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast */
@media (forced-colors: active) {
  .pp-filter-btn.is-active,
  .pp-page-btn.is-current,
  .pp-btn-primary {
    forced-color-adjust: none;
  }
}

/* Skip link (if theme doesn't provide one) */
.pp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─────────────────────────────────────────────────────────────
   ARCHIVE PAGE
───────────────────────────────────────────────────────────── */
.pp-archive-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding: 2rem 1.5rem 5rem;
}

.pp-archive-header {
  padding: 2.5rem 0 2.5rem;
  margin-bottom: 1rem;
}

.pp-archive-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--pp-font-size-sm);
  color: var(--pp-text-muted);
  margin-bottom: 1rem;
}

.pp-archive-breadcrumb a {
  color: var(--pp-text-muted);
  text-decoration: none;
  transition: color var(--pp-transition-fast);
}

.pp-archive-breadcrumb a:hover {
  color: var(--pp-primary);
}

.pp-archive-breadcrumb svg {
  color: var(--pp-gray-300);
  flex-shrink: 0;
}

.pp-archive-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: var(--pp-line-height-tight);
  color: var(--pp-text);
  margin-bottom: .75rem;
}

.pp-archive-desc {
  font-size: var(--pp-font-size-lg);
  color: var(--pp-text-muted);
  max-width: 640px;
  line-height: 1.6;
  margin-bottom: .75rem;
}

.pp-archive-count {
  font-size: var(--pp-font-size-sm);
  color: var(--pp-text-muted);
  font-weight: 500;
}

@media (max-width: 600px) {
  .pp-archive-wrap {
    padding: 1rem 1rem 3rem;
  }
}