/* A single, regular portfolio rhythm on the overview and every category page.
   Text is never truncated: the tallest card defines the shared row height. */
.project-grid,
body[data-category] .project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
  align-items:stretch;
  gap:24px;
}
.project-grid > .project-card:nth-child(n),
body[data-category] .project-grid > .project-card:nth-child(n) {
  grid-column:auto;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:100%;
}
.project-grid > .project-card.filtered-out:nth-child(n),
body[data-category] .project-grid > .project-card.filtered-out:nth-child(n) { display:none; }
.project-grid .project-card-top {
  flex:0 0 auto;
  min-height:68px;
  padding:24px 26px 0;
  gap:16px;
}
.project-grid .project-category {
  min-width:0;
  line-height:1.7;
  letter-spacing:.09em;
  overflow-wrap:anywhere;
}
.project-grid .project-category i { flex:0 0 7px; }
.project-grid .project-open { flex:0 0 42px; }
.project-grid .project-stage,
body[data-category] .project-grid .project-stage {
  flex:0 0 286px;
  height:286px;
  min-height:0;
  margin:16px 0 0;
}
.project-grid .project-phone {
  width:166px;
  height:360px;
  margin-top:62px;
  border-radius:27px;
}
.project-grid .project-card-copy,
body[data-category] .project-grid .project-card-copy {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  min-width:0;
  padding:26px;
}
.project-grid .project-card h3 {
  min-block-size:1.15em;
  margin:0 0 6px;
  font-size:clamp(27px,2.6vw,35px);
  line-height:1.15;
  overflow-wrap:anywhere;
}
.project-grid .project-subtitle {
  min-block-size:1.7em;
  margin-bottom:12px;
  font-size:10px;
  line-height:1.7;
  letter-spacing:.10em;
  overflow-wrap:anywhere;
}
.project-grid .project-card-copy > p {
  min-block-size:3.4em;
  margin:0 0 18px;
  font-size:13px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.project-grid .metric-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:22px;
}
.project-grid .metric-pill {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 5px;
  min-width:0;
  min-height:32px;
  padding:7px 10px;
  line-height:1.6;
  letter-spacing:0;
  overflow-wrap:anywhere;
}
.project-grid .metric-pill strong { margin:0; }
.project-card-actions {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-block-size:144px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid #ffffff12;
}
.project-detail-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:46px;
  padding:12px 15px;
  border:1px solid #ffffff18;
  border-radius:13px;
  background:linear-gradient(115deg,#ffffff06,#753b890c);
  color:#e3dbe9;
  font:inherit;
  font-size:11px;
  font-weight:650;
  line-height:1.6;
  text-align:start;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.project-detail-link svg { width:17px; height:17px; flex:0 0 17px; }
.project-detail-link:hover {
  border-color:#9468b766;
  background:linear-gradient(115deg,#753b8918,#872e3918);
}
.project-detail-link:focus-visible { outline:2px solid #b588df; outline-offset:4px; }
.project-grid .project-action-note,
.project-grid .varlio-card-beta .varlio-beta-hint {
  min-block-size:3.4em;
  margin:10px 0 0;
  color:#978ba1;
  font-size:10px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.project-card-actions .varlio-card-beta { margin:0; padding:0; border:0; }
.project-card-actions .varlio-beta-badge { margin-bottom:10px; }
.project-card-actions .varlio-beta-link { border-radius:13px; }

/* Web/ERP screenshots are framed as browser work, never squeezed into phones. */
.project-grid .project-card[data-gallery="desktop"] .project-phone,
body[data-category] .project-grid .project-card[data-gallery="desktop"] .project-phone {
  width:calc(100% - 52px);
  max-width:480px;
  height:242px;
  aspect-ratio:auto;
  margin-top:23px;
  padding-top:19px;
  border-radius:13px;
  background:#15101e;
  transform:none;
}
.project-grid .project-card[data-gallery="desktop"] .project-phone::before {
  content:'•••';
  position:absolute;
  inset:0 0 auto;
  height:19px;
  padding-inline:10px;
  color:#776881;
  font-size:11px;
  line-height:17px;
  letter-spacing:3px;
  background:#19131f;
}
.project-grid .project-card[data-gallery="desktop"] .project-phone img,
body[data-category] .project-grid .project-card[data-gallery="desktop"] .project-phone img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.project-grid .project-card[data-gallery="desktop"]:hover .project-phone {
  transform:translateY(-5px);
}
.project-grid .project-card[data-gallery="desktop"] .project-logo { max-width:100px; max-height:56px; }
[dir="rtl"] .project-grid .project-logo { left:auto; right:26px; }

@media(max-width:767px) {
  .project-grid,
  body[data-category] .project-grid {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
  .project-grid .project-card-top { padding:21px 22px 0; min-height:63px; }
  .project-grid .project-stage,
  body[data-category] .project-grid .project-stage { flex-basis:264px; height:264px; }
  .project-grid .project-phone { width:158px; height:342px; margin-top:54px; }
  .project-grid .project-card-copy,
  body[data-category] .project-grid .project-card-copy { padding:23px 22px; }
  .project-grid .project-card h3 { font-size:30px; }
  .project-grid .project-category { font-size:9px; }
  .project-grid .project-logo { max-width:70px; max-height:70px; left:22px; bottom:22px; }
  .project-grid .project-card[data-accent="violet"] .project-logo { left:22px; bottom:22px; max-width:125px; max-height:45px; }
  .project-grid .project-card[data-gallery="desktop"] .project-phone,
  body[data-category] .project-grid .project-card[data-gallery="desktop"] .project-phone {
    width:calc(100% - 40px);
    height:222px;
    margin-top:20px;
  }
  [dir="rtl"] .project-grid .project-logo { right:22px; left:auto; }
}
@media(max-width:380px) {
  .project-grid .project-card-top { padding-inline:18px; }
  .project-grid .project-card-copy,
  body[data-category] .project-grid .project-card-copy { padding-inline:18px; }
  .project-grid .project-card h3 { font-size:28px; }
  .project-grid .metric-pill { padding:7px 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .project-detail-link { transition:none; }
}