/* ==== Case-study visuals (round 6) ==== */

/* Small cap-case cards stay clean — defensive */
.cap-case > img.case-bg,
.cap-case .case-bg{ display: none !important; }

/* Featured card background (still painted by bootstrap script) */
.cases-featured__visual > img.case-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  filter: brightness(0.55) saturate(1.05);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cases-featured__visual > img.case-bg[src]{ opacity: 1; }

/* Modal image: same positioning the design expects (absolute, behind),
   but DO NOT touch position/inset of the sibling overlay/pattern/tag/
   client/etc. — they have their own absolute positions and must keep them. */
.case-modal__visual-image{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.62) saturate(1.05);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.case-modal__visual-image.is-loaded{ opacity: 1; }

/* Bump z-index of the original overlays/labels so they sit above the
   image. They already have `position: absolute` in the site CSS, so
   z-index here works without changing their layout. */
.case-modal__visual-overlay,
.case-modal__visual-pattern,
.case-modal__visual-tag,
.case-modal__visual-spark,
.case-modal__visual-logo,
.case-modal__visual-client{
  z-index: 1;
}

/* AR-only: cap the visual-client font size so the long Arabic client
   names don't balloon to fill the panel. NO max-width, NO position
   override — only font-size. */
:root[lang="ar"] .case-modal__visual-client,
[dir="rtl"] .case-modal__visual-client{
  font-size: clamp(17px, 1.7vw, 26px) !important;
  line-height: 1.4 !important;
}

/* Modal metrics: force 3-column horizontal grid so AR doesn't stack them. */
.case-modal__metrics{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch;
}
@media (max-width: 640px){
  .case-modal__metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.case-modal__metric{ min-width: 0; }
.case-modal__metric-value,
.case-modal__metric-label{ display: block; }

/* ==== Read-story CTA — single-line text + arrow ==== */
.case-card__cta{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
.case-card__cta > span{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}
.case-card__cta svg{
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
  display: inline-block !important;
  vertical-align: middle;
}
:root[lang="ar"] .case-card__cta svg{ transform: scaleX(-1); }