/* The projects page's own styles (docs/design/prototype/pages/projects.html), generated by scripts/page-styles.py;
   check with --check. Loaded only on the pages built from it (inc/page-design.php). */

/* Projects: a compact red hero, the four owned products as bento cards with their status labels, Rizonesoft's
   open source (#open-source) with the register's figures, client work shown only where permitted, and the
   closing band. */
.elementor .pg-projects .hero { padding: clamp(64px, 9vw, 120px) 20px clamp(84px, 10vw, 140px); }
.elementor .pg-projects .hero h1 { max-width: 19ch; }
.elementor .pg-projects .bento + .bento { padding-top: 0; }
.elementor .pg-projects .pj-rev { grid-template-columns: 1fr 1.4fr; }
.elementor .pg-projects .pj-one { grid-template-columns: 1fr; }
.elementor .pg-projects .card { min-height: 0; }
.elementor .pg-projects .card h3 { font-size: 22px; margin-bottom: 10px; }
.elementor .pg-projects .card p + p { margin-top: 10px; }
.elementor .pg-projects .card .pj-fact { color: var(--ink-3); font-size: 14px; }
.elementor .pg-projects .card.red .pj-fact { color: rgba(255, 255, 255, 0.9); }
.elementor .pg-projects .pj-art { margin-top: 24px; }
.elementor .pg-projects .pj-cap { display: flex; justify-content: space-between; font: 12px/1 var(--mono); color: var(--ink-3); margin: 24px 0 10px; }
.elementor .pg-projects .pj-cap em { color: var(--signal-ink); font-style: normal; }
.elementor .pg-projects .card .term { margin-top: 0; min-height: 0; height: 168px; overflow: hidden; }
.elementor .pg-projects .pj-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; padding-top: 4px; }
.elementor .pg-projects .pj-links a { color: var(--signal-ink); font-weight: 500; text-decoration: none; }
.elementor .pg-projects .pj-links a:hover { text-decoration: underline; }
.elementor .pg-projects .card .rows { margin-top: 0; }
.elementor .pg-projects .card .row .st { color: var(--signal-ink); }
.elementor .pg-projects .card .row.pj-gap { background: none; border: 1px dashed var(--line); color: var(--ink-3); grid-template-columns: 1fr; text-align: center; padding: 8px 12px; }
.elementor .pg-projects .pj-sig { border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 18px 18px 16px; }
.elementor .pg-projects .pj-sig strong { display: block; font-weight: 600; font-size: 16px; }
.elementor .pg-projects .pj-sig span { display: block; color: var(--ink-2); font-size: 14px; }
.elementor .pg-projects .pj-sig i { display: block; width: 48px; height: 3px; background: var(--signal); border-radius: 2px; margin: 12px 0; }
.elementor .pg-projects .pj-sig code { display: block; font: 12px/1.6 var(--mono); color: var(--ink-3); }
.elementor .pg-projects .pj-lock { display: grid; place-items: center; width: 84px; height: 84px; margin: 28px 0 26px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 10px; background: rgba(255, 255, 255, 0.08); rotate: -6deg; }
.elementor .pg-projects .pj-lock svg { width: 34px; height: 34px; }
.elementor .pg-projects .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.85; }
.elementor .pg-projects .btn-ghost[aria-disabled="true"]:hover { background: transparent; }

.elementor .pg-projects .pj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.elementor .pg-projects .pj-chips span { font: 12px/1 var(--mono); padding: 8px 12px; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-2); background: var(--soft); }
@media (max-width: 860px) { .elementor .pg-projects .pj-rev { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .elementor .pg-projects .card .tag { position: static; align-self: flex-start; margin-bottom: 16px; } .elementor .pg-projects .card { padding: 24px 20px; } }

/* Rizonesoft's figures: three numbers in a ruled strip, each with the register's exact sentence. */
.elementor .pg-projects .pj-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.elementor .pg-projects .pj-stats > div { padding: 32px; border-right: 1px solid var(--line); }
.elementor .pg-projects .pj-stats > div:last-child { border-right: 0; }
.elementor .pg-projects .pj-stats b { display: block; font: 500 clamp(40px, 4.4vw, 56px)/1 var(--face); letter-spacing: -0.03em; margin-bottom: 12px; }
.elementor .pg-projects .pj-stats b span { color: var(--signal); }
.elementor .pg-projects .pj-stats p { color: var(--ink-2); font-size: 15px; max-width: 32ch; }
@media (max-width: 760px) { .elementor .pg-projects .pj-stats { grid-template-columns: 1fr; } .elementor .pg-projects .pj-stats > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 20px; } .elementor .pg-projects .pj-stats > div:last-child { border-bottom: 0; } }
.elementor .pg-projects .pj-also { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.elementor .pg-projects .pj-also p { max-width: 60ch; }

/* Client work: the permitted logos, monochrome in the ink colour so they read in both themes. */
.elementor .pg-projects .pj-logos { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.elementor .pg-projects .pj-logos > div { display: grid; place-items: center; height: 120px; padding: 0 18px; border-right: 1px solid var(--line); }
.elementor .pg-projects .pj-logos > div:last-child { border-right: 0; }
.elementor .pg-projects .pj-logo { display: block; width: 100%; max-width: var(--w, 150px); height: var(--h, 36px); background: var(--ink-2); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background-color 0.2s; }
.elementor .pg-projects .pj-logos > div:hover .pj-logo { background: var(--ink); }
@media (max-width: 960px) { .elementor .pg-projects .pj-logos { grid-template-columns: repeat(3, 1fr); } .elementor .pg-projects .pj-logos > div:nth-child(3n) { border-right: 0; } .elementor .pg-projects .pj-logos > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .elementor .pg-projects .pj-logos { grid-template-columns: repeat(2, 1fr); } .elementor .pg-projects .pj-logos > div:nth-child(n) { height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .elementor .pg-projects .pj-logos > div:nth-child(2n) { border-right: 0; } .elementor .pg-projects .pj-logos > div:nth-last-child(-n+2) { border-bottom: 0; } }

/* The hero pill points down to Rizonesoft's open source on this page (projects.html:66): its badge draws
   Lucide's arrow-down (D10 T02 §2; scripts/lib/icons.py). */
.elementor .pg-projects .pill::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ff4a14%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14%22/%3E%3Cpath d=%22m19 12-7 7-7-7%22/%3E%3C/svg%3E"); }