Improve mobile CSS layout with better card design and spacing

Co-authored-by: mvadari <8029314+mvadari@users.noreply.github.com>

Author: Copilot

site/assets/style.css

@@ -578,6 +578,11 @@ footer a:hover {
 
 /* Mobile table view */
 @media (max-width: 600px) {
+    .standards-table-container {
+        background: transparent;
+        border: none;
+    }
+    
     .standards-table thead {
         display: none;
     }
@@ -595,34 +600,105 @@ footer a:hover {
 
     .standards-table tr {
         border: 1px solid var(--border-color);
-        margin-bottom: 16px;
-        border-radius: 8px;
-        padding: 16px;
+        margin-bottom: 20px;
+        border-radius: 12px;
+        padding: 20px;
         background: var(--bg-color-raised);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        transition: all 0.2s ease;
+    }
+    
+    .standards-table tr:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+        background-color: var(--color-gray-7);
     }
 
     .standards-table td {
         border: none;
-        padding: 8px 0;
+        padding: 12px 0;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        min-height: 36px;
+        align-items: flex-start;
+        min-height: auto;
+        flex-direction: column;
+        gap: 6px;
+    }
+    
+    .standards-table td:first-child {
+        padding-top: 0;
+        border-top: none;
+    }
+    
+    .standards-table td:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+        align-items: flex-start;
+    }
+    
+    .standards-table td:not(:last-child) {
+        border-bottom: 1px solid var(--border-color);
+        padding-bottom: 16px;
+        margin-bottom: 4px;
     }
 
     .standards-table td:before {
-        content: attr(data-label) ':';
+        content: attr(data-label);
         font-weight: 600;
         color: var(--text-color-secondary);
         text-transform: uppercase;
-        font-size: 12px;
-        letter-spacing: 0.5px;
-        margin-right: 16px;
-        flex-shrink: 0;
-        width: 80px;
+        font-size: 11px;
+        letter-spacing: 0.8px;
+        margin-bottom: 4px;
+        display: block;
+        opacity: 0.8;
+    }
+    
+    /* Mobile-specific column styling */
+    .standards-table .number-col a {
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--link-color);
+        text-decoration: none;
+        display: block;
+        padding: 8px 0;
+    }
+    
+    .standards-table .number-col a:hover {
+        color: var(--link-hover-color);
+    }
+    
+    .standards-table .title-col a {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--text-color);
+        text-decoration: none;
+        line-height: 1.4;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: block;
+        padding: 4px 0;
+    }
+    
+    .standards-table .title-col a:hover {
+        color: var(--link-color);
+    }
+    
+    .standards-table .author-col {
+        color: var(--text-color-secondary);
+        font-size: 14px;
+        line-height: 1.3;
     }
 
     .standards-table .status-col {
-        text-align: right;
+        text-align: left;
+        align-items: flex-start;
+    }
+    
+    .standards-table .status-badge {
+        margin-top: 2px;
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
     }
 }