/* ═══════════════════════════════════════════
   PATTERN — CHANGELOG (julia/changelog)
   Token-driven: all colors and fonts map to theme tokens
   (var(--wp--preset--color--*) and var(--wp--preset--font-family--*))
   so the pattern survives Default / Dark / Grey Fox /
   Light Red variations and any per-site font overrides
   without per-variation CSS.
   ═══════════════════════════════════════════ */

.julia-changelog {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  max-width: 1160px;
  margin: 0 auto;
  /* Pull the changelog up tight under the header — page-no-title template
     leaves a lot of vertical air without a page title. */
  padding-top: 1rem;
}

/* Desktop grid placement:
     sidebar → left column, spans both rows
     hero    → right column, row 1
     main    → right column, row 2 (release entries) */
.julia-changelog__sidebar { grid-column: 1; grid-row: 1 / 3; }
.julia-changelog__hero    { grid-column: 2; grid-row: 1; }
.julia-changelog__main    { grid-column: 2; grid-row: 2; }

/* Block editor compatibility — the editor wraps every child block in
   .block-editor-block-list__layout > .wp-block divs that don't exist
   on the frontend. Those wrappers break our CSS grid because the
   actual grid items become the wrapper, not __sidebar/__hero/__main.
   We re-mirror the grid onto the wrapper inside the editor. */
.julia-changelog > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  width: 100%;
}
.julia-changelog > .block-editor-block-list__layout > .wp-block {
  max-width: none;
}
.julia-changelog > .block-editor-block-list__layout > .wp-block:nth-child(1) {
  /* sidebar in source order */
  grid-column: 1;
  grid-row: 1 / 3;
}
.julia-changelog > .block-editor-block-list__layout > .wp-block:nth-child(2) {
  /* hero in source order */
  grid-column: 2;
  grid-row: 1;
}
.julia-changelog > .block-editor-block-list__layout > .wp-block:nth-child(3) {
  /* main in source order */
  grid-column: 2;
  grid-row: 2;
}

.julia-changelog__sidebar {
  position: sticky;
  top: 5rem;
  align-self: start;
  /* Top padding aligns "PRODUCTS" label with the first product header
     ("JULIA") on the right. Left padding gives the hover pill room to
     breathe at its rounded left edge — without it, the radius clips
     against the column boundary. Mobile overrides this in @media below. */
  padding: 25rem 2rem 3rem 0.75rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

.julia-changelog__sidebar-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-faded);
  margin: 0 0 1.4rem;
}

.julia-changelog__index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.julia-changelog__index li {
  margin: 0;
}

.julia-changelog__index a {
  display: block;
  /* 8px / 12px — on the 4px grid. Symmetric horizontally so the
     hover pill stays balanced inside the column. */
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  line-height: 1.25;
}

.julia-changelog__index a:hover {
  background: var(--wp--preset--color--paper-dark);
}

.julia-changelog__index-name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  display: block;
  margin-bottom: 1px;
}

.julia-changelog__index-meta {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  color: var(--wp--preset--color--ink-faded);
  display: block;
}

.julia-changelog__main {
  padding: 0 0 6rem 4rem;
}

/* Hero — sits in the right column, row 1 */
.julia-changelog__hero {
  padding: 3rem 0 3rem 4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--paper-dark);
}

.julia-changelog__hero-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0 0 0.8rem;
}

.julia-changelog__hero-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--wp--preset--color--ink);
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.julia-changelog__hero-desc {
  font-family: var(--wp--preset--font-family--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--wp--preset--color--ink-soft);
  max-width: 520px;
}

/* Product block */
.julia-changelog__product {
  margin-bottom: 5rem;
  /* Header is ~74px sticky + breathing gap. Tested mobile + desktop. */
  scroll-margin-top: 100px;
}

.julia-changelog__product-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--wp--preset--color--ink);
}

.julia-changelog__product-name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink);
  margin: 0;
}

.julia-changelog__product-type {
  font-family: var(--wp--preset--font-family--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-faded);
  margin: 0;
}

.julia-changelog__product-latest {
  margin: 0 0 0 auto;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  color: var(--wp--preset--color--ink-faded);
}

/* Entries timeline */
.julia-changelog__entries {
  position: relative;
  padding-left: 1.5rem;
}

