/* Photographic magazine layout, shared visual language with home projects. */
.portfolio-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-flow: row; gap: 16px; }
.portfolio-grid .portfolio-card { display: block; grid-column: auto; grid-row: auto; min-width: 0; padding: 0; border: 0; border-radius: 14px; background: #252137; box-shadow: none; aspect-ratio: 4 / 5; }
.portfolio-grid .portfolio-card:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.portfolio-grid .portfolio-card:only-child { aspect-ratio: 4 / 5; max-width: 640px; width: 100%; }
.portfolio-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.portfolio-grid:has(> :nth-child(2):last-child) .portfolio-card:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
.portfolio-grid .portfolio-card .portfolio-card-media,
.portfolio-grid .portfolio-card .portfolio-card-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; min-height: 0; aspect-ratio: auto; border-radius: inherit; }
.portfolio-grid .portfolio-card-media img { width: 100%; height: 100%; object-fit: contain; }
.portfolio-card:hover .portfolio-card-media img { transform: none; }
.portfolio-card::after { display: block; z-index: 1; background: linear-gradient(180deg,#14112320,transparent 35%,#14112324 50%,#141123eb); }
.portfolio-grid .portfolio-card .portfolio-card-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; height: auto; padding: clamp(14px,2vw,26px); gap: 10px; }
.portfolio-project-number, .portfolio-card-open { display: none; }
.portfolio-card-badge { min-height: 26px; padding: 5px 10px; border: 1px solid #ffffff40; border-radius: 20px; background: #30265d70; color: #fff; font-size: .7rem; line-height: 1.4; backdrop-filter: blur(8px); }
.portfolio-card-copy { align-self: stretch; display: grid; gap: 8px; margin-top: auto; }
.portfolio-grid .portfolio-card-title { color: #fff; font-size: clamp(1rem,1.6vw,1.3rem); line-height: 1.5; text-shadow: 0 2px 12px #0005; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.portfolio-grid .portfolio-card:first-child .portfolio-card-title { font-size: clamp(1.4rem,2.8vw,2.2rem); }
.portfolio-grid .portfolio-card-description { color: #ffffffe0; font-size: .82rem; line-height: 1.75; -webkit-line-clamp: 2; }
.portfolio-card-meta { display: block; max-width: 100%; min-height: 0; padding: 0; border-radius: 0; background: none; color: #f3df57; font-size: .72rem; line-height: 1.6; font-weight: 700; box-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px #29213d18; }
@media (min-width: 761px) {
    .portfolio-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .portfolio-grid:has(> :nth-child(4):last-child) .portfolio-card:nth-child(2) { grid-row: span 2; aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-card { transition: none; } .portfolio-card:hover { transform: none; } }
@media (max-width: 760px) {
    .portfolio-grid, .portfolio-grid:has(> :nth-child(2):last-child) { max-width: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .portfolio-grid .portfolio-card { aspect-ratio: 4 / 5; border-radius: 12px; }
    .portfolio-grid .portfolio-card:first-child, .portfolio-grid:has(> :nth-child(2):last-child) .portfolio-card:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; max-width: none; }
    .portfolio-grid .portfolio-card:nth-child(3n+1) { grid-column: 1 / -1; }
    .portfolio-grid:has(> :nth-child(2):last-child) .portfolio-card:last-child { grid-column: 1 / -1; }
    .portfolio-grid .portfolio-card .portfolio-card-body { padding: 12px; gap: 6px; }
    .portfolio-grid .portfolio-card:first-child .portfolio-card-body { padding: 20px; gap: 10px; }
    .portfolio-grid .portfolio-card-title { font-size: .86rem; line-height: 1.55; }
    .portfolio-grid .portfolio-card:first-child .portfolio-card-title { font-size: clamp(1.3rem,5.3vw,1.8rem); }
    .portfolio-grid .portfolio-card-description { display: none; }
    .portfolio-grid .portfolio-card:first-child .portfolio-card-description { display: -webkit-box; font-size: .83rem; }
    .portfolio-card-badge { font-size: .62rem; min-height: 0; padding: 4px 7px; }
    .portfolio-card-meta { font-size: .64rem; }
    .portfolio-grid .portfolio-card:first-child .portfolio-card-meta { font-size: .75rem; }
}