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

/* HIMART Design System — Media component */
.hm-ds-media-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px 24px;
}
.hm-ds-media-card{
  min-width:0;
  border-top:1px solid var(--hm-line-strong);
  padding-top:16px;
}
.hm-ds-media-card__frame{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  background:var(--hm-bg-card);
  border:1px solid var(--hm-line-default);
}
.hm-ds-media-card__frame img,
.hm-ds-media-card__frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hm-ds-media-card__caption{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  margin-top:16px;
}
.hm-ds-media-card__index{
  color:var(--hm-blue);
  font:400 12px/1.2 var(--hm-font-en);
}
.hm-ds-media-card__title{
  margin:0;
  color:var(--hm-text-primary);
  font:400 12px/1.3 var(--hm-font-en);
}
.hm-ds-media-card__description{
  grid-column:2;
  margin:6px 0 0;
  color:var(--hm-text-body);
  font:300 14px/1.45 var(--hm-font-ko);
}
@media(max-width:1024px){
  .hm-ds-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .hm-ds-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .hm-ds-media-card__caption{gap:8px}
  .hm-ds-media-card__description{font-size:13px}
}

/* Transitional DOM mapping: keeps current media markup reusable during migration. */
.hm-ds-media-card > .phone-frame{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--hm-bg-card);border:1px solid var(--hm-line-default)}
.hm-ds-media-card > .phone-meta{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;margin-top:16px}
.hm-ds-media-card > .phone-meta > span{color:var(--hm-blue);font:400 12px/1.2 var(--hm-font-en)}
.hm-ds-media-card > .phone-meta > b{color:var(--hm-text-primary);font:400 12px/1.3 var(--hm-font-en)}
.hm-ds-media-card > .phone-meta > p{grid-column:2;margin:0;color:var(--hm-text-body);font:300 14px/1.45 var(--hm-font-ko)}

/*
  Editorial media showcase.
  Use for process photography, field research, studios and other evidence that deserves more space than a card grid.
  It is content-agnostic and may be reused by any case-study page.
*/
.hm-ds-media-bleed{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  background:#050505;
}
.hm-ds-media-bleed__frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#050505;
}
.hm-ds-media-bleed__frame img,
.hm-ds-media-bleed__frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hm-ds-media-bleed__caption{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,32ch);
  gap:var(--hm-space-24);
  width:min(calc(100% - 80px),var(--hm-container-wide));
  margin:0 auto;
  padding:var(--hm-space-20) 0 0;
  color:var(--hm-text-body);
  font:300 var(--hm-type-body)/1.55 var(--hm-font-ko);
  letter-spacing:var(--hm-track-body);
}
.hm-ds-media-bleed__caption strong{
  color:var(--hm-text-primary);
  font-weight:400;
}

/* Multi-image field / process gallery. First item leads, remaining items form a supporting rail. */
.hm-ds-media-mosaic{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(240px,26vw);
  gap:var(--hm-space-16,16px);
  width:100%;
}
.hm-ds-media-mosaic__item{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#050505;
  border:1px solid var(--hm-line-faint);
}
.hm-ds-media-mosaic__item:first-child{grid-row:span 2}
.hm-ds-media-mosaic__item img,
.hm-ds-media-mosaic__item video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hm-ds-media-mosaic__caption{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:18px 20px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  color:rgba(255,255,255,.72);
  font:300 12px/1.45 var(--hm-font-ko);
  letter-spacing:var(--hm-track-body);
}

