/* «Правда или миф» (lib/blocks/myths.js). */

.prose .myth-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose .myth-list > li + li {
  margin-top: 0;
}

.prose .myth {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.25s var(--ease);
}

.prose .myth.is-right {
  border-color: var(--amber);
}

.prose .myth-claim {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
}

.prose .myth-guess {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.prose .myth-btn {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: normal;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.prose .myth-btn:hover:not(:disabled) {
  border-color: var(--amber);
  background: var(--amber-wash);
}

.prose .myth-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.prose .myth-btn.is-picked {
  border-color: var(--ink-2);
  opacity: 1;
}

.prose .myth-answer {
  margin-top: 12px;
}

.prose .myth-answer summary {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.prose .myth.is-right .myth-answer summary {
  color: var(--amber);
}

.prose .myth-verdict {
  margin: 8px 0 2px;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}

.prose .myth-text {
  margin: 0;
  font-size: 15px;
  color: var(--ink-body);
}

.prose .myth-score {
  margin: 14px 0 0;
  font-weight: 600;
  color: var(--amber);
}

.prose .myth-score:empty {
  display: none;
}

@media (max-width: 700px) {
  .prose .myth-list {
    grid-template-columns: 1fr;
  }
}