/* ================================================
   1. Reset any previous article-row card styling
   ================================================ */

body .ContentList__topicList {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ================================================
   2. Card-style layout for KB section columns
      (General, Using OptiRTP, User Guides, etc.)
   ================================================ */

/* Any DIV whose direct child is the section description line
   (e.g. <div class="ListHeader__description emptydescription">General</div>)
   will be treated as a "column card".
   This wraps the whole section and its article list in a card.
*/
body div:has(> .ListHeader__description.emptydescription) {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e3eaec;
  padding: 18px 20px 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Hover “lift” effect on each section card */
body div:has(> .ListHeader__description.emptydescription):hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
  transform: translateY(-3px);
}

/* Optional: tidy the small grey description line itself */
body .ListHeader__description.emptydescription {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #666666;
}