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

   COMPONENT REUSE:
   - .visual-frame — dark rounded frame used for Sections 2, 3,
     and 5 (same pattern as other Who We Serve pages).
   - .feature — shared feature block system with --warm,
     --reverse, --stacked variants.
   - .cta-banner — standard closing CTA.
   - .image-placeholder — hero image slot.

   NEW COMPONENT INTRODUCED HERE:
   - Section 3's platform visual is now mastermind-capabilities.svg,
     which carries its own layout — the concept
     we're conveying here.
   - .scorecard-vis — light-mode carrier scorecard visual for
     Section 4. Sits directly on the white section background.
     Metrics mirror the actual MasterMind carrier scorecard
     product screen (Overall Score, On-Time Delivery, Tender
     Acceptance, Bounce Rate).
   - .api-vis — light-mode API endpoint diagram for Section 6.
     Concentric orbits with unnamed endpoint nodes and
     bidirectional flow indicators. No named systems.

   PAGE STRUCTURE:
   1. Hero (dark, image right)
   2. Visibility (white, content L / dark network dashboard R)
   3. One platform (warm, STACKED — dark modular platform visual)
   4. Measure carriers (white, alt — LIGHT scorecard L / content R)
   5. Freight spend (warm, content L / dark spend card R)
   6. Enterprise integration (white, alt — LIGHT API visual L / content R)
   7. CTA banner (dark)
============================================================ */


/* ============================================================
   IMAGE PLACEHOLDER (hero only on this page)
============================================================ */
.image-placeholder {
  position: relative;
  aspect-ratio: 16 / 11;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8ddd4, #d4c8bf);
  border: 0.5px solid rgba(178, 93, 66, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.image-placeholder--dark {
  background:
    radial-gradient(circle at 50% 50%, rgba(252, 147, 101, 0.14), transparent 65%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  border-color: rgba(252, 147, 101, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.image-placeholder__label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  text-align: center;
}

.image-placeholder--dark .image-placeholder__label {
  color: rgba(255, 255, 255, 0.75);
}

.image-placeholder__note {
  position: relative;
  font-size: var(--text-xs);
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.image-placeholder--dark .image-placeholder__note {
  color: rgba(255, 255, 255, 0.4);
}


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

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

.shp-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;
}

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

.shp-hero__content {
  max-width: 480px;
}

.shp-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;
}

.shp-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;
}

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

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

.shp-hero__image {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   SECTIONS 2–6 — FEATURE BLOCKS
   Standard system used across Who We Serve pages.
============================================================ */
.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: 940px;
  margin: 0 auto;
  gap: 2.5rem;
}

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

.feature--stacked .feature__media {
  max-width: 900px;
  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__media {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   VISUAL FRAME — dark rounded frame for Sections 2, 3, 5
============================================================ */
.visual-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(252, 147, 101, 0.14), transparent 65%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.visual-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 147, 101, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 147, 101, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.visual-frame--wide {
  aspect-ratio: 16 / 9;
  padding: 1.75rem;
}


/* ============================================================
   SECTION-SPECIFIC VISUAL WRAPPERS
============================================================ */

/* Section 2 — Network dashboard */
/* Feature visuals are SVG cards with their own rounded corners and
   transparent surrounds, so the shadow is a drop-shadow filter — a
   box-shadow would square off the corners. Black on these light
   sections, per the house treatment. */
.feature__image {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
}

/* Section 3 — Modular platform visual
   MasterMind container with 6 workflow modules inside. */
/* The capabilities graphic is drawn at 680px wide; the stacked media
   column is wider than that, so hold it at its intended size. */
.feature--stacked .feature__media .feature__image {
  max-width: 680px;
  margin: 0 auto;
}

/* Section 4 — Carrier scorecard (LIGHT MODE, no dark frame)
   Sits directly on the white section background. */
.scorecard-vis {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.scorecard-vis svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 5 — Freight spend card */
.spend-vis {
  position: relative;
  width: 100%;
}

.spend-vis svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 6 — API integration visual (LIGHT MODE, no dark frame)
   Sits directly on the white section background. */
.api-vis {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.api-vis svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Bidirectional flow dots — each rides its own connection line
   between an endpoint and the MasterMind hub, so the diagram reads
   as data moving both ways rather than six dots pulsing in place.

   --in-* is the offset from the dot's resting position to the hub
   end of its line, --out-* the offset to the endpoint end. The
   shared keyframe walks between them and 'alternate' sends it back,
   so one rule covers all six directions. Staggered delays keep them
   from marching in lockstep. */
.api-flow {
  animation: api-flow 2.8s ease-in-out infinite alternate;
}

@keyframes api-flow {
  from {
    transform: translate(var(--out-x), var(--out-y));
    opacity: 0.3;
  }
  to {
    transform: translate(var(--in-x), var(--in-y));
    opacity: 1;
  }
}

.api-flow--nw {
  --out-x: -45px;
  --out-y: -23px;
  --in-x: 45px;
  --in-y: 22px;
  animation-delay: 0s;
}

.api-flow--ne {
  --out-x: 45px;
  --out-y: -23px;
  --in-x: -45px;
  --in-y: 22px;
  animation-delay: -0.9s;
}

.api-flow--sw {
  --out-x: -45px;
  --out-y: 23px;
  --in-x: 45px;
  --in-y: -17px;
  animation-delay: -1.8s;
}

.api-flow--se {
  --out-x: 45px;
  --out-y: 23px;
  --in-x: -45px;
  --in-y: -17px;
  animation-delay: -0.45s;
}

.api-flow--n {
  --out-x: 0px;
  --out-y: -30px;
  --in-x: 0px;
  --in-y: 31px;
  animation-delay: -1.35s;
}

.api-flow--s {
  --out-x: 0px;
  --out-y: 30px;
  --in-x: 0px;
  --in-y: -31px;
  animation-delay: -2.25s;
}

@media (prefers-reduced-motion: reduce) {
  .api-flow {
    animation: none;
    transform: none;
    opacity: 1;
  }
}



/* ============================================================
   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;
}


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

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

  /* Single column, with the CTA below the visual rather than above
     it. .shp-hero__actions is nested inside .shp-hero__content, so it
     cannot be ordered past .shp-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. */
  .shp-hero__inner {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .shp-hero__content {
    display: contents;
  }

  .shp-hero .eyebrow {
    order: 1;
  }

  .shp-hero__headline {
    order: 2;
  }

  .shp-hero__sub {
    order: 3;
  }

  .shp-hero__media {
    order: 4;
  }

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

  .shp-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 lets the visual sit between the copy and the link. 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:not(.feature--stacked) .feature__content {
    display: contents;
  }

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

  .feature__content > a,
  .feature--reverse .feature__content > a {
    order: 2;
    align-self: flex-start;
  }

  /* The stacked variant keeps its own centred text box; only order changes. */
  .feature--stacked .feature__media {
    order: 1;
    margin-top: 2rem;
  }

  /* Stacked variant — already single column, but tighter gap */
  .feature--stacked .feature__inner {
    gap: 2rem;
  }

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

}


@media (max-width: 480px) {

}