/* Projects mosaic — ported from design/mockup.html (.projects, .proj).

   The mockup sizes tiles by :nth-child. Here each tile carries its own size
   class instead, so reordering or adding projects in the admin cannot
   accidentally break the mosaic. */

.section--projects{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:250px;gap:16px}
.proj{position:relative;overflow:hidden;background:linear-gradient(160deg,#2B2F37,#1A1D23);margin:0}
.proj--tall{grid-row:span 2}
.proj--wide{grid-column:span 2}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj .tag{position:absolute;left:18px;bottom:18px;background:rgba(20,22,27,.85);color:#fff;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;z-index:2}
.proj .ph-label{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.22);font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:14px}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,22,27,.55));opacity:0;transition:opacity .25s}
.proj:hover::after{opacity:1}

@media(max-width:720px){
  .proj-grid{grid-template-columns:1fr}
  .proj--tall{grid-row:auto}
  .proj--wide{grid-column:auto}
}