/* ============================================================
   LULOG — Logistics design language
   Reusable industrial motifs built from the brand tokens:
   container stacks · route lines · manifest type · barcode /
   tracking · cargo-tag stencil. Loaded after styles.css.
   ============================================================ */

/* ---------- manifest frame — shared by home + service heroes ---------- */
.hero__frame {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--brown-900);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(73, 38, 29, 0.4);
}
.hero__frame-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 237, 227, 0.16);
}
.hero__frame-top .tracking { color: var(--cream); }
.hero__frame-mode {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-bright);
}

/* ---------- image-slot defaults, brand-matched ---------- */
image-slot {
  display: block;
  --slot-bg: var(--brown-100);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(73, 38, 29, 0.05) 0px,
      rgba(73, 38, 29, 0.05) 1px,
      transparent 1px,
      transparent 12px
    ),
    var(--brown-100);
  border: 1px solid var(--line);
  color: var(--brown-700);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
image-slot::part(placeholder) {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-700);
}
image-slot.is-dark {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 237, 227, 0.06) 0px,
      rgba(255, 237, 227, 0.06) 1px,
      transparent 1px,
      transparent 12px
    ),
    var(--brown-800);
  border-color: rgba(255, 237, 227, 0.18);
  color: var(--cream);
}

/* ============================================================
   Barcode + tracking strip
   ============================================================ */
.barcode {
  --bar: var(--brown-900);
  width: 100%;
  height: 34px;
  background-color: transparent;
  background-image:
    linear-gradient(90deg,
      var(--bar) 0 2px, transparent 2px 5px,
      var(--bar) 5px 6px, transparent 6px 9px,
      var(--bar) 9px 13px, transparent 13px 15px,
      var(--bar) 15px 16px, transparent 16px 20px,
      var(--bar) 20px 23px, transparent 23px 24px,
      var(--bar) 24px 28px, transparent 28px 31px,
      var(--bar) 31px 32px, transparent 32px 36px,
      var(--bar) 36px 38px, transparent 38px 41px,
      var(--bar) 41px 45px, transparent 45px 46px,
      var(--bar) 46px 49px, transparent 49px 52px
    );
  background-size: 52px 100%;
  background-repeat: repeat-x;
}
.barcode--light { --bar: var(--cream); }

.tracking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-700);
}
.tracking::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 1px;
}

/* ============================================================
   Manifest block — shipping-label key/value typography
   ============================================================ */
.manifest {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
}
.manifest__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--brown-900);
  color: var(--cream);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.manifest__head .tracking { color: var(--cream); }
.manifest__head .tracking::before { background: var(--orange-bright); }
.manifest__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.manifest__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.manifest__row:nth-child(2n) { border-right: 0; }
.manifest__row dt,
.manifest__row .k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-500);
}
.manifest__row dd,
.manifest__row .v {
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brown-900);
  margin: 0;
}
.manifest__row .v--accent { color: var(--orange); }

/* dark variant */
.manifest--dark { background: var(--brown-800); border-color: rgba(255,237,227,0.16); }
.manifest--dark .manifest__head { background: var(--brown-950); }
.manifest--dark .manifest__row { border-color: rgba(255,237,227,0.12); }
.manifest--dark .manifest__row dt,
.manifest--dark .manifest__row .k { color: var(--brown-300); }
.manifest--dark .manifest__row dd,
.manifest--dark .manifest__row .v { color: var(--cream); }

/* ============================================================
   Container stack band — corrugated colored "containers"
   ============================================================ */
.container-band {
  display: flex;
  gap: 4px;
  height: 14px;
  width: 100%;
}
.container-band span {
  flex: 1;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.12) 0 1px,
    transparent 1px 6px
  );
  border-radius: 1px;
}
.container-band span:nth-child(5n+1) { background-color: var(--orange); }
.container-band span:nth-child(5n+2) { background-color: var(--brown-700); }
.container-band span:nth-child(5n+3) { background-color: var(--blue-soft); }
.container-band span:nth-child(5n+4) { background-color: var(--brown-900); }
.container-band span:nth-child(5n+5) { background-color: var(--brown-300); }

/* taller decorative stack used as a column accent */
.container-stack {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 3px;
  width: 100%;
  height: 100%;
}
.container-stack span {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.12) 0 1px,
    transparent 1px 7px
  );
  border-radius: 2px;
}
.container-stack span:nth-child(6n+1) { background-color: var(--orange); }
.container-stack span:nth-child(6n+2) { background-color: var(--brown-700); }
.container-stack span:nth-child(6n+3) { background-color: var(--blue-soft); }
.container-stack span:nth-child(6n+4) { background-color: var(--brown-300); }
.container-stack span:nth-child(6n+5) { background-color: var(--brown-900); }
.container-stack span:nth-child(6n+6) { background-color: var(--orange-soft); }

/* ============================================================
   Route line — dashed path with origin / destination nodes
   ============================================================ */
.route {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
.route__node {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  background: var(--cream-light);
  flex-shrink: 0;
  position: relative;
}
.route__node--filled { background: var(--orange); }
.route__line {
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--line-strong);
}
.route--light .route__node { background: var(--brown-900); border-color: var(--orange-bright); }
.route--light .route__node--filled { background: var(--orange-bright); }
.route--light .route__line { border-top-color: rgba(255,237,227,0.3); }

.route__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-700);
  white-space: nowrap;
  padding-inline: 12px;
}
.route--light .route__label { color: var(--brown-300); }

/* ============================================================
   Cargo tag — stencil label with punch hole
   ============================================================ */
.cargo-tag {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 22px 16px 40px;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.cargo-tag::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--cream-light);
}
.cargo-tag__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-500);
}
.cargo-tag__v {
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brown-900);
}

/* ============================================================
   Section label — stamped / coordinate variant
   ============================================================ */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown-700);
  border: 1px solid var(--line-strong);
  padding: 7px 12px;
  border-radius: 2px;
}
.stamp--light { color: var(--cream); border-color: rgba(255,237,227,0.3); }
.stamp__dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }

/* ============================================================
   Fleet strip — row of mode image slots with labels
   ============================================================ */
.fleet {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.fleet__cell {
  position: relative;
  display: flex;
  flex-direction: column;
}
.fleet__cell image-slot {
  width: 100%;
  aspect-ratio: 3 / 4;
}
.fleet__tag {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  background: var(--brown-900);
  color: var(--cream);
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fleet__tag span:first-child { flex: 1; }
.fleet__tag span:last-child { color: var(--orange-bright); flex-shrink: 0; }

@media (max-width: 900px) {
  .fleet { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fleet { grid-template-columns: 1fr; }
  .manifest__rows { grid-template-columns: 1fr; }
  .manifest__row { border-right: 0; }
}