/*
  home.css — 메인페이지(index.html) 전용 오버라이드. main.css 다음에 로드.
  히어로: 모바일은 상단 이미지 + 하단 텍스트, 데스크톱은 좌측 텍스트 / 우측 사진 50:50 분할.
*/

.hero--home{ background: var(--navy); flex-direction: column; align-items: stretch; min-height: auto; }

.hero--home .hero__media{ position: relative; inset: auto; width: 100%; aspect-ratio: 2 / 1; z-index: 0; }
.hero--home .hero__media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hero--home .hero__scrim{ display: none; }
.hero--home .hero__body{ padding-block: 20px 24px; }

@media (min-width: 768px){
  .hero--home{ flex-direction: row; min-height: 26vh; }
  .hero--home .hero__media{ order: 2; width: 50%; flex: 0 0 50%; aspect-ratio: auto; }
  .hero--home .hero__body{ order: 1; width: 50%; flex: 0 0 50%; display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
  .hero--home .container{ max-width: none; margin-inline: 0; }
}

@media (min-width: 1200px){
  .hero--home{ min-height: 30vh; }
}