/* ===========================================================
   INCLUDE_HOME_WHY_CHOOSE.CSS
   FILE SOURCE:
   static/css/pages/test_pages_css/include_home_why_choose.css

   PURPOSE:
   - Homepage Section 7: Brand Story + Company Trust.
   - Appears after Selected Products.
   - Connects users to:
      1. Brand history page
      2. Company information page

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

   IMAGE FILES:
   - Desktop:
     static/images/homepage/section7_lighter_2400.png

   - Mobile:
     static/images/homepage/section7_lighter_430.png

   DESIGN:
   - Bright/lighter agarwood photo background.
   - Soft dark overlay for text readability.
   - Timeline milestone cards:
      2011
      2014
      2018
      2023+
   - Company trust strip below timeline.
   - Two CTA buttons:
      Primary: Brand story
      Secondary: Company information

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

   NOTE:
   - Class name stays .home-why for now so home_base_test.html does not need changes.
   =========================================================== */


/* ===========================================================
   01. SECTION SHELL + LOCAL VARIABLES

   CONTROLS:
   - --why-container:
     section content max width.

   - --why-pad-x:
     left/right padding.

   - --why-pad-y:
     top/bottom padding.

   - --why-card-radius:
     card roundness.

   - --why-icon-size:
     timeline icon circle size.

   - --why-card-bg:
     timeline card background.
   =========================================================== */

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

  --why-pad-x: 16px;
  --why-pad-y: 34px;

  --why-card-radius: 20px;
  --why-card-pad: 18px;

  --why-icon-size: 54px;
  --why-icon-font: 1.22rem;

  --why-kicker-size: var(--home-kicker-size, 0.75rem);
  --why-title-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.35rem);
  --why-desc-size: var(--home-desc-size, 0.9rem);

  --why-card-title-size: 1rem;
  --why-card-desc-size: 0.86rem;

  --why-gold: var(--color-accent, #B9822F);
  --why-gold-dark: var(--color-accent-dark, #8A5A1F);
  --why-brown: var(--color-primary, #2B2118);
  --why-white: #fffaf0;
  --why-soft-white: rgba(255, 250, 240, 0.9);
  --why-card-bg: rgba(255, 250, 240, 0.92);

  --why-bg-position-mobile: center center;
  --why-bg-position-desktop: center center;

  --home-why-bg-mobile: none;
  --home-why-bg-desktop: var(--home-why-bg-mobile);

  position: relative;

  width: 100%;

  overflow: hidden;
  isolation: isolate;

  background: #140f0b;
}

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


/* ===========================================================
   02. BACKGROUND + OVERLAY

   CONTROLS:
   - .home-why-bg background-size:
     cover = fills section with photo.

   - .home-why-overlay:
     controls how bright/dark the section feels.
     Lower black opacity = brighter image.
   =========================================================== */

.home-why-bg {
  position: absolute;
  inset: 0;
  z-index: -3;

  background-color: #140f0b;
  background-image: var(--home-why-bg-mobile);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--why-bg-position-mobile);
}

.home-why-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(185, 130, 47, 0.2),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.58) 0%,
      rgba(0, 0, 0, 0.46) 38%,
      rgba(0, 0, 0, 0.62) 100%
    );
}


/* ===========================================================
   03. INNER CONTAINER

   CONTROLS:
   - width:
     follows --page-max-width.

   - padding-top / padding-bottom:
     controlled by --why-pad-y.
   =========================================================== */

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

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


/* ===========================================================
   04. HEADING AREA
   HTML TRACEBACK:
   templates/pages/test_pages_html/include_home_why_choose.html

   PURPOSE:
   - Center the whole heading area.
   - Keep kicker centered.
   - Add clear space between kicker and title.
   - Keep description centered below title.

   STRUCTURE:
   .home-why-heading
     .home-why-kicker
     .home-why-title
     .home-why-desc
   =========================================================== */

.home-why-heading {
  max-width: 820px;

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

  margin: 0 auto 22px;

  color: var(--why-white);
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42);
}

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

  display: block;

  margin: 0 auto 18px;

  color: var(--why-gold);
  font-size: var(--why-kicker-size);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.home-why-heading > .home-why-title {
  margin: 0 0 13px;

  color: var(--why-white);
  font-size: var(--why-title-size);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.home-why-heading > .home-why-desc {
  max-width: 760px;

  margin: 0 auto;

  color: var(--why-soft-white);
  font-size: var(--why-desc-size);
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
}

/* ===========================================================
   05. MILESTONE GRID

   CONTROLS:
   - grid-template-columns:
     controls cards per row.

   - gap:
     controls card spacing.
   =========================================================== */

.home-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}


