/* Home Projects — Figma 1554:9391. All rules are scoped to this section. */
#projects .container { width:992px; gap:55px; }
#projects .section-intro { font-weight:400; }
#projects .section-intro h2 { font-weight:400; }
#projects .cards { gap:20px; }
#projects .card { height:367px; min-width:0; }
#projects .project-card-surface {
  position:relative; width:100%; height:100%; overflow:hidden;
  padding:24px 20px; border-radius:14px; background:#fafafa;
  box-shadow:inset 0 0 0 1px #fafafa;
  display:flex; flex-direction:column; align-items:flex-start;
}
#projects .project-heading { display:flex; flex-direction:column; gap:10px; }
#projects .card h3 { font-size:20px; line-height:27px; font-weight:400; }
#projects .project-date { font-size:14px; line-height:19px; font-weight:400; opacity:.5; }
#projects .project-tags {
  display:flex; flex-wrap:wrap; gap:4px; margin-top:30px;
  width:154px; max-width:100%; min-height:58px; align-content:flex-start;
}
#projects .sber .project-tags { width:229px; }
#projects .ctv .project-tags { width:153px; }
#projects .project-pill {
  flex:none; padding:4px 10px; font-size:14px; line-height:19px;
  font-weight:400; white-space:nowrap; border-radius:18px; background:#efefef;
}
#projects .project-visual {
  position:relative; width:317.333333px; flex:1 0 176px;
  margin-top:23px; margin-left:-20px; pointer-events:none;
}
#projects .project-image { position:absolute; max-width:none; height:auto; }
#projects .shanti-phone { left:20px; top:0; width:138px; }
#projects .shanti-web { left:174px; top:0; width:151px; }
#projects .sber-right { left:131.6665px; top:41px; width:167.4401px; }
#projects .sber-left { left:19.6666px; top:41px; width:170.9456px; }
#projects .sber-front { left:88.6666px; top:0; width:139.623px; }
#projects .ctv-web { left:172.3335px; top:0; width:298px; }
#projects .ctv-phone { left:20.3335px; top:0; width:136.3872px; }
/* Overlay preserves card geometry and lets clicks reach the link. */
#projects .project-card-surface::after {
  content:""; position:absolute; inset:0; z-index:2;
  border-radius:inherit; background:rgba(0,0,0,.1);
  opacity:0; pointer-events:none; transition:opacity 250ms ease;
}
@media (hover:hover) and (pointer:fine) {
  #projects .card:hover .project-card-surface::after { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  #projects .project-card-surface::after { transition:none; }
}
/* Keep the site's existing single-column tablet/phone layout. */
@media (max-width:960px) {
  #projects .cards { flex-direction:column; }
  #projects .card { flex:none; width:100%; }
  #projects .project-visual { align-self:center; margin-left:0; }
}

/* A transparent wrapper leaves desktop and phone image geometry unchanged. */
#projects .project-composition { display:contents; }
#projects .shanti-tablet-web { display:none; }
/* Reuse the stable device mode from case-type.js, including tablet landscape. */
:root[data-project-layout="horizontal"] #projects .cards { flex-direction:column; }
:root[data-project-layout="horizontal"] #projects .card { flex:none; width:100%; height:320px; }
:root[data-project-layout="horizontal"] #projects .project-card-surface {
  display:grid; grid-template-columns:minmax(0, 229px) minmax(0, 1fr);
  grid-template-rows:auto 1fr; column-gap:24px; row-gap:30px;
}
:root[data-project-layout="horizontal"] #projects .project-heading { grid-column:1; grid-row:1; }
:root[data-project-layout="horizontal"] #projects .project-tags {
  grid-column:1; grid-row:2; margin:0; align-self:start;
}
:root[data-project-layout="horizontal"] #projects .project-visual {
  grid-column:2; grid-row:1 / 3; align-self:stretch;
  width:auto; min-width:0; min-height:0; margin:0;
  container-type:size; display:grid; place-items:center;
}
:root[data-project-layout="horizontal"] #projects .project-composition {
  display:block; position:relative;
  width:min(100cqw, calc(100cqh * var(--visual-ratio)));
  aspect-ratio:var(--visual-ratio);
}
:root[data-project-layout="horizontal"] #projects .shanti { --visual-ratio:1.3721413721; }
:root[data-project-layout="horizontal"] #projects .sber { --visual-ratio:1.0793650794; }
:root[data-project-layout="horizontal"] #projects .ctv { --visual-ratio:1.4900662252; }
:root[data-project-layout="horizontal"] #projects .project-image { height:auto; }
/* Coordinates share one canvas per project: every screen scales together. */
:root[data-project-layout="horizontal"] #projects .shanti-phone { left:0; top:0; width:20.90909091%; }
:root[data-project-layout="horizontal"] #projects .shanti-web { display:none; }
:root[data-project-layout="horizontal"] #projects .shanti-tablet-web { display:block; left:23.33333333%; top:0; width:76.66666667%; }
:root[data-project-layout="horizontal"] #projects .sber-right { left:41.49159664%; top:13.94557823%; width:52.7647374%; }
:root[data-project-layout="horizontal"] #projects .sber-left { left:6.19747899%; top:13.94557823%; width:53.87046218%; }
:root[data-project-layout="horizontal"] #projects .sber-front { left:27.94117647%; top:0; width:44.00105042%; }
:root[data-project-layout="horizontal"] #projects .ctv-web { left:33.77777778%; top:0; width:66.22222222%; }
:root[data-project-layout="horizontal"] #projects .ctv-phone { left:0; top:0; width:30.30826667%; }

