/* TEAM500 MONOLITH v28 — source-safe previews, each card a framed surface. */

html body[data-v28][data-v27][data-v26][data-v25]{
  --v28-preview-bg:#ffffff;
  --v28-preview-media-bg:#d8d4ca;
  --v28-preview-ink:#0b0b0b;
  --v28-preview-line:rgba(11,11,11,.22);
}

/* v28.3 — every preview is its own framed card: solid white surface, visible
   1px frame, and a clear lift on hover/focus (border to ink + shadow + -2px).
   No outer "table" look — cards sit on the paper with consistent gaps. */
html body[data-v28][data-v27][data-v26][data-v25] main .v28-preview-card{
  box-sizing:border-box!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid var(--v28-preview-line)!important;
  border-radius:0!important;
  background:var(--v28-preview-bg)!important;
  color:var(--v28-preview-ink)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease!important;
}

html body[data-v28][data-v27][data-v26][data-v25] main .v28-preview-card:is(:hover,:focus-visible,:focus-within){
  border-color:var(--v28-preview-ink)!important;
  background:var(--v28-preview-bg)!important;
  color:var(--v28-preview-ink)!important;
  box-shadow:0 14px 30px rgba(11,11,11,.14)!important;
  transform:translateY(-2px)!important;
}

/* Catalog and home grids contain ID-based legacy selectors. This typed rule
   intentionally outranks them so every preview receives the same card. */
html body[data-v28][data-v27][data-v26][data-v25] main :is(#caseGrid,#blogGrid,#cases) .v28-preview-card{
  border:1px solid var(--v28-preview-line)!important;
  background:var(--v28-preview-bg)!important;
  color:var(--v28-preview-ink)!important;
  box-shadow:none!important;
  transform:none!important;
}

html body[data-v28][data-v27][data-v26][data-v25] main :is(#caseGrid,#blogGrid,#cases) .v28-preview-card:is(:hover,:focus-visible,:focus-within){
  border-color:var(--v28-preview-ink)!important;
  background:var(--v28-preview-bg)!important;
  color:var(--v28-preview-ink)!important;
  box-shadow:0 14px 30px rgba(11,11,11,.14)!important;
  transform:translateY(-2px)!important;
}

html body[data-v28][data-v27][data-v26][data-v25] main .v28-preview-card :is(.item__body,.feat__body,.v24-card-copy){
  min-width:0!important;
  background:transparent!important;
  color:inherit!important;
}

html body[data-v28][data-v27][data-v26][data-v25] main .v28-preview-card :is(h2,h3,h4,p,.item__cat,.feat__body,.v24-card-copy),
html body[data-v28][data-v27][data-v26][data-v25] main .v28-preview-card:is(:hover,:focus-visible,:focus-within) :is(h2,h3,h4,p,.item__cat,.feat__body,.v24-card-copy){
  color:inherit!important;
  text-shadow:none!important;
}

/* The frame owns the 16:10 geometry; the bitmap is never stretched. A source
   keeps its native ratio and is cropped only by object-fit:cover. */
html body[data-v28][data-v27][data-v26][data-v25] .v28-media-frame{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:16/10!important;
  overflow:hidden!important;
  background:var(--v28-preview-media-bg)!important;
  box-sizing:border-box!important;
  transform:none!important;
}

html body[data-v28][data-v27][data-v26][data-v25] .v28-media-frame>img.v28-cover-image{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  background:transparent!important;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  transition:none!important;
}

html body[data-v28][data-v27][data-v26][data-v25] main :is(#caseGrid,#blogGrid,#cases) .v28-preview-card>.v28-media-frame{
  background:var(--v28-preview-media-bg)!important;
}

html body[data-v28][data-v27][data-v26][data-v25] main .v24-related-grid>.v24-related-card>.v28-media-frame{
  grid-column:1/-1!important;
  grid-row:1!important;
  width:100%!important;
  margin:0 0 18px!important;
}

html body[data-v28][data-v27][data-v26][data-v25] main .v28-preview-card:is(:hover,:focus-within) .v28-media-frame,
html body[data-v28][data-v27][data-v26][data-v25] main .v28-preview-card:is(:hover,:focus-within) .v28-media-frame>img.v28-cover-image{
  width:100%!important;
  transform:none!important;
  filter:none!important;
}

@media(max-width:760px){
  html body[data-v28][data-v27][data-v26][data-v25] main .v24-related-grid>.v24-related-card>.v28-media-frame{margin-bottom:16px!important}
}

/* v28.2+ — small preview blocks keep the site's light surface and are NOT
   wrapped in a shared frame. The legacy .mini grout/background AND the
   legacy .mini 1px border (upgrade.css: body[data-v15] .mini{border:1px})
   are neutralised so the small case/blog/service previews render as loose
   cards — each with its own frame — on the common paper background. */
html body[data-v28][data-v27][data-v26][data-v25] main .v24-related-grid{
  background:transparent!important;
  border:0!important;
  border-left:0!important;
  outline:0!important;
  box-shadow:none!important;
}