/* Projects page */

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.portfolio-card {
  position: relative;
  display: grid;
  gap: 24px;
  padding: clamp(16px, 1.3vw, 25px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.portfolio-card:hover { border-color: var(--teal-200); box-shadow: 0 16px 40px rgba(12, 20, 29, 0.08); }
.portfolio-card .media { aspect-ratio: 442 / 276; }
.portfolio-card:hover .media img { transform: scale(1.05); }
.portfolio-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-body); line-height: 24px; }
.portfolio-card__sep { align-self: center; width: 1px; height: 20px; background: rgba(156, 163, 175, 0.4); } /* vertical rule, as in Figma */
.portfolio-card__name {
  margin-top: 12px;
  font-size: var(--fs-h3);
  line-height: 1.33;
}
.portfolio-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.portfolio-card__place { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.portfolio-card__place .icon { width: 24px; height: 24px; }

/* Projects listing: the whole card links to the case study (the CTA's ::after
   covers the card), and "view more details" fades in only while the card is hovered
   or focused, with the shared .u-line underline growing in (same effect as the
   homepage and blog cards). Touch screens have no hover, so there it always shows. */
.portfolio--listing .portfolio-card .link-arrow { transition: opacity var(--t-fast) var(--ease); }
.portfolio--listing .portfolio-card a.link-arrow::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.portfolio--listing .portfolio-card:has(a.link-arrow) { cursor: pointer; }
.portfolio--listing .portfolio-card a.link-arrow:focus-visible { outline: none; }
.portfolio--listing .portfolio-card:has(a.link-arrow:focus-visible) { outline: 3px solid var(--teal); outline-offset: 4px; }
.portfolio--listing .portfolio-card a.link-arrow { text-decoration: none; }
.portfolio--listing .portfolio-card:is(:hover, :focus-within) .link-arrow .u-line { transition-delay: 100ms; }
@media (hover: hover) {
  .portfolio--listing .portfolio-card .link-arrow { opacity: 0; }
  .portfolio--listing .portfolio-card:is(:hover, :focus-within) .link-arrow { opacity: 1; }
}

@media (max-width: 1023px) {
  .portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .portfolio__grid { grid-template-columns: minmax(0, 1fr); }
}

.section.portfolio { padding-top: var(--section-space); }

/* ---------- "Recent projects" heading + type filters (Figma: 100px under the hero, rule, then 40px to the cards) ---------- */
.section.portfolio--listing { padding-top: clamp(56px, 5.2vw, 100px); }
.portfolio__head { display: grid; gap: 32px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--border); }
.portfolio__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; font-weight: 600; }
.portfolio__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--navy);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--teal); color: var(--teal); }
.filter-chip.is-active,
.filter-chip.is-active:hover { border-color: var(--teal); background: var(--teal); color: var(--white); }
.portfolio-card[hidden] { display: none; }

/* Mobile: filters become one swipe row (same as the blog topics) */
@media (max-width: 767px) {
  .portfolio__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio__filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; white-space: nowrap; }
}