/* ============================================================
   imc-drayage.css — Mastery Logistics Systems
   IMC & IMDL (Who We Serve) page-specific styles.
   Global styles live in style.css.
   Desktop styles first. Mobile overrides at the bottom.

   ARCHITECTURE NOTES:
   This page's visuals are ALL image placeholders (unlike
   Carriers and Private Fleets which have inline SVG concept
   visuals). Scott will supply AI-generated imagery which slots
   in via the standard <img> tag pattern. This makes the CSS
   simpler than prior Who We Serve pages — no visual-frame,
   no chart mocks, no map mocks.

   COMPONENT REUSE:
   - .feature — shared feature block system with --warm,
     --reverse, --stacked variants.
   - .cta-banner — standard closing CTA.

   NEW COMPONENTS INTRODUCED HERE:
   - .imc-imdl-hero — hero with image placeholder on the right.
     glyph and center label. Used across all five image slots
     on this page. Distinct from .photo-placeholder (used on
     Carriers and Private Fleets for real human/scene photos).

   PAGE STRUCTURE:
   1. Hero (dark, image right)
   2. One dedicated view (white, content L / image R)
   3. Beat the clock (warm, STACKED — paragraph + wide image)
   4. Coordinate every party (white, content L / image R)
   5. Chassis coordination (warm, alt — image L / content R)
   6. Trusted by strip (white)
   7. CTA banner (dark)
============================================================ */

/* ============================================================
   SECTION 1 — HERO
   Dark. Two-column with image right.
============================================================ */
.imc-imdl-hero .eyebrow {
  color: var(--color-copper-light);
}

.imc-imdl-hero {
  position: relative;
  background-color: #0a0a0a;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.imc-imdl-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(178, 93, 66, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.imc-imdl-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.imc-imdl-hero__content {
  max-width: 480px;
}

.imc-imdl-hero__headline {
  font-size: var(--font-size-h1);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.imc-imdl-hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
  max-width: 460px;
}

.imc-imdl-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.imc-imdl-hero__media {
  position: relative;
  width: 100%;
}

/* The hero visual is a drawn graphic on a transparent canvas, not a
   photo, so it keeps its own proportions instead of being cropped to
   16/11, and takes a drop-shadow filter that follows the artwork rather
   than box-shadow, which would outline the empty canvas. Copper glow
   because the hero is dark. */
.imc-imdl-hero__graphic {
  width: 100%;
  max-width: 580px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 20px rgba(252, 147, 101, 0.30))
          drop-shadow(0 0 50px rgba(252, 147, 101, 0.15));
}

/* ============================================================
   SECTIONS 2–5 — FEATURE BLOCKS
   Standard system: .feature (white) / .feature--warm (warm) /
   .feature--reverse (image left, content right) /
   .feature--stacked (single-column centered).
============================================================ */
.feature {
  background: var(--color-white);
}

.feature--warm {
  background: #faf6f3;
}

.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
  align-items: center;
}

.feature--reverse .feature__content {
  order: 2;
}

.feature--reverse .feature__media {
  order: 1;
}

/* Single-column stacked variant (Section 3) */
.feature--stacked .feature__inner {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
  gap: 2.5rem;
}

