/* ===========================================================
   INCLUDE_HOME_LIFESTYLE.CSS
   FILE SOURCE:
   static/css/pages/test_pages_css/include_home_lifestyle.css

   PURPOSE:
   - Homepage lifestyle / use-case banner.
   - Uses separate background images for mobile and desktop.
   - Uses the same background method as include_home_hero:
       1. HTML defines CSS variables.
       2. .home-lifestyle-bg reads the variables.
       3. .home-lifestyle-overlay darkens the photo.
   - Uses shared homepage font tokens from skeleton_base_test.css.
   - Promotes agarwood pieces for:
     ritual, meditation, home fragrance, and gifts.
   - CTA URL is passed from views.py as lifestyle_cta_url.

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

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

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

   DESIGN RULE:
   - Desktop:
     background-size: cover;
     text left, 4 icons right.

   - Mobile:
     background-size: contain;
     full photo visible, not cropped.
     black background behind photo.
     4 icons above text.
     icon row is centered in upper photo area.
     content is centered in lower text area.

   - Use cards have no border/background.
   - Only icon circle has border/background.

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


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

   CONTROLS:
   - --lifestyle-min-height:
     controls total section height.

   - --lifestyle-pad-x / --lifestyle-pad-y:
     controls inside spacing.

   - --lifestyle-icon-size:
     controls circle icon size.

   - --lifestyle-use-title-size:
     controls strong text under icon.

   - --lifestyle-use-desc-size:
     controls span text under strong.

   IMPORTANT:
   - Variables are local to .home-lifestyle.
   - Do not use :root here because that affects other sections.
   =========================================================== */

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

  --lifestyle-pad-x: 16px;
  --lifestyle-pad-y: 24px;

  /*
    Mobile default:
    - Mobile image is vertical.
    - background-size: contain needs enough section height.
    - Lower values make the whole banner shorter.
  */
  --lifestyle-min-height: 420px;

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

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

  --lifestyle-icon-size: 42px;
  --lifestyle-icon-font: 0.95rem;

  /*
    Icon text size:
    - Uses shared homepage small text tokens.
    - Slight calc increase gives better readability.
  */
  --lifestyle-use-title-size: var(--home-small-title-size, 0.68rem);
  --lifestyle-use-desc-size: var(--home-small-desc-size, 0.58rem);

  --lifestyle-bg-position-mobile: center top;
  --lifestyle-bg-position-desktop: center center;

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

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

  position: relative;

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

  overflow: hidden;
  isolation: isolate;

  background: #0d0b09;
}

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


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

   CONTROLS:
   - background-size: contain;
     mobile shows the full image without cropping.

   - .home-lifestyle-overlay:
     controls text readability over photo.
   =========================================================== */

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

  background-color: #0d0b09;
  background-image: var(--home-lifestyle-bg-mobile);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: var(--lifestyle-bg-position-mobile);
}

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

  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(185, 130, 47, 0.16),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.34) 42%,
      rgba(0, 0, 0, 0.82) 100%
    );
}


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

   MOBILE DEFAULT:
   - One column.
   - Row 1 = upper photo area for icons.
   - Row 2 = lower area for text content.
   - Icons and content are both vertically centered in their rows.

   CONTROLS:
   - grid-template-rows:
     first value controls upper icon area height.
     second value controls lower content area height.

   - gap:
     controls space between icon row and text content block.
   =========================================================== */

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

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(120px, 34vw) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;

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


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

   CONTROLS:
   - .home-lifestyle-kicker:
     small uppercase text.

   - .home-lifestyle-title:
     main section title.

   - .home-lifestyle-desc:
     paragraph text.

   - .home-lifestyle-btn:
     CTA button.
   =========================================================== */

