feat(freelancer-directory): Best Practices — 12 items in two independent columns

Adds the twelfth item ("Look at a similar job they have already done") and
splits the accordion into two independent columns of six.

- Two independent columns (.bp-list > .bp-col, each its own grid, parent
  align-items:start) so opening an item grows only its own column and cannot
  shove the other. A single grid would re-size rows and make both columns
  jump on every click.
- DOM / reading order is 1–6 (left column) then 7–12 (right column) — a
  decision, not an accident.
- Exclusivity still one-open-at-a-time via the shared <details name> plus the
  inline JS fallback; re-proved, including the strip-the-name test.
- <=720 px collapses to a single column, no horizontal overflow.

odoo-community-developers/index.html

@@ -960,9 +960,11 @@
       }
 
       /* ---- Best Practices accordion (page-scoped, additive). Reuses the house FAQ card
-         and "+/-" marker; items are full-width, single column. Exclusivity comes from the
+         and "+/-" marker. TWO INDEPENDENT COLUMNS of six (see .bp-list/.bp-col): each
-         native <details name> attribute, with a small JS fallback in the page script. All
+         column is its own grid, so opening an item grows only its own column and the
-         items are CLOSED on load — nothing carries `open`. ---- */
+         other column does not move. Exclusivity comes from the native <details name>
+         attribute, with a small JS fallback in the page script. All items are CLOSED on
+         load — nothing carries `open`. ---- */
       .bp-lede {
         max-width: 760px;
         margin: 0 0 1.5rem;
@@ -970,10 +972,26 @@
         line-height: 1.7;
         color: var(--ink-soft);
       }
+      /* Parent grid: two columns pinned to the top (align-items:start), so an open item
+         in one column cannot push the other column down. DOM order is 1–6 then 7–12. */
       .bp-list {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: start;
+        column-gap: 2rem;
+        row-gap: 0.75rem;
+        max-width: 1100px;
+      }
+      .bp-col {
         display: grid;
         gap: 0.75rem;
-        max-width: 900px;
+        align-content: start;
+      }
+      /* 375 px and everything narrow: one column, no horizontal overflow. */
+      @media (max-width: 720px) {
+        .bp-list {
+          grid-template-columns: 1fr;
+        }
       }
       .bp-item {
         background: var(--ivory);
@@ -1217,6 +1235,7 @@
         <h2 class="section-title">Best Practices</h2>
         <p class="bp-lede">Hiring a freelancer goes better when a handful of things are settled before the work starts. These are not rules we impose, and they are not a verdict on anyone listed here — they are simply the points where this kind of work most often goes wrong.</p>
         <div class="bp-list">
+          <div class="bp-col">
 
           <details class="bp-item" name="best-practices">
             <summary id="bp1"><span class="bp-q">Agree the shape of the work first — workpackage or hours</span></summary>
@@ -1260,6 +1279,9 @@
             </div>
           </details>
 
+          </div>
+          <div class="bp-col">
+
           <details class="bp-item" name="best-practices">
             <summary id="bp7"><span class="bp-q">Prefer a proven third-party module — check the OCA first</span></summary>
             <div class="bp-a" role="region" aria-labelledby="bp7">
@@ -1295,6 +1317,14 @@
             </div>
           </details>
 
+          <details class="bp-item" name="best-practices">
+            <summary id="bp12"><span class="bp-q">Look at a similar job they have already done</span></summary>
+            <div class="bp-a" role="region" aria-labelledby="bp12">
+              <p>Ask for one piece of work close to yours and look at it before you commit — a module, a migration, a report. Someone who can show you something near your problem is easier to trust than someone who can only describe it. If they cannot share a client's work, ask them to talk you through a job like yours instead.</p>
+            </div>
+          </details>
+
+          </div>
         </div>
       </div>
     </section>