/* Projects page: the project directory with follow and Auto-Stacc controls. */

.projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.project-card { background: var(--panel); border: 1px solid var(--line); box-shadow: 5px -4px 0 color-mix(in srgb, var(--accent-2) 30%, transparent); padding: 22px; display: grid; gap: 10px; align-content: start; }
.project-card h3 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); text-transform: uppercase; overflow-wrap: anywhere; }
.project-card h3 a { display: inline-flex; align-items: center; gap: 14px; color: var(--accent); text-shadow: var(--glow); }
/* the project's own logo beside its name (data/projects.js `logo`) */
.project-logo { width: 56px; height: 56px; flex: none; border-radius: var(--radius); }
/* or its full logo as the whole heading (data/projects.js `logoFull`) */
.project-logo-full { display: block; width: min(100%, 440px); height: auto; }
.project-card p { margin: 0; }
.project-features { display: flex; flex-wrap: wrap; gap: 6px; }
.project-card .small-print a { display: inline-block; padding-block: 4px; }
.project-card .actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0; }
.auto-stacc { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; cursor: pointer; }
.auto-stacc input { width: 20px; height: 20px; accent-color: var(--accent); }


@media (max-width: 600px) {
  .project-card { padding: 18px 14px; box-shadow: 3px -2px 0 color-mix(in srgb, var(--accent-2) 28%, transparent); }
}

/* ---------- the projects browser (js/projects-browse.js) and project cards (js/project-card.js) ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.pgrid > .projects { grid-column: 1 / -1; }
.pcard { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s; }
.pcard:hover, .pcard:focus-within { border-color: var(--accent); }
.pcard-art { display: grid; place-items: center; width: 88px; height: 88px; overflow: hidden; border-radius: calc(var(--radius) + 4px); text-decoration: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent-2, var(--accent)) 45%, #000)); }
.pcard-art img { width: 100%; height: 100%; object-fit: cover; }
.pcard-art span { font-family: var(--display); font-size: 1.8rem; font-weight: 800; color: #fff; }
.pcard-body { display: grid; gap: 6px; min-width: 0; }
.pcard-name { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.pcard-name a { color: inherit; display: inline-block; padding-block: 2px; }
.pcard-by, .pcard-tagline, .pcard-activity { margin: 0; font-size: .9rem; color: var(--muted); }
.pcard-by:empty { display: none; }
.pcard:has(> .card-tags) .pcard-body > :first-child { padding-right: 5.5rem; } /* room for the corner tag (js/card.js) */
.pcard-tagline { color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pcard.is-recent .pcard-activity::before { content: "● "; color: var(--accent); }
.pcard-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pcard-tags li { padding: 2px 8px; font-size: .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.pcard-makes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pcard .btn.small { min-height: 40px; padding: 6px 14px; font-size: .85rem; }
.pcard .project-follow:empty { display: none; }
.pcard .project-follow .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pcard .project-follow .msg { margin: 6px 0 0; }
@media (max-width: 600px) {
  .pcard { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .pcard-art { width: 64px; height: 64px; }
  .pcard .btn.small { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } }
.pcard-body .pcard-actions .btn, .pcard .project-follow .btn { width: auto; flex: none; }
.pcard-body { align-content: start; }
.pcard .project-follow .btn { min-height: 40px; padding: 6px 14px; font-size: .85rem; }
.pcard .project-follow .auto-stacc { font-size: .85rem; }
.pcard-why { margin: 0; font-size: .82rem; font-weight: 600; color: var(--accent); }
@media (max-width: 600px) { .pcard .project-follow .btn { min-height: 44px; } }

/* ---------- personality (owner, 2026-10-22): AutoStacc's glass card, the project's accent and signature animation ---------- */
.pcard { --pc: var(--teal); }
.pcard[data-accent="amber"] { --pc: var(--amber); }
.pcard[data-accent="coral"] { --pc: var(--coral); }
.pcard[data-accent="lime"] { --pc: var(--lime); }
.pcard[data-accent="violet"] { --pc: var(--violet); }
.platform .pcard:hover, .platform .pcard:focus-within { border-color: var(--pc); }
.platform .pcard.is-recent .pcard-activity::before, .platform .pcard-why { color: var(--pc); }
.platform .pcard .card-type { color: var(--pc); }
.platform .pcard-art { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent); }
/* The animation plays once as the card arrives, and again on hover or focus; never for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .pcard[data-motion="pulse"] .pcard-art { animation: pc-pulse .9s var(--snap) .2s 1 both; }
  .pcard[data-motion="pulse"]:is(:hover, :focus-within) .pcard-art { animation: pc-pulse-again .9s var(--snap) 1 both; }
  .pcard[data-motion="glitch"] .pcard-art { animation: pc-glitch .5s steps(2, jump-none) .2s 1 both; }
  .pcard[data-motion="glitch"]:is(:hover, :focus-within) .pcard-art { animation: pc-glitch-again .5s steps(2, jump-none) 1 both; }
  .pcard[data-motion="wave"] .pcard-art { animation: pc-wave 1.1s ease-in-out .2s 1 both; }
  .pcard[data-motion="wave"]:is(:hover, :focus-within) .pcard-art { animation: pc-wave-again 1.1s ease-in-out 1 both; }
}
@keyframes pc-pulse { 40% { transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 25%, transparent); } }
@keyframes pc-pulse-again { 40% { transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc) 25%, transparent); } }
@keyframes pc-glitch { 20% { transform: translate(-2px, 1px); filter: hue-rotate(40deg); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 0); filter: none; } }
@keyframes pc-glitch-again { 20% { transform: translate(-2px, 1px); filter: hue-rotate(40deg); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 0); filter: none; } }
@keyframes pc-wave { 30% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }
@keyframes pc-wave-again { 30% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }

/* ---------- the poster card for rows (compact): art on top, the name, who, one link ---------- */
.pcard.pcard-poster { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
.pcard-poster .pcard-art { width: 100%; height: auto; aspect-ratio: 1; }
.pcard-poster .pcard-art span { font-size: 2.6rem; }
.pcard-poster .pcard-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 600px) { .pcard.pcard-poster { grid-template-columns: minmax(0, 1fr); } .pcard-poster .pcard-art { width: 100%; height: auto; } }
.pgrid-posters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }