/* ==========================================================================
   "من نحن — قصتي" timeline page (page-templates/template-about.php).
   Fonts, color tokens and .rbe-btn come from home.css, which loads first.
   ========================================================================== */

body.page-template-page-templates-template-about { background: var(--rbe-bg); }

.rbe-story {
  overflow: hidden;
  padding-block: 70px 100px;
  font-family: var(--rbe-font);
  color: var(--rbe-ink);
}

.rbe-story__head { margin-bottom: 70px; text-align: center; }
.rbe-story__title {
  margin: 0;
  font-family: var(--rbe-font);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: normal;
  color: var(--rbe-ink);
}
.rbe-story__underline {
  position: relative;
  display: block;
  width: 322px;
  max-width: 100%;
  height: 40px;
  margin: 0 auto;
  color: var(--rbe-orange);
}
.rbe-story__underline svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 322px;
  transform: translate(-50%, -50%) rotate(80.5deg);
}

/* ===== Timeline ===== */
.rbe-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
}
.rbe-timeline__line {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rbe-timeline__line path { fill: none; stroke: var(--rbe-orange); stroke-width: 1.2; }

.rbe-timeline__item { position: relative; z-index: 1; width: 250px; }
/* RTL: odd items sit on the right, even items on the left, interleaved vertically. */
.rbe-timeline__item:nth-of-type(odd) { align-self: flex-start; margin-inline-start: 120px; }
.rbe-timeline__item:nth-of-type(even) { align-self: flex-end; margin-inline-end: 60px; }
.rbe-timeline__item + .rbe-timeline__item { margin-top: -110px; }

.rbe-timeline__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 245 / 185;
  object-fit: cover;
  border-radius: 12px;
}
.rbe-timeline__text { margin-top: 18px; font-size: 13px; line-height: 1.5; }
.rbe-timeline__text p { margin: 0; }
.rbe-timeline__text p + p { margin-top: 1.5em; }
.rbe-timeline__text strong { font-weight: 700; }

.rbe-timeline__badge {
  position: absolute;
  top: 90px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60px;
  height: 62px;
  color: var(--rbe-orange);
}
.rbe-timeline__item:nth-of-type(odd) .rbe-timeline__badge { inset-inline-end: -75px; }
.rbe-timeline__item:nth-of-type(even) .rbe-timeline__badge { top: auto; bottom: 40px; inset-inline-start: -75px; }
.rbe-timeline__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rbe-timeline__badge--blob svg { transform: rotate(90deg); }
.rbe-timeline__badge--bean svg { transform: rotate(85deg); }
.rbe-timeline__badge--pebble svg { transform: rotate(-73deg); }
.rbe-timeline__label {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--rbe-bg);
}

.rbe-story__actions { margin-top: 90px; text-align: center; }
.rbe-story__cta { min-width: 238px; height: 52px; font-size: 20px; }

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .rbe-story { padding-block: 30px 60px; }
  .rbe-story__head { margin-bottom: 30px; }
  .rbe-story__title { font-size: 34px; }
  .rbe-story__underline { width: 240px; }
  .rbe-story__underline svg { height: 240px; width: 40px; }

  .rbe-timeline { padding-top: 70px; }
  .rbe-timeline__item { width: 66%; }
  .rbe-timeline__item:nth-of-type(odd) { margin-inline-start: 0; }
  .rbe-timeline__item:nth-of-type(even) { margin-inline-end: 0; }
  .rbe-timeline__item + .rbe-timeline__item { margin-top: 100px; }
  .rbe-timeline__text { font-size: 13px; }

  .rbe-timeline__badge,
  .rbe-timeline__item:nth-of-type(even) .rbe-timeline__badge { top: -70px; bottom: auto; width: 56px; height: 58px; }
  .rbe-timeline__item:nth-of-type(odd) .rbe-timeline__badge { inset-inline-end: auto; inset-inline-start: -10px; }
  .rbe-timeline__item:nth-of-type(even) .rbe-timeline__badge { inset-inline-start: auto; inset-inline-end: -10px; }

  .rbe-story__actions { margin-top: 60px; }
}