/* Tablet Sber keeps the desktop-style reveal below the card edge. */
:root[data-project-layout="horizontal"] #projects .sber .project-composition {
  position:absolute; right:0; bottom:-24px;
  width:min(100cqw, 460px);
  transform:translateY(32%);
}

/* Tablet screen pairs: scale one canvas, then clip at the card edges. */
:root[data-project-layout="horizontal"] #projects .shanti .project-composition,
:root[data-project-layout="horizontal"] #projects .ctv .project-composition {
  position:absolute; left:0; top:32px;
}
:root[data-project-layout="horizontal"] #projects .shanti .project-composition {
  width:min(168.42105263cqw, 800px);
}
:root[data-project-layout="horizontal"] #projects .ctv .project-composition {
  width:min(126.31578947cqw, 600px);
}
:root[data-project-layout="horizontal"] #projects .ctv-web { width:100%; }

/* Full Shanti source fills the phone card's right edge without the thumbnail's artificial cutoff. */
#projects .shanti-mobile-web { display:none; }
:root[data-case-type-mode="phone"]:not([data-project-layout="horizontal"]) #projects .shanti .project-card-surface { container-type:inline-size; }
:root[data-case-type-mode="phone"]:not([data-project-layout="horizontal"]) #projects .shanti-web { display:none; }
:root[data-case-type-mode="phone"]:not([data-project-layout="horizontal"]) #projects .shanti-mobile-web {
  display:block; left:174px; top:0;
  width:max(305.536364px, calc(50cqw + 4.666667px));
}

/* Tablet and phone landscape share one composition; only its proportional scale changes. */
:root { --project-layout-scale:1; }
:root[data-project-layout="horizontal"] #projects .card { height:calc(320px * var(--project-layout-scale)); }
:root[data-project-layout="horizontal"] #projects .project-card-surface {
 padding:calc(24px * var(--project-layout-scale)) calc(20px * var(--project-layout-scale));
 grid-template-columns:minmax(0, calc(229px * var(--project-layout-scale))) minmax(0, 1fr);
 column-gap:calc(24px * var(--project-layout-scale)); row-gap:calc(30px * var(--project-layout-scale));
}
:root[data-project-layout="horizontal"] #projects .shanti .project-composition,
:root[data-project-layout="horizontal"] #projects .ctv .project-composition { top:calc(32px * var(--project-layout-scale)); }
:root[data-project-layout="horizontal"] #projects .shanti .project-composition { width:min(168.42105263cqw, calc(800px * var(--project-layout-scale))); }
:root[data-project-layout="horizontal"] #projects .ctv .project-composition { width:min(126.31578947cqw, calc(600px * var(--project-layout-scale))); }
:root[data-project-layout="horizontal"] #projects .sber .project-composition {
 bottom:calc(-24px * var(--project-layout-scale)); width:min(100cqw, calc(460px * var(--project-layout-scale)));
}