/* ===========================================================
   INCLUDE_HOME_TRUST.CSS
   FILE SOURCE:
   static/css/pages/test_pages_css/include_home_trust.css

   PURPOSE:
   - Trust/benefit strip under homepage hero.
   - Desktop: 6 items in 1 row.
   - Mobile: 6 items as 3 columns x 2 rows.
   - Uses icon + text, not image text.

   TRACEBACK:
   - HTML:
     templates/pages/test_pages_html/include_home_trust.html

   WIDTH RULE:
   - Inner width follows skeleton:
     --page-wide-width: 1280px
   =========================================================== */


/* ===========================================================
   01. BASE
   =========================================================== */

.home-trust {
  width: 100%;

  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.home-trust-inner {
  width: min(calc(100% - 32px), var(--page-wide-width, 1280px));

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;

  margin: 0 auto;
  padding: 14px 0;
}

.home-trust-item {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 8px 6px;

  text-align: center;
}

.home-trust-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  margin-bottom: 6px;

  border: 1px solid rgba(185, 130, 47, 0.55);
  border-radius: 999px;

  color: var(--color-accent);
  font-size: 0.94rem;
}

.home-trust-text {
  min-width: 0;
}

.home-trust-text strong {
  display: block;

  color: var(--color-primary);
  font-size: clamp(0.76rem, 2.7vw, 0.9rem);
  font-weight: 800;
  line-height: 1.2;
}

.home-trust-text span {
  display: block;

  margin-top: 2px;

  color: var(--color-text);
  font-size: clamp(0.68rem, 2.35vw, 0.8rem);
  font-weight: 600;
  line-height: 1.25;
}


/* ===========================================================
   02. TINY PHONE
   0px - 320px
   =========================================================== */

@media (max-width: 320px) {
  .home-trust-inner {
    width: min(calc(100% - 18px), var(--page-wide-width, 1280px));
    padding: 10px 0;
  }

  .home-trust-item {
    padding: 7px 3px;
  }

  .home-trust-icon {
    width: 28px;
    height: 28px;

    margin-bottom: 5px;

    font-size: 0.78rem;
  }

  .home-trust-text strong {
    font-size: 0.66rem;
  }

  .home-trust-text span {
    font-size: 0.6rem;
  }
}


/* ===========================================================
   03. MAIN MOBILE
   321px - 640px
   =========================================================== */

@media (min-width: 321px) and (max-width: 640px) {
  .home-trust-inner {
    width: min(calc(100% - 24px), var(--page-wide-width, 1280px));
    padding: 12px 0;
  }

  .home-trust-item {
    padding: 8px 4px;
  }
}


/* ===========================================================
   04. TABLET
   641px - 959px
   =========================================================== */

@media (min-width: 641px) and (max-width: 959px) {
  .home-trust-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));

    width: min(calc(100% - 44px), var(--page-wide-width, 1280px));
    padding: 14px 0;
  }

  .home-trust-item {
    flex-direction: column;
    padding: 8px 5px;
  }

  .home-trust-icon {
    width: 32px;
    height: 32px;

    font-size: 0.9rem;
  }

  .home-trust-text strong {
    font-size: 0.74rem;
  }

  .home-trust-text span {
    font-size: 0.66rem;
  }
}


/* ===========================================================
   05. DESKTOP
   960px+
   =========================================================== */

@media (min-width: 960px) {
  .home-trust-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));

    width: min(calc(100% - 36px), var(--page-wide-width, 1280px));
    padding: 14px 0;
  }

  .home-trust-item {
    min-height: 58px;

    flex-direction: row;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    text-align: left;
  }

  .home-trust-icon {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    margin-right: 10px;
    margin-bottom: 0;

    font-size: 0.94rem;
  }

  .home-trust-text strong {
    font-size: clamp(0.72rem, 0.62rem + 0.16vw, 0.86rem);
  }

  .home-trust-text span {
    font-size: clamp(0.64rem, 0.56rem + 0.12vw, 0.76rem);
  }
}


/* ===========================================================
   06. WIDE DESKTOP
   1680px+
   Still max 1280px.
   =========================================================== */

@media (min-width: 1680px) {
  .home-trust-inner {
    max-width: var(--page-wide-width, 1280px);
  }
}

/* ===========================================================
   07. FINAL TRUST STRIP FIX
   FILE SOURCE:
   static/css/pages/test_pages_css/include_home_trust.css

   PURPOSE:
   - Fix trust item text breaking from 960px to 1040px.
   - Keep 6 items in one row.
   - Make layout compact before normal desktop width.
   - No HTML change needed.

   TARGET:
   - 960px - 1040px:
     icon above text
     smaller font
     no text wrapping
   =========================================================== */

@media (min-width: 960px) and (max-width: 1040px) {
  .home-trust-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: min(calc(100% - 28px), var(--page-wide-width, 1280px));
    padding: 10px 0;
  }

  .home-trust-item {
    min-height: 76px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 6px 3px;

    text-align: center;
  }

  .home-trust-icon {
    width: 30px;
    height: 30px;

    margin-right: 0;
    margin-bottom: 5px;

    font-size: 0.82rem;
  }

  .home-trust-text {
    width: 100%;
    min-width: 0;
  }

  .home-trust-text strong {
    font-size: 0.66rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  .home-trust-text span {
    margin-top: 2px;

    font-size: 0.58rem;
    line-height: 1.15;
    white-space: nowrap;
  }
}


/* ===========================================================
   08. NORMAL DESKTOP RESTORE
   1041px+
   - Restore horizontal icon + text layout.
   =========================================================== */

@media (min-width: 1041px) {
  .home-trust-item {
    flex-direction: row;
    align-items: center;
    justify-content: center;

    text-align: left;
  }

  .home-trust-icon {
    margin-right: 10px;
    margin-bottom: 0;
  }
}

/* ===========================================================
   09. FINAL TRUST TEXT WEIGHT FIX
   FILE SOURCE:
   static/css/pages/test_pages_css/include_home_trust.css

   PURPOSE:
   - Make trust title and description visually different.
   - Fix Vietnamese where strong/span looked too similar.
   - Keep strong label clear.
   - Make span thinner, softer, and easier to separate.

   HTML TARGET:
   .home-trust-text strong
   .home-trust-text span
   =========================================================== */

.home-trust-text strong {
  color: var(--color-primary);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.home-trust-text span {
  color: var(--color-muted);
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.92;
}


/* ===========================================================
   09.1 VIETNAMESE FONT ADJUSTMENT
   Times New Roman needs clearer weight separation.
   =========================================================== */

html[lang="vi"] .home-trust-text strong {
  font-weight: 800;
}

html[lang="vi"] .home-trust-text span {
  font-weight: 400;
  color: var(--color-muted);
  opacity: 0.88;
}


/* ===========================================================
   09.2 ENGLISH FONT ADJUSTMENT
   Keep English elegant but still separated.
   =========================================================== */

html[lang="en"] .home-trust-text strong {
  font-weight: 700;
}

html[lang="en"] .home-trust-text span {
  font-weight: 400;
  color: var(--color-muted);
  opacity: 0.9;
}


/* ===========================================================
   09.3 SMALL DESKTOP TRUST FIX
   960px - 1040px
   Keep the distinction even when text is smaller.
   =========================================================== */

@media (min-width: 960px) and (max-width: 1040px) {
  .home-trust-text strong {
    font-weight: 800;
  }

  .home-trust-text span {
    font-weight: 400;
    color: var(--color-muted);
    opacity: 0.88;
  }
}