/* Projects-page architecture refinements v2.
   Keeps support paths distinct and aligns the featured architecture panels. */

.project-card .project-arch-support{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.project-card .project-arch-support-label{
  width:100%;
  margin-bottom:2px;
  color:var(--muted-2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-align:center;
}

.project-card .project-arch-support .arch-box{
  min-width:auto;
  padding:7px 10px;
  font-size:10px;
}

.project-card .project-arch-support-arrow{
  color:var(--orange);
  font-size:13px;
  line-height:1;
}

/* Project technology pills: visible interaction state without persistent glow. */
.project-card .tag{
  cursor:pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.project-card .tag:hover,
.project-card .tag:focus-visible{
  transform:translateY(-1px);
  color:var(--text);
  border-color:var(--green);
  background:color-mix(in srgb,var(--green) 18%,var(--panel));
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--green) 24%,transparent),
    0 0 18px color-mix(in srgb,var(--green) 34%,transparent);
  outline:none;
}

/* Cards 01 and 02 sit beside each other. Reserve identical vertical space
   for their heading, summary and technology row so both architecture panels
   start on the same horizontal line. */
@media (min-width:821px){
  .project-grid > .project-card:nth-child(-n+2) > h3{
    min-height:3.15em;
  }

  .project-grid > .project-card:nth-child(-n+2) > h3 + p{
    min-height:4.65em;
  }

  .project-grid > .project-card:nth-child(-n+2) > .tags{
    min-height:40px;
    align-content:center;
  }
}

@media(max-width:520px){
  .project-card .project-arch-support{
    gap:6px;
  }
  .project-card .project-arch-support .arch-box{
    padding:7px 8px;
    font-size:9.5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .project-card .tag{transition:none}
}