/* ============================================================
   single-portfolio.css — FINAL (frozen)
   Companion stylesheet for single-portfolio.php ONLY. Enqueued conditionally
   in functions.php, only on Portfolio single pages.
   Reuses existing classes wherever the design allows (.body-text,
   .sec-head, .chip-row, .chip, .link-more, .page-hero, .eyebrow,
   .lede, .wrap, .mono) -- nothing here duplicates or overrides
   those. This remains a separate file from style.css by design --
   Portfolio-specific rules (spec tables, gallery grid, bottom nav)
   don't need to load site-wide.

   New in this revision: .spec-table (replaces the v1.1 .plate-grid/
   .card-grid approach for Project Overview, Technical Information,
   and Equipment, per the approved v1.2 spec) and updated bottom-nav
   styling to accommodate project titles.
   ============================================================ */

/* Breadcrumb (spec section 1) */
.breadcrumb-row{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.breadcrumb{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--steel);
}
.breadcrumb a{ color:var(--steel); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent-red); }
.breadcrumb span[aria-current]{ color:var(--ink); }

/* ------------------------------------------------------------
   Specification Table -- used by Project Overview, Technical
   Information, and (as .equipment-table) Main Equipment.
   Desktop: two-column table, label left / value right.
   Tablet/Mobile: stacks -- label above value, full width.
   ------------------------------------------------------------ */
.spec-table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.spec-table tr{
  border-bottom:1px solid var(--line);
}
.spec-table tr:last-child{
  border-bottom:none;
}
.spec-table th,
.spec-table td{
  text-align:left;
  padding:12px 16px;
  vertical-align:top;
}
.spec-table th[scope="row"]{
  width:280px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--steel);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.spec-table td{
  color:var(--ink);
}

/* Equipment table: column headers instead of row labels */
.equipment-table thead th{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:10px 16px;
  border-bottom:2px solid var(--line);
  text-align:left;
}
.equipment-table td:first-child{
  font-weight:600;
  width:220px;
}
.equipment-desc-row td{
  padding-top:0;
  padding-bottom:16px;
  font-size:13px;
  color:var(--steel);
}

@media (max-width:820px){
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td{
    display:block;
    width:auto;
  }
  .spec-table tr{
    padding:12px 0;
  }
  .spec-table th, .spec-table td{
    padding:2px 0;
  }
  .spec-table th[scope="row"]{
    width:auto;
  }
  .equipment-table thead{
    display:none; /* column headers don't make sense once stacked */
  }
  .equipment-table td:first-child{
    width:auto;
  }
}

/* Site Photo Gallery (spec section 7) -- explicit 3/2/1 columns */
.portfolio-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.portfolio-gallery-grid img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:1040px){
  .portfolio-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:700px){
  .portfolio-gallery-grid{ grid-template-columns:1fr; }
}

/* Bottom Navigation (spec section 11) -- now shows project titles,
   not just arrows, so each link needs two stacked lines. */
.portfolio-nav{
  padding:32px 0;
  border-top:1px solid var(--line);
}
.portfolio-nav-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:16px;
}
.portfolio-nav-back{
  text-align:center;
  padding-top:2px;
}
.portfolio-nav-next{
  text-align:right;
}
.portfolio-nav-link{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  text-decoration:none;
  max-width:100%;
}
.portfolio-nav-arrow-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.portfolio-nav-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:14.5px;
  color:var(--ink);
}
.portfolio-nav-link:hover .portfolio-nav-title{
  color:var(--accent-red);
}

@media (max-width:700px){
  .portfolio-nav-row{
    grid-template-columns:1fr;
    text-align:center;
  }
  .portfolio-nav-next{ text-align:center; }
  .portfolio-nav-link{ align-items:center; }
}