/* Photo cards: the owner's photos of people at work and at home, with MoveConsole's own UI laid over them in HTML
   (owner, Nov 11 2026: «фоновое фото человека сгенерирую … а ты на него сверху наложишь остальное»). Prefix lf-
   (ph- is taken by hub.css). Sizes (owner, Nov 12): no photo bigger than the home page's cards — a portrait one about a
   fifth of the width, a landscape one about 30%. The overlays come in once a card is half on screen: lifestyle.js arms
   them, and without it they simply show. Figures are the demo company's (Kestrel Moving Co.), as on the rest of the site. */

.lf{
  position: relative; overflow: hidden; margin: 0; border-radius: var(--r-card); background: #d6d0c6;
  container-type: inline-size; isolation: isolate;
}
.lf > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

/* the surface every overlay sits on: frosted where there's a mouse, near-solid white on a phone or tablet. iPhone Safari
   gives every blur a layer of its own, and with the rest of the home page that ran it out of memory while scrolling
   ("A problem repeatedly occurred", owner Nov 13) */
.lf-glass{
  color: var(--ink); background: rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(17, 19, 23, .06), 0 14px 34px -16px rgba(6, 26, 63, .5);   /* the hairline keeps it apart from a white wall */
}
@media (hover: hover) and (pointer: fine){
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .lf-glass{ background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
  }
}

