/* ════════════════════════════════════════════════════════════════
   MASCHINENPARK — capability catalogue (/maschinenpark/)
   ════════════════════════════════════════════════════════════════
   The flagship page. Its job is to answer one buyer question instantly —
   "passt mein Bauteil zu euch?" — and to make the iron itself the proof:
   named, branded machines (Messer, Soraluce, Zayer, Feichter, Davi,
   Scharringhausen, Meba) with hard specs, plus a recruiting bridge for
   applicants. Group headers / proof index / cinematic band / trust strip
   reuse the shared .proc-* + .capability-parallax language (sticky-cards.css);
   only the three pieces unique to this page live here:
     · .mpk-envelope  — the capability-limit tiles ("Passt Ihr Bauteil?")
     · .mpk-machine   — the spec-forward, brand-eyebrow machine card
     · .mpk-recruit   — the dual-audience "an diesen Maschinen arbeiten Sie"
   All values reference variables.css tokens (styling SSOT — see docs/styling/).
   Linked per page via head_extra, mirroring forms.css / gallery.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Capability envelope — the six limits that qualify a part in 5 s ──── */
.mpk-envelope {
  display: grid;
  grid-template-columns: repeat(3, var(--grid-track-fluid));
  gap: var(--space-5);
  margin-top: var(--space-12);
}
.mpk-envelope__tile {
  position: relative;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
}
/* accent hairline that draws in on hover — a quiet "technical" tell */
.mpk-envelope__tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.mpk-envelope__tile:hover {
  border-color: var(--color-accent);
  box-shadow: var(--card-shadow-hover-soft);
  transform: var(--card-hover-transform);
}
.mpk-envelope__tile:hover::before { transform: scaleX(1); }
.mpk-envelope__value {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.mpk-envelope__value small {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-text);
}
.mpk-envelope__label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.mpk-envelope__machine {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (max-width: 900px) {
  .mpk-envelope { grid-template-columns: repeat(2, var(--grid-track-fluid)); gap: var(--space-4); }
  .mpk-envelope__tile { padding: var(--space-6) var(--space-5); }
  .mpk-envelope__value { font-size: var(--text-4xl); }
}
@media (max-width: 420px) {
  .mpk-envelope__value { font-size: var(--text-3xl); }
}

/* ── Machine catalogue grid + spec-forward, brand-eyebrow card ───────── */
.mpk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (min-width: 640px) { .mpk-grid { grid-template-columns: repeat(2, var(--grid-track-fluid)); } }
@media (min-width: 1024px) { .mpk-grid--3 { grid-template-columns: repeat(3, var(--grid-track-fluid)); } }

.mpk-machine {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* explizite Timings (statt 'all 300ms'): Glow/Border im Glow-Tempo wie die
     übrigen overflow:hidden-Cards, Lift im Standard-Tempo. */
  transition: transform var(--transition-base),
              box-shadow var(--glow-speed) var(--glow-ease),
              border-color var(--glow-speed) var(--glow-ease);
}
/* Interactive Card System (SSOT): Lift + Glow + Bild-Zoom über die zentralen
   Tokens. mpk-machine ist overflow:hidden → --glow als Element-box-shadow. */
.mpk-machine:has(a[href]):is(:hover, :focus-within) {
  transform: var(--card-lift);
  box-shadow: var(--card-shadow-hover), var(--glow);
}
.mpk-machine__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.mpk-machine__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--card-img-zoom-speed) var(--card-img-zoom-ease);
}
.mpk-machine:has(a[href]):is(:hover, :focus-within) .mpk-machine__media img {
  transform: translateZ(0) scale(var(--card-img-zoom));
}
/* Brand/model eyebrow — the credibility signal ("MESSER · OMNIMAT HT-L 5000") */
.mpk-machine__brand {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-6));
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--scrim-media-chip-strong);
  backdrop-filter: blur(var(--blur-md));
  border-radius: var(--radius-sm);
}
/* Zoom-Button auf dem Hub-Kartenbild → öffnet die Lightbox (blättert alle Maschinen),
   ohne die Karten-CTA-Navigation zu stören. Bildsprache = dieselbe SSOT wie
   Galerie/Kontakt/Spec: `.media-zoom-badge` (components/lightbox.css) — hier ist
   das Badge SELBST der Trigger (<button data-lightbox>), deshalb bleibt es
   klickbar (button.media-zoom-badge) und deckt sich zusätzlich beim Hover über
   die GANZE Karte auf, nicht nur über sich selbst. Größe/Ebene über Tokens. */
.mpk-machine__zoom {
  --media-zoom-size: 2.25rem;
  --media-zoom-icon-size: 1.1rem;
  --media-zoom-inset: var(--space-3);
  --media-zoom-layer: 4;
}
@media (hover: hover) {
  .mpk-machine:hover .mpk-machine__zoom { opacity: 1; transform: none; }
}
.mpk-machine:focus-within .mpk-machine__zoom { opacity: 1; transform: none; }
.mpk-machine__zoom:is(:hover, :focus-visible) { background: var(--color-accent); color: var(--color-text-inverse); outline: none; }
.mpk-machine__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-6);
}
.mpk-machine__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text);
}
.mpk-machine__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.mpk-machine__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto; /* anchor the tags+spec cluster to the card foot → specs align across a row */
  padding-top: var(--space-2);
}
.mpk-machine__tags span {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.mpk-machine__spec {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-snug);
  color: var(--color-accent-text);
}

/* Recruiting-Bridge-Layout (`.mpk-recruit`) lebt jetzt global in main.css —
   der `recruit`-Dispatcher-Typ kann auf Seiten ohne machinery.css stehen. */

/* ── Reduced motion: kein Lift/Zoom (Interactive Card System) ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .mpk-machine:has(a[href]):is(:hover, :focus-within),
  .mpk-machine:has(a[href]):is(:hover, :focus-within) .mpk-machine__media img,
  .mpk-envelope__tile:hover {
    transform: none;
  }
  .mpk-machine,
  .mpk-machine__media img,
  .mpk-envelope__tile {
    transition: none;
  }
}