/* Project gallery: real work first, optional filters and screenshot previews. */
.portfolio-section { padding-top: var(--space-2xl); }
.portfolio-toolbar:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.portfolio-filters, .preview-switch { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.portfolio-filters button, .preview-switch button { padding: var(--space-sm) var(--space-lg); border-radius: var(--border-radius-pill); min-height: 44px; color: var(--color-text-secondary); transition: background var(--transition-base),color var(--transition-base); }
.portfolio-filters button:hover, .preview-switch button:hover { background: var(--color-project-surface); }
.portfolio-filters button[aria-pressed='true'], .preview-switch button[aria-pressed='true'] { background: var(--color-primary); color: var(--color-on-dark); }
.portfolio-count { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap: var(--space-3xl) var(--space-xl); }
.project-card { min-width: 0; scroll-margin-top: calc(var(--header-height) + var(--space-xl)); }
.project-card[hidden] { display: none; }
.project-visual { position: relative; padding: var(--space-xl); border-radius: var(--border-radius-lg); background: var(--color-project-surface); overflow: hidden; }
.project-card:nth-child(even) .project-visual { background: var(--color-project-warm); }
.project-visual > img { width: 100%; height: auto; aspect-ratio: 1.44; object-fit: cover; object-position: top; border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); transition: transform var(--transition-slow) var(--ease-out); }
.project-visual:hover > img, .project-visual:focus-within > img { transform: scale(1.025); }
.project-preview:not([hidden]) { display: inline-flex; gap: var(--space-md); align-items: center; position: absolute; bottom: var(--space-md); right: var(--space-md); min-height: 44px; padding: var(--space-sm) var(--space-lg); border-radius: var(--border-radius-pill); background: var(--color-primary); color: var(--color-on-dark); font-size: var(--font-size-sm); box-shadow: var(--shadow-md); }
.project-copy { padding-top: var(--space-lg); }
.project-copy h2 { font-size: var(--font-size-xl); margin-block: var(--space-xs) var(--space-sm); }
.project-copy > p:not(.project-category) { color: var(--color-text-secondary); max-width: 55ch; }
.project-category { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.case__link { display: inline-block; min-height: 44px; margin-top: var(--space-sm); padding-block: var(--space-xs); font-size: var(--font-size-sm); color: var(--color-primary); text-underline-offset: .3em; overflow-wrap: anywhere; }
.case__link::after { content: ' ↗'; }
.project-development { min-height: 18rem; display: flex; flex-direction: column; justify-content: center; align-items: start; gap: var(--space-md); padding: var(--space-2xl); border-radius: var(--border-radius-lg); background: var(--color-primary); color: var(--color-on-dark); }
.project-development p { font-size: var(--font-size-2xl); font-family: var(--font-heading); }
.project-development > span:last-child { max-width: 30ch; color: var(--color-on-dark-muted); }
.development-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-gold); }
.project-dialog { position: fixed; inset: 0; margin: auto; width: min(1100px,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); border: 0; border-radius: var(--border-radius-lg); padding: var(--space-xl); background: var(--color-ivory); color: var(--color-text); overflow-y: auto; overscroll-behavior: contain; }
.project-dialog::backdrop { background: rgba(9,28,23,.8); backdrop-filter: blur(8px); }
.preview-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); }
.preview-header h2 { font-size: var(--font-size-xl); }
.preview-close { display: inline-flex; align-items: center; gap: var(--space-md); min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--border-radius-pill); background: var(--color-project-surface); flex-shrink: 0; }
.preview-close span { font-size: var(--font-size-xl); }
.preview-switch { margin-block: var(--space-lg); }
.preview-canvas { display: grid; place-items: start center; padding: var(--space-lg); background: var(--color-project-surface); border-radius: var(--border-radius-md); }
.preview-canvas img { width: 100%; height: auto; border-radius: var(--border-radius-sm); box-shadow: var(--shadow-md); }
.preview-canvas.is-mobile img { width: min(390px,100%); }
.preview-note { margin-top: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
@media (max-width: 700px) {
  .portfolio-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-2xl); }
  .portfolio-toolbar:not([hidden]) { margin-bottom: var(--space-xl); }
  .portfolio-filters button { padding-inline: var(--space-sm); font-size: var(--font-size-sm); }
  .project-visual { padding: var(--space-lg); }
  .project-dialog { padding: var(--space-md); }
  .preview-header { align-items: start; }
  .preview-header h2 { font-size: var(--font-size-base); }
  .preview-canvas { padding: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .project-visual > img { transition: none; transform: none !important; }
}

.project-copy p, .project-development { overflow-wrap: break-word; }
.project-development > * { min-width: 0; max-width: 100%; }
.project-development p, .project-development > span:last-child { width: 100%; max-width: 100%; }
@media (max-width: 700px) { .project-development { padding: var(--space-lg); } }