/* /allprojects: gallery layout, big image on top, text below */
html body .portfolio-section {
  background-color: #fff;
  background-image:
    radial-gradient(900px 360px at 50% 0, rgba(26,158,114,.10), transparent 70%),
    linear-gradient(rgba(11,61,46,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,61,46,.055) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  background-repeat: no-repeat, repeat, repeat;
  padding-top: 64px;
  padding-bottom: 96px;
}
html body .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 32px;
  align-items: stretch;
}
html body .portfolio-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  text-decoration: none;
}
html body .portfolio-card .pc-thumb {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #0b1a15;
  box-shadow: 0 1px 2px rgba(11,61,46,.08), 0 14px 34px -16px rgba(11,61,46,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
html body .portfolio-card:hover .pc-thumb {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(11,61,46,.08), 0 26px 50px -18px rgba(11,61,46,.45);
}
html body .portfolio-card .pc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .6s ease;
}
html body .portfolio-card:hover .pc-thumb img { transform: scale(1.03); }
html body .portfolio-card .pc-thumb-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
html body .portfolio-card .pc-type { position: absolute; top: 14px; left: 14px; z-index: 2; }
html body .portfolio-card .pc-year { position: absolute; top: 14px; right: 14px; z-index: 2; }

html body .portfolio-card .pc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 !important;
  gap: 10px;
}
html body .portfolio-card .pc-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #0B3D2E;
}
html body .portfolio-card .pc-desc {
  font-size: 16px;
  line-height: 1.65;
  color: #566a63;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html body .portfolio-card .pc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
html body .portfolio-card .pc-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e3ebe7;
}
html body .portfolio-card .pc-link { transition: gap .25s ease; }
html body .portfolio-card:hover .pc-link { gap: 12px; }

@media (max-width: 1000px) {
  html body .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
}
@media (max-width: 640px) {
  html body .portfolio-grid { grid-template-columns: 1fr; gap: 40px; }
  html body .portfolio-card .pc-title { font-size: 22px; }
}

/* match the blog: square, flat, no hover effects, taller images */
html body .portfolio-card .pc-thumb {
  aspect-ratio: 3 / 2;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}
html body .portfolio-card:hover .pc-thumb { transform: none !important; box-shadow: none !important; }
html body .portfolio-card .pc-thumb img { border-radius: 0 !important; transition: none !important; }
html body .portfolio-card:hover .pc-thumb img { transform: none !important; }
html body .portfolio-card:hover .pc-link { gap: 8px !important; }
html body .portfolio-grid { gap: 60px 32px; }

/* TOOL TILE: cards without a screenshot show a themed icon tile instead of the dark panel */
html body .portfolio-card .pc-thumb:has(.pc-thumb-fallback) {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 16px !important;
  align-items: start !important;
  height: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: 28px 28px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}
html body .portfolio-card .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: static !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1A9E72 !important;
  border-radius: 0 !important;
}
html body .portfolio-card:nth-child(even) .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback { background: #0B3D2E !important; }
html body .portfolio-card .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback svg {
  width: 28px !important;
  height: 28px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .portfolio-card .pc-thumb:has(.pc-thumb-fallback) .pc-type {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
}
html body .portfolio-card .pc-thumb:has(.pc-thumb-fallback) .pc-year {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: start !important;
  margin-top: 8px !important;
}
html body .portfolio-card .pc-thumb:has(.pc-thumb-fallback) + .pc-body { padding-top: 22px !important; }

/* TOOL TILE 2: align with the title, one green per card */
html body .portfolio-card .pc-thumb:has(.pc-thumb-fallback) { padding: 28px 0 0 !important; }
html body .portfolio-card:nth-child(6n+1) .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback { background: #1A9E72 !important; }
html body .portfolio-card:nth-child(6n+2) .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback { background: #0B3D2E !important; }
html body .portfolio-card:nth-child(6n+3) .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback { background: #0E7C66 !important; }
html body .portfolio-card:nth-child(6n+4) .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback { background: #3F9142 !important; }
html body .portfolio-card:nth-child(6n+5) .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback { background: #2F6F5E !important; }
html body .portfolio-card:nth-child(6n+6) .pc-thumb:has(.pc-thumb-fallback) .pc-thumb-fallback { background: #6A9C3A !important; }