@import url("../tokens.css?v=20260915-2");
@import url("../typography.css");

/*
  HIMART canonical Hero.
  This component is the single owner of movie-hero layout, copy position,
  bottom metadata rail and scroll-cover rendering. Legacy page bundles may
  still contain old .hm-* selectors, so canonical hm-ds-* selectors use a
  stable scoped lock instead of page-local overrides.

  HERO VISUAL CONTRACT:
  - source image/video is shown at native brightness (opacity 1 / no filter);
  - exactly one black matte is applied above the media;
  - initial matte opacity comes only from --hm-hero-matte-base-opacity (40%);
  - animation.js may increase that same matte up to --hm-hero-matte-scroll-max-opacity;
  - Hero root pseudo-elements are disabled so page-level gradients cannot stack;
  - page-specific brightness filters or additional black layers are prohibited.
*/
html body.himart-page-body #live-main > .hm-ds-hero{
  position:sticky!important;
  top:0!important;
  z-index:1!important;
  width:100%!important;
  height:100svh!important;
  min-height:100svh!important;
  padding:0!important;
  overflow:hidden!important;
  background:var(--hm-bg-page)!important;
  color:var(--hm-text-primary)!important;
}

/* One-matte-only lock. Old page CSS sometimes added ::before/::after gradients to
   the Hero root; those layers are explicitly disabled by the shared system. */
html body.himart-page-body #live-main > .hm-ds-hero::before,
html body.himart-page-body #live-main > .hm-ds-hero::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
}

