Use <dialog> to show co-op info when JS available

This commit progressively enhances the co-op grid to show the contents
of the `/co-op/<id>` page in a HTML `<dialog>` element. This improves
the existing experience by retaining the scroll position and returning
the user to the correct page when the dialog is closed.

In case JS isn't available, and for SEO purposes we link to the co-op
pages as previously (but with the disadvantage that the "close" button
always returns to the homepage irrespective of where the co-op grid is
used).

_includes/our_members.html

@@ -11,8 +11,50 @@
     </a>
     {% endfor %}
   </div>
+
+  <dialog id="coop-dialog">
+    <div class="coop-dialog-container">
+      <div id="coop-dialog-container__body"></div>
+    </div>
+  </dialog>
 </section>
 
 <section>
   <a class="btn" href="/hire">Hire our co-ops</a>
 </section>
+
+<script>
+  const dialog = document.getElementById('coop-dialog');
+  const dialogBody = document.getElementById('coop-dialog-container__body');
+
+  dialog.addEventListener('click', (e) => {
+    if (e.target === dialog) dialog.close();
+  });
+
+  document.querySelectorAll('#members .grid__link').forEach(link => {
+    link.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const url = link.getAttribute('href');
+
+      try {
+        const response = await fetch(url);
+        const html = await response.text();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        const content = doc.querySelector('body');
+        dialogBody.innerHTML = content ? content.innerHTML : html;
+
+        dialog.showModal();
+
+        const closeBtn = dialog.querySelector('.coop-info-box__close');
+        closeBtn.addEventListener('click', (e) => { e.preventDefault(); dialog.close() });
+
+      } catch (error) {
+        console.error('Failed to load coop page:', error);
+      }
+    });
+  });
+
+
+</script>

assets/css/app.css

@@ -487,3 +487,22 @@ footer {
   overflow: hidden;
   background: var(--cotech-black);
 }
+
+#coop-dialog {
+  max-width: 800px;
+  max-height: 90vh;
+  margin-left: auto;
+  margin-right: auto;
+  border: none;
+  border-radius: var(--space-sm);
+  padding: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+#coop-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.coop-dialog-container {
+  overflow-y: auto;
+}