/* ===========================================================
   INCLUDE_HOME_SUPPORT_POLICY.CSS
   FILE SOURCE:
   static/css/pages/test_pages_css/include_home_support_policy.css

   PURPOSE:
   - Homepage Section 9: Support & Shopping Policies.
   - Appears after Section 8 Content Hub.
   - Provides quick access to:
     1. Local & international delivery
     2. Payment policy
     3. Shipping policy
     4. Terms of use
     5. Privacy policy

   HTML TRACEBACK:
   templates/pages/test_pages_html/include_home_support_policy.html

   VIEW TRACEBACK:
   pages/services/home_support_policy.py

   DESIGN:
   - Clean light section.
   - No photo background.
   - Practical customer-support cards.
   - Thin border, soft ivory background, gold icons.

   WIDTH RULE:
   - Uses --page-max-width from skeleton_base_test.css.
   =========================================================== */


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

.home-support-policy {
  --support-container: var(--page-max-width, 1180px);

  --support-pad-x: 16px;
  --support-pad-y: 42px;
  --support-pad-bottom: 52px;

  --support-card-radius: 18px;
  --support-icon-size: 48px;

  width: 100%;

  background:
    linear-gradient(
      180deg,
      var(--color-bg) 0%,
      var(--color-bg-soft) 100%
    );
}

.home-support-policy,
.home-support-policy * {
  box-sizing: border-box;
}

.home-support-policy-inner {
  width: min(calc(100% - (var(--support-pad-x) * 2)), var(--support-container));

  margin: 0 auto;
  padding-top: var(--support-pad-y);
  padding-bottom: var(--support-pad-bottom);
}


/* ===========================================================
   02. HEADING
   HTML TRACEBACK:
   templates/pages/test_pages_html/include_home_support_policy.html

   PURPOSE:
   - Center the whole heading area.
   - Keep kicker centered.
   - Add clear space between kicker and h2.
   - Prevent the generic paragraph rule from affecting the kicker.

   IMPORTANT:
   - Description paragraph uses:
     .home-support-policy-heading > p:not(.home-support-policy-kicker)

   - Kicker paragraph uses:
     .home-support-policy-heading > .home-support-policy-kicker
   =========================================================== */

.home-support-policy-heading {
  max-width: 780px;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0 auto 18px;

  text-align: center;
}

.home-support-policy-heading > .home-support-policy-kicker {
  width: fit-content;

  display: block;

  margin: 0 auto 22px;

  color: var(--color-accent-dark);
  font-size: var(--home-kicker-size, 0.75rem);
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.home-support-policy-heading > h2 {
  margin: 0 0 12px;

  color: var(--color-primary);
  font-size: clamp(1.5rem, 1.12rem + 1.45vw, 2.35rem);
  font-weight: 900;
  line-height: 1.16;
  text-align: center;
}

.home-support-policy-heading > p:not(.home-support-policy-kicker) {
  max-width: 720px;

  margin: 0 auto;

  color: var(--color-muted);
  font-size: var(--home-desc-size, 0.92rem);
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}


/* ===========================================================
   03. TOP ACTION LINKS
   =========================================================== */

.home-support-policy-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  margin: 20px 0 22px;
}

.home-support-policy-actions a {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 8px 15px;

  border: 1px solid rgba(185, 130, 47, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);

  color: var(--color-accent-dark);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.home-support-policy-actions a:hover {
  transform: translateY(-1px);

  border-color: rgba(185, 130, 47, 0.66);
  background: var(--color-card);

  color: var(--color-primary);
}


/* ===========================================================
   04. CARD GRID

   MOBILE:
   - 1 card per row.

   TABLET:
   - 2 or 3 cards per row.

   DESKTOP:
   - 5 cards in one row.
   =========================================================== */

.home-support-policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.home-support-policy-card {
  min-height: 142px;

  position: relative;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  padding: 16px 15px;

  border: 1px solid var(--color-border);
  border-radius: var(--support-card-radius);
  background: rgba(255, 255, 255, 0.78);

  color: var(--color-primary);
  text-decoration: none;

  box-shadow: 0 10px 26px rgba(43, 33, 24, 0.055);

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.home-support-policy-card:hover {
  transform: translateY(-2px);

  border-color: rgba(185, 130, 47, 0.44);
  background: var(--color-card);

  box-shadow: 0 16px 38px rgba(43, 33, 24, 0.1);
}

.home-support-policy-icon {
  width: var(--support-icon-size);
  height: var(--support-icon-size);

  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255, 255, 255, 0.28),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--color-accent),
      var(--color-accent-dark)
    );

  color: #fff;
  font-size: 1.05rem;

  box-shadow: 0 8px 18px rgba(138, 90, 31, 0.24);
}

.home-support-policy-body {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 7px;
}

.home-support-policy-body strong {
  color: var(--color-primary);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.22;
}

