/* ============================================================
   ARMADILLO — IMAGERY & MOTIF SYSTEM
   ============================================================
   Imagery in the Armadillo brand is QUIET, cool, and considered.
   We never use generic AI/tech stock photography. Three image
   modes are sanctioned:

   1) PORTRAITS         — customers, team, real humans, B&W
   2) PRODUCT MOCKS     — UI screenshots inside paper-grey frames
   3) ABSTRACT GLYPHS   — orbit / coordinate-frame compositions
   4) EDITORIAL         — Nordic work situations & locations,
                          desaturated, natural light, no people-facing-camera

   Off-brand: 3D renders, gradient blobs, isometric scenes,
   AI-generated photos, generic corporate stock with branded
   props (Apple laptops in glass towers, etc).
   ============================================================ */

/* ─── 1. PORTRAITS ──────────────────────────────────────── */
/* Always black-and-white, soft grey background, ample headroom.
   Crop tight on the face (eyes near the top third). Use for
   testimonials, team, executive bios. */
.img-portrait {
  border-radius: 50%;
  width: 56px; height: 56px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  background: var(--bg-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.img-portrait-lg { width: 96px; height: 96px; }
.img-portrait-xl { width: 140px; height: 140px; }
.img-portrait-square {
  border-radius: var(--radius-m);
  width: 120px; height: 140px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

/* Avatar stack (used in testimonial picker, "3 agents working") */
.img-avatar-stack {
  display: inline-flex;
}
.img-avatar-stack > img {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  margin-left: -8px;
  filter: grayscale(1);
  object-fit: cover;
}
.img-avatar-stack > img:first-child { margin-left: 0; }

/* ─── 2. PRODUCT MOCKS ──────────────────────────────────── */
/* All screenshots live inside a paper frame with a tight border
   and soft drop-shadow. Never sit on the page raw. */
.img-mock {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raise);
  overflow: hidden;
  display: block;
}
.img-mock > img,
.img-mock > video { display: block; width: 100%; height: auto; }
.img-mock-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.img-mock-titlebar .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-2);
}

/* Soft "device" frame variant (for phone screenshots) */
.img-device {
  border: 8px solid var(--ink);
  border-radius: 36px;
  background: var(--ink);
  box-shadow: var(--shadow-raise);
  overflow: hidden;
}

/* ─── 3. PLACEHOLDER FALLBACK ──────────────────────────── */
/* When real imagery is not yet available, use a neutral paper
   square with the brand glyph centered. Never a stock photo. */
.img-placeholder {
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--muted-2);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  aspect-ratio: 4 / 3;
}


/* ─── 4. EDITORIAL (Nordic work & places) ───────────────
   Wide-frame photography of real work situations and Danish
   locations. Always desaturated (not full B&W — keep a little
   warmth), natural light, ample negative space, no eye-contact-
   with-camera. Aspect ratios: 3:4 (portrait), 4:5, 4:3, 3:2,
   and the wide 16:9 hero. Always inside a 1px hairline frame
   to match product mocks. */
.img-editorial {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The Armadillo "look" — desaturated but not lifeless */
  filter: grayscale(0.78) contrast(1.04) brightness(0.97);
  background: var(--bg-2);
}
.img-editorial-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg-2);
}
.img-editorial-frame.ratio-43  { aspect-ratio: 4 / 3; }
.img-editorial-frame.ratio-32  { aspect-ratio: 3 / 2; }
.img-editorial-frame.ratio-169 { aspect-ratio: 16 / 9; }
.img-editorial-frame.ratio-34  { aspect-ratio: 3 / 4; }
.img-editorial-frame.ratio-45  { aspect-ratio: 4 / 5; }
.img-editorial-frame.ratio-1   { aspect-ratio: 1 / 1; }

/* Editorial caption — small mono code in the top-left corner */
.img-editorial-frame .cap {
  position: absolute;
  top: 10px; left: 12px;
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 20, 18, 0.55);
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Subtle vignette to bind the desaturated frames together */
.img-editorial-frame::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,18,0) 60%, rgba(20,20,18,0.18) 100%);
}


/* ─── 5. LOGOMARK STRIP (trusted-by) ─────────────────────
   Customer logos are always rendered in monochrome (single
   ink color or single light color on dark), at 70% opacity
   so no individual logo competes with the headline. */
.logo-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  filter: grayscale(1);
  opacity: 0.7;
}
.logo-strip img { max-height: 28px; width: auto; }


/* ─── 6. ABSTRACT GLYPH COMPOSITIONS ─────────────────────
   Orbit diagrams, "anatomy of a coworker" coordinate frames,
   and big compliance illustrations. All hand-drawn SVG —
   they share the language of the brand-glyph: thin stroke
   (1–1.5), 1–2 small filled dots, dashed connector lines,
   and a single small rotated square as a "center mark". */
.abstract-svg {
  width: 100%; height: auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  color: var(--ink);
}
.abstract-svg .coord  { fill: var(--accent); stroke: none; }
.abstract-svg .mark   { fill: var(--accent); stroke: none; }
.abstract-svg .live   { fill: var(--lime); stroke: none; }
.abstract-svg .dashed { stroke-dasharray: 2 2; opacity: 0.6; }

/* Dark-surface variant */
.dark-sec .abstract-svg { color: var(--dark-ink); }
.dark-sec .abstract-svg .coord,
.dark-sec .abstract-svg .mark { fill: var(--accent-2); }