/* ============================================================
   LULOG — Service 02: Tailored Logistics Apps
   App-card + hand-drafted lo-fi sketch system.
   Loaded AFTER service-template.css. Scoped to body.svc-apps.
   ============================================================ */

/* ---------- Hero: blueprint ground instead of a photo ---------- */
body.svc-apps .tpl-hero__media--blueprint {
  background-color: var(--brown-900);
  background-image:
    linear-gradient(rgba(255, 237, 227, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 237, 227, 0.14) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
}
/* hero photo: keep the aircraft framed toward the sky/top-right */
body.svc-apps .tpl-hero__media--plane { object-position: 60% 42%; }/* stronger scrim under the bright sky so white type stays legible */
body.svc-apps .tpl-hero__scrim {
  background:
    linear-gradient(to top, rgba(40, 18, 12, 0.80) 0%, rgba(40, 18, 12, 0.42) 42%, rgba(40, 18, 12, 0.12) 78%, rgba(40, 18, 12, 0.18) 100%);
}
/* a couple of drafted screens floating in the hero, right side */
.tpl-hero__draft {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: clamp(120px, 14vw, 210px);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.4));
}
.tpl-hero__draft--a { right: 8%;  top: 20%;  transform: rotate(-5deg); }
.tpl-hero__draft--b { right: 22%; top: 42%;  transform: rotate(4deg); width: clamp(100px, 11vw, 170px); }
@media (max-width: 1024px) { .tpl-hero__draft { display: none; } }

/* ============================================================
   APP CARDS — lo-fi preview on top, copy beneath.
   Live inside .tpl-cards so the Columns tweak still drives layout.
   ============================================================ */
.app-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), border-color 0.24s var(--ease-out);
}
.app-sketch svg { transition: transform 0.4s var(--ease-out); transform-origin: center; will-change: transform; }
/* Hover lift gated to real pointers so a tap on touch doesn't stick it */
@media (hover: hover) and (pointer: fine) {
  .app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 56px -28px rgba(73, 38, 29, 0.32);
    border-color: var(--orange);
  }
  .app-card:hover .app-sketch svg { transform: scale(1.03); }
}
body.svc-apps[data-appfill="azul"] .app-card {
  background: var(--blue-soft);
  border-color: transparent;
}
body.svc-apps[data-appfill="azul"] .app-sketch { border-bottom-color: rgba(73, 38, 29, 0.14); }

/* the drafted screen */
.app-sketch {
  position: relative;
  aspect-ratio: 5 / 4;
  background: #fcf8f3;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.app-sketch svg { display: block; width: 100%; height: 100%; }

/* a small "concept" tab, hand-written feel — sits on a paper chip so it
   never clashes with the sketch behind it */
.app-sketch__tag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  font-family: "Caveat", cursive;
  font-size: 17px;
  line-height: 1;
  color: var(--orange);
  transform: rotate(-3deg);
  padding: 3px 9px 4px;
  background: #fcf8f3;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 2px 6px -3px rgba(73, 38, 29, 0.25);
}
body.svc-apps[data-appfill="azul"] .app-sketch__tag {
  background: var(--blue-soft);
  border-color: rgba(73, 38, 29, 0.14);
}

.app-card__body {
  padding: clamp(18px, 1.6vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.app-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 23px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--brown-900);
}
.app-card__desc {
  color: var(--brown-700);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}
body.svc-apps[data-appfill="azul"] .app-card__desc { color: var(--brown-800); }

/* a small "normally paid" price flag on selected cards */
.app-card__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-500);
}
.app-card__flag s { color: var(--brown-500); text-decoration-thickness: 1.5px; }
.app-card__flag b { color: var(--orange); font-weight: 600; }

/* ============================================================
   WIREFRAME PRIMITIVES (SVG classes) — pencil-on-paper palette
   ============================================================ */
.wf-stroke { stroke: #6e4035; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wf-faint  { stroke: #c8b1a8; stroke-width: 2; fill: none; stroke-linecap: round; }
.wf-fill   { fill: #ecd9cd; }
.wf-fill-d { fill: #c8b1a8; }
.wf-accent { fill: #FB4D00; }
.wf-accent-s { stroke: #FB4D00; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wf-paper  { fill: #fcf8f3; }
.wf-dash   { stroke-dasharray: 5 5; }

/* ============================================================
   Overview tweak — "rent vs included" ledger accents
   ============================================================ */
.apps-overview__body em { font-family: var(--f-serif); font-style: italic; color: var(--orange); }