.home-lifestyle-content {
  order: 2;

  width: 100%;
  max-width: 560px;

  align-self: center;
  justify-self: start;

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

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

  color: var(--lifestyle-gold);
  font-size: var(--lifestyle-kicker-size);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-lifestyle-title {
  max-width: 680px;

  margin: 0;

  color: var(--lifestyle-white);
  font-size: var(--lifestyle-title-size);
  font-weight: 900;
  line-height: var(--lifestyle-title-line);
}

.home-lifestyle-desc {
  max-width: 560px;

  margin: 9px 0 0;

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

.home-lifestyle-btn {
  width: fit-content;

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

  margin-top: 13px;
  padding: 9px 16px;

  border: 1px solid rgba(185, 130, 47, 0.72);
  border-radius: 999px;
  background: var(--lifestyle-gold);

  color: var(--color-primary);
  font-size: var(--lifestyle-btn-size);
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;

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

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

  border-color: rgba(255, 255, 255, 0.85);
  background: var(--color-accent-dark, #8A5A1F);

  color: #fff;
}


/* ===========================================================
   05. USE-CASE ICON ROW

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

   HTML STRUCTURE:
   .home-lifestyle-uses
     .home-lifestyle-use-card
       .home-lifestyle-use-icon
       .home-lifestyle-use-text
         strong
         span

   CONTROLS:
   - .home-lifestyle-uses gap:
     horizontal spacing between 4 icon cards.

   - .home-lifestyle-use-card gap:
     vertical spacing between icon circle and text block.

   - .home-lifestyle-use-text span margin-top:
     spacing between strong and span.

   - .home-lifestyle-use-icon:
     icon circle size, color, border, shadow.

   PURPOSE:
   - 4 icons in one line.
   - No card border/background.
   - Only icon circle has border/background.
   - On mobile, this row is centered inside upper photo area.
   =========================================================== */

.home-lifestyle-uses {
  order: 1;

  width: 100%;

  align-self: center;
  justify-self: center;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 6px;
}

.home-lifestyle-use-card {
  min-width: 0;
  min-height: 0;

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

  /*
    Controls icon-to-text spacing.
    Increase this if icon and text are too close.
  */
  gap: 7px;

  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;

  color: var(--lifestyle-white);
  text-align: center;
}

.home-lifestyle-use-icon {
  width: var(--lifestyle-icon-size);
  height: var(--lifestyle-icon-size);

  flex: 0 0 auto;

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

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

  color: var(--lifestyle-gold);
  font-size: var(--lifestyle-icon-font);

  box-shadow: 0 8px 18px 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-lifestyle-use-text {
  min-width: 0;

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

  text-align: center;
}

.home-lifestyle-use-text strong {
  color: var(--lifestyle-white);

  /*
    Controls first line under icon.
    Small increase improves readability.
  */
  font-size: calc(var(--lifestyle-use-title-size) + 0.03rem);
  font-weight: 900;
  line-height: 1.12;
}

.home-lifestyle-use-text span {
  /*
    Controls spacing between strong and span.
    Increase this if the 2 text lines are too close.
  */
  margin-top: 3px;

  color: rgba(255, 250, 240, 0.74);
  font-size: calc(var(--lifestyle-use-desc-size) + 0.02rem);
  font-weight: 600;
  line-height: 1.12;
}

.home-lifestyle-use-card:hover .home-lifestyle-use-icon {
  transform: translateY(-1px);

  border-color: rgba(185, 130, 47, 0.88);
  background: rgba(185, 130, 47, 0.24);
  color: #d8a44f;
}


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

   LAYOUT:
   - Upper row: icons centered.
   - Lower row: content centered.

   CONTROLS:
   - --lifestyle-min-height:
     tiny phone section height.

   - --lifestyle-icon-size:
     tiny phone icon circle size.

   - .home-lifestyle-use-card gap:
     icon-to-text spacing on tiny phone.

   - .home-lifestyle-use-text span margin-top:
     strong-to-span spacing on tiny phone.
   =========================================================== */

@media (max-width: 320px) {
  .home-lifestyle {
    --lifestyle-pad-x: 9px;
    --lifestyle-pad-y: 14px;

    --lifestyle-min-height: 390px;

    --lifestyle-icon-size: 36px;
    --lifestyle-icon-font: 0.82rem;
  }

  .home-lifestyle-inner {
    grid-template-rows: minmax(96px, 30vw) minmax(0, 1fr);
    gap: 10px;
  }

  .home-lifestyle-uses {
    gap: 5px;
  }

  .home-lifestyle-use-card {
    gap: 5px;
  }

  .home-lifestyle-use-text span {
    margin-top: 2px;
  }

  .home-lifestyle-content {
    padding-bottom: 4px;
  }

  .home-lifestyle-desc {
    margin-top: 8px;
  }

  .home-lifestyle-btn {
    margin-top: 11px;
    padding: 8px 13px;
  }
}


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

   LAYOUT:
   - Upper row: icons centered.
   - Lower row: content centered.

   CONTROLS:
   - --lifestyle-min-height:
     mobile section height.
   - grid-template-rows first value:
     icon area height.
   =========================================================== */

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

    --lifestyle-min-height: clamp(390px, 104vw, 460px);

    --lifestyle-icon-size: 44px;
    --lifestyle-icon-font: 1rem;
  }

  .home-lifestyle-inner {
    grid-template-rows: minmax(120px, 34vw) minmax(0, 1fr);
    gap: 12px;
  }

  .home-lifestyle-uses {
    gap: 6px;
  }

  .home-lifestyle-content {
    padding-bottom: 6px;
  }
}


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

   IMAGE:
   - Uses desktop image because screen is wider.

   LAYOUT:
   - Icons above text.
   - Still one-column layout.

   CONTROLS:
   - background-size: cover;
     fills tablet width.

   - .home-lifestyle-inner gap:
     space between icon row and text content.
   =========================================================== */

@media (min-width: 641px) and (max-width: 959px) {
  .home-lifestyle {
    --lifestyle-pad-x: 22px;
    --lifestyle-pad-y: 28px;

    --lifestyle-min-height: 360px;

    --lifestyle-icon-size: 44px;
    --lifestyle-icon-font: 1rem;
  }

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

  .home-lifestyle-overlay {
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(185, 130, 47, 0.16),
        transparent 28%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.48) 48%,
        rgba(0, 0, 0, 0.76) 100%
      );
  }

  .home-lifestyle-inner {
    grid-template-rows: minmax(96px, auto) minmax(0, 1fr);
    gap: 22px;
  }

  .home-lifestyle-content {
    max-width: 680px;
  }

  .home-lifestyle-uses {
    gap: 12px;
  }
}


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

   IMAGE:
   - Uses desktop image.

   LAYOUT:
   - Text left.
   - Icons right.

   CONTROLS:
   - grid-template-columns:
     controls left text width and right icon area.

   - .home-lifestyle-use-card gap:
     icon-to-text spacing on desktop.

   - .home-lifestyle-use-text span margin-top:
     strong-to-span spacing on desktop.
   =========================================================== */

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

    --lifestyle-min-height: 260px;

    --lifestyle-icon-size: 48px;
    --lifestyle-icon-font: 1.05rem;
  }

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

  .home-lifestyle-overlay {
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(185, 130, 47, 0.16),
        transparent 28%
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.58) 42%,
        rgba(0, 0, 0, 0.16) 100%
      );
  }

  .home-lifestyle-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    grid-template-rows: none;
    align-items: center;
    gap: 30px;
  }

  .home-lifestyle-content {
    order: initial;
    align-self: center;
    justify-self: start;

    width: auto;
    padding-bottom: 0;
  }

  .home-lifestyle-uses {
    order: initial;
    align-self: center;
    justify-self: center;

    gap: 14px;
  }

  .home-lifestyle-use-card {
    gap: 8px;
  }

  .home-lifestyle-use-text span {
    margin-top: 4px;
  }
}


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

   CONTROLS:
   - Slightly taller section.
   - More comfortable spacing between text and icon area.
   =========================================================== */

@media (min-width: 1200px) {
  .home-lifestyle {
    --lifestyle-min-height: 280px;
    --lifestyle-pad-y: 32px;
  }

  .home-lifestyle-inner {
    gap: 34px;
  }
}


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

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

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