@import "./site-readability-final.css";

/*
 * Case Card System V2
 *
 * This file is intentionally imported last in app/layout.tsx. All public case
 * previews (case archive, exam pages and SEO landing pages) use CaseCard V2.
 * Content length may change, but typography and footer layout must not shrink.
 */

.case-card-v2{
  --case-card-font:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --case-card-pad:clamp(20px,1.7vw,24px);
  min-width:0!important;
  height:100%!important;
  padding:var(--case-card-pad)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid #d5e1e4!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 14px 36px rgba(6,49,64,.065)!important;
  font-family:var(--case-card-font)!important;
}

.case-card-v2 .case-archive-media{
  height:230px!important;
  margin:calc(0px - var(--case-card-pad)) calc(0px - var(--case-card-pad)) 20px!important;
  flex:0 0 auto!important;
}

.case-card-v2 .case-archive-media span{
  min-height:30px!important;
  padding:6px 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  font-size:12.5px!important;
  line-height:1.4!important;
}

.case-card-v2__meta{
  min-height:32px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  color:#71838a!important;
  font-size:13px!important;
  line-height:1.45!important;
}

.case-card-v2__meta a{
  min-height:30px!important;
  padding:5px 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  background:#eaf2f3!important;
  color:#0a5367!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1.35!important;
}

.case-card-v2__meta span{
  min-width:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}

.case-card-v2__title{
  margin:16px 0 10px!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  color:#0b4658!important;
  font-family:var(--case-card-font)!important;
  font-size:clamp(20px,1.45vw,22px)!important;
  font-weight:720!important;
  line-height:1.45!important;
  letter-spacing:0!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
}

.case-card-v2__title a{color:inherit!important}

.case-card-v2__summary{
  min-height:5.34em!important;
  margin:0!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  color:#506970!important;
  font-family:var(--case-card-font)!important;
  font-size:15.5px!important;
  font-weight:400!important;
  line-height:1.78!important;
  letter-spacing:.002em!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
}

.case-card-v2__result{
  min-height:82px!important;
  margin:20px 0 0!important;
  padding:14px 15px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  border-radius:10px!important;
  background:#eef5f6!important;
}