html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__video,
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__overlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__video{
  object-fit:cover!important;
  z-index:0!important;
  opacity:1!important;
  filter:none!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__overlay{
  z-index:1!important;
  pointer-events:none!important;
  background:#000!important;
  opacity:var(--hm-hero-overlay-opacity,var(--hm-hero-matte-base-opacity))!important;
  transition:opacity .12s linear!important;
}

/* HIMART AX previously stacked media opacity + a directional gradient + the shared
   black matte, making the movie nearly disappear. AX still uses a nested visual
   wrapper, so normalize that legacy wrapper here as part of the same Hero contract. */
html body.himart-page-body.himart-ax-page #live-main > .hm-ds-hero .ax-hero-visual :is(img,video){
  opacity:1!important;
  filter:none!important;
}
html body.himart-page-body.himart-ax-page #live-main > .hm-ds-hero .ax-hero-visual::before,
html body.himart-page-body.himart-ax-page #live-main > .hm-ds-hero .ax-hero-visual::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__inner{
  position:relative!important;
  z-index:2!important;
  width:min(calc(100% - 80px),var(--hm-container-wide))!important;
  height:100%!important;
  min-height:100%!important;
  margin-inline:auto!important;
  padding:0!important;
  display:block!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__copy{
  position:absolute!important;
  top:50%!important;
  left:0!important;
  right:0!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  opacity:var(--hm-hero-copy-opacity,1)!important;
  transition:opacity .12s linear!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__title{
  max-width:var(--hm-hero-copy-max-width)!important;
  margin:0!important;
  color:var(--hm-text-primary)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:var(--hm-type-hero)!important;
  font-weight:100!important;
  line-height:1.04!important;
  letter-spacing:var(--hm-track-hero)!important;
  word-break:keep-all!important;
}
/* Hero description is part of the canonical case-study Hero and remains visible. */
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__description{
  display:-webkit-box!important;
  width:fit-content!important;
  max-width:var(--hm-hero-description-width)!important;
  min-height:0!important;
  height:auto!important;
  max-height:calc(1.58em * var(--hm-hero-description-max-lines,3))!important;
  margin:var(--hm-title-description-gap) 0 0!important;
  padding:0!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  color:var(--hm-text-secondary)!important;
  font-family:var(--hm-font-ko)!important;
  font-size:var(--hm-type-body)!important;
  font-weight:300!important;
  line-height:1.58!important;
  letter-spacing:var(--hm-track-body)!important;
  white-space:normal!important;
  text-wrap:pretty!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  -webkit-line-clamp:var(--hm-hero-description-max-lines,3)!important;
  line-clamp:var(--hm-hero-description-max-lines,3)!important;
  -webkit-box-orient:vertical!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__description br{
  display:none!important;
}

/* Approved himart.html bottom rail: desktop 40px / mobile 28px. */
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__bottom{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:40px!important;
  margin:0!important;
  padding:0!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta{
  display:grid!important;
  grid-template-columns:repeat(4,max-content)!important;
  justify-content:space-between!important;
  align-items:stretch!important;
  width:100%!important;
  min-height:var(--hm-meta-height)!important;
  height:var(--hm-meta-height)!important;
  margin:0!important;
  padding:0!important;
  column-gap:var(--hm-meta-column-gap)!important;
  row-gap:0!important;
  border-top:1px solid var(--hm-line-default)!important;
  border-bottom:1px solid var(--hm-line-default)!important;
  box-sizing:border-box!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta>div{
  display:flex!important;
  min-width:max-content!important;
  width:auto!important;
  min-height:var(--hm-meta-height)!important;
  height:var(--hm-meta-height)!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  padding:0!important;
  border:0!important;
  box-sizing:border-box!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta>div+div{
  padding-left:0!important;
}

/* Hero bottom metadata rail typography: Averta PE Thin for both label and value. */
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta span{
  display:block!important;
  margin:0 0 var(--hm-meta-line-gap)!important;
  color:var(--hm-text-secondary)!important;
  opacity:1!important;
  font-family:var(--hm-meta-font-family)!important;
  font-size:12px!important;
  font-weight:var(--hm-meta-font-weight)!important;
  line-height:1!important;
  letter-spacing:var(--hm-track-note)!important;
  word-spacing:normal!important;
}
html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta b{
  display:block!important;
  margin:0!important;
  color:var(--hm-text-primary)!important;
  font-family:var(--hm-meta-font-family)!important;
  font-size:12px!important;
  font-weight:var(--hm-meta-font-weight)!important;
  line-height:1.35!important;
  letter-spacing:var(--hm-track-note)!important;
  word-spacing:normal!important;
  white-space:nowrap!important;
  transform:none!important;
}

/* Current approved Hero does not expose previous/next arrow controls. */
html body.himart-page-body #live-main > .hm-ds-hero .hm-hero-nav{display:none!important}

/* Scroll cover: animation.js only changes opacity variables. */
html body.himart-page-body #live-main > .hm-ds-hero.hm-ds-hero--scroll-cover ~ .hm-section{
  position:relative!important;
  z-index:2!important;
  background:var(--hm-bg-page)!important;
}

@media(max-width:780px){
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__inner{
    width:calc(100% - 36px)!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__title{
    font-size:var(--hm-type-hero-mobile)!important;
    line-height:1.08!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__description{
    max-width:min(var(--hm-hero-description-width-mobile),88%)!important;
    margin-top:16px!important;
    font-size:var(--hm-type-body-mobile)!important;
    line-height:1.5!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__bottom{
    bottom:28px!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
    justify-content:stretch!important;
    align-items:stretch!important;
    column-gap:0!important;
    row-gap:0!important;
    height:auto!important;
    min-height:0!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta>div{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:88px!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
    padding:14px 12px 14px 0!important;
    border:0!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta>div+div{padding-left:0!important}
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta>div:nth-child(2n){padding-left:12px!important;padding-right:0!important}
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta>div:nth-child(n+3){border-top:1px solid var(--hm-line-default)!important}
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta span{
    margin-bottom:var(--hm-meta-line-gap)!important;
    font-size:var(--hm-type-note-mobile)!important;
  }
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__meta b{
    font-size:var(--hm-type-note-mobile)!important;
    line-height:1.45!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__overlay,
  html body.himart-page-body #live-main > .hm-ds-hero .hm-ds-hero__copy{transition:none!important}
}