chore: refine responsive styles for hero-stats grid on mobile devices

[hoangsonww]

This pull request updates the responsive styles for the .hero-stats and .hero-stat components in wiki/styles.css to improve layout consistency and visual alignment, especially on smaller screens. The changes focus on refining grid and padding behavior, ensuring divider lines align correctly, and handling edge cases for odd numbers of stats.

Responsive layout and alignment improvements:

• Refactored the .hero-stats grid for screens under 720px to remove vertical gaps, set padding-top: 0, and ensure vertical dividers (borders) align perfectly with the top border.
• Updated .hero-stat items to use uniform top padding (16px), set min-width: 0, and use box-sizing: border-box for better cell alignment.
• Changed right-column items (.hero-stat:nth-child(even)) to use a left border and left padding, ensuring the divider line connects with the top border.
• Improved handling of the last row and lone items: removed the bottom border from the last three stats and made a lone fifth stat span the full width, center its content, and clear left-side styles.

Mobile font scaling:

• Added a responsive font size for `.hero

[gemini-code-assist]

Code Review

This pull request updates the responsive styles for hero statistics in wiki/styles.css, improving the grid layout and typography for smaller screens. Review feedback identifies an issue with the border-removal logic for even-numbered grids, suggests removing redundant CSS properties already defined globally, and recommends adjusting a font-size clamp to ensure a smooth transition at the 480px breakpoint.

[gemini-code-assist]

The selector :nth-last-child(-n + 3) incorrectly removes the bottom border from the right-hand item of the second-to-last row when the total number of items is even (e.g., in a 4-item or 6-item grid). This results in an inconsistent horizontal line where one item in a row has a border and its neighbor does not. To correctly target only the last row in a 2-column layout, use a selector that accounts for the grid's flow.

  .hero-stat:last-child, .hero-stat:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

[gemini-code-assist]

The properties min-width: 0 and box-sizing: border-box are already applied globally to all elements via the universal selector at the top of the stylesheet (lines 36-40). Removing them here reduces redundancy and keeps the component styles focused.

  .hero-stat  {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    /* Uniform top padding on all items keeps rows aligned within their cells */
    padding: 16px 0;
  }

[gemini-code-assist]

The clamp(14px, 5vw, 20px) font-size at the 480px breakpoint causes a jump in size. At 481px, the font size is 18px (from the base rule clamp(18px, 2.1vw, 24px)), but at 480px it jumps to 20px (since 5% of 480 is 24, clamped to 20). This makes the text larger as the screen gets smaller. Adjusting the scale to start at 18px at the breakpoint ensures a smooth fluid transition.

  .hero-stat .n { font-size: clamp(14px, 3.75vw, 18px); }