/* ==========================================================================
   acxpa-downloads.css  v1.1.0
   Layout and component fixes for the Download Monitor Page Addon listings.

   COMPLETE FILE — replaces v1.0.0. Do not append.

   v1.1.0  Download button and item heading (see sections 6 and 7).
   v1.0.0  Grid layout fix.

   THE ORIGINAL PROBLEM
   The addon's own page.css ships:

       #download-page .dlm-pa-download-category { width:48%; float:left; clear:left; }

   That rule contradicts itself. width:48% + float:left says "two columns";
   clear:left says "one per row". The result is a 48%-wide column stacked down
   the left of a 1250px container with 52% of the page empty.

   It can never resolve into two columns on this site anyway: each category is
   rendered inside its own .dlm-pa-download-monitor-categories wrapper, so two
   categories are never siblings and their floats can't pair up.

   Verified in Chrome against the live page, 24 Sep 2026.
   Colours come from acxpa-tokens.css. No hex literals, no !important.
   ========================================================================== */

/* 1. Undo the 48% / float / clear. ------------------------------------- */
#download-page .dlm-pa-download-category {
    width: 100%;
    float: none;
    clear: none;
}

/* 2. Grid the items. auto-fill means it drops to two across, then one, as
      the viewport narrows — no breakpoints needed. ---------------------- */
#download-page .dlm-pa-download-category > ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#download-page .dlm-pa-download-category > ol > li {
    margin: 0;
    padding: 16px;
    background: var(--acxpa-ds-bg);
    border: 1px solid var(--acxpa-ds-border);
    border-radius: 12px;
}

/* 3. Stop the preview image ballooning now the column is wider. -------- */
#download-page .download-information aside img {
    max-width: 100%;
    height: auto;
}

/* 4. The meta table was set to display:table at its natural width, which
      leaves it ragged inside a card. ----------------------------------- */
#download-page .download-meta {
    width: 100%;
    max-width: 100%;
}

/* 5. Category heading sits on the grid, not inside a card. ------------- */
#download-page .dlm-pa-download-category > h3 {
    margin: 0 0 16px;
}

/* 6. Item heading. ------------------------------------------------------
      Inherited 30px with a 28px line-height — a line box shorter than the
      type it contains, so wrapped titles collided. 30px is also far too
      large for a 366px column. ------------------------------------------ */
#download-page .dlm-pa-download-category > ol > li h2 {
    font-size: 18px;
    line-height: 1.3;
    margin: 14px 0 8px;
}

/* 7. Download button. ---------------------------------------------------
      The markup is <a class="aligncenter download-button">Download<span
      class="fas fa-download"></span></a>. It already carried the brand gold,
      but with no horizontal padding, left-aligned text despite the
      "aligncenter" class, square corners, regular weight, and the icon
      butted straight against the word. Flex centres both children and gives
      the icon a gap. Ink on gold is 8.49:1, on gold-mid 6.63:1. ---------- */
#download-page .download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background: var(--acxpa-ds-gold);
    color: var(--acxpa-ds-ink);
    transition: background .15s ease;
}

#download-page .download-button:hover,
#download-page .download-button:focus-visible {
    background: var(--acxpa-ds-gold-mid);
    color: var(--acxpa-ds-ink);
}

#download-page .download-button .vc_icon_element-icon {
    margin: 0;
    font-size: 14px;
}