/* Portfolio additions inherit Nayel's light surfaces, magenta and cyan accents. */
.pg-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.pg-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #dce4e9; border-radius:1.1rem; background:#fff; color:#172f49; transition:border-color .2s,box-shadow .2s,transform .2s; }
.pg-card:hover { border-color:var(--cyan,#06b6d4); box-shadow:0 14px 40px -24px #172f4966; transform:translateY(-3px); }
.pg-card-media { background:#f3f6f8; padding:1rem; border-bottom:1px solid #e4eaf0; }
.pg-card-media img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:.55rem; }
.pg-card-copy { padding:1.75rem; flex:1; display:flex; flex-direction:column; }
.pg-card-meta { display:flex; justify-content:space-between; color:#087e93; font-size:.85rem; font-weight:700; margin-bottom:1rem; }
.pg-card-meta span:first-child { background:#eef9fb; padding:.3rem .75rem; border-radius:2rem; }
.pg-card-meta span:last-child { color:#738497; padding:.3rem 0; }
.projects-gallery .pg-card h2 { font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-.035em; }
.projects-gallery .pg-category { color:#087e93; font-weight:650; margin:.35rem 0 .65rem; font-size:.9rem; }
.pg-card-copy > p:not(.pg-category) { margin:0 0 1.5rem; }
.pg-card-action { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:1.1rem; border-top:1px solid #e4eaf0; font-weight:700; }
.pg-card-action > span:last-child { background:#c41565; color:white; border-radius:50%; width:2.5rem; height:2.5rem; display:grid; place-items:center; }
.pg-overview-frame { aspect-ratio:16/9; height:auto!important; background:#f3f6f8; }
.pg-overview-frame img { width:100%!important; height:100%!important; object-fit:contain!important; display:block; }
.pg-roles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.pg-role { background:#fff; border:1px solid #dce4e9; border-top:3px solid #06b6d4; border-radius:.8rem; padding:1.5rem; }
.pg-role h3 { color:#172f49; font-size:1.05rem; font-weight:750; margin:0 0 .7rem; }
.pg-role p { font-size:.95rem; color:#526274; line-height:1.7; margin:0; }
.pg-screens { background:#f8fafc; scroll-margin-top:7rem; }
.pg-shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.pg-shot { min-width:0; display:flex; flex-direction:column; background:#fff; border:1px solid #dce4e9; border-radius:1rem; overflow:hidden; }
.pg-shot-open { display:block; position:relative; padding:.7rem; background:#edf2f5; }
.pg-shot-open img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:.4rem; }
.pg-shot-expand { position:absolute; inset-inline-end:1rem; bottom:1rem; background:#c41565; color:#fff; width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; box-shadow:0 2px 10px #172f4933; }
.pg-shot-copy { padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.pg-shot-number { font-size:.8rem; color:#087e93; font-weight:700; margin-bottom:.5rem; }
.pg-shot-copy h3 { color:#172f49; font-size:1.2rem; font-weight:750; line-height:1.35; margin:0 0 .8rem; }
.pg-shot-copy p { color:#526274; line-height:1.7; font-size:.95rem; margin:0 0 1.1rem; }
.pg-shot-copy a { color:#a71054; font-weight:700; margin-top:auto; text-decoration:underline; text-underline-offset:.25rem; }
.pg-preview-note { color:#657586; font-size:.85rem; text-align:center; margin:1.5rem 0 0; }
.pg-viewer { margin:auto; padding:1.25rem; width:min(1280px,94vw); max-height:94dvh; border:1px solid #dce4e9; border-radius:1rem; background:white; color:#172f49; overflow:auto; }
.pg-viewer::backdrop { background:rgb(11 31 58 / .78); }
.pg-viewer-head,.pg-viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pg-viewer h2 { font-size:1.25rem; line-height:1.4; font-weight:700; margin:0; }
.pg-viewer button { font:inherit; color:#172f49; border:1px solid #cdd9e2; background:#f8fafc; border-radius:.6rem; padding:.65rem 1rem; cursor:pointer; min-height:44px; }
.pg-viewer button:hover { border-color:#06b6d4; background:#edf9fc; }
.pg-viewer-image { display:block; width:100%; height:auto; max-height:68dvh; object-fit:contain; margin:1.2rem 0; }
.pg-full-image { display:block; text-align:center; margin-top:1rem; color:#a71054; text-decoration:underline; text-underline-offset:.2rem; }
:is(.pg-card,.pg-shot-open,.pg-shot-copy a,.pg-viewer button,.pg-full-image):focus-visible { outline:3px solid #087e93; outline-offset:4px; }
@media(max-width:1000px) { .pg-roles { grid-template-columns:repeat(2,minmax(0,1fr)); } .pg-shots { gap:1rem; } .pg-shot-copy { padding:1rem; } }
@media(max-width:760px) { .pg-grid,.pg-shots { grid-template-columns:1fr; } .pg-grid { gap:1.5rem; } .pg-card-copy { padding:1.4rem; } .pg-card-media { padding:.65rem; } .pg-shot { max-width:580px; width:100%; margin-inline:auto; } .pg-viewer { padding:.8rem; } .pg-viewer h2 { font-size:1rem; } }
@media(max-width:450px) { .pg-roles { grid-template-columns:1fr; } .pg-viewer button { padding:.6rem .7rem; } }
@media(prefers-reduced-motion:reduce) { .pg-card { transition:none; } .pg-card:hover { transform:none; } }

/* Arabic and Urdu project copy: logical alignment and room for longer translations. */
html[dir="rtl"] :is(.projects-gallery,.project-detail,.pg-viewer) { direction:rtl; }
html[dir="rtl"] :is(.pg-card-copy,.pg-role,.pg-shot-copy,.pg-viewer-head) { text-align:start; }
html[dir="rtl"] :is(.projects-gallery,.project-detail,.pg-viewer) :is(h1,h2,h3,p,span,a,button) { letter-spacing:0; }
html[dir="rtl"] :is(.pg-card h2,.pg-role h3,.pg-shot-copy h3,.pg-viewer h2) { line-height:1.65; }
html[lang="ur"] :is(.pg-card-copy,.pg-role,.pg-shot-copy) p { line-height:2; }
html[dir="rtl"] .pg-card-action > span:last-child { transform:scaleX(-1); }
.pg-viewer-image,.pg-shot-open img,.pg-card-media img { direction:ltr; }

/* University AI showcase uses the existing light website surfaces. */
.ubt-stack { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem; }
.pg-card--featured { grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center; }
.pg-card--featured .pg-card-copy { min-width:0; }
@media(max-width:1000px){.ubt-stack{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.pg-card--featured,.ubt-stack{grid-template-columns:1fr;}}