/*
 * home-marketing-mobile.css
 *
 * Collapses the 4 trust-badge cards into one compact horizontal strip
 * on mobile (≤ 575px).  Desktop layout in ui.css is untouched.
 *
 * Loaded only from home.html via {% block extra_css %}.
 */

@media (max-width: 575px) {

  /* ── Outer section ──────────────────────────────────────── */
  #marketting.marketting-area {
    padding: 0;
    margin: 0 0 4px;
  }

  /* ── Brand-green top border accent + subtle background ─── */
  .marketting-area .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(180deg, #f4f8e8 0%, #ffffff 100%);
    border-top: 3px solid #90AD46;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
  }

  /* ── Each badge tile — 4 equal columns ─────────────────── */
  .marketting-area .col {
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    width: 25% !important;
    max-width: 25% !important;
    padding: 0 !important;
    /* thin right divider between tiles */
    border-right: 1px solid rgba(144, 173, 70, 0.25);
  }
  .marketting-area .col:last-child {
    border-right: none;
  }

  /* ── Remove card chrome — no gradient border wrapper ────── */
  .marketting-area .col-inner-wrap {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .marketting-area .col-inner {
    padding: 12px 4px 10px !important;
    background: none !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ── Icon — compact, centred ────────────────────────────── */
  .marketting-area .col-inner .img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
  }

  .marketting-area .col-inner .img img {
    width: auto !important;
    height: 40px !important;
    max-width: 100%;
    object-fit: contain;
  }

  /* ── Title — compact bold label ─────────────────────────── */
  .marketting-area h4 {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    color: #494949 !important;
    margin: 0 !important;
    padding: 0 2px;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Hide paragraph description on mobile ───────────────── */
  .marketting-area p,
  .marketting-area p a {
    display: none !important;
  }
}