/* Compact project index. Full-sized media belongs in the existing galleries. */
#projects { counter-reset:project-chapter; }
#projects .projects__group { margin:0 0 44px; scroll-margin-top:18px; }
#projects .projects__group:last-child { margin-bottom:0; }
#projects .projects__group-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; position:relative; margin-bottom:18px; padding:0 0 14px 36px; border-bottom:1px solid var(--border-light); counter-increment:project-chapter; }
#projects .projects__group-head::before { content:'0' counter(project-chapter); position:absolute; left:0; top:4px; color:var(--accent-text); font-size:12px; font-variant-numeric:tabular-nums; }
#projects .projects__group-title { margin:0; font-size:20px; letter-spacing:-.025em; }
#projects .projects__group-desc { margin:0; font-size:13px; line-height:1.5; color:var(--text-muted); }
#projects .projects__grid--apps,#projects .projects__grid--wide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
#projects .showcase-card { grid-column:auto; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; min-width:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--bg-card); }
#projects .showcase-card .project-card__visual { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:224px; min-height:0; padding:14px; background:radial-gradient(ellipse at 50% 60%,rgba(82,109,213,.13),transparent 80%),var(--bg-secondary); overflow:hidden; border-bottom:1px solid var(--border); }
#projects .showcase-card .project-card__info { display:flex; flex-direction:column; align-items:flex-start; flex:1; width:100%; padding:20px; margin:0; gap:0; order:0; }
#projects .showcase-card .project-card__eyebrow { min-height:20px; margin-bottom:9px; }
#projects .showcase-card .status { padding:0; border:0; background:none; font-size:12px; letter-spacing:.04em; }
#projects .showcase-card .project-card__name { margin:0 0 8px; font-size:24px; line-height:1.15; letter-spacing:-.035em; font-weight:650; }
#projects .showcase-card .showcase-story { margin:0 0 14px; color:var(--text-secondary); font-size:14px; line-height:1.55; max-width:46ch; }
#projects .showcase-card .project-card__expand { display:inline-flex; align-items:center; min-height:40px; padding:0; margin-top:auto; border:0; background:transparent; border-radius:4px; font-size:13px; font-weight:600; color:var(--accent-text); }
#projects .showcase-card .project-card__expand::after { content:'↗'; margin-left:12px; }
#projects .showcase-card .project-card__expand:hover { color:var(--accent-hover); }
#projects .showcase-card .project-card__links { margin:0 0 10px; gap:4px; }
#projects .showcase-card .project-card__link { width:40px; height:40px; }
#projects .showcase-card .project-card__link svg { width:16px; height:16px; }
.card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:auto; }
#projects .showcase-card .card-actions .project-card__links,#projects .showcase-card .card-actions .project-card__expand { margin:0; }
#projects .showcase-card .card-actions .project-card__links { order:2; }
#projects .showcase-card[data-project='portfolio-3d'] .card-actions .project-card__expand { order:3; }

/* Uniform stages keep whole cards visible on ordinary laptop screens. */
#projects .showcase-card .phone-mockup { position:relative; display:block; flex:none; height:194px; width:auto; aspect-ratio:600/1300; padding:0; margin:0; transform:none; border:3px solid #303542; border-radius:14px; overflow:hidden; background:#0b101b; box-shadow:0 12px 24px -12px #0008; }
#projects .showcase-card .phone-mockup::before { display:none; }
#projects .showcase-card .phone-mockup img.device-screen { display:block; width:100%; height:100%; object-fit:contain; border-radius:0; }
#projects .showcase-card .project-media { width:100%; height:100%; padding:0; margin:0; border:0; border-radius:8px; background:transparent; }
#projects .showcase-card .project-media__chrome { display:none; }
#projects .showcase-card .project-media__viewport { width:100%; height:100%; aspect-ratio:auto; }
#projects .showcase-card .project-media__viewport img.device-screen { width:100%; height:100%; object-fit:contain; object-position:center; }
#projects .showcase-card .showcase-media-label { display:none; }
#projects .showcase-card .phone-controls { position:absolute; z-index:3; right:10px; bottom:10px; display:flex; align-items:center; gap:4px; width:auto; margin:0; padding:2px; border:1px solid #ffffff26; border-radius:30px; background:#11151de8; color:#eef0f5; backdrop-filter:blur(12px); }
#projects .showcase-card .phone-controls button { width:36px; height:36px; border:0; background:transparent; color:#eef0f5; }
#projects .showcase-card .phone-controls__count { min-width:32px; font-size:12px; color:#c2cad8; }
#projects .showcase-card .phone-caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
#projects .showcase-card .media-note--archival { position:absolute; top:12px; left:12px; max-width:70px; margin:0; padding:0; text-align:left; font-size:12px; line-height:1.45; color:var(--text-muted); }
#projects .showcase-card .showcase-thumbnails { display:none; }