/* ===========================================================
   06. MILESTONE CARD

   HTML STRUCTURE:
   .home-why-card
     .home-why-card-icon
     .home-why-card-body
       .home-why-card-number
       h3
       p

   CONTROLS:
   - --why-card-pad:
     internal spacing.

   - --why-card-radius:
     card roundness.

   - --why-icon-size:
     gold icon circle size.

   - .home-why-card-number:
     milestone year badge.
   =========================================================== */

.home-why-card {
  min-height: 178px;

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

  padding: var(--why-card-pad);

  border: 1px solid rgba(255, 250, 240, 0.46);
  border-radius: var(--why-card-radius);
  background: var(--why-card-bg);

  color: var(--why-brown);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(3px);

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

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

  border-color: rgba(185, 130, 47, 0.68);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.24);
}

.home-why-card-icon {
  width: var(--why-icon-size);
  height: var(--why-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.3),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--why-gold),
      var(--why-gold-dark)
    );

  color: #fff;
  font-size: var(--why-icon-font);

  box-shadow: 0 10px 24px rgba(138, 90, 31, 0.32);
}

.home-why-card-body {
  min-width: 0;

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

  text-align: left;
}

.home-why-card-number {
  width: fit-content;

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

  margin-bottom: 7px;
  padding: 3px 9px;

  border-radius: 999px;
  background: rgba(185, 130, 47, 0.12);

  color: var(--why-gold-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.home-why-card h3 {
  margin: 0;

  color: var(--why-brown);
  font-size: var(--why-card-title-size);
  font-weight: 900;
  line-height: 1.22;
}

.home-why-card p {
  margin: 9px 0 0;

  color: var(--color-text);
  font-size: var(--why-card-desc-size);
  font-weight: 500;
  line-height: 1.55;
}


/* ===========================================================
   07. COMPANY TRUST STRIP

   PURPOSE:
   - Adds company connection without creating a fifth card.
   - Keeps 4-card timeline clean.
   - Supports secondary CTA to company page.

   HTML STRUCTURE:
   .home-why-company-strip
     .home-why-company-icon
     .home-why-company-text
       strong
       span
   =========================================================== */

.home-why-company-strip {
  max-width: 760px;

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

  margin: 22px auto 0;
  padding: 13px 16px;

  border: 1px solid rgba(255, 250, 240, 0.38);
  border-radius: 999px;
  background: rgba(43, 33, 24, 0.58);

  color: var(--why-white);
  text-align: left;
  backdrop-filter: blur(4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.home-why-company-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

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

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

  color: var(--why-gold);
  font-size: 0.95rem;
}

.home-why-company-text {
  min-width: 0;

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

.home-why-company-text strong {
  color: var(--why-white);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.22;
}

.home-why-company-text span {
  color: rgba(255, 250, 240, 0.82);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}


/* ===========================================================
   08. CTA ACTIONS

   PURPOSE:
   - Primary button links to Brand Story.
   - Secondary button links to Company Information.

   CONTROLS:
   - .home-why-action gap:
     space between buttons.

   - .home-why-btn-primary:
     stronger brand CTA.

   - .home-why-btn-secondary:
     softer company CTA.
   =========================================================== */

.home-why-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 24px;
}

.home-why-btn {
  min-height: 42px;

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

  padding: 10px 20px;

  border-radius: 999px;

  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);

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

.home-why-btn:hover {
  transform: translateY(-1px);
}

.home-why-btn-primary {
  border: 1px solid rgba(185, 130, 47, 0.76);
  background: rgba(43, 33, 24, 0.88);

  color: var(--why-white);
}

.home-why-btn-primary:hover {
  border-color: rgba(255, 250, 240, 0.9);
  background: var(--why-gold-dark);

  color: #fff;
}

.home-why-btn-secondary {
  border: 1px solid rgba(255, 250, 240, 0.58);
  background: rgba(255, 250, 240, 0.12);

  color: var(--why-white);
}

.home-why-btn-secondary:hover {
  border-color: rgba(185, 130, 47, 0.82);
  background: rgba(185, 130, 47, 0.22);

  color: #fff;
}


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

@media (max-width: 320px) {
  .home-why {
    --why-pad-x: 10px;
    --why-pad-y: 26px;

    --why-card-pad: 14px;
    --why-icon-size: 44px;
    --why-icon-font: 1rem;

    --why-title-size: 1.22rem;
    --why-card-title-size: 0.9rem;
    --why-card-desc-size: 0.78rem;
  }

  .home-why-heading {
    margin-bottom: 18px;
  }

  .home-why-heading > .home-why-kicker {
    margin-bottom: 14px;
  }

  .home-why-heading > .home-why-title {
    margin-bottom: 10px;
  }

  .home-why-heading > .home-why-desc {
    line-height: 1.48;
  }

  .home-why-card {
    min-height: auto;
    gap: 12px;
  }

  .home-why-company-strip {
    align-items: flex-start;

    margin-top: 18px;
    padding: 12px;

    border-radius: 16px;
  }

  .home-why-company-icon {
    width: 34px;
    height: 34px;
  }

  .home-why-company-text strong {
    font-size: 0.8rem;
  }

  .home-why-company-text span {
    font-size: 0.72rem;
  }

  .home-why-action {
    margin-top: 18px;
  }

  .home-why-btn {
    width: 100%;
    min-height: 40px;

    padding-left: 14px;
    padding-right: 14px;

    font-size: 0.8rem;
  }
}


/* ===========================================================
   10. MOBILE
   321px - 640px
   =========================================================== */

@media (min-width: 321px) and (max-width: 640px) {
  .home-why {
    --why-pad-x: 12px;
    --why-pad-y: 30px;

    --why-card-pad: 16px;
    --why-icon-size: 48px;
    --why-icon-font: 1.08rem;

    --why-title-size: clamp(1.42rem, 5vw, 1.85rem);
    --why-card-title-size: 0.96rem;
    --why-card-desc-size: 0.82rem;
  }

  .home-why-card {
    min-height: auto;
  }

  .home-why-company-strip {
    align-items: flex-start;

    border-radius: 18px;
  }

  .home-why-btn {
    width: fit-content;
    max-width: 100%;
  }
}


/* ===========================================================
   11. LARGE PHONE / SMALL TABLET
   520px - 759px

   PURPOSE:
   - Use 2 columns when screen is wide enough.
   =========================================================== */

@media (min-width: 520px) and (max-width: 759px) {
  .home-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-why-card {
    flex-direction: column;
    align-items: center;

    text-align: center;
  }

  .home-why-card-body {
    align-items: center;
    text-align: center;
  }
}


/* ===========================================================
   12. TABLET
   760px - 959px

   PURPOSE:
   - 2 x 2 card grid.
   =========================================================== */

@media (min-width: 760px) and (max-width: 959px) {
  .home-why {
    --why-pad-x: 22px;
    --why-pad-y: 42px;

    --why-icon-size: 54px;
    --why-icon-font: 1.22rem;

    --why-card-title-size: 1rem;
    --why-card-desc-size: 0.86rem;
  }

  .home-why-bg {
    background-image: var(--home-why-bg-desktop);
    background-position: var(--why-bg-position-desktop);
  }

  .home-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}


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

   PURPOSE:
   - 4 milestone cards in one row.
   =========================================================== */

@media (min-width: 960px) {
  .home-why {
    --why-pad-x: 18px;
    --why-pad-y: 54px;

    --why-icon-size: 58px;
    --why-icon-font: 1.28rem;

    --why-card-title-size: 1.02rem;
    --why-card-desc-size: 0.86rem;
  }

  .home-why-bg {
    background-image: var(--home-why-bg-desktop);
    background-position: var(--why-bg-position-desktop);
  }

  .home-why-overlay {
    background:
      radial-gradient(
        circle at 50% 14%,
        rgba(185, 130, 47, 0.2),
        transparent 30%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.56) 0%,
        rgba(0, 0, 0, 0.44) 38%,
        rgba(0, 0, 0, 0.62) 100%
      );
  }

  .home-why-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .home-why-card {
    min-height: 282px;

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

    text-align: center;
  }

  .home-why-card-body {
    align-items: center;
    text-align: center;
  }

  .home-why-company-strip {
    margin-top: 24px;
  }
}


/* ===========================================================
   14. NORMAL DESKTOP
   1200px+
   =========================================================== */

@media (min-width: 1200px) {
  .home-why {
    --why-pad-y: 60px;
  }

  .home-why-grid {
    gap: 20px;
  }
}


/* ===========================================================
   15. WIDE DESKTOP
   1680px+

   NOTE:
   - Still follows --page-max-width: 1180px.
   =========================================================== */

@media (min-width: 1680px) {
  .home-why-inner {
    max-width: var(--why-container);
  }
}