/* ==========================================
   Module: About Services Orbit (Figma 14448-3189)
   Canonical, self-contained styles for modules/section-about-services-orbit.php.
   Loaded LAST on every template that uses the module (About Us, Our Company,
   RB Platform) so it supersedes any older per-template orbit rules.

   Content is dynamic:
     - hero_heading           -> .about-services-orbit__heading (.hero-banner__heading)
     - hero_description        -> .about-services-orbit__intro p
     - hero_background_image   -> --orbit-ellipse (the right-side "Ellipse 14" glow)
     - hero_bullet_content     -> .about-services-orbit__item (min 3 dots)
   ========================================== */

.about-services-orbit {
  position: relative;
  overflow: hidden;
  background: #0f2318;
  padding: 10px 0;
}
.about-services-orbit__intro{
  position: relative;
  z-index: 1;
}

/* Green orbit ring — direct child of overflow:hidden so it always clips.
   margin-left = -diameter keeps the arc's right edge at 50% of the section. */
.about-services-orbit .about-services-orbit__intro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1%;
  /* Sized relative to the intro column so the arc keeps the same position
     as the column narrows in the row layout: 760/596 = 127.5%, -59/596 = -9.9%.
     Intro is capped at max-width:596px, so the ring never exceeds 760px. */
  width: 127.5%;
  aspect-ratio: 1 / 1;
  margin-left: -9.9%;
  transform: translateY(-50%);
  border: 3px solid rgb(6, 105, 56);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* The --no-list sections now render the same 3-dot list + ring as everyone else
   (just with empty placeholder dots), so they use the shared 50/50 layout above
   the breakpoint. The only difference is the breakpoint itself (1280px vs 992px),
   handled in the Responsive block below. */

/* Right-side glow — "Ellipse 14". The image is driven by --orbit-ellipse,
   set inline from hero_background_image; falls back to the default SVG. */
.about-services-orbit::before {
  content: "";
    position: absolute;
    width: 440.134px;
    height: 438.179px;
    top: 39px;
    right: -93px;
    background-image: url(../images/About%20Ellipse%2014.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Keep content above the ring & glow */
.about-services-orbit .container {
  position: relative;
  z-index: 2;
}

.about-services-orbit__inner {
  position: relative !important;
  display: flex;
  align-items: center;
  min-height: 380px;
}
/* Original inner ring disabled — the ring now lives on ::before above */
.about-services-orbit__inner::before {
  display: none;
}

/* Intro column (heading + description) */
.about-services-orbit__intro {
  flex: 0 0 50%;
  max-width: 596px;
  padding-right: 30px;
  box-sizing: border-box;
}
.about-services-orbit__heading {
  color: #fff;
  margin: 0 0 20px;
  font-size: 60px;
  font-style: normal;
  font-weight: 300;
  line-height: 65px;
}
.about-services-orbit__intro p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  margin: 0 0 15px;
}
.about-services-orbit__intro p:last-child {
  margin-bottom: 0;
}

/* Services list */
.about-services-orbit__list {
  flex: 0 0 50%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.about-services-orbit__item {
  position: relative !important;
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

/* Dots — hollow white with green stroke */
.about-services-orbit__dot {
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #1a7a40;
  box-shadow: 0 0 6px rgba(100, 200, 120, 0.3);
}
/* When JS places the dot on the arc */
.about-services-orbit__dot.on-arc {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1;
}

.about-services-orbit__title {
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 250ms ease;
}
/* Preserve links that come from the WYSIWYG bullet content */
.about-services-orbit__title a {
  color: inherit;
  text-decoration: none;
  transition: color 250ms ease;
}
.about-services-orbit__title a:hover {
  color: #2395ff;
}

/* Padded placeholder dots (no label) still occupy a row so 3 dots always show */
.about-services-orbit__item--empty {
  min-height: 31px;
}

/* Responsive */
@media (min-width: 992px) and (max-width: 1280px) {
  .about-services-orbit--no-list .about-services-orbit__intro {
    flex: 0 0 75%;
    max-width: 863px;
  }
  .about-services-orbit--no-list .about-services-orbit__list {
    flex: 0 0 40%;
  }
}
/* Tablet/mobile: anchor the right-side glow to the BOTTOM of the section instead
   of the top (`top: 39px` on the base rule above).
   This override MUST live in this file, not style.css: this stylesheet is printed
   via `custom_enqueue_head`, which header.php fires AFTER wp_head() — i.e. after
   style.css. `.about-services-orbit::before` here and in style.css have identical
   specificity (media queries add none), so source order decides and this file
   always wins. The same rule in style.css was silently dead. */
@media (max-width: 992px) {
  .about-services-orbit::before {
    top: auto;
    bottom: 0;
  }
}
/* Sections WITH an authored list keep the orbit ring + dots down to 992px, then
   collapse to a plain stacked layout — same as the old version. */
@media (max-width: 991px) {
  .about-services-orbit--no-list .about-services-orbit__list{
    display: none;
  }
  .about-services-orbit--no-list .about-services-orbit__inner{
    min-height: auto;
  }
  .about-services-orbit {
    padding: 60px 0;
  }
  .about-services-orbit__intro::before {
    display: none;
  }
  .about-services-orbit__item--empty {
    display: none;
  }
  .about-services-orbit__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .about-services-orbit__title {
    font-size: 26px;
    line-height: 32px;
  }
}
@media (max-width: 600px) {
  .about-services-orbit__heading {
    font-size: 28px;
  }
  .about-services-orbit__list {
    gap: 28px;
  }
  .about-services-orbit__title {
    font-size: 22px;
    line-height: 28px;
  }
  .about-services-orbit__dot {
    width: 24px;
    height: 24px;
  }
}