/* =========================================================
   SPACE VANTA
   BUYING GUIDE — HERO

   File:
   public/buying-guide/cs/hero.css

   Responsibility:
   - Hero typography
   - Hero content composition
   - Hero CTA
   - Hero visual interaction

   Visual Direction:
   - Accessible Premium
   - Editorial
   - Discovery
   - Restrained spatial motion

   Update:
   - Desktop: centered but left-biased composition
   - Desktop: refined editorial typography
   - Desktop: subtle silver / grey metallic atmosphere
   - Desktop: reduced spacing before functional panels
   - Mobile: existing restrained left offset preserved

   IMPORTANT:
   - No changes to panel / folding system
   - No changes to Hero functionality
   - No changes to Hero interaction logic
   - Existing Hero hover behavior preserved
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.sv-buying-guide-hero {
  position:
    relative;

  width:
    100%;

  box-sizing:
    border-box;
}


/* =========================================================
   SUBTLE METALLIC ATMOSPHERE
   ---------------------------------------------------------
   A restrained silver / grey reflection is always present.
   It is intentionally NOT a white card, border, or hover-only
   effect.

   The effect remains inside the Hero and does not alter the
   existing Hero visual frame.
   ========================================================= */

.sv-buying-guide-hero::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      112deg,
      transparent 24%,
      rgba(178, 183, 188, 0.025) 36%,
      rgba(190, 195, 199, 0.065) 44%,
      rgba(245, 246, 246, 0.095) 49%,
      rgba(174, 179, 184, 0.055) 55%,
      transparent 68%
    );

  background-size:
    220% 100%;

  background-position:
    0% 50%;

  opacity:
    0.9;

  animation:
    sv-buying-guide-metal-sheen
    18s
    cubic-bezier(0.45, 0, 0.55, 1)
    infinite;
}


/* =========================================================
   METALLIC SHEEN MOTION
   ========================================================= */

@keyframes sv-buying-guide-metal-sheen {

  0% {
    background-position:
      0% 50%;
  }

  50% {
    background-position:
      100% 50%;
  }

  100% {
    background-position:
      0% 50%;
  }

}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

