/**
 * Timeline date block.
 *
 * The colour follows the milestone accent, so recolouring a milestone still
 * takes one change to --oueb-tl-accent on its container. Anything set from the
 * block inspector is emitted inline and wins over these defaults.
 */

.wp-block-oueb-timeline-date {
  color: var(--oueb-tl-accent, inherit);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  padding-top: 1.1rem;
}

/**
 * Inside a milestone the date always sits against the timeline rule, whatever
 * it prints: date and time, date alone, time alone or a custom format. The
 * side comes from the milestone, never from the length of the text.
 */
.oueb-timeline-item--card-right .wp-block-oueb-timeline-date {
  text-align: right;
}

.oueb-timeline-item--card-left .wp-block-oueb-timeline-date {
  text-align: left;
}

/* An explicit choice in the block toolbar still wins. */
.wp-block-oueb-timeline-date.has-text-align-left {
  text-align: left;
}

.wp-block-oueb-timeline-date.has-text-align-center {
  text-align: center;
}

.wp-block-oueb-timeline-date.has-text-align-right {
  text-align: right;
}

/**
 * On small screens the rule moves to the left edge and every milestone reads
 * as one column, so the date sits above its card and aligns with it.
 */
@media (max-width: 767px) {
  .oueb-timeline-item .wp-block-oueb-timeline-date {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0.5rem;
    text-align: left;
  }
}