/* The document template intentionally reuses the established category, bus and
   document-catalog components. Only asset fitting and page-specific corrections
   live here. */
.document-detail__hero-visual {
  padding-top: 0;
}

.document-detail__hero-visual img {
  width: min(650px, 48vw);
  max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 28px 38px rgb(21 21 21 / 18%));
}

.document-detail :is(.when-needed,.popular-tasks,.document-explain,.scenarios,.cost-factors,.related-categories,.process,.services-catalog,.faq,.seo,.cases,.request,.final-cta) {
  position: relative;
  overflow: clip;
}

.document-detail :is(.when-needed,.popular-tasks,.document-explain,.scenarios,.cost-factors,.related-categories,.process,.services-catalog,.faq,.seo,.cases,.request,.final-cta) > .container {
  position: relative;
}

.document-detail .section-word {
  --section-word-opacity: .08;
}

.document-detail .popular-tasks .section-word,
.document-detail .related-categories .section-word,
.document-detail .process .section-word,
.document-detail .request .section-word {
  --section-word-color: #fff;
}

.document-detail .situation-grid article > img {
  opacity: .42;
}

.document-detail .situation-grid h3,
.document-detail .situation-grid p {
  max-width: 78%;
}

.document-detail .document-list-columns strong {
  color: inherit;
  font: inherit;
  font-weight: 650;
}

.document-detail .process__header p {
  max-width: 760px;
  margin: 0;
  color: rgb(255 255 255 / 68%);
  font-size: 16px;
  line-height: 1.55;
}

.document-detail .category-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.document-detail .cost-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.document-detail .cost-grid--five:has(> :nth-child(8)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.document-detail .category-scenario-grid:has(> :nth-child(7)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.document-detail .document-detail-notice .final-cta__card {
  min-height: 310px;
}

.document-detail-related .service-catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (hover: hover) and (pointer: fine) {
  .document-detail .situation-grid article:hover > img {
    opacity: .62;
  }
}

@media (max-width: 1180px) {
  .document-detail .cost-grid--five,
  .document-detail .cost-grid--five:has(> :nth-child(8)),
  .document-detail .category-scenario-grid:has(> :nth-child(7)),
  .document-detail-related .service-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .document-detail__hero-visual img {
    width: min(720px, 100%);
  }
}

@media (max-width: 700px) {
  .document-detail .category-links,
  .document-detail .cost-grid--five,
  .document-detail .cost-grid--five:has(> :nth-child(8)),
  .document-detail .category-scenario-grid:has(> :nth-child(7)),
  .document-detail-related .service-catalog-grid {
    grid-template-columns: 1fr;
  }

  .document-detail .situation-grid h3,
  .document-detail .situation-grid p {
    max-width: 82%;
  }
}