/* ============================================================
   feature-dark.css — Mastery Logistics Systems

   Dark feature block: content one side, a self-framed visual the
   other, on a near-black ground with a copper glow. Extracted from
   optimization.css when the Shippers page adopted the OptiRoute
   block, so the two pages share one definition rather than drifting
   apart — the same reason leo.css and testimonial.css exist.

   Consumers: /optimization/ (OptiRoute, OptiMatch) and /shippers/.

   .feature-dark--alt reverses the layout, putting the visual first
   on desktop. Below 768px both orders collapse so the visual always
   leads.
============================================================ */

/* ============================================================
   SECTION 9 — OPTIROUTE FEATURE (on dark)
   Reversed two-column feature: visual left, content right.
============================================================ */
.feature-dark {
  position: relative;
  background: #0a0a0a;
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  overflow: hidden;
}

.feature-dark__glow {
  position: absolute;
  top: 50%;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(178, 93, 66, 0.08), transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
}

.feature-dark__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.feature-dark--alt .feature-dark__content {
  order: 2;
}

.feature-dark--alt .feature-dark__media {
  order: 1;
}

.feature-dark__content .eyebrow {
  color: var(--color-copper-light);
  margin-bottom: 0.875rem;
}

.feature-dark__heading {
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 1.75rem;
}

.feature-dark__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.feature-dark__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--leading-normal);
}

.feature-dark__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(252, 147, 101, 0.15);
  color: var(--color-copper-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.feature-dark__media {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- OPTIROUTE MULTI-ROUTE VISUAL -----
   Self-framed infographic SVG: it brings its own dark card, grid,
   depot label, route legend and KPI strip, so the CSS only sizes it
   and adds the drop shadow used by the OptiMatch visual in the other
   dark feature block on this page. */
.feature-dark__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Inline CTA under the bullet list. Other pages use a copper-dark link
   on light grounds; on this near-black block it takes the light copper so
   it clears the background. */
.feature-dark__cta {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--color-copper-light, #fc9365);
  font-weight: 500;
  text-decoration: none;
}

.feature-dark__cta:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  /* Dark feature block - single column: copy, then the visual, then the CTA.
     The text column stops being its own box so its children lay out in the
     stack. The alt variant is named explicitly because its desktop order
     uses two classes and would otherwise win on specificity.

     Pages that want the visual to lead instead - breaking up a run of copy
     between a section intro and this heading - add feature-dark--visual-first. */
  .feature-dark__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .feature-dark__content {
    display: contents;
  }

  .feature-dark__media,
  .feature-dark--alt .feature-dark__media {
    order: 1;
    margin: 0.5rem 0;
  }

  .feature-dark__cta {
    order: 2;
    align-self: flex-start;
  }

  .feature-dark--visual-first .feature-dark__media,
  .feature-dark--alt.feature-dark--visual-first .feature-dark__media {
    order: -1;
    margin: 0 0 1.5rem;
  }