/* ==========================================================================
   Tactical gear page — featured banner, components map, product tiles
   ========================================================================== */

/* ---------- Featured banner ---------- */
.featured {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--c-text);
  text-decoration: none;
  background: #1b1b1b;
}

.featured img {
  width: 100%;
  aspect-ratio: 1282 / 463;
  object-fit: cover;
  object-position: 80% 50%;
  transition: transform 1.2s var(--ease-out);
}

.featured:hover img { transform: scale(1.02); }

.featured__text {
  position: absolute;
  left: clamp(1rem, 4vw, 3.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}

.featured__title {
  font-size: clamp(2.4rem, 1.4rem + 5vw, 6rem);
  line-height: 0.95;
}

.featured__version {
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin-bottom: 0.6rem;
}

.featured:hover .btn { --btn-bg: transparent; --btn-fg: var(--c-text); }

/* phones: text sits below the picture instead of over it */
@media (max-width: 639px) {
  .featured { background: var(--c-surface); border: 1px solid var(--c-line); }
  .featured img { aspect-ratio: 16 / 9; object-position: 82% 50%; }
  .featured__text {
    position: static;
    transform: none;
    padding: 1.1rem 1rem 1.25rem;
  }
}

/* ---------- Components map ---------- */
.comp__legend-live {
  font-style: normal;
  color: var(--c-gold);
}

.comp__board {
  display: grid;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
}

.comp__stage {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(70% 90% at 50% 45%, #0e0e0c, #050505 80%);
}

.comp__svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 480;
  overflow: visible;
}

.comp__board.is-narrow .comp__svg { aspect-ratio: 804 / 356; }

.comp__noscript { width: 80%; margin: 2rem auto; }

/* Rifle layers */
.comp__base,
.comp__lit,
.comp__hl {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.comp__base {
  stroke: rgba(241, 239, 232, 0.22);
  stroke-width: 0.55;
}

.comp__lit {
  stroke: rgba(241, 239, 232, 0.82);
  stroke-width: 0.6;
  transition: stroke 0.4s;
}

.comp__board[data-active] .comp__lit { stroke: rgba(241, 239, 232, 0.55); }

.comp__hl {
  stroke: var(--c-gold);
  stroke-width: 0.85;
  transition: opacity 0.6s var(--ease-out);
}

.comp__hit {
  fill: rgba(255, 215, 0, 0);
  cursor: pointer;
  transition: fill 0.3s;
}

.comp__hit:hover { fill: rgba(255, 215, 0, 0.035); }

.comp__scanline {
  stroke: var(--c-gold);
  stroke-width: 1;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--c-gold));
}

.comp__board.is-scanning .comp__scanline { opacity: 1; }

/* Leaders */
.comp__leader {
  fill: none;
  stroke: rgba(241, 239, 232, 0.28);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke 0.3s, stroke-dashoffset 0.9s var(--ease-out);
}

.comp__leader.is-on { stroke: var(--c-gold); }

.comp__anchor {
  fill: #000;
  stroke: rgba(241, 239, 232, 0.6);
  stroke-width: 1.2;
  transition: stroke 0.3s, fill 0.3s;
}

.comp__anchor.is-on { fill: var(--c-gold); stroke: var(--c-gold); }

.comp__reticle {
  pointer-events: none;
  transition: transform 0.6s var(--ease-out), opacity 0.4s;
}

.comp__reticle circle,
.comp__reticle path {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1.2;
}

.comp__reticle .comp__reticle-dot { fill: var(--c-gold); stroke: none; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .comp__reticle circle:first-child {
    transform-box: fill-box;
    transform-origin: center;
    animation: reticle-pulse 2.2s ease-in-out infinite;
  }
}

@keyframes reticle-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.35; }
}

/* HTML overlay: labels & markers */
.comp__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comp__overlay button { pointer-events: auto; }

.comp__label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: -6px;
  padding: 0.3rem 0.1rem;
  border: 0;
  background: none;
  color: var(--c-muted);
  font-size: clamp(0.72rem, 0.55rem + 0.45vw, 0.9rem);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.25s, opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.comp__label--left { transform: translate(0, -100%); }
