/* ============================================================
   configuration-portal.css — Mastery Logistics Systems
   Configuration Portal page-specific styles.
   Global styles live in style.css.
   Desktop styles first. Mobile overrides at the bottom.

   TITLE BLOCK CONVENTION (applies across all pages):
   - Eyebrow: no max-width
   - H2: no max-width — headlines flow at their natural width
   - Sub / lede in CENTERED title blocks: max-width: 640px;
     margin: 0 auto (for readable line length)
   - LEFT-ALIGNED title blocks: constrained by their parent
     column or container — no additional max-width needed

   IMAGE-LED CARD CONVENTION (.card-visual — site-wide standard):
   This page reuses the .card-visual component defined on the
   platform page. If style.css does NOT yet host .card-visual
   globally, the platform.css version is the source of truth.
   The 2-card "Automate everything" section uses it directly.
============================================================ */

/* ============================================================
   SECTION 1 — HERO
   Dark. Two-column: H1 + sub + CTA on left, screenshot on right.
   Mirrors the platform page hero pattern.
============================================================ */
.hero {
  position: relative;
  background-color: #0a0a0a;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.hero__overlay {
  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;
}

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

.hero__content {
  max-width: 460px;
}

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

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

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

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

.hero__actions--below-media {
  display: none;
}

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

/* The hero visual is a drawn graphic on a transparent canvas with its
   content inset, so it takes a drop-shadow filter that follows the
   artwork rather than box-shadow, which would outline the empty canvas.
   Dark hero, so the glow is copper per the house treatment. */
.hero__graphic {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 20px rgba(252, 147, 101, 0.30))
          drop-shadow(0 0 50px rgba(252, 147, 101, 0.15));
}

/* ============================================================
   SECTION 2 — THE BRIDGE
   Dark. Centered. Strikethrough headline as the visual device.
   Bold, large H2 carries the message; one short supporting line.
============================================================ */
.bridge {
  position: relative;
  background: #0a0a0a;
  border-top: 0.5px solid #1f1f1f;
  text-align: center;
  overflow: hidden;
}

.bridge__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(178, 93, 66, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.bridge__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.bridge .eyebrow {
  color: var(--color-copper-light);
  margin-bottom: 1.25rem;
  display: block;
}

.bridge__heading {
  color: var(--color-white);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 1.25rem;
}

/* Strikethrough device — the "before" word, struck through in
   copper. Provides the visual contrast that carries the section. */
.bridge__strike {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  text-decoration-color: rgba(252, 147, 101, 0.6);
  text-decoration-thickness: 2px;
}

.bridge__sub {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   FEATURE BLOCK (Sections 3 & 4 — Connection Station + Doc Editor)
   White section. Two-column: content + screenshot. Headline + 3
   checkmark bullets, no eyebrow, no paragraph. The .feature--reverse
   modifier flips column order so features alternate down the page.
============================================================ */
.feature {
  background: var(--color-white);
}

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

/* Alternating layout — image on the opposite side */
.feature--reverse .feature__content {
  order: 2;
}

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

.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.75rem;
}

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

.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__media {
  position: relative;
  width: 100%;
}

.feature__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  /* House rule: components on a WHITE background get the standard
     black drop shadow (matching driver-management's feature
     visuals); the copper glow is reserved for dark backgrounds. */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
}

/* ============================================================
   SECTION 5 — AUTOMATE EVERYTHING (2-card grid)
   Light warm. Centered title block, then a 2-card grid using
   the .card-visual component (defined on platform page; copy
   below if not yet promoted to global style.css).
============================================================ */
.automate {
  background: #faf6f3;
}

.automate__head {
  margin-bottom: 2.5rem;
}

.automate__head .eyebrow {
  color: var(--color-copper-dark);
}

.automate__head h2 {
  color: var(--color-text-primary);
  margin-top: 0.5rem;
  margin-bottom: 0.875rem;
}

.automate__head .text-lead {
  color: var(--color-text-secondary);
  max-width: 540px;
  margin: 0 auto;
}

.automate__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* ------------------------------------------------------------
   IMAGE-LED CARD COMPONENT (.card-visual)
   Mirrors the version defined on the platform page. If this is
   not yet hoisted to a global style.css, this local copy keeps
   the configuration-portal page self-contained.
------------------------------------------------------------ */
.card-visual {
  background: var(--color-white);
  border: 0.5px solid rgba(178, 93, 66, 0.2);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-normal);
}

.card-visual:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-visual__image-zone {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1a1a;
}

.card-visual__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Animated Automate Everything visuals (Rules Engine cascade +
   Notification Station router). Fill the 16:10 image zone; same
   animation language as the platform hub and brokerages freight
   card. */