.julia-changelog__entries::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--wp--preset--color--ink-ghost);
  opacity: 0.5;
}

.julia-changelog__entry {
  position: relative;
  padding-bottom: 2.5rem;
}

.julia-changelog__entry:last-child {
  padding-bottom: 0;
}

.julia-changelog__entry::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--ink-ghost);
  transform: translateX(-3px);
  border: 2px solid var(--wp--preset--color--paper);
  box-shadow: 0 0 0 1px var(--wp--preset--color--ink-ghost);
}

.julia-changelog__entry--major::before {
  background: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
  width: 9px;
  height: 9px;
  top: 6px;
  transform: translateX(-4px);
}

.julia-changelog__entry-head {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.julia-changelog__entry-head > * {
  margin: 0;
}

.julia-changelog__entry-version {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}

.julia-changelog__entry--major .julia-changelog__entry-version {
  /* Color stays --ink to pass WCAG AA in all 4 variations.
     The accent dot on the timeline rail is the major-release signal.
     accent-dark fails Dark (3.18:1) and Grey Fox (1.97:1). */
  font-weight: 700;
}

.julia-changelog__entry-date {
  font-family: var(--wp--preset--font-family--display);
  font-size: 11px;
  color: var(--wp--preset--color--ink-faded);
  letter-spacing: 0.04em;
  margin-left: auto !important;
}

.julia-changelog__entry-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.julia-changelog__entry-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.julia-changelog__entry-items li {
  font-family: var(--wp--preset--font-family--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 !important;
  padding: 0;
}

/* Tag taxonomy — token-driven monochrome variants
   so all 4 variations work without per-variation overrides. */
.julia-tag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  margin-right: 0.3rem;
  vertical-align: 0.1em;
}

.julia-tag--release {
  /* ink text + accent border + accent-wash bg.
     ink-on-paper-dark passes AAA in all 4 variations (13–16:1).
     accent-dark text on accent-wash failed Dark (2.93) and Grey Fox (1.77). */
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--accent-wash);
  border: 1px solid var(--wp--preset--color--accent);
  padding: calc(0.2rem - 1px) calc(0.55rem - 1px);
}

.julia-tag--new {
  color: var(--wp--preset--color--paper);
  background: var(--wp--preset--color--ink);
}

.julia-tag--improved {
  color: var(--wp--preset--color--ink);
  background: transparent;
  border: 1px solid var(--wp--preset--color--ink-ghost);
}

.julia-tag--fix {
  color: var(--wp--preset--color--ink-faded);
  background: transparent;
  border: 1px dashed var(--wp--preset--color--ink-ghost);
}

.julia-tag--deprecated {
  color: var(--wp--preset--color--ink-faded);
  background: transparent;
  border: 1px solid var(--wp--preset--color--ink-ghost);
  text-decoration: line-through;
}

@media (max-width: 720px) {
  .julia-changelog {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  /* Reset desktop grid placement on mobile so flex-order takes over. */
  .julia-changelog__hero,
  .julia-changelog__sidebar,
  .julia-changelog__main {
    grid-column: auto;
    grid-row: auto;
  }
  /* Mobile stack order:
       1. hero ("What's Shipped" + description)
       2. sidebar (product pills as a horizontal index)
       3. main (release entries) */
  .julia-changelog__hero {
    order: 1;
    padding: 2rem 0;
    margin-bottom: 0;
  }
  .julia-changelog__sidebar {
    order: 2;
    position: static;
    max-width: none;
    max-height: none;
    padding: 1.5rem 0 1.5rem 0;
    border-top: 1px solid var(--wp--preset--color--paper-dark);
    border-bottom: 1px solid var(--wp--preset--color--paper-dark);
  }
  .julia-changelog__main {
    order: 3;
    padding: 2rem 0 4rem 0;
  }
  /* Horizontal pill row instead of vertical stack — fits the
     "footer-style index" framing. */
  .julia-changelog__index {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .julia-changelog__index a {
    /* On 4px grid; mobile pills get a visible border to read as nav. */
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--wp--preset--color--paper-dark);
  }
  .julia-changelog__index a:hover {
    border-color: var(--wp--preset--color--ink-ghost);
  }
  /* On mobile the meta line drops below the name inside each pill. */
  .julia-changelog__index-name {
    margin-bottom: 2px;
  }
}