/* ============================================================
   서브페이지 공용 히어로 배너
   services.php에서 사용, 향후 about.php / contact.php 등에도 재사용 가능
   ============================================================ */

.page-hero{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    115deg,
    rgba(11,31,58,.92) 0%,
    rgba(11,31,58,.82) 40%,
    rgba(11,31,58,.35) 75%,
    rgba(11,31,58,.15) 100%
  );
  z-index:1;
}

.page-hero-inner{
  position:relative; z-index:2;
  max-width:var(--container-w);
  margin:0 auto; width:100%;
  padding:calc(var(--header-h) + 40px) 24px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:50px;
}

.page-hero-text{ color:#fff; max-width:560px; }

.page-breadcrumb{ font-size:13px; opacity:.8; margin-bottom:16px; }
.page-breadcrumb a{ color:#fff; }
.page-breadcrumb span{ color:var(--gold); margin-left:6px; }

.page-hero-title{
  font-size:clamp(30px,4vw,44px); font-weight:800; margin-bottom:14px; letter-spacing:-1px;
}
.page-hero-desc{ font-size:15.5px; line-height:1.8; color:#e6e9ef; }

.page-hero-img{
  width:300px; height:340px; object-fit:cover; border-radius:18px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  border:4px solid rgba(255,255,255,.15);
  flex-shrink:0;
}

@media (max-width:900px){
  .page-hero-inner{
    flex-direction:column; text-align:center;
    padding-top:calc(var(--header-h) + 30px);
  }
  .page-hero-img{ display:none; }
}

@media (max-width:600px){
  .page-hero{ min-height:360px; }
  .page-hero-title{ font-size:26px; }
}


/* ===================== 히어로 진입 애니메이션 ===================== */
.page-hero-text{ animation:heroFadeUp .9s ease both; }
.page-hero-img{ animation:heroFadeIn 1.1s ease .2s both; }

@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes heroFadeIn{
  from{ opacity:0; transform:scale(.95); }
  to{ opacity:1; transform:scale(1); }
}