/* ==================================================
   VIP HERO – DESKTOP FLEXIBLE / ULTRA-WIDE SAFE
   File: pro-hero-head.css
================================================== */

:root{
  --vip-max-width:1440px;
  --vip-padding-x:clamp(24px, 5vw, 96px);
}

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

.vip-hero{
  position:relative;
  width:100%;
  min-height:1080px;

  display:flex;
  align-items:center;

  overflow:hidden;
  background:#343434;
}

/* ================= HERO SAFE OFFSET ================= */

.vip-hero{
  position: relative;
  padding-top: clamp(88px, 10vh, 120px);
}

/* ================= BACKGROUND ================= */

.vip-hero-bg{
  position:absolute;
  inset:0;

  background-image:url("../../picture/images/product/product-header.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:.5;
  z-index:0;
}

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

.vip-hero-content{
  position:relative;
  z-index:2;

  width:100%;
  max-width:var(--vip-max-width);
  margin-inline:auto;

  padding-inline:var(--vip-padding-x);
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ================= TYPOGRAPHY ================= */

.vip-hero-title{
  color:#fff;
  font-size:clamp(36px, 4vw, 64px);
  font-weight:600;
  letter-spacing:2px;
  line-height:1.15;
  margin-bottom:16px;
}

.vip-hero-sub{
  color:rgba(255,255,255,.85);
  font-size:clamp(16px, 1.2vw, 20px);
  max-width:680px;
  margin-bottom:26px;
}

.vip-hero-meta{
  color:rgba(255,255,255,.7);
  font-size:clamp(12px, .9vw, 14px);
  letter-spacing:3px;
}

/* ================= MOBILE ================= */

@media (max-width:768px){
  .vip-hero-bg{
    background-image:url("../../picture/images/product/product-header-mb.png");
    background-size:cover;
    background-position:center;
  }
}

@media (max-width:768px){

  .vip-hero{
    min-height:64vh;
  }

  .vip-hero-content{
    padding-inline:16px;
    text-align:center;
    align-items:center;
  }

  .vip-hero-sub{
    font-size:16px;
  }

  .vip-hero-meta{
    font-size:12px;
    letter-spacing:2px;
  }

}