@import url("../lkt/styles.css");

.history-preview {
  width: min(100%, 520px);
  justify-self: end;
  background: #dcd4c3;
}

.history-preview img {
  width: 100%;
  max-height: 680px;
  aspect-ratio: 538 / 758;
  object-fit: contain;
  background: #f8f4ea;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3.5rem;
}

.history-grid article {
  min-height: 190px;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.58);
}

.history-grid .history-feature {
  grid-row: span 2;
  min-height: 396px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--ink);
  color: var(--white);
}

.history-grid h3 {
  margin: 0 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 500;
}

.history-grid p:not(.edition-note) {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.history-grid .history-feature p:not(.edition-note) { color: #bdc9c3; }
.edition-note { color: var(--orange); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.history-feature .edition-note { color: var(--lime); }
.shelf-action { margin-top: 1.5rem; }

.reading-method { grid-template-columns: 0.95fr 1.05fr; }
.reading-method ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; counter-reset: method; }
.reading-method li { padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: center; counter-increment: method; }
.reading-method li strong { color: var(--lime); }
.reading-method li span { color: #c9d3ce; font-size: 0.88rem; line-height: 1.5; }
.language-section { padding-bottom: 4rem; }
.build-section { margin-top: 3rem; }
.source-note { margin-top: 1.25rem; font-size: 0.78rem; }

@media (max-width: 900px) {
  .history-preview { justify-self: center; }
  .history-grid, .reading-method { grid-template-columns: 1fr; }
  .history-grid .history-feature { grid-row: auto; min-height: 260px; }
}

@media (max-width: 560px) {
  .history-grid article { padding: 1.4rem; }
  .reading-method li { grid-template-columns: 72px 1fr; }
}