/* ============================================================
   Tech-Pivot page — styles specific to /products/tech-pivot/.
   Builds on the shared classes in assets/css/site.css (buttons,
   badges, eyebrow, section header, product-card image helpers).
   ============================================================ */

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.trs-tp-hero { position: relative; background: var(--graphite-900); overflow: hidden; }
.trs-tp-hero__dotgrid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 92% -12%, rgba(186,31,57,0.35), transparent 46%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: auto, 22px 22px;
}
.trs-tp-hero__grid {
  position: relative; padding: clamp(48px, 6vw, 88px) var(--gutter) 72px; display: grid;
  grid-template-columns: 0.92fr 1.08fr; gap: var(--space-16); align-items: center;
}

.trs-tp-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; font-family: var(--font-sans); font-size: 13px; }
.trs-tp-breadcrumb a { color: var(--graphite-400); text-decoration: none; }
.trs-tp-breadcrumb a:hover { color: #fff; }
.trs-tp-breadcrumb span:not([aria-current]) { color: var(--graphite-500); }
.trs-tp-breadcrumb [aria-current] { color: #fff; font-weight: 700; }

.trs-tp-hero__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase; color: #fff; margin: 0;
}
.trs-tp-hero__reg { font-size: 0.55em; vertical-align: super; }
.trs-tp-hero__subtitle { font-family: var(--font-sans); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite-300); margin: 10px 0 0; }
.trs-tp-hero__body { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--graphite-200); max-width: 52ch; margin: 22px 0 0; }
.trs-tp-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

.trs-tp-video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl);
  background: var(--graphite-950);
}
.trs-tp-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.trs-tp-video-frame__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--graphite-500);
}
.trs-tp-video-frame__placeholder span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 0 20px; }
.trs-tp-video-caption { font-family: var(--font-sans); font-size: 13px; color: var(--graphite-400); text-align: center; margin: 12px 0 0; }

@media (max-width: 900px) {
  .trs-tp-hero__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Series comparison cards
   --------------------------------------------------------------- */
.trs-tp-series-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.trs-tp-card {
  display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.trs-tp-card__image { position: relative; aspect-ratio: 4 / 3; background: var(--graphite-100); }
.trs-tp-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 20px; box-sizing: border-box; display: block; }
.trs-tp-card__body { padding: var(--space-8); display: flex; flex-direction: column; gap: 16px; flex: 1; }
.trs-tp-card__label { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.trs-tp-card__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text-strong); margin: 6px 0 0; }
.trs-tp-card__desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-body); margin: 8px 0 0; }
.trs-tp-card__models { display: flex; gap: 8px; flex-wrap: wrap; }

.trs-tp-features { display: flex; flex-direction: column; gap: 10px; }
.trs-tp-feature { display: flex; align-items: flex-start; gap: 10px; }
.trs-tp-feature__dot {
  flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-subtle);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.trs-tp-feature span:last-child { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--text-body); }

.trs-tp-subimage__frame { position: relative; aspect-ratio: 16 / 8; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: #fff; }
.trs-tp-subimage__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.trs-tp-subimage__caption { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin: 8px 0 0; text-transform: uppercase; letter-spacing: 0.05em; }

.trs-tp-card__spacer { flex: 1; }
.trs-tp-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .trs-tp-series-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Gallery
   --------------------------------------------------------------- */
.trs-tp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.trs-tp-gallery-item {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--graphite-100); padding: 0; cursor: zoom-in;
  transition: box-shadow 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}
.trs-tp-gallery-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.trs-tp-gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.trs-tp-gallery-item__zoom {
  position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none;
}

@media (max-width: 900px) { .trs-tp-gallery { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------
   Shared arrow buttons + gallery lightbox
   --------------------------------------------------------------- */
.trs-tp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center;
  justify-content: center; z-index: 2;
}
.trs-tp-arrow:hover { background: rgba(255,255,255,0.2); }
.trs-tp-arrow--prev { left: 24px; }
.trs-tp-arrow--next { right: 24px; }

.trs-tp-lightbox {
  position: fixed; inset: 0; background: rgba(12,14,17,0.9); display: flex; align-items: center; justify-content: center;
  z-index: 210; padding: 40px;
}
.trs-tp-lightbox[hidden] { display: none; }
.trs-tp-lightbox__panel { position: relative; width: 100%; max-width: 920px; display: flex; flex-direction: column; }
.trs-tp-lightbox__close {
  position: absolute; top: -44px; right: 0; border: none; background: transparent; cursor: pointer; color: #fff;
  font-size: 30px; line-height: 1; padding: 0;
}
.trs-tp-lightbox__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--graphite-950); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xl);
}
.trs-tp-lightbox__frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.trs-tp-lightbox__caption {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px;
  padding: 16px 20px; background: var(--graphite-900); border-radius: var(--radius-md);
}
.trs-tp-lightbox__caption span:first-child { font-family: var(--font-sans); font-size: 14.5px; color: #fff; }
.trs-tp-lightbox__counter { font-family: var(--font-mono); font-size: 12px; color: var(--graphite-400); flex-shrink: 0; white-space: nowrap; }

@media (max-width: 720px) {
  .trs-tp-arrow { display: none; }
  .trs-tp-lightbox__frame { aspect-ratio: 1 / 1; }
}

/* ---------------------------------------------------------------
   CTA band
   --------------------------------------------------------------- */
.trs-tp-cta { background: var(--graphite-900); padding: var(--space-16) var(--gutter); text-align: center; }
.trs-tp-cta__inner { max-width: 640px; margin: 0 auto; }
.trs-tp-cta__inner h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); text-transform: uppercase; letter-spacing: -0.01em; color: #fff; margin: 0 0 14px; }
.trs-tp-cta__inner p { font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; color: var(--graphite-300); margin: 0 0 28px; }