.sv-buying-guide-hero__container {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.02fr);

  gap:
    clamp(44px, 5vw, 78px);

  align-items:
    center;

  width:
    100%;

  box-sizing:
    border-box;

  /*
   * The bottom spacing is intentionally reduced so the
   * Hero connects more naturally with the functional
   * Buying Guide panels below.
   */
  padding:
    clamp(54px, 7vw, 92px)
    0
    clamp(34px, 4.5vw, 60px);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.sv-buying-guide-hero__content {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  max-width:
    590px;

  /*
   * Move the complete content group toward the visual
   * center of the page while retaining asymmetric balance.
   *
   * This replaces the previous padding-based offset.
   */
  margin-left:
    clamp(30px, 7vw, 110px);

  margin-right:
    0;

  padding-left:
    0;

  box-sizing:
    border-box;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.sv-buying-guide-hero__eyebrow {
  margin:
    0 0 18px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    8px;

  line-height:
    1;

  letter-spacing:
    0.26em;

  font-weight:
    600;

  text-transform:
    uppercase;

  /*
   * Slightly cooler / lighter than the main title.
   * This separates the metadata layer from the headline.
   */
  color:
    rgba(72, 76, 80, 0.68);

  opacity:
    1;
}


/* =========================================================
   TITLE
   ========================================================= */

.sv-buying-guide-hero__title {
  max-width:
    500px;

  margin:
    0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(48px, 5.15vw, 78px);

  line-height:
    0.9;

  letter-spacing:
    -0.068em;

  font-weight:
    600;

  text-wrap:
    balance;

  color:
    #171717;

  opacity:
    0.96;

  /*
   * Creates a very subtle editorial asymmetry.
   *
   * Since text-indent applies to the first line,
   * the two-line Chinese headline gains a restrained
   * horizontal difference without changing its content.
   */
  text-indent:
    clamp(8px, 1vw, 16px);
}


/* =========================================================
   TITLE EDITORIAL ACCENT
   ========================================================= */

.sv-buying-guide-hero__title::after {
  content:
    "";

  display:
    block;

  width:
    42px;

  height:
    1px;

  margin-top:
    24px;

  background:
    rgba(90, 94, 98, 0.55);

  opacity:
    1;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.sv-buying-guide-hero__description {
  max-width:
    430px;

  margin-top:
    21px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(13px, 1.05vw, 15px);

  line-height:
    1.68;

  letter-spacing:
    -0.006em;

  font-weight:
    400;

  /*
   * Deliberately different from the eyebrow:
   * slightly deeper and cooler so it remains readable
   * without competing with the title.
   */
  color:
    rgba(74, 78, 82, 0.82);

  opacity:
    1;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.sv-buying-guide-hero__button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    11px;

  margin-top:
    32px;

  min-height:
    43px;

  padding:
    0 16px;

  border:
    1px solid rgba(0, 0, 0, 0.22);

  border-radius:
    999px;

  color:
    inherit;

  background:
    rgba(255, 255, 255, 0.26);

  text-decoration:
    none;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    9px;

  line-height:
    1;

  letter-spacing:
    0.16em;

  font-weight:
    600;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.4s ease,
    background 0.35s ease;
}


/* =========================================================
   BUTTON ARROW
   ========================================================= */

.sv-buying-guide-hero__button-arrow {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    15px;

  line-height:
    1;

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   BUTTON HOVER
   ---------------------------------------------------------
   Existing behavior preserved.
   ========================================================= */

.sv-buying-guide-hero__button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(72, 126, 177, 0.58);

  background:
    rgba(255, 255, 255, 0.58);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.055);
}


.sv-buying-guide-hero__button:hover
.sv-buying-guide-hero__button-arrow {
  transform:
    translateX(3px)
    translateY(-2px);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.sv-buying-guide-hero__visual {
  position:
    relative;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   HERO IMAGE FRAME
   ---------------------------------------------------------
   Existing image frame preserved.
   ========================================================= */

.sv-buying-guide-hero__visual-frame {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    16 / 10;

  overflow:
    hidden;

  border:
    1px solid rgba(0, 0, 0, 0.08);

  border-radius:
    20px;

  background:
    rgba(0, 0, 0, 0.025);

  isolation:
    isolate;

  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease,
    box-shadow 0.7s ease;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.sv-buying-guide-hero__image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  max-width:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transform:
    scale(1.001);

  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HERO LIGHT
   ---------------------------------------------------------
   Existing hover light preserved.
   ========================================================= */

.sv-buying-guide-hero__light {
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 255, 255, 0.18) 48%,
      transparent 72%
    );

  opacity:
    0;

  transform:
    translateX(-35%);

  transition:
    opacity 0.45s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HERO VISUAL HOVER
   ---------------------------------------------------------
   Existing behavior preserved.
   ========================================================= */

.sv-buying-guide-hero__visual-frame:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(72, 126, 177, 0.28);

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.07),
    0 0 0 3px rgba(72, 126, 177, 0.025);
}


.sv-buying-guide-hero__visual-frame:hover
.sv-buying-guide-hero__image {
  transform:
    scale(1.025);
}


.sv-buying-guide-hero__visual-frame:hover
.sv-buying-guide-hero__light {
  opacity:
    1;

  transform:
    translateX(35%);
}


/* =========================================================
   MOBILE
   ---------------------------------------------------------
   Existing mobile composition is intentionally preserved.
   The Desktop metallic / positioning changes do not alter
   the existing mobile layout.
   ========================================================= */

@media (max-width: 767px) {

  .sv-buying-guide-hero__container {
    grid-template-columns:
      1fr;

    gap:
      30px;

    padding:
      46px 0 54px;
  }


  /* -------------------------------------------------------
     MOBILE CONTENT POSITION
     ------------------------------------------------------- */

  .sv-buying-guide-hero__content {
    max-width:
      none;

    margin-left:
      clamp(10px, 4vw, 18px);

    margin-right:
      0;

    padding-left:
      0;
  }


  /* -------------------------------------------------------
     MOBILE EYEBROW
     ------------------------------------------------------- */

  .sv-buying-guide-hero__eyebrow {
    margin-bottom:
      15px;

    font-size:
      8px;

    letter-spacing:
      0.22em;
  }


  /* -------------------------------------------------------
     MOBILE TITLE
     ------------------------------------------------------- */

  .sv-buying-guide-hero__title {
    max-width:
      100%;

    font-size:
      clamp(40px, 12vw, 58px);

    line-height:
      0.94;

    letter-spacing:
      -0.056em;

    font-weight:
      600;

    /*
     * Prevent the Desktop editorial indent from affecting
     * the existing mobile presentation.
     */
    text-indent:
      0;
  }


  /* -------------------------------------------------------
     MOBILE TITLE ACCENT
     ------------------------------------------------------- */

  .sv-buying-guide-hero__title::after {
    width:
      36px;

    margin-top:
      21px;
  }


  /* -------------------------------------------------------
     MOBILE DESCRIPTION
     ------------------------------------------------------- */

  .sv-buying-guide-hero__description {
    max-width:
      100%;

    margin-top:
      19px;

    font-size:
      13px;

    line-height:
      1.6;

    letter-spacing:
      -0.006em;
  }


  /* -------------------------------------------------------
     MOBILE BUTTON
     ------------------------------------------------------- */

  .sv-buying-guide-hero__button {
    margin-top:
      25px;

    min-height:
      41px;

    font-size:
      8px;

    letter-spacing:
      0.15em;
  }


  /* -------------------------------------------------------
     MOBILE VISUAL
     ------------------------------------------------------- */

  .sv-buying-guide-hero__visual-frame {
    aspect-ratio:
      4 / 3;

    border-radius:
      16px;
  }


  /* -------------------------------------------------------
     MOBILE HOVER
     ------------------------------------------------------- */

  .sv-buying-guide-hero__visual-frame:hover {
    transform:
      none;

    box-shadow:
      none;
  }


  .sv-buying-guide-hero__visual-frame:hover
  .sv-buying-guide-hero__image {
    transform:
      none;
  }


  .sv-buying-guide-hero__visual-frame:hover
  .sv-buying-guide-hero__light {
    opacity:
      0;

    transform:
      none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sv-buying-guide-hero *,
  .sv-buying-guide-hero *::before,
  .sv-buying-guide-hero *::after {

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }


  /*
   * The metallic atmosphere is a new visual motion layer.
   * Disable it completely when reduced motion is requested.
   */
  .sv-buying-guide-hero::before {
    animation:
      none !important;

    background-position:
      50% 50%;
  }

}