/* ESV 7.51 – canonical compact timeline. Replaces the V1.5–V2.1 cascade.
   Works with saved current blocks (.esv-timeline-year + h3 + p) and older
   two-column items (h3 year + div/h4 text). No text or data is rewritten. */
.esv-timeline-section {
  padding: 40px 24px;
  background: var(--esv-color-surface-2,#f4f6f4);
}
.esv-timeline {
  position: relative;
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 26px 0 0 !important;
  padding: 0;
  box-sizing: border-box;
}
.esv-timeline::before {
  content: "";
  position: absolute;
  left: 116px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--esv-color-surface-2,#d3e4da);
  pointer-events: none;
}
.esv-timeline-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  column-gap: 36px !important;
  row-gap: 6px !important;
  align-items: start !important;
  width: 100%;
  max-width: none !important;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0 0 12px !important;
  padding: 18px 24px !important;
  border: 1px solid var(--esv-color-border,#dce6df);
  border-radius: 14px;
  background: var(--esv-color-surface,#fff);
  box-shadow: 0 3px 12px rgba(0, 45, 28, .025);
  box-sizing: border-box;
  text-align: left;
}
.esv-timeline-item:last-child { margin-bottom: 0 !important; }
.esv-timeline-item::before {
  content: "";
  position: absolute;
  left: 110px;
  top: 24px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 3px solid var(--esv-color-border,#fff);
  border-radius: 50%;
  background: var(--esv-color-primary,#00873b);
  box-shadow: 0 0 0 1px #8dbca0;
  pointer-events: none;
  z-index: 1;
}
.esv-timeline-item > * {
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  grid-column: 2;
}
/* Gutenberg constrained groups center children with auto inline margins.
   Timeline entries deliberately keep year, title and body on a shared rail. */
.esv-timeline .esv-timeline-item.is-layout-constrained > :not(.alignfull),
.esv-timeline-section .esv-timeline-item.is-layout-constrained > :not(.alignfull) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.esv-timeline-item > .esv-timeline-year {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: start;
  padding: 4px 8px !important;
  border: 0;
  border-radius: 6px;
  background: var(--esv-color-surface-2,#eaf5ee);
  color: var(--esv-color-link,#006a30);
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.esv-timeline-item h3,
.esv-timeline-item h4 {
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
  max-width: none !important;
  color: var(--esv-color-text,#123f2b);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}
.esv-timeline-item p:not(.esv-timeline-year) {
  margin: 0 !important;
  color: var(--esv-color-muted,#425c4d);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.esv-timeline-item p:not(.esv-timeline-year) + p { margin-top: 8px !important; }
.esv-timeline-item > div { padding: 0 !important; }
.esv-timeline-item > div > h4 { margin-bottom: 6px !important; }
/* Legacy timeline: a direct h3 was the year, not the event title. */
.esv-timeline-item:has(> div > h4) > h3 {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  padding: 4px 8px !important;
  border-radius: 6px;
  background: var(--esv-color-surface-2,#eaf5ee);
  color: var(--esv-color-link,#006a30);
  font-size: .88rem;
}
.esv-timeline-item:has(> div > h4) > div { grid-column: 2; grid-row: 1; }
.esv-timeline-item-today { background: var(--esv-color-surface-2,#f1f8f4); border-color: var(--esv-color-border,#afd5bb); }
@media (max-width: 680px) {
  .esv-timeline-section { padding: 28px 16px; }
  .esv-timeline { padding-left: 20px; margin-top: 20px !important; }
  .esv-timeline::before { left: 5px; top: 20px; bottom: 20px; }
  .esv-timeline-item {
    display: block !important;
    padding: 15px 16px !important;
    border-radius: 12px;
    margin-bottom: 12px !important;
  }
  .esv-timeline-item::before { left: -21px; top: 24px; }
  .esv-timeline-item > .esv-timeline-year,
  .esv-timeline-item:has(> div > h4) > h3 {
    display: inline-block;
    position: static !important;
    margin: 0 0 7px !important;
    font-size: .83rem;
    padding: 3px 7px !important;
  }
  .esv-timeline-item h3,
  .esv-timeline-item h4 { margin-bottom: 7px !important; font-size: 1rem; line-height: 1.4; }
  .esv-timeline-item p:not(.esv-timeline-year) { font-size: .95rem; line-height: 1.6; }
}
