/* 案例列表与详情共用 */
.page{
  padding-top:clamp(104px,13vw,150px);
  padding-bottom:clamp(64px,8vw,118px);
  min-height:100vh;
}
.page-head{padding-top:clamp(16px,2.6vw,34px);}
.page-title{
  font-size:clamp(32px,5vw,58px);
  line-height:1.18;color:var(--brand);letter-spacing:-.02em;
}
.page-lead{
  margin-top:18px;max-width:42em;
  font-size:clamp(15px,1.6vw,17.5px);line-height:1.95;color:var(--body);
}

.back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:700;color:var(--muted);
  transition:color .25s ease;
}
.back:hover{color:var(--brand);}

/* 列表 */
.case-grid{
  margin-top:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.case-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px;
  transition:transform .32s cubic-bezier(.22,.75,.3,1),box-shadow .32s ease,border-color .32s ease;
}
.case-card:hover{transform:translateY(-6px);border-color:rgba(0,52,96,.28);box-shadow:var(--shadow-2);}
.case-fig{
  aspect-ratio:16/10;
  background:linear-gradient(150deg,#F2F7FC 0%,#E7F0F8 100%);
  border:1px solid var(--line);
  border-radius:calc(var(--r-md) - 5px);
}
.case-name{
  margin:14px 6px 6px;
  font-size:clamp(16px,1.6vw,19px);font-weight:700;line-height:1.55;color:var(--brand);
  overflow-wrap:anywhere;
}
.case-name a{transition:color .25s ease;}
.case-name a:hover{color:var(--accent);}

.group{margin-top:clamp(56px,7vw,96px);}
.group-title{
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.24;color:var(--brand);letter-spacing:-.01em;
}
.group .case-grid{margin-top:clamp(24px,3vw,40px);}

@media (max-width:900px){
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .case-grid{grid-template-columns:1fr;}
}

/* 详情 */
.shot{
  margin-top:clamp(30px,4vw,50px);
  max-width:1080px;
  aspect-ratio:16/9;
  background:linear-gradient(150deg,#F2F7FC 0%,#E3EDF6 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}

@media (prefers-reduced-motion:reduce){
  .case-card,.case-name a,.back{transition:none;}
}