/* ==========================================================================
   COMPONENTS
   Every UI atom in the theme. Nothing here is page-specific.
   ========================================================================== */

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--copper);
}
/* Eyebrow is plain text — no leading bar, matching the homepage design. */
.eyebrow--bare::before { display: none; }
.section--void .eyebrow, .section--graphite .eyebrow { color: var(--copper-hot); }

/* ------------------------------------------------------------------ button */
.btn {
  --btn-bg: var(--copper);
  --btn-fg: #fff;
  --btn-bd: var(--copper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 50px;
  padding: 0 var(--sp-lg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  clip-path: var(--clip-sm);
  transition: background var(--t-base) var(--ease-io),
              color var(--t-base) var(--ease-io),
              border-color var(--t-base) var(--ease-io),
              transform var(--t-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--copper-dim); --btn-bd: var(--copper-dim); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn i, .btn svg { font-size: 1.05em; transition: transform var(--t-base) var(--ease); }
.btn:hover i, .btn:hover svg { transform: translateX(3px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(10, 13, 20, .18); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: #000; --btn-bd: #000; }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: var(--on-dark-line); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.btn--sm { min-height: 40px; padding: 0 var(--sp-md); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }

/* -------------------------------------------------------------------- chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-xs);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-light);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  clip-path: var(--clip-xs);
  white-space: nowrap;
}
.chip--accent { background: var(--copper-wash); border-color: var(--copper-edge); color: var(--copper-dim); }
.chip--dark { background: var(--on-dark-wash); border-color: var(--on-dark-line); color: var(--on-dark-mute); }
.chip--copper { background: var(--copper); border-color: var(--copper); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

/* --------------------------------------------------------------- media box */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--graphite);
}
.media img, .media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}
.media--16x9  { aspect-ratio: 16 / 9; }
.media--4x3   { aspect-ratio: 4 / 3; }
.media--1x1   { aspect-ratio: 1 / 1; }
.media--21x9  { aspect-ratio: 21 / 9; }

/* two-image hover swap: A at rest, B on hover */
.media__b {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.05);
}
:is(a, .is-hoverable):hover .media__a,
.is-hoverable:hover .media__a { opacity: 0; transform: scale(1.04); }
:is(a, .is-hoverable):hover .media__b,
.is-hoverable:hover .media__b { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------------- card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: var(--clip);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.card__media { position: relative; overflow: hidden; }
.card__body { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xs); flex: 1; }
.card__title {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  transition: color var(--t-base) var(--ease);
}
.card__text { color: var(--ink-mute); font-size: var(--fs-sm); }
.card__foot { margin-top: auto; padding-top: var(--sp-md); }

.card--dark { background: var(--void); border-color: var(--on-dark-line); box-shadow: var(--sh-dark); }
.card--dark .card__title { color: #fff; }
.card--dark .card__text  { color: var(--on-dark-mute); }
.card--dark:hover { border-color: var(--copper-edge); box-shadow: var(--sh-lift); }
.card--dark:hover .card__title { color: var(--copper-hot); }

@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
  .card:hover .media img { transform: scale(1.04); }
}

/* whole-card link hit area without nesting anchors */
.card__link::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
}

/* ------------------------------------------------------------- filter tabs */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

.filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-md);
  background: var(--surface);
  border: 1px solid rgba(10, 13, 20, .10);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  clip-path: var(--clip-xs);
  transition: background var(--t-base) var(--ease-io),
              color var(--t-base) var(--ease-io),
              border-color var(--t-base) var(--ease-io);
}
.filter:hover { border-color: var(--copper); color: var(--ink); }
.filter[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.filter[aria-selected="true"] .filter__count { color: var(--copper-hot); }
.filter__count {
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--support);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- pager */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-3xl);
}
.pager__btn, .pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px; height: 42px;
  padding: 0 var(--sp-sm);
  background: var(--surface);
  border: 1px solid rgba(10, 13, 20, .10);
  color: var(--ink-light);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  clip-path: var(--clip-xs);
  transition: background var(--t-base) var(--ease-io),
              color var(--t-base) var(--ease-io),
              border-color var(--t-base) var(--ease-io);
}
.pager__num:hover, .pager__btn:hover:not([disabled]):not(.is-on) {
  border-color: var(--copper); color: var(--ink);
}
.pager__num[aria-current="page"] {
  background: var(--copper); border-color: var(--copper); color: #fff;
}
.pager__btn[disabled] { opacity: .3; cursor: not-allowed; }
.pager__range {
  color: var(--ink-mute);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.pager__range b { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-2xs);
  color: var(--on-dark-mute);
  letter-spacing: .04em;
}
.crumbs a { color: var(--on-dark-mute); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--copper-hot); }
.crumbs__sep { opacity: .5; }
.crumbs [aria-current] { color: #fff; font-weight: 600; }
.crumbs--light { color: var(--ink-mute); }
.crumbs--light a { color: var(--ink-mute); }
.crumbs--light a:hover { color: var(--copper); }
.crumbs--light [aria-current] { color: var(--ink); }

/* -------------------------------------------------------------- spec table */
.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec caption {
  text-align: left;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: var(--sp-sm);
}
.spec th, .spec td { padding: var(--sp-sm) var(--sp-md); text-align: left; vertical-align: top; }
.spec th {
  width: 32%;
  font-weight: 600;
  color: var(--ink-light);
  border-bottom: 1px solid var(--line);
}
.spec td { border-bottom: 1px solid var(--line); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec--dark th { color: var(--on-dark-mute); border-color: var(--on-dark-line); }
.spec--dark td { border-color: var(--on-dark-line); }
.spec--dark th, .spec--dark td { color: var(--on-dark); }

/* ----------------------------------------------------------------- prose */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-md); }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--sp-3xl); }
.prose h3 { font-size: var(--fs-xl);  margin-top: var(--sp-2xl); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-sm); }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: -1em; top: .62em;
  width: 6px; height: 6px;
  background: var(--copper);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--copper); font-weight: 700; }
.prose li + li { margin-top: var(--sp-xs); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--copper-dim); }
.prose strong { font-weight: 600; }
.prose code { padding: .12em .38em; background: var(--line); border-radius: 3px; }
.prose blockquote {
  padding-left: var(--sp-lg);
  border-left: 3px solid var(--copper);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

/* -------------------------------------------------------------- gallery */
.gallery { display: grid; gap: var(--sp-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery > * { margin: 0; }
.gallery a { display: block; }
.gallery img {
  width: 100%; height: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.gallery a:hover img { border-color: var(--copper); }
@media (max-width: 640px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* schematic sheets are wide — let them scroll rather than overflow the page */
.gallery__wide { grid-column: 1 / -1; }
.gallery__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
  background: var(--surface);
}
.gallery__scroll img { width: auto; max-width: none; min-width: 100%; border: 0; clip-path: none; }

/* ----------------------------------------------------------------- notice */
.notice {
  padding: var(--sp-md) var(--sp-lg);
  background: var(--copper-wash);
  border: 1px solid var(--copper-edge);
  border-left: 3px solid var(--copper);
  font-size: var(--fs-sm);
  color: var(--ink);
  clip-path: var(--clip-sm);
}

/* ------------------------------------------------------------------- meta */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.meta-row b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ empty state */
.empty {
  padding: var(--sp-4xl) var(--sp-lg);
  text-align: center;
  color: var(--ink-mute);
  border: 1px dashed var(--support);
  clip-path: var(--clip);
}

/* ----------------------------------------------------------------- spinner */
@keyframes pcr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.pcr-spin {
  display: inline-block;
  animation: pcr-spin 0.8s linear infinite;
}