/* ==========================================================================
   TechAid — Projects page
   Loaded after global.css. Uses the tokens from global.css :root only.
   ========================================================================== */

/* Hero: a range of software (one tile per kind of project, plus an open tile) */
/* The soft glow behind the tiles sticks out 6% past the tiles. On phones that is wider than the page side padding (20px), so the page could be dragged sideways. Clip only the sideways overflow; the glow still shows. */
.page-hero-split { overflow-x: clip; }
.pj-visual { position: relative; width: 100%; max-width: 480px; margin: 0 0 0 auto; text-align: left; }

/* Projects: one flat grid of cards */
.pj-list { padding: var(--section-pad) 0; scroll-margin-top: 80px; }
/* Search box (same look as the ToolBox search) */
.pj-search-wrap { max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0; }
.pj-search { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 60px; background: var(--color-bg); border: 2px solid var(--color-line); border-radius: var(--radius-lg); color: var(--color-muted); transition: border-color .15s ease, box-shadow .15s ease; }
.pj-search:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-tint-strong); color: var(--color-brand); }
.pj-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: var(--text-lg); color: var(--color-ink); outline: none; }
.pj-search input::placeholder { color: var(--color-muted); opacity: .85; }
.pj-search kbd { flex: none; min-width: 26px; padding: 3px 8px; text-align: center; font: 600 var(--text-xs)/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--color-muted); background: var(--color-card); border: 1px solid var(--color-line); border-bottom-width: 2px; border-radius: var(--radius-xs); }
.pj-grid[hidden], .pj-grid li[hidden] { display: none; }
.pj-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.pj-grid li { min-width: 0; }
.pj-card { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--space-6); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); color: var(--color-ink); transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; }
a.pj-card:hover, a.pj-card:focus-visible { border-color: var(--color-brand); box-shadow: var(--shadow-hover); transform: translateY(-3px); outline: none; }
a.pj-card:focus-visible { box-shadow: var(--shadow-hover), 0 0 0 3px var(--color-brand-tint-strong); }
.pj-card-top { display: flex; align-items: center; width: 100%; }
.pj-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--color-brand-tint-strong); color: var(--color-brand); transition: background .18s ease, color .18s ease, transform .18s ease; }
.pj-icon svg { width: 25px; height: 25px; }
.pj-card.is-soon .pj-icon { background: var(--color-line-soft); color: var(--color-muted-light); }
.pj-card h3 { display: block; margin: var(--space-4) 0 0; font-size: var(--card-title); font-weight: 700; letter-spacing: 0; line-height: 1.3; transition: color .15s ease; }
.pj-card small { display: block; margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted); }
.pj-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: var(--text-sm); font-weight: 700; color: var(--color-brand); }
.pj-go svg { transition: transform .15s ease; }
.pj-card { overflow: hidden; }
/* Bottom part of the card: a soft band the full width of the card. It says what the project is; the card itself is the link. */
.pj-dl { display: flex; align-items: center; gap: var(--space-3); width: auto; margin: auto calc(var(--space-6) * -1) calc(var(--space-6) * -1); align-self: stretch; padding: var(--space-3) var(--space-6); background: var(--color-line-soft); border-top: 1px solid var(--color-line); }
.pj-dl-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-line); color: var(--color-brand); transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.pj-dl-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.pj-dl-txt strong { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.pj-dl-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--color-muted); }
.pj-dl-tag { flex: none; margin-left: auto; padding: 3px 10px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: var(--color-card); font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
a.pj-card:hover .pj-dl-ic, a.pj-card:focus-visible .pj-dl-ic { background: var(--color-brand); box-shadow: none; color: var(--color-white); }
a.pj-card:hover .pj-icon, a.pj-card:focus-visible .pj-icon { transform: scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 14%, transparent); }
a.pj-card:hover h3, a.pj-card:focus-visible h3 { color: var(--color-brand); }
a.pj-card:hover .pj-go svg, a.pj-card:focus-visible .pj-go svg { transform: translateX(4px); }
.pj-none { margin: var(--space-6) auto 0; max-width: 760px; padding: var(--space-5); border: 1px dashed var(--color-line); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-muted); }
.pj-none a { color: var(--color-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ToolBox line (under Why) */
/* Cross-link card: the whole card is the link (icon, text, arrow link), same hover as the tiles */
.pj-more { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--section-pad-sm); padding: var(--space-5) var(--space-6); background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); color: var(--color-ink); transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; }
.pj-more:hover, .pj-more:focus-visible { border-color: var(--color-brand); box-shadow: var(--shadow-hover); transform: translateY(-3px); outline: none; }
.pj-more-ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-brand-tint-strong); color: var(--color-brand); }
.pj-more-txt { min-width: 0; font-size: var(--text-base); line-height: 1.6; color: var(--color-muted); }
.pj-more-txt strong { display: block; color: var(--color-ink); }
.pj-more .pj-go { margin-top: 0; white-space: nowrap; }
.pj-more:hover .pj-go svg, .pj-more:focus-visible .pj-go svg { transform: translateX(4px); }
@media (max-width: 640px) {
  .pj-more { grid-template-columns: 44px minmax(0, 1fr); padding: var(--space-5); }
  .pj-more-ic { width: 44px; height: 44px; }
  .pj-more .pj-go { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .pj-more:hover, .pj-more:focus-visible, .pj-more:hover .pj-go svg { transform: none; } }

/* Why */
.pj-why { padding: var(--section-pad-sm) 0; }
.pj-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.pj-why-grid > div { padding-left: var(--space-4); border-left: 3px solid var(--color-brand); }
.pj-why-grid h3 { font-weight: 700; }
.pj-why-grid p { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.65; color: var(--color-muted); }

@media (max-width: 900px) {
  .pj-visual { margin: var(--space-5) auto 0; }
  .pj-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pj-t-flow, .pj-t-api { display: none; }
  .pj-t-dash, .pj-t-mgmt { grid-column: span 6; }
  .pj-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .pj-card { padding: var(--space-5); }
  .pj-dl { margin: auto calc(var(--space-5) * -1) calc(var(--space-5) * -1); padding: var(--space-3) var(--space-5); }
}
@media (hover: none) {
  .pj-search kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pj-t, .pj-area, .pj-plus { animation: none; }
  .pj-line { animation: none; stroke-dashoffset: 0; }
  .pj-flow-dot { display: none; }
  a.pj-card:hover, a.pj-card:focus-visible, a.pj-card:hover .pj-icon, a.pj-card:focus-visible .pj-icon, a.pj-card:hover .pj-go svg, a.pj-card:focus-visible .pj-go svg { transform: none; }
}