/* =========================================================
   CLEAN TIMELINE CSS (GLOBAL LINE + CENTERED MARKERS)
   - No dependency on .is-left/.is-right
   - Uses :nth-child() for left/right alternation
   ========================================================= */

.my-timeline {
  /* layout */
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 32px auto;
  padding: 24px 16px 8px; /* top padding helps visual breathing */

  /* design tokens */
  --line-color: #a72920;      /* RAL 3000 approx */
  --line-width: 2px;
  --line-trim-top: 24px;      /* trim ONLY top */
  --marker-size: 16px;
  --gutter: 56px;             /* center column width (space around line/marker) */
  --card-max: 640px;
  --card-radius: 14px;
  --card-border: #e5e7eb;
  --shadow: 0 1px 2px rgba(0,0,0,.05);
  --media-size: 128px;        /* you said 128px works */
}

/* ---------------------------------------------------------
   GLOBAL LINE (as background = reliable trimming)
   --------------------------------------------------------- */

/* If your markup includes <span class="my-timeline__line">, hide it to avoid double lines */
.my-timeline__line { display: none; }

/* Default: split layout line centered */
.my-timeline {
  --line-x: calc(50% - (var(--line-width) / 2));
  background-image: linear-gradient(var(--line-color), var(--line-color));
  background-repeat: no-repeat;
  background-position: var(--line-x) var(--line-trim-top);
  background-size: var(--line-width) calc(100% - var(--line-trim-top));
}

/* Single-left layout line (optional if you use my-timeline--single) */
.my-timeline.my-timeline--single {
  --line-x: calc(28px - (var(--line-width) / 2));
  padding-left: 56px;
  padding-right: 16px;
}

/* Single-right layout line (optional if you use my-timeline--right) */
.my-timeline.my-timeline--single.my-timeline--right {
  --line-x: calc(100% - 28px - (var(--line-width) / 2));
  padding-left: 16px;
  padding-right: 56px;
}

/* ---------------------------------------------------------
   ITEMS: SPLIT LAYOUT (auto alternating)
   --------------------------------------------------------- */

.my-timeline__item {
  position: relative;
  margin: 0 0 20px;
}

/* Split item grid: left card | center gutter | right card */
.my-timeline--split .my-timeline__item {
  display: grid;
  grid-template-columns: 1fr var(--gutter) 1fr;
  align-items: stretch; /* IMPORTANT: allows marker vertical centering */
}

/* Marker sits in center gutter and is centered both axes */
.my-timeline--split .my-timeline__marker {
  grid-column: 2;
  place-self: center;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--line-color);
  box-sizing: border-box;
  z-index: 2;
}

/* Card baseline */
.my-timeline__content {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  width: min(var(--card-max), 100%);
}

/* Default: put card on RIGHT */
.my-timeline--split .my-timeline__content {
  grid-column: 3;
  justify-self: start;
}

.my-timeline--split .my-timeline__item:nth-child(odd) {
  align-items: stretch;
}

/* Auto alternate: odd items LEFT, even items RIGHT */
.my-timeline--split .my-timeline__item:nth-child(odd) .my-timeline__content {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  align-self: stretch;
}
.my-timeline--split .my-timeline__item:nth-child(even) .my-timeline__content {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

.my-timeline--split .my-timeline__item:nth-child(odd) .my-timeline__marker {
  place-self: center;
}

/* ---------------------------------------------------------
   CONTENT: image beside text (image on line side)
   Requires markup: .my-timeline__main > (.my-timeline__media + .my-timeline__text)
   --------------------------------------------------------- */

.my-timeline__main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.my-timeline__media {
  flex: 0 0 var(--media-size);
  margin: 0;
}

.my-timeline__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--card-border);
}

.my-timeline__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Image should be on the "line side":
   - LEFT card => line is on the right edge of card => image on the right => row-reverse
   - RIGHT card => line on left edge => image on left => normal row
*/
.my-timeline--split .my-timeline__item:nth-child(odd) .my-timeline__main {
  flex-direction: row-reverse;
}

/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */

.my-timeline__label {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 6px;
}

.my-timeline__title {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: #111827;
}

.my-timeline__body {
  color: #374151;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   SINGLE LAYOUT (if you use my-timeline--single)
   --------------------------------------------------------- */

.my-timeline--single .my-timeline__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: stretch;
}

.my-timeline--single .my-timeline__marker {
  grid-column: 1;
  place-self: center;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--line-color);
  box-sizing: border-box;
  z-index: 2;
}

.my-timeline--single .my-timeline__content {
  grid-column: 2;
  justify-self: start;
  width: min(var(--card-max), 100%);
  text-align: left;
}

.my-timeline--single.my-timeline--right .my-timeline__item {
  grid-template-columns: 1fr 44px;
}

.my-timeline--single.my-timeline--right .my-timeline__marker {
  grid-column: 2;
}

.my-timeline--single.my-timeline--right .my-timeline__content {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

/* =========================================================
   FINAL FIX: marker centers relative to the card (both sides)
   ========================================================= */

/* Remove marker from grid flow */
.my-timeline--split .my-timeline__marker {
  position: absolute;
  top: 50%;
  left: calc(var(--line-x) + (var(--line-width) / 2));
  transform: translate(-50%, -50%);
  grid-column: unset;
  place-self: unset;
}

/* Ensure the item is the positioning reference */
.my-timeline--split .my-timeline__item {
  position: relative;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 782px) {
  .my-timeline {
    max-width: 100%;
    padding: 24px 12px 8px 12px;
    --gutter: 32px;
    --card-max: 100%;
    --line-x: calc(20px - (var(--line-width) / 2));
    background-position: var(--line-x) var(--line-trim-top);
  }

  /* Stack split layout into single column on mobile */
  .my-timeline--split .my-timeline__item {
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
  }

  .my-timeline--split .my-timeline__marker {
    grid-column: 1;
    place-self: center;
    left: 0;
    transform: translate(-50%, -50%);
	transform: translateY(-50%);
  }

  .my-timeline--split .my-timeline__content {
    grid-column: 2 !important;
    justify-self: start !important;
    text-align: left !important;
  }

  .my-timeline__main {
    flex-direction: column !important;
  }

  .my-timeline__media {
    flex: 0 0 auto;
    width: min(260px, 100%);
  }
}