/* Shared component polish layered after styles.css. */

.strategic-route.strong {
  display: block;
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  color: white;
}

.strategic-route.strong::before {
  content: none;
}

.strategic-route-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 255px;
  padding: clamp(2.5rem, 5vw, 3.6rem) calc(var(--skew-panel) + 3.25rem) clamp(2.5rem, 5vw, 3.6rem) calc(var(--skew-panel) + 4.25rem);
}

.strategic-route-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 24, 32, 0.96), rgba(39, 70, 88, 0.92));
  clip-path: polygon(var(--skew-panel) 0, 100% 0, calc(100% - var(--skew-panel)) 100%, 0 100%);
  z-index: -1;
}

.strategic-route-copy {
  min-width: 0;
  max-width: 560px;
}

.strategic-route-panel h2,
.strategic-route-panel p {
  color: white;
}

.strategic-route-panel h2 {
  max-width: 560px;
}

.strategic-route-panel p {
  max-width: 540px;
}

.strategic-route-panel .button {
  justify-self: end;
  width: min(100%, 520px);
}

@media (max-width: 980px) {
  .strategic-route-panel {
    grid-template-columns: 1fr;
  }

  .strategic-route-panel .button {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .strategic-route-panel {
    min-height: auto;
    padding: 2rem 1.25rem;
  }

  .strategic-route-panel::before {
    clip-path: polygon(var(--skew-panel) 0, 100% 0, calc(100% - var(--skew-panel)) 100%, 0 100%);
  }

  .strategic-route-panel .button {
    width: 100%;
  }
}