/* Jinmeiting Precision Machinery — global stylesheet
   Light "engineering / industrial" theme.
   Most styling lives in Tailwind utility classes; this file holds the industrial layer. */

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* Smooth fade-in for the page */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
main, section { animation: fade-up .5s ease-out both; }

/* Active filter chip on Products page */
.filter-btn.active { background-color: #9c7c0e; color: #fff; border-color: #9c7c0e; }

/* Hide the product card by default; reveal when filter matches */
.product-card { display: none; }
.product-card.show { display: block; animation: fade-up .3s ease-out; }

/* Products page: one filterable block per process (holds a whole image grid) */
.filter-item { display: none; }
.filter-item.show { display: block; animation: fade-up .3s ease-out; }

/* Photo tile in a process gallery — keeps the dark-green/red default borders off */
.filter-item figure { margin: 0; }

/* Simple responsive image fallback */
img { max-width: 100%; height: auto; }

/* ============================================================
   Industrial layer
   ============================================================ */

/* Tight, engineering-style headings */
h1, h2, h3 { letter-spacing: -0.012em; }

/* Section eyebrow: monospace label with a gold rule, like a drawing-sheet callout */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9c7c0e;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: #d4af37;
  flex: 0 0 auto;
}

/* Eyebrow sitting on a photo / dark panel — needs the bright gold */
.eyebrow.on-dark { color: #e8bd3e; }
.eyebrow.on-dark::before { background: #e8bd3e; }

/* Hero: full-bleed photo, kept slightly above centre so machine detail stays visible */
.hero-media { object-position: center 42%; }

/* Blueprint grid — used behind technical drawing placeholders and hero art */
.bp-grid {
  background-image:
    repeating-linear-gradient(0deg, rgba(20,28,36,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(20,28,36,.05) 0 1px, transparent 1px 22px);
}

/* Monospace technical caption */
.tech-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #98a1aa;
}

/* Caption sitting on top of a real photo — needs its own light plate to stay legible */
.slot-tag {
  background: rgba(255,255,255,.86);
  padding: 3px 8px;
  color: #3d4650;
  border-radius: 2px;
}

/* Square icon plate for capability cards */.ic-plate {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dde1e5;
  background: #f8f9fa;
  color: #545c66;
}

/* Inline icon inside body copy / list items */
.ic-inline {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2.5px;
  margin-right: .45rem;
  color: #9c7c0e;
  flex: 0 0 auto;
}

/* Buttons: flat, square, uppercase — industrial hardware feel */
.btn, a.btn { letter-spacing: .04em; }
.btn-solid, a.btn-solid { text-transform: uppercase; font-size: .8125rem; letter-spacing: .06em; }
.btn-ghost, a.btn-ghost { text-transform: uppercase; font-size: .8125rem; letter-spacing: .06em; }