/* One featured app, followed by a compact three-project row. */
#projects .showcase-card--flagship { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; align-items:center; background:radial-gradient(ellipse at 90% 30%,rgba(78,104,216,.10),transparent 75%),var(--bg-card); }
#projects .showcase-card--flagship .project-card__info { grid-column:1; grid-row:1; padding:30px 36px; }
#projects .showcase-card--flagship .project-card__name { font-size:40px; }
#projects .showcase-card--flagship .showcase-story { font-size:16px; max-width:36ch; }
#projects .showcase-card--flagship .project-card__visual { grid-column:2; grid-row:1; height:380px; width:100%; padding:22px; border:0; background:radial-gradient(ellipse at 55% 45%,rgba(85,112,228,.16),transparent 72%); }
#projects .showcase-card--flagship .showcase-phone { position:absolute; height:316px; width:auto; right:16%; top:24px; transform:rotate(3deg); z-index:2; border-radius:18px; }
.showcase-companion { position:absolute; height:276px; width:auto; aspect-ratio:600/1300; left:14%; top:61px; transform:rotate(-5deg); border:3px solid #303542; border-radius:16px; overflow:hidden; box-shadow:0 15px 30px -14px #0009; pointer-events:none; }
.showcase-companion img { display:block; width:100%; height:100%; object-fit:contain; }
#projects .showcase-card--flagship .phone-controls { bottom:12px; right:12px; }
.showcase-metrics { display:flex; gap:30px; width:100%; margin:3px 0 15px; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.showcase-metrics div { display:flex; flex-direction:column-reverse; gap:4px; }
.showcase-metrics dt { font-size:12px; color:var(--text-muted); }
.showcase-metrics dd { font-size:25px; font-weight:650; letter-spacing:-.035em; line-height:1.1; }
.showcase-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
#projects .showcase-actions .project-card__expand,#projects .showcase-actions .project-card__links { margin:0; }
#projects .showcase-actions .project-card__expand { min-height:42px; padding:0 16px; border:1px solid var(--border-light); border-radius:24px; color:var(--text); }

/* Trainer uses the width for image + copy, instead of a giant vertical image. */
#projects .showcase-card[data-project='trainer'] { display:grid; grid-template-columns:1.4fr 1fr; align-items:stretch; }
#projects .showcase-card[data-project='trainer'] .project-card__visual { height:304px; padding:16px; border-bottom:0; border-right:1px solid var(--border); }
#projects .showcase-card[data-project='trainer'] .project-card__info { justify-content:center; padding:28px 32px; }
#projects .showcase-card[data-project='trainer'] .project-card__name { font-size:30px; }
#projects .showcase-card[data-project='trainer'] .project-card__expand { margin-top:0; }
#projects .showcase-card--client .showcase-client { height:224px; }
#projects .showcase-client__mark { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.showcase-client__mark>span { font-size:66px; font-weight:700; letter-spacing:-.07em; }
.showcase-client__mark p { font-size:12px; color:var(--text-muted); }
#projects .showcase-card--client .phone-controls { display:none; }
#projects .showcase-card .experience-launch { display:inline-flex; align-items:center; gap:12px; min-height:40px; padding:0; margin:0; border:0; background:transparent; color:var(--accent-text); font:600 13px var(--font); justify-self:start; }
#projects .showcase-card[data-project='portfolio-3d'] .project-card__expand { min-height:32px; font-weight:400; font-size:12px; color:var(--text-muted); margin-top:2px; }

@media(min-width:901px) {
 #projects .showcase-card--flagship:hover .showcase-phone { transform:rotate(1deg); }
 #projects .showcase-card--flagship:hover .showcase-companion { transform:rotate(-3deg); }
}
@media(min-width:701px) and (max-width:1000px) {
 #projects .projects__grid--apps,#projects .projects__grid--wide { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #projects .showcase-card--client { grid-column:1/-1; display:grid; grid-template-columns:150px 1fr; }
 #projects .showcase-card--client .showcase-client { height:100%; min-height:170px; }
 #projects .showcase-client__mark p { max-width:100px; text-align:center; }
 #projects .showcase-card--flagship .project-card__info { padding:24px; }
 #projects .showcase-card--flagship .showcase-phone { height:285px; right:8%; }
 .showcase-companion { height:252px; left:5%; top:65px; }
}
@media(max-width:700px) {
 #projects .projects__grid--apps,#projects .projects__grid--wide { grid-template-columns:1fr; gap:18px; }
 #projects .projects__group { margin-bottom:32px; }
 #projects .projects__group-head { display:block; padding-left:28px; margin-bottom:16px; }
 #projects .projects__group-desc { margin-top:6px; max-width:40ch; }
 #projects .showcase-card--flagship { display:flex; }
 #projects .showcase-card--flagship .project-card__info { order:1; padding:22px; }
 #projects .showcase-card--flagship .project-card__name { font-size:30px; }
 #projects .showcase-card--flagship .showcase-story { font-size:14px; }
 #projects .showcase-card--flagship .project-card__visual { height:262px; border-bottom:1px solid var(--border); }
 #projects .showcase-card--flagship .showcase-phone { height:222px; top:17px; right:21%; }
 .showcase-companion { height:194px; top:42px; left:19%; }
 .showcase-metrics { padding:10px 0; margin:0 0 10px; }
 .showcase-metrics dd { font-size:23px; }
 #projects .showcase-card[data-project='trainer'] { display:flex; }
 #projects .showcase-card[data-project='trainer'] .project-card__visual { height:224px; border-right:0; border-bottom:1px solid var(--border); }
 #projects .showcase-card[data-project='trainer'] .project-card__info { padding:20px; }
 #projects .showcase-card[data-project='trainer'] .project-card__name { font-size:24px; }
 #projects .showcase-card--client .showcase-client { display:none; }
 #projects .showcase-card .phone-controls button { width:40px; height:40px; }
 #projects .showcase-card .project-card__expand { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
 #projects .showcase-card--flagship:hover .showcase-phone { transform:rotate(3deg); }
 #projects .showcase-card--flagship:hover .showcase-companion { transform:rotate(-5deg); }
}