// =============================================================================
// TIMELINE — composed from image-text-banner (banner) + image-and-content (entries)
// Only the rows wrapper and timeline-specific context overrides remain here.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// =============================================================================

@import '../mixins';

// ── Category tabs — injected by timeline-tabs.js, hidden until populated ─────
.timeline__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0 var(--space-4);

  @include respond-to('desktop') {
    padding: 0 var(--space-30);
  }
}

.timeline__tab {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;

  &:hover {
    background-color: var(--color-gold);
    color: var(--color-white);
  }

  &.is-active {
    background-color: var(--color-gold);
    color: var(--color-white);
  }

  &:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }
}

// ── Entries wrapper — beige section with stacked entries ─────────────────────
.timeline__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  // Section rhythm (padding-block: 56px mobile+tablet, 80px laptop+) split
  // from horizontal inset, which stays tied to the 1440px layout breakpoint
  // below (--section-space, tokens.scss).
  padding-block: var(--section-space);   // bg via .bg-pampas on the <section>
  padding-inline: var(--space-4);

  @include respond-to('desktop') {
    padding-inline: var(--space-30);
  }
}

// ── Context overrides for image-and-content inside timeline ─────────────────
// Timeline entries use 588×544 images (vs 710×878 in standalone) and 120px gap.
.timeline__rows .image-and-content {
  padding: 0;
  background-color: transparent;

  @include respond-to('desktop') {
    padding: 0;
    gap: 120px;
  }
}

.timeline__rows .image-and-content__image-col {
  @include respond-to('desktop') {
    width: 588px;                // height stretches to match __content (base align-items:stretch)
  }
}

.timeline__rows .image-and-content__content {
  @include respond-to('desktop') {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
}

// Timeline entries use a tighter 20px paragraph gap (vs 24/48 standalone)
.timeline__rows .image-and-content__body {
  gap: 20px;
}