/* ===========================================================
   INCLUDE_HOME_HERO.CSS
   FILE SOURCE:
   static/css/pages/test_pages_css/include_home_hero.css

   PURPOSE:
   - Homepage hero below test header.
   - Uses mobile and desktop background images.
   - Uses shared homepage font tokens from skeleton_base_test.css.
   - Follows skeleton width:
     --page-wide-width: 1280px

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

   IMAGE FILES:
   - Mobile:
     static/images/homepage/hero_agarwood_dark_mobile_430x760.webp

   - Desktop:
     static/images/homepage/hero_agarwood_dark_desktop_2400x1100.webp

   IMPORTANT:
   - Background variables are supplied from HTML:
     --home-hero-bg-mobile
     --home-hero-bg-desktop

   BREAKPOINTS:
   - 0px - 359px: emergency small phone
   - 360px - 640px: mobile
   - 641px - 959px: tablet
   - 960px+: desktop
   - 1200px+: normal desktop
   - 1680px+: wide desktop
   =========================================================== */


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

   PURPOSE:
   - Variables are local to .home-hero.
   - Do not use :root here because that affects other sections.
   - Font sizes use shared homepage tokens from skeleton_base_test.css.
   =========================================================== */

.home-hero {
  --hero-container: var(--page-wide-width, 1280px);

  --hero-pad-x: 16px;
  --hero-pad-y: 20px;

  --hero-min-height: 315px;
  --hero-content-width: 205px;

  --hero-kicker-size: var(--home-kicker-size, 0.75rem);
  --hero-title-size: var(--home-title-size, 1.22rem);
  --hero-desc-size: var(--home-desc-size, 0.75rem);
  --hero-btn-size: var(--home-btn-size, 0.75rem);

  --hero-title-line: var(--home-title-line, 1.1);
  --hero-desc-line: var(--home-desc-line, 1.45);

  --hero-button-width: 150px;
  --hero-button-height: 32px;

  --hero-gold: var(--color-accent, #B9822F);
  --hero-white: #fffaf0;
  --hero-soft-white: rgba(255, 250, 240, 0.9);

  --hero-bg-position-mobile: 60% center;
  --hero-bg-position-desktop: center center;

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

  position: relative;

  width: 100%;
  min-height: var(--hero-min-height);

  display: flex;
  align-items: center;

  overflow: hidden;
  isolation: isolate;

  background: #120d09;
}

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


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

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

  background-image: var(--home-hero-bg-mobile);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: var(--hero-bg-position-mobile);
}

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

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.76) 46%,
      rgba(0, 0, 0, 0.36) 76%,
      rgba(0, 0, 0, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0.03) 42%,
      rgba(0, 0, 0, 0.42) 100%
    );
}


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

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

  display: flex;
  align-items: center;

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

