/* ==========================================================================
   page-technology.css
   Owned by: Specialist 7 (Technology section)
   Scope: layout-only additions for technology overview + 4 sub-pages.
   No raw hex. No !important. No component redefinition.
   ========================================================================== */

/* Hero ledger row under the h1 on sub-pages */
.tech-hero__ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.tech-hero__ledger > div { display: grid; gap: var(--space-2); }
.tech-hero__ledger dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-muted);
}
.tech-hero__ledger dd {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  color: var(--ink-900);
  line-height: var(--leading-snug);
}
.tech-hero__ledger dd em {
  font-style: italic;
  color: var(--highlight);
}

/* Stack of tech-block rows separated by hairlines */
.tech-stack { display: grid; gap: 0; }
.tech-stack > .tech-block {
  padding-block: var(--space-7);
  border-top: 1px solid var(--rule);
}
.tech-stack > .tech-block:first-child { border-top: 0; padding-top: var(--space-4); }
.tech-stack > .tech-block:last-child { padding-bottom: var(--space-3); }

/* Sibling sub-nav strip */
.tech-subnav {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-strong);
}
.tech-subnav__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-muted);
  margin-bottom: var(--space-5);
  display: block;
}
.tech-subnav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.tech-subnav__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-left: 1px solid var(--rule);
  color: var(--ink-900);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-2) var(--ease-out);
}
.tech-subnav__item:first-child { border-left: 0; padding-left: 0; }
.tech-subnav__item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-3) var(--ease-out);
}
.tech-subnav__item:hover::before,
.tech-subnav__item:focus-visible::before { width: 100%; }
.tech-subnav__body { display: grid; gap: var(--space-2); min-width: 0; }
.tech-subnav__slug {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-muted);
}
.tech-subnav__title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.tech-subnav__title em { font-style: italic; color: var(--highlight); }
.tech-subnav__arrow {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  align-self: center;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.tech-subnav__item:hover .tech-subnav__arrow,
.tech-subnav__item:focus-visible .tech-subnav__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

@media (max-width: 880px) {
  .tech-subnav__list { grid-template-columns: 1fr; }
  .tech-subnav__item {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--rule);
  }
  .tech-subnav__item:first-child { border-top: 0; }
}