/* About page code block mobile tuning */

.about-page .code-block code[class*="language-"],
.about-page .code-block pre[class*="language-"] {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

.about-page .code-block-with-gutter {
  position: relative;
}

.about-page .code-block-with-gutter pre[class*="language-"] {
  padding-left: 4.4rem !important;
}

.about-page .custom-line-numbers {
  position: absolute;
  top: 6.25rem;
  left: 1.35rem;
  width: 2.5rem;
  padding-right: 0.85rem;
  border-right: 1px solid rgba(19, 26, 38, 0.14);
  color: rgba(19, 26, 38, 0.45);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.98rem;
  line-height: 1.7;
  text-align: right;
  pointer-events: none;
  user-select: none;
  z-index: 4;
}

.about-page .custom-line-numbers span {
  display: block;
}

@media (max-width: 900px) {
  .about-page .code-block {
    padding: 14px 14px 12px !important;
    border-radius: 18px !important;
  }

  .about-page .code-header {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .about-page .code-left {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .about-page .code-file {
    font-size: 0.9rem !important;
  }

  .about-page .code-lang {
    font-size: 0.86rem !important;
  }

  .about-page .code-block-with-gutter pre[class*="language-"] {
    padding-left: 3.4rem !important;
  }

  .about-page .code-block pre[class*="language-"] {
    padding-top: 0.8rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.8rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .about-page .code-block code[class*="language-"] {
    min-width: max-content !important;
    font-size: 0.68rem !important;
    line-height: 1.5 !important;
    letter-spacing: -0.02em !important;
  }

  .about-page .custom-line-numbers {
    top: 5.35rem;
    left: 0.95rem;
    width: 1.9rem;
    padding-right: 0.55rem;
    font-size: 0.68rem;
    line-height: 1.5;
  }
}

@media (max-width: 430px) {
  .about-page .code-block {
    padding: 12px !important;
  }

  .about-page .code-block-with-gutter pre[class*="language-"] {
    padding-left: 3.15rem !important;
  }

  .about-page .code-block code[class*="language-"] {
    font-size: 0.62rem !important;
    line-height: 1.48 !important;
  }

  .about-page .custom-line-numbers {
    top: 5.05rem;
    left: 0.8rem;
    width: 1.75rem;
    padding-right: 0.5rem;
    font-size: 0.62rem;
    line-height: 1.48;
  }
}