/*
  Canonical gallery navigation hit-area contract.
  Every interactive image gallery uses the same full-height click/tap zones:
  10% of gallery width on each side, 100% of gallery height.
  Existing gallery controls are included as compatibility aliases so old markup
  receives the shared rule without waiting for page-specific JavaScript caches.
*/
html body.himart-page-body :is(
  .hm-ds-gallery-nav,
  .team-workshop-gallery__nav,
  .aimmo-evidence-card__nav
){
  position:absolute!important;
  z-index:6!important;
  top:0!important;
  bottom:0!important;
  width:var(--hm-gallery-nav-hit-width,10%)!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  transform:none!important;
  cursor:pointer!important;
}
html body.himart-page-body :is(
  .hm-ds-gallery-nav--prev,
  .team-workshop-gallery__nav--prev,
  .aimmo-evidence-card__nav--prev
){left:0!important;right:auto!important}
html body.himart-page-body :is(
  .hm-ds-gallery-nav--next,
  .team-workshop-gallery__nav--next,
  .aimmo-evidence-card__nav--next
){right:0!important;left:auto!important}
html body.himart-page-body :is(
  .hm-ds-gallery-nav,
  .team-workshop-gallery__nav,
  .aimmo-evidence-card__nav
)::before{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:var(--hm-gallery-nav-arrow-size,18px)!important;
  height:var(--hm-gallery-nav-arrow-size,18px)!important;
  border-top:1px solid var(--hm-gallery-nav-color,rgba(255,255,255,.78))!important;
  border-right:1px solid var(--hm-gallery-nav-color,rgba(255,255,255,.78))!important;
  box-sizing:border-box!important;
}
html body.himart-page-body :is(
  .hm-ds-gallery-nav--prev,
  .team-workshop-gallery__nav--prev,
  .aimmo-evidence-card__nav--prev
)::before{
  --hm-gallery-nav-color:var(--hm-gallery-nav-prev-color,rgba(255,255,255,.78));
  left:var(--hm-gallery-nav-arrow-edge,30px)!important;
  right:auto!important;
  transform:translate(-35%,-50%) rotate(-135deg)!important;
}
html body.himart-page-body :is(
  .hm-ds-gallery-nav--next,
  .team-workshop-gallery__nav--next,
  .aimmo-evidence-card__nav--next
)::before{
  --hm-gallery-nav-color:var(--hm-gallery-nav-next-color,rgba(255,255,255,.78));
  right:var(--hm-gallery-nav-arrow-edge,30px)!important;
  left:auto!important;
  transform:translate(35%,-50%) rotate(45deg)!important;
}
html body.himart-page-body :is(
  .hm-ds-gallery-nav,
  .team-workshop-gallery__nav,
  .aimmo-evidence-card__nav
):is(:hover,:focus-visible)::before{
  border-color:#fff!important;
}

@media(max-width:780px){
  .hm-ds-media-bleed__frame{aspect-ratio:4/5}
  .hm-ds-media-bleed__caption{
    grid-template-columns:1fr;
    gap:10px;
    width:calc(100% - (var(--hm-mobile-inset) * 2));
    padding-top:16px;
    font-size:var(--hm-type-body-mobile);
  }
  .hm-ds-media-mosaic{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:minmax(180px,56vw);
    gap:12px;
  }
  .hm-ds-media-mosaic__item:first-child{
    grid-column:1/-1;
    grid-row:auto;
    min-height:64vw;
  }
  .hm-ds-media-mosaic__caption{padding:14px 16px;font-size:11px}
  html body.himart-page-body :is(
    .hm-ds-gallery-nav,
    .team-workshop-gallery__nav,
    .aimmo-evidence-card__nav
  )::before{
    width:var(--hm-gallery-nav-arrow-size-mobile,14px)!important;
    height:var(--hm-gallery-nav-arrow-size-mobile,14px)!important;
  }
  html body.himart-page-body :is(
    .hm-ds-gallery-nav--prev,
    .team-workshop-gallery__nav--prev,
    .aimmo-evidence-card__nav--prev
  )::before{left:var(--hm-gallery-nav-arrow-edge-mobile,21px)!important}
  html body.himart-page-body :is(
    .hm-ds-gallery-nav--next,
    .team-workshop-gallery__nav--next,
    .aimmo-evidence-card__nav--next
  )::before{right:var(--hm-gallery-nav-arrow-edge-mobile,21px)!important}
}