/* ==========================================================================
   BRAFFE — HISTORIEK / TIJDLIJN
   →  wp-content/themes/<child>/assets/css/vc-historiek.css
   --------------------------------------------------------------------------
   From the XD (Over ons — Historiek, y1411 onward):

     Centre line   x 960 — exactly 50% of the 1640 content column,
                   1 px #648CA7
     Image         674 × 448, sitting 146 px from the line
     Text          starts (or ends) 68 px from the line, aligned toward it
     Jaartal       Calluna Sans Light 20, #6E6E6E
     Titel         Calluna Sans Regular 40
     Tekst         Calluna Sans Regular 22
     Row pitch     527 px  →  79 px between rows
     Text offset   ~96 px below the top of its row's image

   The zigzag is positional, not per-row: .br-tl__row--a puts the image in
   column 1, --b in column 2, and the PHP alternates them by index. Add a
   step at the end and it keeps the rhythm; drag one into the middle and
   everything after it re-flows.

   The dot hangs off the TITLE rather than the row, so it always lands next
   to the heading no matter how long the year label or the body text is.
   ========================================================================== */

.br-tl{
  --br-tl-gap-img:  clamp(16px, 7.60vw, 146px);   /* image → centre line */
  --br-tl-gap-text: clamp(12px, 3.54vw,  68px);   /* text  → centre line */
  --br-tl-line:     var(--br-blue, #648CA7);
  --br-tl-dot:      clamp(8px, .78vw, 15px);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.1vw, 79px);                  /* 527 pitch − 448 image */
}

/* The centre line. Inset top and bottom so it starts at the first dot and
   stops at the last, rather than running past the block. */
.br-tl::before{
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(24px, 5vw, 96px);
  bottom: clamp(24px, 5vw, 96px);
  width: 1px;
  background: var(--br-tl-line);
  transform: translateX(-50%);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   ONE STEP
   -------------------------------------------------------------------------- */
.br-tl__row{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* the split IS the centre line */
  align-items: start;
}

/* grid-row: 1 on BOTH cells is load-bearing, not decoration.
   Grid auto-placement is "sparse": the cursor only ever moves forward. On a
   --b row the media is placed in column 2 first, so a body asking for column
   1 cannot go back — it drops to a second row and the text lands under the
   image instead of beside it. Pinning both to row 1 removes the ambiguity. */

/* Image left, text right */
.br-tl__row--a .br-tl__media{ grid-column: 1; grid-row: 1; padding-right: var(--br-tl-gap-img); }
.br-tl__row--a .br-tl__body { grid-column: 2; grid-row: 1; padding-left:  var(--br-tl-gap-text); }

/* Image right, text left — the text aligns toward the line, so right-aligned */
.br-tl__row--b .br-tl__media{ grid-column: 2; grid-row: 1; padding-left:  var(--br-tl-gap-img); }
.br-tl__row--b .br-tl__body {
  grid-column: 1;
  grid-row: 1;
  padding-right: var(--br-tl-gap-text);
  text-align: right;
}


/* --------------------------------------------------------------------------
   IMAGE
   -------------------------------------------------------------------------- */
.br-tl__media{ min-width: 0; }

.br-tl__img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 674 / 448;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   TEXT
   The whole block sits ~96 px below the top of its row's image.
   -------------------------------------------------------------------------- */
.br-tl__body{
  min-width: 0;
  padding-top: clamp(24px, 5vw, 96px);
  font-family: var(--br-sans, sans-serif);
  color: var(--br-ink, #272727);
}

.br-tl__year{
  margin: 0 0 clamp(8px, .83vw, 16px);
  font-weight: 300;
  font-size: var(--br-fs-20);
  line-height: 1.25;
  color: var(--br-grey, #6E6E6E);
}

.br-tl__title{
  position: relative;                 /* anchor for the dot */
  margin: 0 0 clamp(10px, 1.04vw, 20px);
  font-family: var(--br-sans, sans-serif);
  font-weight: 400;
  font-size: var(--br-fs-40);
  line-height: 1.3;
  color: var(--br-ink, #272727);
}

/* The dot, hung off the title and pushed back onto the centre line */
.br-tl__title::before{
  content: "";
  position: absolute;
  top: .62em;                         /* optical centre of the first line */
  width: var(--br-tl-dot);
  height: var(--br-tl-dot);
  border-radius: 50%;
  background: var(--br-tl-line);
}
.br-tl__row--a .br-tl__title::before{
  left: calc(-1 * var(--br-tl-gap-text));
  transform: translate(-50%, -50%);
}
.br-tl__row--b .br-tl__title::before{
  right: calc(-1 * var(--br-tl-gap-text));
  transform: translate(50%, -50%);
}

.br-tl__text{
  font-size: var(--br-fs-22);
  line-height: 1.45;
  letter-spacing: var(--br-ls-wide, .02em);
}
.br-tl__text p{ margin: 0 0 .8em; }
.br-tl__text p:last-child{ margin-bottom: 0; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   Below 900 the zigzag stops working — two columns leave neither the image
   nor the text enough room. One column, image above text, line and dots
   gone, and the right-aligned side flips back to left.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  .br-tl{ gap: clamp(28px, 5vw, 48px); }
  .br-tl::before{ display: none; }

  .br-tl__row{ grid-template-columns: 1fr; }

  .br-tl__row--a .br-tl__media,
  .br-tl__row--b .br-tl__media{
    grid-column: 1;
    grid-row: 1;
    padding: 0;
  }
  .br-tl__row--a .br-tl__body,
  .br-tl__row--b .br-tl__body{
    grid-column: 1;
    grid-row: 2;
    padding: clamp(16px, 3vw, 28px) 0 0;
    text-align: left;
  }

  .br-tl__title::before{ display: none; }
}