.case-card-v2__result span{min-width:0!important}
.case-card-v2__result span:last-child{text-align:right!important}
.case-card-v2__result small,
.case-card-v2__result strong{
  display:block!important;
  font-family:var(--case-card-font)!important;
  writing-mode:horizontal-tb!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.case-card-v2__result small{
  margin:0 0 5px!important;
  color:#687f87!important;
  font-size:13px!important;
  line-height:1.4!important;
}
.case-card-v2__result strong{
  color:#0a5367!important;
  font-size:17px!important;
  font-weight:800!important;
  line-height:1.5!important;
}
.case-card-v2__result i{
  color:#bb8828!important;
  font-size:19px!important;
  font-style:normal!important;
  text-align:center!important;
}

.case-card-v2__footer{
  width:100%!important;
  min-height:0!important;
  margin-top:auto!important;
  padding:18px 0 0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:12px!important;
  border:0!important;
  border-top:1px solid #e1e8ea!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.case-card-v2__profile{
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  display:block!important;
  overflow:visible!important;
  color:#60767e!important;
  font-family:var(--case-card-font)!important;
  font-size:14px!important;
  font-weight:450!important;
  line-height:1.65!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  -webkit-line-clamp:unset!important;
}

.case-card-v2__cta{
  width:100%!important;
  min-height:48px!important;
  padding:11px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  overflow:visible!important;
  border:1px solid #d7b75a!important;
  border-radius:8px!important;
  background:#fff9e8!important;
  color:#755619!important;
  font-family:var(--case-card-font)!important;
  font-size:14.5px!important;
  font-weight:850!important;
  line-height:1.45!important;
  white-space:normal!important;
}

.case-card-v2__cta:hover{
  border-color:#bd8e2e!important;
  background:#fff4d4!important;
}

/* Equal-height cards without fixing content height. */
.case-archive-grid,
.seo-case-preview-grid{align-items:stretch!important}
.case-archive-grid>.case-card-v2,
.seo-case-preview-grid>.case-card-v2{align-self:stretch!important}

@media(max-width:900px) and (min-width:701px){
  .case-archive-grid,
  .seo-case-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:700px){
  .case-card-v2{
    --case-card-pad:18px;
    border-radius:12px!important;
  }
  .case-card-v2 .case-archive-media{
    height:min(74vw,300px)!important;
    margin:-18px -18px 18px!important;
  }
  .case-card-v2__title{
    font-size:20px!important;
    line-height:1.45!important;
  }
  .case-card-v2__summary{
    min-height:0!important;
    font-size:15px!important;
    line-height:1.76!important;
    -webkit-line-clamp:4!important;
  }
  .case-card-v2__result{
    min-height:78px!important;
    padding:13px!important;
  }
  .case-card-v2__profile{font-size:14px!important}
  .case-card-v2__cta{min-height:48px!important;font-size:14.5px!important}
}

/* Compact discovery cards: show the hook, not the whole story. */
.case-card-v2__title{
  -webkit-line-clamp:2!important;
}

.case-card-v2__summary{
  min-height:3.56em!important;
  -webkit-line-clamp:2!important;
}

.case-card-v2__result{
  min-height:72px!important;
  margin-top:16px!important;
  padding:12px 13px!important;
}

.case-card-v2__result strong{
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

.case-card-v2__profile{
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:1!important;
}

@media(max-width:700px){
  .case-card-v2__summary{
    min-height:0!important;
    -webkit-line-clamp:2!important;
  }
  .case-card-v2__result strong{
    -webkit-line-clamp:2!important;
  }
}


/* Uniform case actions and compact result hierarchy. */
.case-card-v2.case-archive-card .case-card-v2__footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 142px!important;
  align-items:center!important;
  gap:14px!important;
}

.case-card-v2.case-archive-card .case-card-v2__profile{
  min-width:0!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

.case-card-v2.case-archive-card .case-card-v2__cta{
  width:142px!important;
  min-width:142px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 14px!important;
  flex:0 0 142px!important;
  justify-content:space-between!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}

.case-card-v2.case-archive-card .case-card-v2__cta>b{
  flex:0 0 auto!important;
  margin-left:8px!important;
}

.case-detail-article .conversion-case-result{
  min-height:116px!important;
  padding:18px 76px 18px 18px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:12px!important;
  position:relative!important;
  overflow:hidden!important;
  border:1px solid #d9e3e5!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#f3f8f8 0%,#edf5f5 100%)!important;
}

.case-detail-article .conversion-case-result>p{
  min-width:0!important;
  margin:0!important;
  padding:14px 17px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border:1px solid rgba(211,224,226,.82)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.72)!important;
}

.case-detail-article .conversion-case-result>p>small{
  margin:0 0 6px!important;
  color:#71858b!important;
  font-size:12.5px!important;
  font-weight:500!important;
  line-height:1.4!important;
}

.case-detail-article .conversion-case-result>p>strong{
  min-width:0!important;
  margin:0!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  color:#075268!important;
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif!important;
  font-size:clamp(18px,1.55vw,21px)!important;
  font-weight:800!important;
  line-height:1.45!important;
  letter-spacing:0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

.case-detail-article .conversion-case-result>b{
  width:34px!important;
  height:34px!important;
  margin:auto!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e5c777!important;
  border-radius:50%!important;
  background:#fffaf0!important;
  color:#b98219!important;
  font-size:17px!important;
  font-weight:700!important;
  line-height:1!important;
}

.case-detail-article .conversion-case-result>em{
  position:absolute!important;
  top:50%!important;
  right:17px!important;
  width:auto!important;
  min-width:42px!important;
  min-height:32px!important;
  margin:0!important;
  padding:7px 9px!important;
  transform:translateY(-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #eadfc8!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#9a711e!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:750!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}

@media(max-width:700px){
  .case-card-v2.case-archive-card .case-card-v2__footer{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:11px!important;
  }

  .case-card-v2.case-archive-card .case-card-v2__profile{
    -webkit-line-clamp:2!important;
  }

  .case-card-v2.case-archive-card .case-card-v2__cta{
    width:100%!important;
    min-width:0!important;
    flex-basis:auto!important;
  }

  .case-detail-article .conversion-case-result{
    min-height:0!important;
    padding:48px 13px 14px!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    border-radius:12px!important;
  }

  .case-detail-article .conversion-case-result>p{
    min-height:72px!important;
    padding:12px 14px!important;
  }

  .case-detail-article .conversion-case-result>p>small{
    margin-bottom:4px!important;
    font-size:12px!important;
  }

  .case-detail-article .conversion-case-result>p>strong{
    font-size:18px!important;
    line-height:1.42!important;
  }

  .case-detail-article .conversion-case-result>b{
    width:29px!important;
    height:29px!important;
    transform:rotate(90deg)!important;
    font-size:15px!important;
  }

  .case-detail-article .conversion-case-result>em{
    top:11px!important;
    right:13px!important;
    min-height:29px!important;
    padding:6px 9px!important;
    transform:none!important;
    font-size:11.5px!important;
  }
}

@media(max-width:420px){
  .case-detail-article .conversion-case-result>p>strong{
    font-size:17px!important;
  }
}