/* Mobile / responsive fixes for KimAradi */

.user-comment-block .comment-text,
.related-number-snippet,
.number-summary-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.user-comment-block .comment-meta-info {
  min-width: 0;
}

.vote-buttons-container {
  max-width: 100%;
}

.vote-buttons-container .btn {
  white-space: nowrap;
}

.yoruma-git-btn {
  white-space: nowrap;
}

/* Home recent comments + tel comment headers */
.comment-meta-row {
  gap: .75rem;
}

@media (max-width: 575.98px) {
  .recent-comments-panel > .card-body {
    padding: 1rem !important;
  }

  .comment-meta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .vote-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    width: 100%;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .vote-buttons-container .like-btn,
  .vote-buttons-container .dislike-btn {
    flex: 1 1 calc(50% - .35rem);
  }

  .yoruma-git-btn {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
  }

  /* Search form: stack on very small screens */
  #numaraForm .input-group {
    flex-wrap: wrap;
  }

  #numaraForm .input-group .form-control {
    width: 100%;
    border-radius: var(--bs-border-radius) !important;
  }

  #numaraForm .input-group .btn {
    width: 100%;
    margin-top: .5rem;
    border-radius: var(--bs-border-radius) !important;
  }

  .tel-page-header h1,
  .tel-page-title {
    font-size: 1.2rem !important;
    line-height: 1.35;
    word-break: break-word;
  }

  footer .nav {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .15rem;
  }

  footer .nav-link {
    padding: .35rem .55rem;
    font-size: .9rem;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Article grid on home: 2 cols on mobile already via bootstrap md;
     ensure images don't overflow */
  .article-preview-card .card-img-top {
    max-width: 100%;
    height: auto;
  }

  .related-articles-section .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .similar-numbers-list .similar-number-item .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }
}

@media (max-width: 397.98px) {
  .related-articles-section .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}