.home-support-policy-body span {
  color: var(--color-muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ===========================================================
   CARD DETAIL LINK TEXT
   HTML TRACEBACK:
   templates/pages/test_pages_html/include_home_support_policy.html

   PURPOSE:
   - Show "Xem chi tiết / View details" inside each support card.
   - Prevent it from overlaying the card description.
   - Works because .home-support-policy-card has extra bottom padding.
   =========================================================== */

.home-support-policy-card {
  padding-bottom: 46px;
}

.home-support-policy-detail {
  position: absolute;
  right: 14px;
  bottom: 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  color: rgba(138, 90, 31, 0.76);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;

  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.home-support-policy-detail i {
  font-size: 0.76rem;
}

.home-support-policy-card:hover .home-support-policy-detail {
  transform: translateX(2px);
  color: var(--color-accent-dark);
}


/* ===========================================================
   05. TINY PHONE
   =========================================================== */

@media (max-width: 320px) {
  .home-support-policy {
    --support-pad-x: 9px;
    --support-pad-y: 34px;
    --support-pad-bottom: 42px;

    --support-icon-size: 42px;
  }

  .home-support-policy-heading {
    margin-bottom: 16px;
  }

  .home-support-policy-heading > .home-support-policy-kicker {
    margin-bottom: 14px;
  }
  .home-support-policy-heading h2 {
    margin-bottom: 10px;
    font-size: 1.28rem;
  }

  .home-support-policy-heading p {
    font-size: 0.78rem;
  }

  .home-support-policy-actions {
    justify-content: stretch;
    gap: 8px;

    margin-top: 16px;
    margin-bottom: 18px;
  }

  .home-support-policy-actions a {
    flex: 1 1 auto;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 0.76rem;
  }

  .home-support-policy-card {
    min-height: auto;
    padding: 14px 13px 42px;
  }

  .home-support-policy-detail {
    right: 13px;
    bottom: 12px;

    font-size: 0.72rem;
  }

  .home-support-policy-body strong {
    font-size: 0.9rem;
  }

  .home-support-policy-body span {
    font-size: 0.78rem;
  }
}


/* ===========================================================
   06. MOBILE
   =========================================================== */

@media (min-width: 321px) and (max-width: 640px) {
  .home-support-policy {
    --support-pad-x: 12px;
    --support-pad-y: 38px;
    --support-pad-bottom: 46px;

    --support-icon-size: 44px;
  }

  .home-support-policy-card {
    min-height: auto;
  }
}


/* ===========================================================
   07. TABLET
   =========================================================== */

@media (min-width: 641px) and (max-width: 959px) {
  .home-support-policy {
    --support-pad-x: 22px;
    --support-pad-y: 44px;
    --support-pad-bottom: 52px;
  }

  .home-support-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ===========================================================
   08. SMALL DESKTOP
   =========================================================== */

@media (min-width: 960px) and (max-width: 1199px) {
  .home-support-policy {
    --support-pad-x: 18px;
    --support-pad-y: 48px;
    --support-pad-bottom: 56px;
  }

  .home-support-policy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ===========================================================
   09. DESKTOP
   1200px+

   PURPOSE:
   - Show 5 support cards in one row.
   - Icon, title, and text are centered inside each card.
   - Fix icon not centered on desktop.
   =========================================================== */

@media (min-width: 1200px) {
  .home-support-policy {
    --support-pad-x: 18px;
    --support-pad-y: 52px;
    --support-pad-bottom: 62px;
  }

  .home-support-policy-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .home-support-policy-card {
    min-height: 232px;

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

    text-align: center;
  }

  .home-support-policy-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .home-support-policy-body {
    align-items: center;
    text-align: center;
  }

  .home-support-policy-body strong,
  .home-support-policy-body span {
    text-align: center;
  }

  .home-support-policy-card {
    padding-bottom: 48px;
  }

  .home-support-policy-detail {
    right: 50%;
    bottom: 16px;

    transform: translateX(50%);
  }

  .home-support-policy-card:hover .home-support-policy-detail {
    transform: translateX(calc(50% + 2px));
  }
}


/* ===========================================================
   10. WIDE DESKTOP
   =========================================================== */

@media (min-width: 1680px) {
  .home-support-policy-inner {
    max-width: var(--support-container);
  }
}
/* ===========================================================
   FINAL SUPPORT HEADING SPACING FIX
   ...
   =========================================================== */

.home-support-policy .home-support-policy-heading .home-support-policy-kicker {
  margin: 0 !important;
}

.home-support-policy .home-support-policy-heading h2 {
  margin-top: 22px !important;
  margin-bottom: 12px;
}

/* Tiny/mobile spacing adjustment */
@media (max-width: 640px) {
  .home-support-policy .home-support-policy-heading h2 {
    margin-top: 16px !important;
  }
}