/* Public/style/track-record.css — Track Record page (track-record.html)
   Rebuilt to match the actual profile_final.pptx slide format (rainbow
   wave category banner, italic achievement subtitle, single-column S/T/
   A/R bullets with colored letter prefixes, labeled image stack) instead
   of an original redesign — per explicit request, everything except the
   author's name and the slide deck's own left-side category jump menu
   (redundant here; this page has real navigation instead). Loads after
   home.css/responsive.css and reuses their dark theme/layout helpers. */

/* Header — solid, not the blurred semi-transparent bar home.css uses by
   default, and pinned above every card on this page (whose bright
   rainbow wave banners would otherwise show/blend through a transparent
   header while scrolling underneath it). Higher than .topbar's own
   z-index:2000 (home.css), still below .corner-logo's 6000+ (the logo
   mark that deliberately bleeds above the header everywhere on the
   site — untouched). */
.topbar {
  background: var(--bg, #0b0c10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 5000;
}
.topbar .container {
  justify-content: center;
}
.topbar .nav {
  margin-left: 0;
}
@media (min-width: 901px) {
  /* Center over the content column (to the right of the 260px fixed
     sidebar), not the full viewport — matching where the page's own
     content, like the "Track Record" heading, is actually centered. */
  .topbar .container {
    padding-left: 260px;
  }
}

/* ---------- Hero ---------- */
.tr-hero {
  position: relative;
  padding: 64px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: #000 url(images/track-record/wave-bottom.png) no-repeat right bottom / 60% auto;
  overflow: hidden;
}
.tr-hero .container { position: relative; z-index: 1; }
.tr-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.tr-hero p { max-width: 700px; margin: 0 auto; font-size: 1.05rem; }

.tr-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.tr-logos img {
  height: 44px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
}

/* ---------- Left sidebar (collapsible, one group per category) ----------
   position:fixed, not sticky — sticky measurably never detached from
   normal flow on this page (see the header fix above), a known failure
   mode elsewhere in this app too. .tr-main reserves the sidebar's width
   with a left margin instead of relying on flex/sticky layout math. */
.tr-sidebar {
  position: fixed;
  /* +110px clears the corner-logo mark (home.css .corner-logo: fixed,
     top:8px, ~160px tall) which bleeds down over this column's top on
     desktop — without this the first 1-2 category rows render under it. */
  top: calc(var(--tr-header-h, var(--header-h-desktop, 72px)) + 110px);
  left: 0;
  width: 260px;
  height: calc(100vh - var(--tr-header-h, var(--header-h-desktop, 72px)) - 110px);
  overflow-y: auto;
  z-index: 40;
  background: var(--panel, #111218);
  border-right: 1px solid var(--border);
  padding: 18px 14px 40px;
  box-sizing: border-box;
}
.tr-sidebar-group { margin-bottom: 6px; }
.tr-sidebar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 10px 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}
.tr-sidebar-toggle:hover { background: rgba(255,255,255,.05); }
.tr-sidebar-arrow { flex: 0 0 auto; color: var(--accent); transition: transform 0.15s ease; }
.tr-sidebar-toggle[aria-expanded="true"] .tr-sidebar-arrow { transform: rotate(180deg); }
.tr-sidebar-sublist { list-style: none; margin: 0 0 8px; padding: 0 0 0 10px; }
.tr-sidebar-sublist li { border-left: 2px solid var(--border); }
.tr-sidebar-sublist a {
  display: block;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.tr-sidebar-sublist a:hover { color: var(--accent); }

.tr-main { margin-left: 260px; }

@media (max-width: 900px) {
  /* No room for a persistent 260px rail on a narrow screen — the
     sidebar becomes a normal, in-flow collapsed block above the
     content instead of a fixed overlay. */
  .tr-sidebar {
    position: static;
    width: auto;
    height: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .tr-main { margin-left: 0; }
}

/* ---------- Category sections ---------- */
.tr-category { padding: 56px 0; }
.tr-cards { display: flex; flex-direction: column; gap: 28px; }

/* ---------- Slide-format card ----------
   Each card reproduces one slide: the rainbow wave banner carrying the
   category name, an italic subtitle for the specific achievement, a row
   of labeled images (the deck's own overlapping-stack-with-callouts,
   adapted to a clean labeled row so it still reads correctly at any
   width instead of only at a fixed 16:9), and single-column S/T/A/R
   bullets with the same gold lettering the deck used. */
.tr-card {
  position: relative;
  background: #050506;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tr-card-banner {
  position: relative;
  padding: 22px 26px 14px;
  background: url(images/track-record/wave-top.png) no-repeat left top / 100% auto, #000;
  text-align: center;
}
.tr-card-category {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.tr-card-title {
  margin: 6px 0 0;
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  color: #eef1f6;
}
.tr-card-company {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.tr-card-company img {
  height: 24px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  background: #fff;
  border-radius: 5px;
  padding: 3px 8px;
}
.tr-card-company span { font-size: 0.76rem; color: var(--muted); font-weight: 600; }

.tr-card-body { padding: 22px 26px 26px; }

/* Labeled image row — the deck's own "stacked papers with a callout per
   image" idea, adapted to a clean row of captioned thumbnails so it
   reflows correctly at any width instead of only matching one fixed
   slide aspect ratio. Each caption is the SAME callout text the original
   slide placed next to that image. */
.tr-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tr-gallery figure { margin: 0; }
.tr-gallery a {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.tr-gallery img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: contain;
  background: #fff;
}
.tr-gallery a:hover { border-color: var(--accent); }
.tr-gallery figcaption {
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #e0b426;
  text-align: center;
  line-height: 1.3;
}

/* Single-column S/T/A/R bullets, colored letter prefix — matches the
   deck's own "S- ... / T- ... / A- ... / R- ..." bullet list exactly,
   replacing an earlier 2-column redesign. */
.tr-star { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tr-star li {
  padding-left: 1.6em;
  position: relative;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #f0f2f5;
}
.tr-star li::before {
  content: attr(data-letter) "-";
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #e0b426;
}

/* ---------- CTA / footer ---------- */
.tr-cta {
  position: relative;
  padding: 64px 0;
  text-align: center;
  background: #000 url(images/track-record/wave-bottom.png) no-repeat left bottom / 55% auto;
}
.tr-cta .container { position: relative; z-index: 1; }
.tr-cta h2 { margin-bottom: 10px; }
.tr-cta p { max-width: 560px; margin: 0 auto 22px; }