/*
 * Case detail responsive reading system.
 * This route-final layer applies to every public case detail, exam archive and FAQ.
 * It changes presentation only: published content, routes, SEO and evidence data stay intact.
 */

body:has(.case-detail-page) {
  background: #f2f6f4 !important;
}

.conversion-page.case-detail-page {
  width: min(1040px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
  padding: 40px 0 64px !important;
  background: transparent !important;
}

.case-detail-page .case-detail-breadcrumb {
  width: 100% !important;
  margin: 0 auto 16px !important;
  padding-inline: 2px;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.case-detail-page .case-detail-article {
  width: 100% !important;
  margin-inline: auto !important;
  padding: clamp(30px, 4vw, 46px) !important;
  background: rgba(255, 255, 255, .94) !important;
}

.case-detail-article > header,
.case-detail-article > .conversion-case-result,
.case-detail-article > .conversion-case-lead,
.case-detail-article > .conversion-case-story,
.case-detail-article > footer {
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
}

.case-detail-page .conversion-case-brand {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.case-detail-page .conversion-case-brand .brand-logo__primary {
  color: #fff !important;
}

.case-detail-page .conversion-case-brand .brand-logo__secondary {
  color: #e5c56d !important;
}

.case-detail-article > header h1 {
  max-width: 19em !important;
  margin: 9px 0 10px !important;
  font-family: inherit !important;
  font-size: clamp(32px, 3.45vw, 40px) !important;
  font-weight: 760 !important;
  line-height: 1.24 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}

.case-detail-article > header small {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.case-detail-article > header span {
  display: block;
  max-width: 65ch;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

.case-detail-article .conversion-case-lead {
  margin-top: 24px !important;
  padding: 17px 19px !important;
  font-size: 16px !important;
  line-height: 1.82 !important;
}

.case-detail-article .conversion-case-story {
  margin-top: 28px !important;
  display: block !important;
  grid-template-columns: none !important;
  columns: auto !important;
  column-count: auto !important;
  column-width: auto !important;
}

.case-detail-article .conversion-case-story > p,
.case-detail-article .conversion-case-story section p {
  margin-bottom: 16px !important;
  color: #506970 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

.case-detail-article .conversion-case-story > section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 30px !important;
  display: block !important;
}

.case-detail-article .conversion-case-story h3 {
  margin-bottom: 13px !important;
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 730 !important;
  line-height: 1.42 !important;
  letter-spacing: -.015em !important;
}

.case-detail-page .conversion-case-evidence {
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
  margin: 30px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.case-detail-page .conversion-case-evidence figure {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.case-detail-page .conversion-case-media {
  width: 100% !important;
  min-width: 0 !important;
}

.case-detail-page .conversion-case-media > img {
  min-width: 0 !important;
  position: relative !important;
  object-fit: contain !important;
}

.case-detail-article > footer {
  margin-top: 32px !important;
  padding-top: 20px !important;
}

.case-detail-article > footer a {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Case-only FAQ: a compact header above the questions, never an empty side column. */
.case-detail-page #case-faq,
body:has(.case-detail-page) #case-faq {
  padding: 46px 0 56px !important;
  background: #f2f6f4 !important;
}

#case-faq > div {
  width: min(980px, calc(100% - 40px)) !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

#case-faq > div > header {
  min-width: 0;
  padding: 0 0 18px !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap;
  gap: 8px 16px !important;
  border-bottom: 1px solid #d6dfdc;
}

#case-faq > div > header > p {
  margin: 0 !important;
  flex: 0 0 auto;
}

#case-faq > div > header > h2 {
  max-width: none !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: clamp(28px, 3vw, 34px) !important;
  font-weight: 740 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}

#case-faq > div > header > span {
  display: none !important;
}

.case-detail-page .case-detail-boundary {
  width: 100% !important;
  margin-top: 18px !important;
  border-left-width: 1px !important;
  background: #edf3f2 !important;
}

@media (max-width: 700px) {
  .conversion-page.case-detail-page {
    width: calc(100% - 20px) !important;
    padding: 24px 0 46px !important;
  }

  .case-detail-page .case-detail-breadcrumb {
    margin-bottom: 12px !important;
    padding-inline: 2px;
    font-size: 12.5px !important;
  }

  .case-detail-page .case-detail-article {
    padding: 24px 16px !important;
    border-radius: 14px !important;
  }

  .case-detail-article > header h1 {
    margin-top: 8px !important;
    font-size: clamp(27px, 7.8vw, 31px) !important;
    line-height: 1.28 !important;
    text-wrap: pretty;
  }

  .case-detail-article > header span {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .case-detail-article .conversion-case-result {
    margin-top: 20px !important;
  }

  .case-detail-article .conversion-case-lead {
    margin-top: 20px !important;
    padding: 15px 16px !important;
    font-size: 15.5px !important;
    line-height: 1.78 !important;
  }

  .case-detail-article .conversion-case-story {
    margin-top: 24px !important;
    display: block !important;
    grid-template-columns: none !important;
    columns: auto !important;
    column-count: auto !important;
    column-width: auto !important;
  }

  .case-detail-article .conversion-case-story > p,
  .case-detail-article .conversion-case-story section p {
    margin-bottom: 14px !important;
    font-size: 15.5px !important;
    line-height: 1.82 !important;
  }

  .case-detail-article .conversion-case-story > section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 26px !important;
    display: block !important;
  }

  .case-detail-article .conversion-case-story h3 {
    margin-bottom: 11px !important;
    font-size: 20px !important;
    line-height: 1.42 !important;
  }

  .case-detail-page .conversion-case-evidence {
    width: 100% !important;
    max-width: none !important;
    margin: 25px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .case-detail-page .conversion-case-evidence figure {
    display: flex !important;
    flex-direction: column !important;
    contain: layout paint;
  }

  .case-detail-page .conversion-case-media {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    display: flex !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .case-detail-page .conversion-case-media > img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  .case-detail-page .conversion-case-watermark {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 12px 2px 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  .case-detail-article > footer {
    margin-top: 28px !important;
    padding-top: 18px !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .case-detail-article > footer a {
    width: 100% !important;
    min-height: 46px !important;
    padding: 9px 2px !important;
    justify-content: space-between !important;
    font-size: 14px !important;
  }

  #case-faq,
  .case-detail-page #case-faq,
  body:has(.case-detail-page) #case-faq {
    padding: 34px 0 42px !important;
  }

  #case-faq > div {
    width: calc(100% - 24px) !important;
    gap: 16px !important;
  }

  #case-faq > div > header {
    padding-bottom: 15px !important;
    display: grid !important;
    gap: 6px !important;
  }

  #case-faq > div > header > h2 {
    font-size: 27px !important;
    line-height: 1.28 !important;
  }

  .case-detail-page .case-detail-boundary {
    padding: 15px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }

  .case-archive-page .case-card-v2 .case-archive-media,
  [data-core-exam-page] .case-card-v2 .case-archive-media {
    height: auto !important;
    aspect-ratio: 4 / 3;
    overflow: hidden !important;
  }

  .case-archive-page .case-card-v2 .case-archive-media > img,
  [data-core-exam-page] .case-card-v2 .case-archive-media > img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    object-fit: contain !important;
  }
}