/**
 * Pillar Timeline — parts/elements/pillar-timeline.php.
 *
 * Loads after css/style.css (functions.php declares theme-styles as a
 * dependency), so nothing here needs !important.
 *
 * Sizes are rem against the 10px root — style.css:702 sets
 * html { font-size: 62.5% }, so 1rem is 10px here, matching every other
 * rem value in style.css (h1 at 6rem, etc). The --space-* custom
 * properties are already declared in px and are safe to use directly.
 * Same convention as css/blocks/semester-timeline.css.
 *
 * There is no serif typeface in this theme — --font-display and
 * --font-body are both "FF Real Head" (design-system.css:93-94) — so the
 * title/description hierarchy is carried by size, weight and line-height
 * instead of a family change.
 */

.block-pillar-timeline {
  /* Replaces .block-icon-columns-content's 8.2rem (style.css:10096).
     margin-top only, no margin-bottom — matches the .block-contact-cards /
     .block-social-feed convention (style.css:20214) of each block adding
     its own top breathing room only, so adjacent light-background blocks
     don't stack both and double the gap between them. */
  margin-top: var(--space-16);
}

@media (max-width: 767px) {
  .block-pillar-timeline {
    margin-top: var(--space-12);
  }
}

/* Section heading — the red uppercase eyebrow standard. 2rem/red matches
   .cc__eyebrow (style.css:20164) and .qc__eyebrow (style.css:19736); the
   sitewide .c-eyebrow default of 1.4rem is for kickers ABOVE a headline,
   and here the eyebrow IS the heading. */
.plt__eyebrow {
  font-size: 2rem;
  color: var(--color-brand-red);
  /* Replaces .block-icon-columns-content__title's 5.2rem (style.css:10108). */
  margin: 0 0 var(--space-8);
}

/* ---- horizontal track (>= 992px) -------------------------------------- */

.plt__list {
  position: relative;
  display: grid;
  /* Column count follows the item count — the ACF repeater has no max.
     minmax(0, 1fr), not bare 1fr: a bare 1fr keeps its content's auto
     minimum, so one long unbroken word would push its track past its
     equal share. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--space-8);
  /* Items align to the rule at the top; a longer title in one column
     pushes only its own description down, not its neighbours. */
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One continuous rule on the list itself, not a border-top per item — a
   per-item border breaks at every column gap, and the vertical variant
   below would have to re-declare it as border-left from scratch. */
.plt__list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-grey-300);
}

.plt__item {
  position: relative;
  /* Clears the rule and the marker that straddles it. Explicit 0 here
     overrides style.css:797's `padding: 0 0 0 3rem` on ol li — this list
     draws its own marker, not the ol li:before counter glyph below. */
  padding: var(--space-8) 0 0;
  margin: 0;
}

/* style.css:813 gives every ol li a counters(item, ".") "." pseudo-element
   for numbered body copy — not wanted here, this list has its own marker
   and kicker. Overrides on specificity (one class beats two elements). */
.plt__item::before {
  content: none;
}

/* Marker hangs off the item's own origin, so it lands on the item's start
   edge in both orientations; translate pulls it onto the hairline. */
.plt__marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: var(--color-brand-red);
  transform: translateY(-50%);
}

.plt__kicker {
  font-size: 1.4rem;
  color: var(--color-brand-red);
  margin: 0 0 var(--space-3);
}

.plt__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-grey-900);
  margin: 0 0 var(--space-3);
  /* Guards "Community Engagement and Service Learning" at narrow tracks. */
  overflow-wrap: anywhere;
}

.plt__desc {
  font-size: 1.6rem;
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-grey-700);
  margin: 0;
}

/* ---- 992-1199px: still horizontal, tighter ---------------------------- */

@media (max-width: 1199px) {
  .plt__list {
    column-gap: var(--space-6);
  }

  .plt__title {
    font-size: 2rem;
  }

  .plt__desc {
    font-size: 1.5rem;
  }
}

/* ---- vertical track (<= 991px) ----------------------------------------
   991px is the theme's desktop/tablet boundary — the block this replaces
   used the same value (style.css:10123). Below it, five columns leave
   about one word per line, so the layout flips to a single stacked rail. */

@media (max-width: 991px) {
  .plt__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--space-10);
  }

  /* Same pseudo-element, rotated into a full-height rail on the left. */
  .plt__list::before {
    top: 0;
    bottom: 0;
    right: auto;
    width: 1px;
    height: auto;
  }

  .plt__item {
    padding-top: 0;
    padding-left: var(--space-8);
  }

  .plt__marker {
    /* 0.55em down aligns the square with the kicker's cap height rather
       than its line box, which sits slightly high. */
    top: 0.55em;
    left: 0;
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .plt__list {
    row-gap: var(--space-8);
  }

  .plt__item {
    padding-left: var(--space-6);
  }

  .plt__title {
    font-size: 1.9rem;
  }
}