.auto-vis {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 60% at 50% 55%, rgba(178, 93, 66, 0.30) 0%, rgba(135, 62, 43, 0.12) 45%, rgba(0, 0, 0, 0) 75%),
    #17100c;
  overflow: hidden;
}

.auto-vis::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: 34px 34px;
  pointer-events: none;
}

.auto-vis__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.auto-vis__track {
  fill: none;
  stroke: rgba(178, 93, 66, 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 4 7;
  animation: autoVisFlow 3.5s linear infinite;
}

@keyframes autoVisFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -44; }
}

.auto-vis__packet {
  fill: var(--color-copper);
  filter: drop-shadow(0 0 4px rgba(252, 147, 101, 0.9));
}

.auto-vis__chip {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(28, 19, 14, 0.92);
  border: 1px solid rgba(252, 147, 101, 0.35);
  border-radius: 10px;
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  padding: 10px 14px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
}

.auto-vis__chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: var(--color-copper);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auto-vis__chip svg .auto-vis__icon-fill {
  fill: var(--color-copper);
  stroke: none;
}

.auto-vis__chip--outcome {
  background: var(--gradient-copper);
  border: none;
  animation: autoVisPulse 5s ease-in-out infinite;
}

.auto-vis__chip--outcome svg {
  stroke: var(--color-white);
}

@keyframes autoVisPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(252, 147, 101, 0.35), 0 0 0 0 rgba(252, 147, 101, 0); }
  50%      { box-shadow: 0 0 26px rgba(252, 147, 101, 0.55), 0 0 0 8px rgba(252, 147, 101, 0.07); }
}

.auto-vis__router {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 13%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--gradient-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: autoVisPulse 5s ease-in-out infinite;
  z-index: 2;
}

.auto-vis__router svg {
  width: 42%;
  height: 42%;
  stroke: var(--color-white);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rules Engine — four-step staircase */
.auto-vis__chip--re1 { left: 18%;   top: 21%; }
.auto-vis__chip--re2 { left: 40%;   top: 40%; }
.auto-vis__chip--re3 { left: 62.5%; top: 60%; }
.auto-vis__chip--re4 { left: 82.5%; top: 80%; }

/* Notification Station — event, router, three recipients */
.auto-vis__chip--ns-ev { left: 19%; top: 50%; }
.auto-vis__router--ns  { left: 50%; top: 50%; }
.auto-vis__chip--ns-r1 { left: 81%; top: 26%; }
.auto-vis__chip--ns-r2 { left: 81%; top: 50%; }
.auto-vis__chip--ns-r3 { left: 81%; top: 74%; }

@media (prefers-reduced-motion: reduce) {
  .auto-vis__track,
  .auto-vis__chip--outcome,
  .auto-vis__router {
    animation: none;
  }

  .auto-vis__packet {
    display: none;
  }
}

.card-visual__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 30% 35%, rgba(252, 147, 101, 0.18) 0%, transparent 62%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
}

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

.card-visual__placeholder-label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(252, 147, 101, 0.9);
  letter-spacing: 0.02em;
}

.card-visual__placeholder-note {
  position: relative;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-visual__body {
  padding: 1.5rem 1.5rem 1.625rem;
}

.card-visual__body h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.card-visual__body p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ============================================================
   SECTION 6 — ADMIN CONTROL (User Access strip)
   White. Compact two-column. Narrower image, smaller block. Same
   bullet style as the hero features for unity.
============================================================ */
.admin {
  background: var(--color-white);
  border-top: 0.5px solid var(--color-border);
}

.admin__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.admin__content .eyebrow {
  color: var(--color-copper-dark);
}

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

.admin__media {
  position: relative;
  width: 100%;
}

.admin__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  /* White background → standard black drop shadow (house rule). */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
}

/* ============================================================
   SECTION 7 — CTA BANNER
   Standard treatment, mirrors platform page and homepage CTA.
============================================================ */
.cta-banner {
  background: #111111;
  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.1) 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 — single column, screenshot below text */
  .hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__actions {
    display: none;
  }

  .hero__actions--below-media {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions--below-media > a {
    text-align: center;
    justify-content: center;
  }

  /* Bridge — heading shrinks gracefully via clamp(), nothing else
     to adjust; padding handled by .section base */

  /* Feature blocks — single column, image always above content on
     mobile regardless of desktop order (cleaner reading flow) */
  .feature__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .feature__media {
    order: 2;
  }

  .feature__content {
    order: 1;
  }

  .feature--reverse .feature__content,
  .feature--reverse .feature__media {
    order: initial;
  }

  /* Automate — single column grid */
  .automate__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Automate visuals — smaller chips on narrow screens */
  .auto-vis__chip {
    font-size: 0.53125rem;
    padding: 7px 9px;
    gap: 5px;
  }

  .auto-vis__chip svg {
    width: 10px;
    height: 10px;
  }

  /* Admin — single column */
  .admin__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

}