/* ==========================================================================
   Grid — left-aligned sans masthead, dates in a left rail, accent-coloured
   section headings, 2px accent rule under the masthead. (HANDOVER §3.2)
   ========================================================================== */

.theme-grid .doc-masthead {
  text-align: left;
  padding-bottom: 0.75em;
  border-bottom: 2px solid var(--doc-accent);
  margin-bottom: 1.1em;
}

.theme-grid .doc-name {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.theme-grid .doc-contact {
  margin-top: 0.45em;
  font-size: 0.85em;
  font-family: 'JetBrains Mono', monospace;
}

.theme-grid .doc-section {
  margin-bottom: 1.1em;
}

.theme-grid .doc-section-title {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doc-accent);
  margin-bottom: 0.6em;
}

.theme-grid .doc-entry {
  margin-bottom: 0.7em;
}
.theme-grid .doc-entry:last-child {
  margin-bottom: 0;
}

/* Dates live in a left rail; content hangs to the right of it. The grid sits
   on the entry head only (a single row that never fragments) — a grid spanning
   the whole entry can't be split by Paged.js, which then shunts the entire
   entry to the next page and strands the section heading over a blank gap. */
.theme-grid .doc-entry-head {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 0 1.2em;
  break-inside: avoid;
}
.theme-grid .doc-entry-dates {
  grid-column: 1;
  grid-row: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78em;
  padding-top: 0.25em;
}
.theme-grid .doc-entry-titles {
  grid-column: 2;
}
.theme-grid .doc-entry-heading {
  font-weight: 700;
}
.theme-grid .doc-entry-subheading {
  font-size: 0.92em;
}
.theme-grid .doc-bullets,
.theme-grid .doc-entry-timeline .doc-entry-text {
  margin-left: 9.7em; /* rail (8.5em) + gap (1.2em) */
  margin-top: 0.25em;
}

/* A timeline section with no dates anywhere (e.g. Education) has nothing to
   put in the rail — drop it and let entries sit flush left. */
.theme-grid .doc-layout-timeline:not(:has(.doc-entry-dates)) .doc-entry-head {
  display: block;
}
.theme-grid .doc-layout-timeline:not(:has(.doc-entry-dates)) .doc-bullets,
.theme-grid .doc-layout-timeline:not(:has(.doc-entry-dates)) .doc-entry-text {
  margin-left: 0;
}
.theme-grid .doc-bullets li {
  margin-bottom: 0.1em;
}

/* List labels sit in the same left rail as timeline dates (via min-width), so
   body text shares the timeline's left edge unless a longer label needs more. */
.theme-grid .doc-layout-list .doc-entries {
  column-gap: 1.2em;
}
.theme-grid .doc-list-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82em;
  font-weight: 600;
  padding-top: 0.15em;
  min-width: 10.365em; /* 8.5em at base size — matches the timeline date rail */
}

.theme-grid .doc-entry-prose {
  max-width: 46em;
}

/* Section separation rule, driven by theme.json `rules`. */
.theme-grid .doc-section + .doc-section {
  border-top: 0.5pt solid var(--rule-color);
  padding-top: 0.85em;
}