.comp__label--right { transform: translate(-100%, -100%); flex-direction: row-reverse; }

.comp__label:hover,
.comp__label.is-on { color: var(--c-text); }

.comp__num {
  display: inline-grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  font-size: 0.8em;
  color: var(--c-muted);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
  flex: none;
}

.comp__label.is-on .comp__num,
button.is-on .comp__num {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #000;
}

.comp__status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-faint);
  flex: none;
}

.comp__status.is-live { background: var(--c-gold); box-shadow: 0 0 8px var(--c-gold); }

.comp__marker {
  position: absolute;
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--c-gold-line);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  color: var(--c-text);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background-color 0.25s, color 0.25s;
}

.comp__marker.is-on {
  background: var(--c-gold);
  color: #000;
}

/* Scan-in states */
.comp__board.is-pre .comp__leader { stroke-dashoffset: 1; }
.comp__board.is-pre .comp__label { opacity: 0; transform: translate(var(--tx, 0), -60%); }
.comp__board.is-pre .comp__label--right { --tx: -100%; }
.comp__board.is-pre .comp__anchor,
.comp__board.is-pre .comp__reticle { opacity: 0; }
.comp__board.is-scanning .comp__leader { stroke-dashoffset: 1; }
.comp__board.is-scanning .comp__label { opacity: 0; }
.comp__board.is-scanning .comp__anchor,
.comp__board.is-scanning .comp__reticle { opacity: 0; }

/* No gold zone highlight until the scan has finished */
.comp__board.is-pre .comp__hl,
.comp__board.is-scanning .comp__hl { opacity: 0; transition: none; }


/* Detail panel */
.comp__detail {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-top: 1px solid var(--c-line);
}

@media (min-width: 900px) {
  .comp__detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: center;
    gap: 3rem;
  }
}

.comp__detail-main {
  display: grid;
  justify-items: start;
  gap: 0.7rem;
}

.comp__detail-kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.comp__detail-num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-gold);
  color: #000;
  font-weight: 600;
  font-size: 0.85rem;
}

.comp__detail-title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.comp__detail-text { color: var(--c-muted); max-width: 54ch; }

.comp__product {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: 0.9rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: #000;
  text-decoration: none;
  color: var(--c-text);
  transition: border-color 0.25s;
}

.comp__product:hover { border-color: var(--c-gold-line); }
.comp__product:hover .link-arrow { color: var(--c-gold); border-color: var(--c-gold); }

.comp__product img {
  width: 140px;
  height: 84px;
  object-fit: contain;
}

.comp__product.is-dev { grid-template-columns: minmax(0, 1fr); }

.comp__product-text {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
}

.comp__product-text strong { font-weight: 500; }
.comp__product .link-arrow { margin-top: 0.3rem; font-size: 0.72rem; }

@media (prefers-reduced-motion: no-preference) {
  .comp__detail.is-swapping .comp__detail-main,
  .comp__detail.is-swapping .comp__product {
    animation: detail-in 0.5s var(--ease-out);
  }
  .comp__detail.is-swapping .comp__product { animation-delay: 0.05s; animation-fill-mode: backwards; }
}

@keyframes detail-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Zone list (phones) */
.comp__list {
  display: none;
  list-style: none;
  padding: 0 clamp(1rem, 3vw, 1.5rem) 1.25rem;
  gap: 0.4rem;
}

.comp__list button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #000;
  color: var(--c-muted);
  font-size: 0.9rem;
  text-align: left;
}

.comp__list button .comp__status { margin-left: auto; }
.comp__list button.is-on { color: var(--c-text); border-color: var(--c-gold-line); }

@media (max-width: 759px) {
  .comp__label { display: none; }
  .comp__marker { display: grid; }
  .comp__leader { display: none; }
  .comp__list { display: grid; order: 3; }
  .comp__detail { order: 2; }
  .comp__product { grid-template-columns: 96px minmax(0, 1fr); }
  .comp__product img { width: 96px; height: 60px; }
}

/* ---------- Product tiles ---------- */
.tiles {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pipeline-title {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  margin-bottom: 1.25rem;
}