.feature--stacked .feature__content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.feature--stacked .feature__media {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.feature__heading {
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 1.25rem;
}

.feature__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.feature__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(178, 93, 66, 0.12);
  color: var(--color-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.feature__paragraph {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--color-copper-dark);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color var(--transition-fast);
}

.feature__link:hover {
  color: var(--color-copper-darker);
}

.feature__link-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.feature__link:hover .feature__link-arrow {
  transform: translateX(3px);
}

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

/* Every visual on this page is drawn artwork rather than a photograph,
   so nothing is cropped to a fixed ratio. Each graphic keeps its own
   proportions and takes a drop-shadow that follows its edges, whether it
   brings its own card or sits on a transparent canvas. Black rather than
   the copper glow, since these sections are light. */
.feature__graphic {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
}

/* ============================================================
   SECTION 7 — CTA BANNER
   Dark. Standard closing.
============================================================ */
.cta-banner {
  background: #0a0a0a;
  border-top: 0.5px solid #1f1f1f;
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(178, 93, 66, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.cta-banner__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  margin-bottom: 1rem;
}

/* ============================================================
   CROSS-ROUTE JOURNEY (moved from customer-management.css)
   Full-width single-column block. Centered title block,
   then a clean horizontal journey diagram below.

   Progress logic:
   - .journey-stop__circle--done = copper-traced (completed leg)
   - .journey-stop__circle--todo = grey-traced (upcoming leg)
   - Progress track behind the circles: copper for done, grey
     for remaining. Adjust .journey__track-done width to match
     completion percentage.
============================================================ */
.journey {
  background: #0a0a0a;
  border-top: 0.5px solid #1f1f1f;
  border-bottom: 0.5px solid #1f1f1f;
}

.journey__head {
  max-width: 680px;
  margin: 0 auto 3.5rem;
}

.journey__heading {
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0.5rem 0 0.75rem;
}

.journey__highlight {
  color: var(--color-copper-light);
}

.journey__head .text-lead {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-base);
  line-height: 1.55;
  margin: 0;
}

.journey__flow {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

/* Progress track sits behind the circles, aligned to circle center */
.journey__track {
  position: absolute;
  left: 65px;
  right: 65px;
  top: 34px;
  height: 2px;
  display: flex;
}

.journey__track-done {
  background: var(--color-copper);
  height: 100%;
  /* Adjust this value to match the % completed:
     2 of 4 stops completed = 50% (current state)
     The remaining flex fills with .journey__track-todo */
  width: 50%;
}

.journey__track-todo {
  background: rgba(255, 255, 255, 0.15);
  height: 100%;
  flex: 1;
}

.journey__stops {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.journey-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 130px;
  position: relative;
  z-index: 2;
}

.journey-stop__circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.journey-stop__circle--done {
  border-color: var(--color-copper-light);
  color: var(--color-copper-light);
  box-shadow: 0 0 0 6px rgba(252, 147, 101, 0.1);
}

.journey-stop__circle--todo {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.3);
}

.journey-stop__name {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  text-align: center;
}

@media (max-width: 1024px) {

  /* Journey track adjusts to smaller stop circles on tablet */
  .journey__track {
    left: 50px;
    right: 50px;
  }

}

/* ============================================================
   RESPONSIVE — MOBILE OVERRIDES
============================================================ */
@media (max-width: 768px) {

  /* Hero */
  .imc-imdl-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Single column, with the CTA below the visual rather than above
     it. .imc-imdl-hero__actions is nested inside .imc-imdl-hero__content, so it
     cannot be ordered past .imc-imdl-hero__media on its own; display:
     contents lifts the copy's children into the hero grid so all five
     can be ordered together. The wrapper is a plain div, so nothing
     is lost from the accessibility tree.

     Row gap drops to 0 because it would otherwise apply between every
     line of copy, not just between the blocks. Each element's own
     margins space them, exactly as they do on desktop. */
  .imc-imdl-hero__inner {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .imc-imdl-hero__content {
    display: contents;
  }

  .imc-imdl-hero .eyebrow {
    order: 1;
  }

  .imc-imdl-hero__headline {
    order: 2;
  }

  .imc-imdl-hero__sub {
    order: 3;
  }

  .imc-imdl-hero__media {
    order: 4;
  }

  .imc-imdl-hero__actions {
    order: 5;
    margin-top: 2rem;
    flex-direction: column;
    align-items: stretch;
  }

  .imc-imdl-hero__actions > a {
    text-align: center;
    justify-content: center;
  }

  /* Feature blocks - 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, which puts the CTA below the visual. The reversed variant is
     named explicitly because its desktop order uses two classes and would
     otherwise win on specificity. */
  .feature__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .feature__content {
    display: contents;
  }

  .feature__media,
  .feature--reverse .feature__media {
    order: 1;
    margin: 0.5rem 0;
  }

  .feature__link,
  .feature--reverse .feature__link {
    order: 2;
    align-self: flex-start;
    margin-top: 1.5rem;
  }

  /* The stacked variant centres its copy; keep that now the column box is gone. */
  .feature--stacked .feature__heading,
  .feature--stacked .feature__paragraph {
    text-align: center;
  }

  .feature--stacked .feature__link {
    align-self: center;
  }

  /* Stacked variant — already single column, but tighter gap */
  /* The stack spaces itself with element margins now, so a gap here would
     double up between the copy, the visual and the CTA. */
  .feature--stacked .feature__inner {
    gap: 0;
  }

  .feature--stacked .feature__media {
    margin: 2rem auto 0.5rem;
  }

  /* Journey — stack vertically on small screens */
  .journey__flow {
    max-width: 280px;
  }

  .journey__track {
    left: 50%;
    right: auto;
    top: 50px;
    bottom: 50px;
    height: auto;
    width: 2px;
    flex-direction: column;
    transform: translateX(-50%);
  }

  .journey__track-done {
    width: 100%;
    height: 50%;
  }

  .journey__track-todo {
    width: 100%;
    flex: 1;
  }

  .journey__stops {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .journey-stop {
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    justify-content: flex-start;
    padding-left: 0;
  }

  .journey-stop__name {
    text-align: left;
  }

  /* CTA */
  .cta-banner__heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

}