/* Visual parity tweaks for LSO visual parity — layout/styling only */

/* Featured shipping services: tall left card + two horizontal cards (desktop) */
@media (min-width: 1024px) {
  .lso-services-featured {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }

  .lso-services-featured > a:nth-child(1) {
    grid-row: span 2;
  }

  .lso-services-featured > a:nth-child(2),
  .lso-services-featured > a:nth-child(3) {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 220px;
  }

  .lso-services-featured > a:nth-child(2) > div:first-child,
  .lso-services-featured > a:nth-child(3) > div:first-child {
    width: 42%;
    flex-shrink: 0;
    aspect-ratio: auto !important;
    min-height: 220px;
    order: 2;
  }

  .lso-services-featured > a:nth-child(2) > div:last-child,
  .lso-services-featured > a:nth-child(3) > div:last-child {
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lso-services-featured > a:nth-child(n + 4) {
    grid-column: span 1;
  }
}

/* Footer social icons: keep circular buttons crisp */
footer a[aria-label="Facebook"] img,
footer a[aria-label="Instagram"] img,
footer a[aria-label="Linkedin"] img,
footer a[aria-label="Youtube"] img {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* Shipment activity timeline: continuous connector + mobile pulse */
.shipment-timeline-line {
  width: 2px !important;
  background-color: #e0e0e0 !important;
  z-index: 0;
}

.timeline-dot-pulse-blue,
.timeline-dot-pulse-green,
.timeline-dot-pulse-red {
  position: relative;
  z-index: 2;
  -webkit-animation-duration: 2.4s !important;
  animation-duration: 2.4s !important;
  -webkit-animation-iteration-count: infinite !important;
  animation-iteration-count: infinite !important;
  -webkit-animation-timing-function: ease-in-out !important;
  animation-timing-function: ease-in-out !important;
}

.timeline-dot-pulse-blue {
  -webkit-animation-name: shipment-status-pulse, shipment-status-glow-blue !important;
  animation-name: shipment-status-pulse, shipment-status-glow-blue !important;
}

.timeline-dot-pulse-green {
  -webkit-animation-name: shipment-status-pulse, shipment-status-glow-green !important;
  animation-name: shipment-status-pulse, shipment-status-glow-green !important;
}

.timeline-dot-pulse-red {
  -webkit-animation-name: shipment-status-pulse, shipment-status-glow-red !important;
  animation-name: shipment-status-pulse, shipment-status-glow-red !important;
}

/* Keep timeline pulse visible on mobile even when OS "reduce motion" is on */
@media (prefers-reduced-motion: reduce) {
  .timeline-dot-pulse-blue,
  .timeline-dot-pulse-green,
  .timeline-dot-pulse-red {
    -webkit-animation-duration: 2.4s !important;
    animation-duration: 2.4s !important;
    -webkit-animation-iteration-count: infinite !important;
    animation-iteration-count: infinite !important;
  }
}

/* Stronger mobile pulse (small dots + box-shadow alone are easy to miss) */
@media (max-width: 767px) {
  .timeline-dot-pulse-blue {
    -webkit-animation-name: lso-timeline-pulse-blue !important;
    animation-name: lso-timeline-pulse-blue !important;
  }

  .timeline-dot-pulse-green {
    -webkit-animation-name: lso-timeline-pulse-green !important;
    animation-name: lso-timeline-pulse-green !important;
  }

  .timeline-dot-pulse-red {
    -webkit-animation-name: lso-timeline-pulse-red !important;
    animation-name: lso-timeline-pulse-red !important;
  }
}

@keyframes lso-timeline-pulse-blue {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 101, 147, 0.55); }
  70% { transform: scale(1.35); opacity: 0.85; box-shadow: 0 0 0 10px rgba(0, 101, 147, 0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 101, 147, 0); }
}

@keyframes lso-timeline-pulse-green {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55); }
  70% { transform: scale(1.35); opacity: 0.85; box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

@keyframes lso-timeline-pulse-red {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  70% { transform: scale(1.35); opacity: 0.85; box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.lso-tracking-barcode {
  display: block;
  height: 72px;
  width: auto;
  max-width: min(280px, 100%);
  background: #fff;
}

/* Homepage hero is text-center; keep shipment updates left, next to the dots */
h3:has(+ ol .shipment-timeline-line) {
  text-align: left !important;
}

li:has(.shipment-timeline-line) {
  text-align: left !important;
  gap: 0.45rem !important;
}

li:has(.shipment-timeline-line) > div:last-child,
li:has(.shipment-timeline-line) p {
  text-align: left !important;
}

.whitespace-pre-line {
  white-space: pre-line !important;
}