/* ==========================================================================
   Our Journey — Elementor widget additions
   our-journey.css is an unchanged copy of the original; this file only adds
   what the widget needs on top of it. Breakpoints are the original ones.
   ========================================================================== */

/* ---- Elementor's global image reset ---------------------------------------
   Elementor's frontend.css has `.elementor img { height: auto; max-width:
   100% }` (specificity 0,1,1), which beats the original single-class rules
   and would leave the absolutely positioned photos short of their frames. */
.our-journey-section .our-journey__image,
.our-journey-section .our-journey__backdrop-image,
.our-journey-section .our-journey__patient-image {
  height: 100%;
  max-width: none;
}

/* ---- Grid rows for any number of milestones ------------------------------
   The original places items with :nth-child() row starts (up to ten, strict
   left / right alternation). The widget prints each item's row start as
   --oj-row, so items can be added, reordered or put on the same side twice
   without overlapping. Mobile keeps the original single-column flow. */
.our-journey-section[data-oj-widget] .our-journey__item {
  grid-row-start: var(--oj-row, auto);
}

@media (max-width: 767px) {
  .our-journey-section[data-oj-widget] .our-journey__item {
    grid-row-start: auto;
  }
}

/* ---- Optional parts left empty --------------------------------------------
   A card without a photo gives its text the whole card; a title without a
   year above it keeps clear of the round icon, as the year does. */
.our-journey-section .our-journey__card--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.our-journey-section .our-journey__body > .our-journey__title:first-child {
  margin-right: 64px;
}

@media (min-width: 1024px) {
  .our-journey-section .our-journey__card--no-media .our-journey__body {
    padding-left: 18px;
  }
}

@media (max-width: 1199px) {
  .our-journey-section .our-journey__body > .our-journey__title:first-child {
    margin-right: 48px;
  }
}

@media (max-width: 1023px) {
  .our-journey-section .our-journey__body > .our-journey__title:first-child {
    margin-right: 0;
  }

  /* Without a photo there is no image edge for the icon to sit on. */
  .our-journey-section .our-journey__card--no-media .our-journey__icon {
    top: 12px;
    border: 0;
  }

  .our-journey-section .our-journey__card--no-media .our-journey__year,
  .our-journey-section .our-journey__card--no-media .our-journey__body > .our-journey__title:first-child {
    margin-right: 48px;
  }
}

/* ---- Custom icons (icon library / uploaded SVG) ---------------------------
   The original line icons are stroked; library and uploaded icons are filled
   shapes, so they get a fill instead of the stroke. */
.our-journey-section .our-journey__icon--custom svg {
  fill: currentColor;
  stroke: none;
}

.our-journey-section .our-journey__icon--custom i {
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 1199px) {
  .our-journey-section .our-journey__icon--custom i {
    font-size: 20px;
  }
}

/* ---- Bottom wave hidden: no space reserved for it ------------------------ */
.our-journey-section.our-journey-section--no-wave {
  --oj-wave-h: 0px;
}

/* Editor-only empty state */
.our-journey-empty {
  padding: 48px 24px;
  border: 2px dashed rgba(11, 35, 64, 0.2);
  font: 500 15px/1.5 "DM Sans", system-ui, sans-serif;
  color: #4A5770;
  text-align: center;
}