/* =======================
   Hero component css only
======================= */

:root {
  --hero-side-padding: 240px; /* 내부 콘텐츠 좌우 패딩 */
  --header-height: 85px; /* GNB 높이 */
  --hero-vertical-padding: 100px;
}

.hero {
  padding: 0px var(--hero-side-padding);
  overflow: visible;
  position: relative;
  color: #fff;
  background-color: #111;
}

.hero .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  /* z-index: -1; */
  filter: brightness(0.5);
  width: 100dvw;
  transform: translateX(-50%);
  left: 50%;
}

.hero .hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.5);
  /* z-index: -1; */ /* This hides the image behind parent's background */
}

/* 전체 화면 - 기본 */
.hero .hero-title {
  font-family: pretendard;
  font-weight: 600;
  font-size: clamp(36px, 3.5vw, 49px);
  line-height: 140%;
  letter-spacing: -2%;
  color: #ffffff;
  margin-top: 85px;
  text-transform: none;
}

.hero .hero-left {
  padding-left: 0;
  position: relative;
  z-index: 1;
}

/* Common styles for sub-page heroes */
.hero:where(.hero-about, .hero-apply, .hero-blog, .hero-contact, .hero-people, .hero-service) {
  height: 700px;
}

.hero:where(.hero-about, .hero-apply, .hero-blog, .hero-contact, .hero-people, .hero-service) .hero-title {
  margin-top: 0;
}


@media (max-width: 1440px) {
  .hero {
    padding-left: 120px;
    padding-right: 120px;
  }
}

@media (max-width: 1024px) {
  .hero:where(.hero-about, .hero-apply, .hero-blog, .hero-contact, .hero-people, .hero-service) {
    min-height: 585px;
    height: 585px;
    display: flex;
    align-items: center;
  }
  .hero:where(.hero-about, .hero-apply, .hero-blog, .hero-contact, .hero-people, .hero-service) .hero-bg {
    height: 585px;
  }
}

@media (max-width: 768px) {
  :root {
    --hero-side-padding: 20px;
    --hero-vertical-padding: 60px;
  }

  .hero {
    padding: var(--hero-vertical-padding) var(--hero-side-padding);
  }

  .hero .hero-title {
    /* The clamp function above handles responsive size. 
       This can be a fallback for older browsers. */
    font-size: 36px;
  }

  .hero:where(.hero-about, .hero-apply, .hero-blog, .hero-contact, .hero-people, .hero-service) {
    height: 470px;
    min-height: 470px;
  }

  .hero:where(.hero-about, .hero-apply, .hero-blog, .hero-contact, .hero-people, .hero-service) .hero-bg {
    height: 470px;
  }
}