/*!
 * DargwaDict — dictionary word entry page
 */

.word_page_text {
  color: black;
  font-size: 20px;
}

.word_info_table p {
  color: black;
  font-size: 20px;
}

.english-entry {
  color: var(--keyColor);
  font-weight: 700;
}

.word-title-row {
  display: flex;
  align-items: center;
}

.word-section {
  margin-bottom: 24px;
}

.word-link-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}

.word-source-block {
  margin-top: 50px;
}

/* Заголовок карточки слова: изображение + название идиома в одну строку */
.word-header-inline {
  display: inline;
}

.word-thumbnail {
  max-width: 300px;
  max-height: 300px;
}

.word-idiom-label {
  text-align: left;
  margin-left: 16px;
  font-size: 30px;
  display: inline;
}

.morph_table {
  width: 100%;
}

.morph_table tr {
  width: 100%;
  vertical-align: top;
  line-height: 30px;
}

.morph_name_cell {
  width: 55%;
}

.morph_cell {
  width: 45%;
  padding-bottom: 17px;
}

.word_info_table {
  width: 100%;
}

.word_info_table tr {
  width: 100%;
  vertical-align: top;
  line-height: 20px;
}

.word_info_name_cell {
  width: 55%;
}

.word_info_cell {
  width: 45%;
  padding-bottom: 0;
}

.word_info_name_cell--narrow {
  width: 26.5%;
}

.word_info_cell--wide {
  width: 73.5%;
}

/* Кнопка проигрывания звука */
.play-sound {
  font-size: 22px;
  cursor: pointer;
  color: #4dadb0;
  margin-left: 40px;
  vertical-align: middle;
  transition: transform 0.2s ease, color 0.2s ease;
}

.play-sound:hover {
  transform: scale(1.1);
  color: #2e6769 !important;
}

.play-sound:active {
  transform: scale(0.95);
}

/* ---------------- Мобильная адаптация ---------------- */
@media (max-width: 768px) {
  .morph_table tr,
  .word_info_table tr {
    line-height: 22px;
  }

  .morph_name_cell,
  .word_info_name_cell {
    width: 40%;
  }

  .morph_cell,
  .word_info_cell {
    width: 60%;
  }
}

@media (max-width: 480px) {
  /* На узких экранах таблица "название параметра — значение"
     превращается в вертикальный список: ячейки идут одна под другой */
  .morph_table,
  .morph_table tr,
  .morph_name_cell,
  .morph_cell,
  .word_info_table,
  .word_info_table tr,
  .word_info_name_cell,
  .word_info_cell {
    display: block;
    width: 100%;
  }

  .morph_name_cell,
  .word_info_name_cell {
    padding-top: 10px;
    font-weight: 700;
  }

  .morph_cell,
  .word_info_cell {
    padding-bottom: 12px;
  }
}