/* Projects: two-column card grid with auto-rotating screenshots */
.pg-section {
  position: relative;
  padding: 96px 0;
  background: #050710;
}
.pg-container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}
.pg-eyebrow {
  margin: 0 0 12px;
  color: #18e7ff;
  font: 700 13px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pg-title {
  margin: 0 0 12px;
  color: #fff;
  font: 700 clamp(30px, 5vw, 52px)/1.05 Outfit, Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.pg-lede {
  max-width: 560px;
  margin: 0 0 40px;
  color: rgba(255, 255, 255, 0.6);
  font: 400 17px/1.55 Inter, system-ui, sans-serif;
}
.pg-filters {
  display: flex;
  gap: 8px;
  margin: -16px 0 28px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pg-filters::-webkit-scrollbar { display: none; }
.pg-filter {
  display: inline-flex;
  flex: none;
  gap: 8px;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font: 600 14px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pg-filter:hover { border-color: rgba(24, 231, 255, 0.5); color: #fff; }
.pg-filter:focus-visible { outline: 2px solid #18e7ff; outline-offset: 2px; }
.pg-filter.is-active { border-color: #18e7ff; background: #18e7ff; color: #050710; }
.pg-count {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font: 700 11px/1 Inter, system-ui, sans-serif;
  text-align: center;
}
.pg-filter.is-active .pg-count { background: rgba(5, 7, 16, 0.15); }
.pg-grid li[hidden] { display: none; }
.pg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
a.pg-card:hover,
a.pg-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(24, 231, 255, 0.45);
  box-shadow: 0 18px 40px -18px rgba(24, 231, 255, 0.35);
}
a.pg-card:focus-visible { outline: 2px solid #18e7ff; outline-offset: 3px; }
.pg-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pg-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.pg-bar span:nth-child(2) { background: #febc2e; }
.pg-bar span:nth-child(3) { background: #28c840; }
.pg-shots {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0b0f1c;
}
.pg-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.pg-shots img.is-active { opacity: 1; }
.pg-shots--cta {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(24, 231, 255, 0.22), transparent 60%),
    #0b0f1c;
  color: #18e7ff;
  font-size: 44px;
}
.pg-info {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 18px;
}
.pg-name {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font: 700 20px/1.2 Outfit, Inter, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-sub {
  margin: 4px 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.55);
  font: 500 14px/1.3 Inter, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-info > div { min-width: 0; }
.pg-arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(24, 231, 255, 0.35);
  border-radius: 50%;
  color: #18e7ff;
  transition: background-color 0.25s ease, color 0.25s ease;
}
a.pg-card:hover .pg-arrow { background: #18e7ff; color: #050710; }
.pg-arrow svg { width: 18px; height: 18px; }

@media (min-width: 1024px) {
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .pg-section { padding: 64px 0; }
  .pg-lede { margin-bottom: 24px; font-size: 15px; }
  .pg-filters { margin: -4px -16px 18px; padding: 0 16px 4px; }
  .pg-filter { height: 36px; padding: 0 14px; font-size: 13px; }
  .pg-grid { gap: 12px; }
  .pg-card { border-radius: 16px; }
  .pg-bar { height: 22px; gap: 5px; padding: 0 10px; }
  .pg-bar span { width: 7px; height: 7px; }
  .pg-shots { aspect-ratio: 3 / 4; }
  .pg-info { gap: 6px; padding: 10px 10px 12px; }
  .pg-name {
    display: -webkit-box;
    font-size: 15px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .pg-sub {
    display: -webkit-box;
    font-size: 12px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .pg-arrow { width: 26px; height: 26px; border: 0; }
  .pg-arrow svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-shots img { transition: none; }
  a.pg-card:hover { transform: none; }
}

.pg-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(24, 231, 255, 0.4);
  border-radius: 999px;
  background: rgba(5, 7, 16, 0.78);
  color: #18e7ff;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
  .pg-badge { top: 7px; left: 7px; padding: 4px 7px; font-size: 9px; }
}

.pg-section--sr { background: transparent; }
.pg-more[hidden] { display: none; }
.pg-show-all {
  display: block;
  margin: 28px auto 0;
  padding: 14px 26px;
  border: 1px solid rgba(24, 231, 255, 0.4);
  border-radius: 999px;
  background: rgba(24, 231, 255, 0.08);
  color: #fff;
  font: 700 15px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pg-show-all:hover { background: rgba(24, 231, 255, 0.18); }
.pg-show-all[hidden] { display: none; }

/* Visual fixes (Oct 2026): the "Template" badge sits in the browser bar so it
   no longer covers logos in the screenshots, the "Yours next?" card spans the
   full row instead of sitting alone, and filters wrap on phones. */
.pg-bar .pg-badge {
  position: static;
  margin-left: auto;
  padding: 3px 8px;
  font-size: 10px;
  width: auto;
  height: auto;
  border-radius: 999px;
  background: rgba(5, 7, 16, 0.6);
  backdrop-filter: none;
}
.pg-grid > li:has(.pg-shots--cta) { grid-column: 1 / -1; }
.pg-grid > li:has(.pg-shots--cta) .pg-card {
  display: grid;
  grid-template-columns: 1fr;
}
.pg-grid > li:has(.pg-shots--cta) .pg-shots--cta { aspect-ratio: auto; min-height: 140px; }
@media (max-width: 640px) {
  .pg-filters { flex-wrap: wrap; overflow: visible; margin: -4px 0 18px; padding: 0 0 4px; }
  .pg-bar .pg-badge { padding: 2px 6px; font-size: 8px; }
  .pg-grid > li:has(.pg-shots--cta) .pg-shots--cta { min-height: 96px; font-size: 32px; }
}

/* Real client work (not a template) gets a green badge. */
.pg-bar .pg-badge--client {
  border-color: rgba(74, 222, 128, 0.5);
  color: #86efac;
  white-space: nowrap;
}