/* A//A: a deep blue band that fades out at both ends, white text.
   No rules or borders — the items are spaced apart, labels quiet,
   dates bright. */
.block-key-dates {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(85, 200, 255, .22), transparent 70%),
    linear-gradient(90deg, var(--color-bg), var(--color-accent-deep) 22%, var(--color-accent-deep) 78%, var(--color-bg));
  color: var(--color-on-dark);
  padding: 20px var(--space-section-x);
  letter-spacing: 0;
  /* Sticks under the fixed nav once the hero scrolls away. Not in the
     editor, where each block sits in its own wrapper and the editor bar
     owns the top. */
  position: sticky; top: var(--aa-nav-h, 88px); z-index: 40;
}
body.cms-edit .block-key-dates { position: static; }
.block-key-dates .dates-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: center; align-items: baseline;
  row-gap: 10px; column-gap: 64px; flex-wrap: wrap;
  font-family: var(--font-eyebrow);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px;
}
.block-key-dates .date-item {
  display: flex; gap: 12px; align-items: baseline; white-space: nowrap;
}
/* In edit mode, give each item a taller hit box so the injected ▲▼×
   toolbar fits inside its hover zone and stays clickable. */
body.cms-edit .block-key-dates .date-item {
  padding: 20px 78px 20px 8px;
  min-height: 44px;
}
/* Because the strip's items are narrow and close together, hover-reveal
   is fragile even with the 2 s persistence. Force the reorder / delete
   buttons to be permanently visible for THIS block in edit mode so the
   author can always click them. */
body.cms-edit .block-key-dates .cms-list-item-remove,
body.cms-edit .block-key-dates .cms-list-item-move {
  opacity: 1;
  transition-delay: 0s;
}

/* The strip is much shorter than a normal billboard, so the default block
   toolbar (top: 80px) would render below the strip's bottom edge and be
   unreachable. Pin it to the top-right of the strip and keep it always
   visible in edit mode. */
body.cms-edit .block-key-dates.cms-block-host .cms-block-tools {
  top: 8px;
  right: 8px;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
/* Inline "+ Add date" trigger — override the default full-width dashed
   cell styling from editor.css to fit inside the flex strip. */
.block-key-dates .cms-list-item-add--inline {
  width: auto;
  min-height: 0;
  padding: 8px 12px;
  align-self: center;
}
.block-key-dates .date-label { color: var(--color-accent-soft); font-weight: 400; }
.block-key-dates .date-value { color: var(--color-on-dark); font-weight: 500; }
@media (max-width: 640px) {
  /* One short row that scrolls sideways — a stacked list would pin a
     third of the screen under the nav. */
  .block-key-dates { padding: 11px 0; background: var(--color-accent-deep); }
  .block-key-dates .dates-inner {
    justify-content: flex-start; flex-wrap: nowrap; column-gap: 28px;
    overflow-x: auto; scrollbar-width: none; padding: 0 18px; font-size: 10px;
  }
  .block-key-dates .dates-inner::-webkit-scrollbar { display: none; }
  .block-key-dates .date-item { white-space: nowrap; gap: 8px; }
}