/* APIS Lab v6.74 — case-card containment and responsive geometry audit
   Purpose: eliminate copy/media overlap in linked case cards across RU/EN,
   keep typography inside its own panel, and make the component predictable
   from wide desktop through tablet and mobile. */

/* --------------------------------------------------------------------------
   1. LINKED CASE CARD — authoritative desktop geometry
   -------------------------------------------------------------------------- */
html body main .service-case{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  align-items:stretch!important;
  min-height:520px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  isolation:isolate;
}

html body main .service-case > .service-case-media{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:520px!important;
  height:auto!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  padding:0!important;
  margin:0!important;
  background:#0f1116!important;
}

html body main .service-case > .service-case-media img,
html body main .service-case > .service-case-media.hotel-europe-media .hotel-europe-image{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  max-height:none!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}

html body main .service-case > .service-case-copy,
html body main .service-case > .service-case-copy.v645-heading-group{
  grid-column:2!important;
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:clamp(34px,4vw,54px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:#111318!important;
  color:#fff!important;
  gap:0!important;
}

html body main .service-case .service-case-copy > .v5-kicker{
  position:static!important;
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 0 16px!important;
  padding:0!important;
  color:#aeb3bc!important;
  line-height:1.2!important;
}

html body main .service-case .service-case-copy > h2{
  position:static!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 18px!important;
  padding:0!important;
  font-size:clamp(42px,4.7vw,72px)!important;
  line-height:.94!important;
  letter-spacing:-.052em!important;
  color:#fff!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

html body main .service-case .service-case-copy > p{
  position:static!important;
  display:block!important;
  width:100%!important;
  max-width:34ch!important;
  margin:0!important;
  padding:0!important;
  font-size:clamp(15px,1.25vw,18px)!important;
  line-height:1.58!important;
  color:#c0c4cc!important;
  overflow-wrap:break-word!important;
}

html body main .service-case .case-index-metrics{
  position:static!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  gap:8px!important;
  margin:24px 0 0!important;
  padding:0!important;
}

html body main .service-case .case-index-metrics span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:38px!important;
  height:auto!important;
  padding:9px 14px!important;
  margin:0!important;
  border:1px solid #4a4d55!important;
  border-radius:999px!important;
  box-sizing:border-box!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1.2!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}

html body main .service-case .service-case-copy > b{
  position:static!important;
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  margin:28px 0 0!important;
  padding:0!important;
  color:var(--acid,#c8ff4d)!important;
  line-height:1.3!important;
  overflow-wrap:break-word!important;
}

/* --------------------------------------------------------------------------
   2. TABLET / COMPACT DESKTOP — stack before the text column becomes cramped
   -------------------------------------------------------------------------- */
@media (max-width:1120px){
  html body main .service-case{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    min-height:0!important;
  }
  html body main .service-case > .service-case-media{
    grid-column:1!important;
    grid-row:1!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  html body main .service-case > .service-case-media.hotel-europe-media{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    display:block!important;
  }
  html body main .service-case > .service-case-copy,
  html body main .service-case > .service-case-copy.v645-heading-group{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    padding:32px!important;
  }
  html body main .service-case .service-case-copy > h2{
    font-size:clamp(42px,7vw,64px)!important;
    max-width:15ch!important;
  }
  html body main .service-case .service-case-copy > p{
    max-width:62ch!important;
  }
}

/* --------------------------------------------------------------------------
   3. PHONE — compact but never crowded
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  html body main .service-case{
    border-radius:24px!important;
  }
  html body main .service-case > .service-case-media,
  html body main .service-case > .service-case-media.hotel-europe-media{
    aspect-ratio:4/3!important;
    min-height:0!important;
  }
  html body main .service-case > .service-case-copy,
  html body main .service-case > .service-case-copy.v645-heading-group{
    padding:24px!important;
  }
  html body main .service-case .service-case-copy > .v5-kicker{
    margin-bottom:14px!important;
  }
  html body main .service-case .service-case-copy > h2{
    max-width:100%!important;
    margin-bottom:16px!important;
    font-size:clamp(34px,11vw,50px)!important;
    line-height:.98!important;
  }
  html body main .service-case .service-case-copy > p{
    max-width:none!important;
    font-size:15px!important;
    line-height:1.55!important;
  }
  html body main .service-case .case-index-metrics{
    gap:7px!important;
    margin-top:20px!important;
  }
  html body main .service-case .case-index-metrics span{
    min-height:0!important;
    padding:8px 11px!important;
    font-size:10px!important;
  }
  html body main .service-case .service-case-copy > b{
    margin-top:22px!important;
  }
}

/* --------------------------------------------------------------------------
   4. WORK / CASE FAMILY GUARDS — no text may force a track outside the shell
   -------------------------------------------------------------------------- */
html body main .work-index-row,
html body main .work-index-row > *,
html body main .work-panel,
html body main .work-panel > *,
html body main .work-story,
html body main .work-story > *,
html body main .case6-title,
html body main .case6-title > *{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

html body main .work-index-info h2,
html body main .work-index-info p,
html body main .work-panel-copy h3,
html body main .work-panel-copy p,
html body main .work-story-copy h2,
html body main .work-story-copy p,
html body main .case6-title h1,
html body main .case6-title p{
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

@media (max-width:1120px) and (min-width:761px){
  html body main .work-index-row{
    grid-template-columns:42px minmax(0,46%) minmax(0,1fr)!important;
    gap:20px!important;
  }
  html body main .work-index-info h2{
    font-size:clamp(46px,6vw,68px)!important;
  }
}