.lf-ic{ flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eef5ff; color: var(--blue); }
.lf-ic .ico{ width: 16px; height: 16px; }
.lf-ic.is-green{ background: #e6f5ef; color: #1f7a5c; }
.lf-btn{ display: grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--blue); color: #fff; font: 600 12.5px/1 var(--font-ui); white-space: nowrap; }
.lf-ok{ display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; background: #e6f5ef; color: #1f7a5c; font: 600 11.5px/1 var(--font-ui); white-space: nowrap; }
.lf-ok .ico{ width: 13px; height: 13px; stroke-width: 2.4; }

/* ---------- a question to MovePilot (the bubble along the bottom) ---------- */
.lf-ask{
  position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px 12px;
  padding: 12px 12px 12px 15px; border-radius: 18px;
}
.lf-who{ grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--font-ui); }
.lf-who .ico.mp-mark{ width: 18px; height: 17px; }
.lf-who time{ margin-left: auto; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.lf-ask p{ margin: 0; font: 500 16px/1.32 var(--font); letter-spacing: -.012em; text-wrap: pretty; }
.lf-send{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #000; color: #fff; }
.lf-send .ico{ width: 16px; height: 16px; }

/* ---------- its answer (the chip in the top corner) ---------- */
.lf-chip{
  position: absolute; z-index: 1; top: 12px; right: 12px; max-width: calc(100% - 24px);
  display: grid; gap: 10px; padding: 10px; border-radius: 14px; font: 500 13px/1.25 var(--font-ui);
}
.lf-chip-row{ display: flex; align-items: center; gap: 10px; }
.lf-chip-tx{ display: grid; gap: 3px; min-width: 0; }
.lf-chip-tx b{ font-weight: 600; }
.lf-chip-tx small{ color: var(--muted); font-size: 12px; }
.lf-chip .lf-btn{ width: 100%; }

/* MovePilot's figure card (config/ai.php mpStatCards): the period's revenue against the same dates last year */
.lf-stat{ gap: 7px; padding: 12px 13px; }
.lf-stat .k{ font: 600 10px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lf-stat .v{ display: flex; align-items: center; gap: 8px; font: 600 22px/1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lf-stat .v em{ padding: 4px 6px; border-radius: 6px; background: #e6f5ef; color: #16794a; font: 600 11px/1 var(--font-ui); font-style: normal; letter-spacing: 0; }
.lf-stat small{ color: var(--muted); font-size: 12px; }

/* ---------- the home row: three portrait cards, the largest photos on the site ---------- */
.lf-row{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto 56px; }
.lf-row .lf{ aspect-ratio: 4 / 5; }
@media (max-width: 900px){
  .lf-row{ grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 12px; margin-bottom: 40px; }
}

/* ---------- one landscape photo beside a section's heading, about 30% of the width ---------- */
.lf-side{ aspect-ratio: 3 / 2; }
.lf-head{ grid-template-columns: minmax(0, 1fr) clamp(330px, 30%, 430px); }   /* a role page's heading: words left, photo right */
.lf-hub{   /* a hub page's centred heading moves left to make room */
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 30%, 430px); align-items: end;
  gap: 24px clamp(28px, 5vw, 80px); margin-bottom: 44px;
}
.lf-hub .sec-head{ justify-items: start; max-width: 760px; margin: 0; text-align: left; }

/* the one card on it, in a corner its photo leaves quiet */
.lf-mini{
  position: absolute; z-index: 1; right: 10px; bottom: 10px; width: min(var(--w, 272px), calc(100% - 20px));
  display: grid; gap: 7px; padding: 11px 12px 12px; border-radius: 14px; font: 500 12px/1.3 var(--font-ui);
}
.lf-mini-h{ display: flex; align-items: center; gap: 8px; }
.lf-mini-h b{ font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.lf-mini-h time, .lf-mini-h .lf-ok{ margin-left: auto; }
.lf-mini-h time{ color: var(--muted); font-variant-numeric: tabular-nums; }
.lf-mini .lf-ic{ width: 26px; height: 26px; border-radius: 8px; }
.lf-mini .lf-ic .ico{ width: 14px; height: 14px; }
.lf-mini.at-top{ top: 10px; bottom: auto; }   /* where the photo's quiet corner is at the top */
@container (max-width: 380px){ .lf-mini.at-top{ top: auto; bottom: 10px; } }   /* on a narrow photo the top card would reach the face */
.lf-mini p{ margin: 0; font: 400 13px/1.4 var(--font); }
.lf-clamp{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }   /* a text's preview, as a phone shows one */
.lf-line{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(17, 19, 23, .08); }
.lf-line span{ color: var(--muted); }
.lf-line b{ font: 600 15px/1 var(--font-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* the crew app's timer (crew.php), as the foreman sees it */
.lf-clock-top{ display: flex; align-items: center; gap: 7px; }
.lf-clock-top i{ width: 8px; height: 8px; border-radius: 50%; background: #1f7a5c; }
.lf-clock-top b{ font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1f7a5c; }
.lf-clock-top small{ margin-left: auto; color: #4a8f75; font-size: 11px; }
.lf-tm{ margin: 2px 0 4px; font: 600 26px/1 var(--font-mono); letter-spacing: -.03em; color: #17171f; font-variant-numeric: tabular-nums; }
.lf-btns{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.lf-btns span{ display: grid; place-items: center; height: 30px; border-radius: 8px; font-size: 12px; font-weight: 600; background: #fff; color: #976611; box-shadow: inset 0 0 0 1.5px #f0e6c8; }
.lf-btns span + span{ background: #17171f; color: #fff; box-shadow: none; }

@media (max-width: 900px){
  .lf-head, .lf-hub{ grid-template-columns: minmax(0, 1fr); }
  .lf-side{ width: 100%; max-width: 430px; }
}

/* ---------- motion: the overlays come in once, in order, when the card is half on screen; then lifestyle.js takes
   the two classes off, so no ended animation stays in effect (iPhone Safari keeps a layer for each one) ---------- */
@media (prefers-reduced-motion: no-preference){
  .lf.is-armed .lf-a{ opacity: 0; }
  .lf.is-armed.is-play .lf-a{ animation: lf-in .75s var(--ease) var(--t, 0s) both; }
  .lf.is-armed.is-play .lf-send{ animation: lf-press .5s var(--ease) calc(var(--t, 0s) + .55s) both; }
  .lf-clock-top i{ animation: lf-pulse 1.4s ease-in-out infinite; }
}
@keyframes lf-in{ from{ opacity: 0; transform: translateY(16px) scale(.97); } to{ opacity: 1; transform: none; } }
@keyframes lf-press{ 40%{ transform: scale(.86); background: var(--blue); } 100%{ transform: none; background: #000; } }
@keyframes lf-pulse{ 50%{ opacity: .35; } }