.home-hero-content {
  width: min(100%, var(--hero-content-width));

  color: var(--hero-white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
}


/* ===========================================================
   04. TEXT
   =========================================================== */

.home-hero-kicker {
  margin: 0 0 7px;

  color: var(--hero-gold);
  font-size: var(--hero-kicker-size);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-hero-title {
  margin: 0;

  color: var(--hero-white);
  font-size: var(--hero-title-size);
  font-weight: 800;
  line-height: var(--hero-title-line);
}

.home-hero-title span {
  display: block;
  white-space: nowrap;
}

.home-hero-title span:last-child {
  color: var(--hero-gold);
}

.home-hero-desc {
  width: min(100%, var(--hero-content-width));

  margin: 10px 0 0;

  color: var(--hero-soft-white);
  font-size: var(--hero-desc-size);
  font-weight: 500;
  line-height: var(--hero-desc-line);
}


/* ===========================================================
   05. BUTTONS
   =========================================================== */

.home-hero-actions {
  width: min(100%, var(--hero-button-width));

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;

  margin-top: 13px;
}

.home-hero-btn {
  width: 100%;
  min-height: var(--hero-button-height);

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

  padding: 0 9px;

  border-radius: 2px;

  font-size: var(--hero-btn-size);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;

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

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

.home-hero-btn-primary {
  background: var(--hero-gold);
  border: 1px solid var(--hero-gold);
  color: #fff;
}

.home-hero-btn-primary:hover {
  background: var(--color-accent-dark, #8A5A1F);
  border-color: var(--color-accent-dark, #8A5A1F);
  color: #fff;
}

.home-hero-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 250, 240, 0.78);
  color: #fff;
}

.home-hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}


/* ===========================================================
   06. JS ENHANCEMENT
   include_home_hero.js adds:
   - html.js
   - .home-hero.is-loaded
   =========================================================== */

.home-hero-content {
  opacity: 1;
  transform: none;
}

.js .home-hero-content {
  opacity: 0;
  transform: translateY(10px);
}

.js .home-hero.is-loaded .home-hero-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}


/* ===========================================================
   07. MOBILE HERO
   0px - 640px
   =========================================================== */

@media (max-width: 640px) {
  .home-hero {
    --hero-pad-x: clamp(12px, 4vw, 28px);
    --hero-pad-y: clamp(10px, 3.6vw, 22px);

    --hero-min-height: clamp(280px, 89vw, 410px);
    --hero-content-width: clamp(190px, 57vw, 305px);

    --hero-kicker-size: var(--home-kicker-size, 0.75rem);
    --hero-title-size: var(--home-title-size, 1.22rem);
    --hero-desc-size: var(--home-desc-size, 0.75rem);
    --hero-btn-size: var(--home-btn-size, 0.75rem);

    --hero-title-line: var(--home-title-line, 1.08);
    --hero-desc-line: var(--home-desc-line, 1.42);

    --hero-button-width: clamp(132px, 42vw, 205px);
    --hero-button-height: clamp(28px, 7.8vw, 38px);

    --hero-bg-position-mobile: 60% center;
  }

  .home-hero-bg {
    background-image: var(--home-hero-bg-mobile);
    background-size: contain;
    background-position: var(--hero-bg-position-mobile);
    background-repeat: no-repeat;
  }

  .home-hero-kicker {
    margin-bottom: clamp(5px, 1.4vw, 8px);
  }

  .home-hero-desc {
    margin-top: clamp(6px, 2.2vw, 12px);
  }

  .home-hero-actions {
    margin-top: clamp(8px, 3vw, 16px);
    gap: clamp(6px, 1.8vw, 8px);
  }
}


/* ===========================================================
   08. EMERGENCY SMALL PHONE
   0px - 359px
   =========================================================== */

@media (max-width: 359px) {
  .home-hero {
    --hero-pad-x: clamp(10px, 3.8vw, 14px);
    --hero-pad-y: clamp(10px, 3.5vw, 13px);

    --hero-min-height: clamp(260px, 86vw, 305px);
    --hero-content-width: clamp(188px, 63vw, 215px);

    --hero-button-width: clamp(128px, 43vw, 140px);
    --hero-button-height: 28px;

    --hero-bg-position-mobile: 62% center;
  }

  .home-hero-desc {
    width: min(100%, 205px);
  }

  .home-hero-actions {
    width: min(45vw, var(--hero-button-width));
  }

  .home-hero-btn {
    padding-left: 7px;
    padding-right: 7px;
  }
}


/* ===========================================================
   09. TABLET HERO
   641px - 959px
   =========================================================== */

@media (min-width: 641px) and (max-width: 959px) {
  .home-hero {
    --hero-pad-x: clamp(28px, 4vw, 44px);
    --hero-pad-y: clamp(32px, 5vw, 52px);

    --hero-min-height: clamp(380px, 46vw, 440px);
    --hero-content-width: clamp(460px, 62vw, 560px);

    --hero-button-width: clamp(390px, 54vw, 450px);
    --hero-button-height: 42px;

    --hero-bg-position-desktop: center center;
  }

  .home-hero-bg {
    background-image: var(--home-hero-bg-desktop);
    background-size: contain;
    background-position: var(--hero-bg-position-desktop);
  }

  .home-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.72) 38%,
        rgba(0, 0, 0, 0.42) 72%,
        rgba(0, 0, 0, 0.18) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.06) 48%,
        rgba(0, 0, 0, 0.42) 100%
      );
  }

  .home-hero-desc {
    width: min(100%, 520px);
  }

  .home-hero-actions {
    width: min(100%, var(--hero-button-width));
    flex-direction: row;
    gap: 10px;
  }

  .home-hero-btn {
    flex: 1;
  }
}


/* ===========================================================
   10. DESKTOP HERO
   960px+
   =========================================================== */

@media (min-width: 960px) {
  .home-hero {
    --hero-pad-x: clamp(20px, 2.6vw, 42px);
    --hero-pad-y: clamp(40px, 4vw, 70px);

    --hero-min-height: clamp(390px, 31vw, 520px);
    --hero-content-width: clamp(540px, 42vw, 660px);

    --hero-button-width: clamp(430px, 34vw, 500px);
    --hero-button-height: clamp(42px, 3.1vw, 46px);

    --hero-bg-position-desktop: center center;
  }

  .home-hero-bg {
    background-image: var(--home-hero-bg-desktop);
    background-size: contain;
    background-position: var(--hero-bg-position-desktop);
  }

  .home-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.84) 0%,
        rgba(0, 0, 0, 0.70) 30%,
        rgba(0, 0, 0, 0.34) 62%,
        rgba(0, 0, 0, 0.18) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.16) 0%,
        rgba(0, 0, 0, 0.05) 48%,
        rgba(0, 0, 0, 0.38) 100%
      );
  }

  .home-hero-desc {
    width: min(100%, 540px);
  }

  .home-hero-actions {
    width: min(100%, var(--hero-button-width));
    flex-direction: row;
    gap: clamp(10px, 1vw, 12px);
  }

  .home-hero-btn {
    flex: 1;
  }
}


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

@media (min-width: 1200px) {
  .home-hero {
    --hero-min-height: clamp(410px, 30vw, 520px);
  }

  .home-hero-desc {
    width: min(100%, 560px);
  }
}


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

@media (min-width: 1680px) {
  .home-hero {
    --hero-min-height: clamp(470px, 28vw, 540px);
    --hero-content-width: 680px;
    --hero-button-width: 510px;
  }

  .home-hero-inner {
    max-width: var(--hero-container);
  }
}