/* Case-study builder styles for com_gallery (portfolio/work pages) */

.gallery-item-detail.case-page,
.portfolio-item-detail.portfolio-builder,
.gallery-item-detail.products-layout,
.gallery-item-detail.portfolio-layout,
.gallery-item-detail.services-layout {
  background-color: #000;
  color: #fff;
}

/* Reuse global scroll reveal if present, but keep these defaults local. */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.animate-on-scroll[data-animate='fade-in'] {
  transform: none;
}

.animate-on-scroll[data-animate='scale-in'] {
  transform: scale(0.94);
}

.animate-on-scroll[data-animate='reveal'] {
  transform: none;
  clip-path: inset(14% 10% 14% 10%);
  opacity: 0.35;
}

.animate-on-scroll[data-animate='none'] {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

.animate-on-scroll.is-visible,
.animate-on-scroll.visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/*
 * Case blocks: keep section background solid (no black site bleed).
 * Animate only direct content children.
 */
.case-page .case-block.animate-on-scroll {
  opacity: 1;
  transform: none;
  clip-path: none;
  will-change: auto;
  transition: none;
}

.case-page .case-block.animate-on-scroll > * {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.case-page .case-block.animate-on-scroll[data-animate='fade-in'] > * {
  transform: none;
}

.case-page .case-block.animate-on-scroll[data-animate='scale-in'] > * {
  transform: scale(0.94);
}

.case-page .case-block.animate-on-scroll[data-animate='reveal'] > * {
  transform: none;
  clip-path: inset(14% 10% 14% 10%);
  opacity: 0.35;
}

.case-page .case-block.animate-on-scroll[data-animate='parallax'] > * {
  opacity: 0;
  transform: translateY(56px) scale(0.985);
}

.case-page .case-block.animate-on-scroll[data-animate='none'] > * {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
  will-change: auto;
}

.case-page .case-block.animate-on-scroll.is-visible > *,
.case-page .case-block.animate-on-scroll.visible > * {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

.case-block {
  max-width: 1225px;
  margin: 0 auto;
  padding-top: var(--case-pad-top, 60px);
  padding-bottom: var(--case-pad-bottom, 60px);
  padding-left: 24px;
  padding-right: 24px;
}

/* Stagger children when parent becomes visible */
.case-stagger > .animate-on-scroll {
  transition-delay: calc(var(--stagger, 0) * 0.09s);
}

.case-hero {
  padding: 0;
  max-width: none;
}

.case-hero-frame.item-image,
.case-hero .item-image {
  height: var(--hero-height, 60vh);
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.case-hero .item-image img,
.case-hero [data-parallax-img] {
  width: 100%;
  height: 140%;
  object-fit: cover;
  transform: translate3d(0, var(--case-y, 0px), 0) scale(var(--case-scale, 1.12));
  transform-origin: center center;
  will-change: transform;
}

.case-hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--hero-overlay, 0));
  pointer-events: none;
  z-index: 2;
}

/* Keep default_more centering (left:50%) — only add scroll offset on Y */
.case-hero:not(.case-hero--stack) .item-title {
  z-index: 3;
  will-change: transform, opacity;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: min(100%, var(--case-content-width, 100%));
  max-width: 1225px;
  transform: translate3d(-50%, var(--case-title-y, 0px), 0);
  opacity: var(--case-title-o, 1);
}

.case-hero:not(.case-hero--stack) .item-title .vi-eyebrow {
  width: fit-content;
  max-width: 100%;
}

.case-hero:not(.case-hero--stack) .item-title .vi-eyebrow.case-field-align-left {
  margin-left: 0;
  margin-right: auto;
}

.case-hero:not(.case-hero--stack) .item-title .vi-eyebrow.case-field-align-center {
  margin-left: auto;
  margin-right: auto;
}

.case-hero:not(.case-hero--stack) .item-title .vi-eyebrow.case-field-align-right {
  margin-left: auto;
  margin-right: 0;
}

.case-hero--stack .case-hero-stack-copy.item-title {
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto;
}

@property --case-hz {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --case-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --case-frame-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* Luxury media frames — clip shell never transforms (keeps border-radius) */
.case-lux-frame,
.case-image-frame,
.case-split-media,
.case-gallery-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
  /* transform lives on img only — scaling the frame itself squares off radii */
  transform: none;
  will-change: auto;
}

.case-lux-frame::after,
.case-image-frame::after,
.case-split-media::after,
.case-gallery-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 62%
  );
  transform: translateX(-130%) skewX(-14deg);
  transition: transform 1.55s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.9;
}

.case-lux-frame:hover::after,
.case-image-frame:hover::after,
.case-split-media:hover::after,
.case-gallery-tile:hover::after {
  transform: translateX(130%) skewX(-14deg);
}

.case-lux-frame img,
.case-image-frame img,
.case-split-media img,
.case-gallery-tile img {
  --case-y: 0px;
  --case-scale: 1.08;
  --case-hz: 1;
  transform: translate3d(0, calc(var(--case-y) + var(--case-frame-y, 0px)), 0)
    scale(calc(var(--case-scale) * var(--case-hz) * var(--case-frame-scale, 1)));
  transform-origin: center center;
  transition:
    transform 1.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.4s ease,
    --case-hz 1.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.case-lux-frame:hover img,
.case-image-frame:hover img,
.case-split-media:hover img,
.case-gallery-tile:hover img {
  --case-hz: 1.06;
  filter: brightness(1.05) contrast(1.03) saturate(1.04);
}

/* Scroll vars on frame; img reads them via inheritance (no transform on shell) */
[data-scroll-media],
.case-scroll-media {
  --case-frame-y: 0px;
  --case-frame-scale: 1;
  transform: none;
  will-change: auto;
  transition: none;
}

[data-scroll-media] img,
.case-scroll-media img {
  transition:
    filter 1.25s ease,
    --case-hz 1.55s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scroll-media]:hover img,
.case-scroll-media:hover img {
  --case-hz: 1.03;
  filter: brightness(1.05) contrast(1.02);
}

/* Clip shell only — no sharp inset(0) that fights border-radius under zoom */
.case-media-reveal {
  overflow: hidden;
  border-radius: inherit;
}

.case-gallery-tile {
  --stagger: 0;
}

/* Parallax section animation cue */
.animate-on-scroll[data-animate='parallax'] {
  opacity: 0;
  transform: translateY(56px) scale(0.985);
}

.animate-on-scroll[data-animate='parallax'].is-visible {
  opacity: 1;
  transform: none;
}

/* Sticky split — text stays, media scrolls */
.case-split--sticky {
  max-width: none;
  padding-left: max(24px, calc((100% - 1225px) / 2 + 24px));
  padding-right: max(24px, calc((100% - 1225px) / 2 + 24px));
}

.case-split--sticky .case-split-grid {
  align-items: start;
  min-height: 110vh;
  gap: 48px;
}

.case-split--sticky .case-split-copy {
  position: sticky;
  top: 16vh;
  align-self: start;
  padding-block: 1rem;
  z-index: 2;
}

.case-split--sticky .case-split-media {
  min-height: 92vh;
}

.case-split--sticky .case-split-media img {
  height: min(92vh, 920px);
  width: 100%;
  border-radius: 18px;
}

@media (max-width: 768px) {
  .case-split--sticky .case-split-copy {
    position: static;
  }

  .case-split--sticky .case-split-media,
  .case-split--sticky .case-split-media img {
    min-height: 0;
    height: var(--split-img-h, 360px);
  }

  .case-lux-frame::after,
  .case-image-frame::after,
  .case-split-media::after,
  .case-gallery-tile::after {
    display: none;
  }
}

.case-field-align-left {
  text-align: left !important;
  direction: ltr;
  unicode-bidi: isolate;
}

.case-field-align-center {
  text-align: center !important;
}

.case-field-align-right {
  text-align: right !important;
  direction: rtl;
  unicode-bidi: isolate;
}

/* Default: avoid English punctuation flip inside RTL page */
.case-split-copy,
.case-text .content-wrapper,
.item-title,
.case-gallery-head {
  unicode-bidi: plaintext;
}


.case-hero-note {
  margin: 0.85rem 0 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  color: var(--case-color, #d1d5db);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}

.case-hero .item-title h1,
.case-hero .item-title .case-hero-note {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.case-text,
.case-text .content-wrapper,
.case-text .content-wrapper p,
.case-text .content-wrapper li {
  color: var(--case-color, inherit);
}

.case-text .content-wrapper {
  flex: 1;
  min-width: 0;
  font-family: "Assistant", "Assistant Regular", sans-serif !important;
  font-weight: 400 !important;
  font-size: var(--case-font-size, 1.125rem) !important;
  line-height: 1.7 !important;
}

.case-text .content-wrapper p,
.case-text .content-wrapper li,
.case-text .content-wrapper > div {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  line-height: 1.7 !important;
  margin-top: 0;
  margin-bottom: 0.85em;
}

.case-text .content-wrapper span {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.case-text .content-wrapper p:last-child,
.case-text .content-wrapper > div:last-child {
  margin-bottom: 0;
}

.case-text .content-wrapper strong,
.case-text .content-wrapper b {
  font-weight: 600 !important;
}

.case-text .content-wrapper h2,
.case-text .content-wrapper h3 {
  color: var(--case-color, #fff);
  font-family: "Assistant", "Assistant SemiBold", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.75em;
  font-size: 1.45em !important;
}

.case-text-inner {
  width: min(100%, var(--case-content-width, 62%));
  max-width: 100%;
  box-sizing: border-box;
}

.case-text--place-left .case-text-inner {
  margin-left: 0;
  margin-right: auto;
}

.case-text--place-center .case-text-inner {
  margin-left: auto;
  margin-right: auto;
}

.case-text--place-right .case-text-inner {
  margin-left: auto;
  margin-right: 0;
}

/* Legacy wrapper inside older markup */
.case-text .item-description {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.case-split-copy h2,
.case-features-title,
.case-gallery-head h2,
.case-video h2 {
  color: var(--case-color, #fff);
  font-size: var(--case-font-size, clamp(1.75rem, 3vw, 2.4rem));
}

.case-split-body,
.case-eyebrow {
  color: var(--case-color, #d1d5db);
}

.case-marquee-track {
  color: var(--case-color, rgba(255, 255, 255, 0.82));
  font-size: var(--case-font-size, 1rem);
}

.case-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 2), minmax(0, 1fr));
  gap: 16px;
}

.case-gallery-inner {
  width: min(100%, var(--case-content-width, 62%));
  max-width: 100%;
  box-sizing: border-box;
}

.case-gallery--place-left .case-gallery-inner {
  margin-left: 0;
  margin-right: auto;
}

.case-gallery--place-center .case-gallery-inner {
  margin-left: auto;
  margin-right: auto;
}

.case-gallery--place-right .case-gallery-inner {
  margin-left: auto;
  margin-right: 0;
}

.case-gallery-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  clip-path: inset(0 round 16px);
  background: rgba(255, 255, 255, 0.03);
  display: block;
  color: inherit;
  text-decoration: none;
}

.case-gallery-tile img {
  width: 100%;
  height: var(--gallery-img-h, 240px);
  object-fit: var(--case-img-fit, cover);
  display: block;
  clip-path: inset(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-gallery-tile:not(.is-visible) img {
  clip-path: inset(12% 12% 12% 12%);
}

.case-gallery-tile.is-visible img {
  clip-path: inset(0 round 0px);
}

.case-gallery-tile:hover img {
  --case-hz: 1.07;
}

.case-split-media {
  border-radius: 16px;
  clip-path: inset(0 round 16px);
}

.case-split-media img {
  width: 100%;
  height: var(--split-img-h, 360px);
  object-fit: var(--case-img-fit, cover);
  display: block;
  border-radius: 0;
  max-height: none;
}

.case-split-media:hover img {
  --case-hz: 1.03;
}

.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.case-lightbox.is-open {
  display: flex;
  opacity: 1;
}

.case-lightbox-stage {
  position: relative;
  max-width: min(1200px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.case-lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.case-lightbox-count {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.case-lightbox-close,
.case-lightbox-nav {
  position: absolute;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.case-lightbox-close {
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  font-size: 22px;
}

.case-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1;
}

.case-lightbox-prev { left: 18px; }
.case-lightbox-next { right: 18px; }

.case-lightbox-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 768px) {
  .case-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .case-lightbox-prev { left: 8px; }
  .case-lightbox-next { right: 8px; }
}

.case-gallery-head h2 {
  margin: 0 0 1.25rem;
  font-size: var(--case-font-size, clamp(1.75rem, 3vw, 2.4rem));
  color: var(--case-color, #fff);
  line-height: 1.2;
  overflow: visible;
}

.case-gallery-plus {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.case-gallery-tile:hover .case-gallery-plus {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .case-block:not(.case-hero):not(.case-marquee) {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: var(--m-pad-top, var(--case-pad-top, 60px)) !important;
    padding-bottom: var(--m-pad-bottom, var(--case-pad-bottom, 60px)) !important;
  }

  .case-hero .item-image,
  .case-hero-frame.item-image {
    height: var(--m-hero-height, var(--hero-height, 50vh));
    min-height: 220px;
  }

  .case-hero-scrim {
    background: rgba(0, 0, 0, var(--m-hero-overlay, var(--hero-overlay, 0)));
  }

  /* Concrete --m-* values from inline style; remaps without circular refs */
  .case-block[style*="--m-font-size"] {
    --case-font-size: var(--m-font-size);
  }

  .case-block[style*="--m-item-size"] {
    --case-item-size: var(--m-item-size);
  }

  /* Consume --m-content-width directly (inline --case-content-width cannot be remapped) */
  .case-text .case-text-inner,
  .case-image .case-image-inner,
  .case-features .case-features-inner,
  .case-gallery .case-gallery-inner {
    width: min(100%, var(--m-content-width, var(--case-content-width, 62%))) !important;
  }

  .case-hero:not(.case-hero--stack) .item-title {
    width: min(100%, var(--m-content-width, var(--case-content-width, 100%))) !important;
  }

  .case-text[style*="--m-min-height"] {
    min-height: var(--m-min-height) !important;
  }

  /* Consume --m-* directly — do not overwrite inline --case-* (inline wins cascade) */
  .case-image .case-image-frame img {
    height: var(--m-image-height, var(--case-image-height, auto)) !important;
    max-height: var(--m-image-height, var(--case-image-height, none)) !important;
  }

  .case-image--fit .case-image-frame img {
    height: auto !important;
    max-height: var(--m-image-height, var(--case-image-height, none)) !important;
  }

  .case-gallery-grid {
    grid-template-columns: repeat(var(--m-gallery-cols, 1), minmax(0, 1fr));
  }

  .case-gallery-tile img {
    height: var(--m-gallery-img-h, var(--gallery-img-h, 240px));
  }

  .case-split-media img {
    height: var(--m-split-img-h, var(--split-img-h, 360px));
  }
}

.case-split-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.case-split--image-left .case-split-media {
  order: -1;
}

.case-split-copy h2 {
  margin: 0 0 1rem;
  font-size: var(--case-font-size, clamp(1.75rem, 3vw, 2.5rem));
  line-height: 1.15;
  color: var(--case-color, #fff);
}

.case-split-body {
  color: var(--case-color, #d1d5db);
  font-size: 1.125rem;
  line-height: 1.7;
}

.case-features-title {
  margin: 0 0 1.25rem;
  font-size: var(--case-font-size, clamp(1.35rem, 2.5vw, 1.75rem));
  color: var(--case-color, #fff);
  font-weight: 700;
}

.case-features-inner {
  width: min(100%, var(--case-content-width, 62%));
  max-width: 100%;
  box-sizing: border-box;
}

.case-features--place-left .case-features-inner {
  margin-left: 0;
  margin-right: auto;
}

.case-features--place-center .case-features-inner {
  margin-left: auto;
  margin-right: auto;
}

.case-features--place-right .case-features-inner {
  margin-left: auto;
  margin-right: 0;
}

.case-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.case-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--case-item-color, var(--case-color, #d1d5db));
  font-size: var(--case-item-size, 1.125rem);
  line-height: 1.5;
}

.case-features-text {
  color: inherit;
}

.case-features-check {
  color: var(--case-icon-color, #22c55e);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.35;
}

.case-marquee {
  max-width: none;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}

.case-marquee-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: caseMarquee 28s linear infinite;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--case-font-size, 1rem);
  color: var(--case-color, rgba(255, 255, 255, 0.82));
}

@keyframes caseMarquee {
  to {
    transform: translateX(-50%);
  }
}

.case-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--case-color, #9ca3af);
  margin-bottom: 0.75rem;
}

.case-video h2 {
  margin: 0 0 1.25rem;
  font-size: var(--case-font-size, clamp(1.75rem, 3vw, 2.4rem));
  color: var(--case-color, #fff);
}

.case-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}

.case-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-video-poster-only img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-image-inner {
  width: min(100%, var(--case-content-width, 62%));
  max-width: 100%;
  box-sizing: border-box;
}

.case-image--place-left .case-image-inner {
  margin-left: 0;
  margin-right: auto;
}

.case-image--place-center .case-image-inner {
  margin-left: auto;
  margin-right: auto;
}

.case-image--place-right .case-image-inner {
  margin-left: auto;
  margin-right: 0;
}

.case-image-frame {
  display: block;
  overflow: hidden;
  background: #0a0a0a;
  text-decoration: none;
  color: inherit;
}

.case-image--rounded .case-image-frame {
  border-radius: 16px;
  clip-path: inset(0 round 16px);
}

/* Fit: frame hugs the photo — no full-bleed letterbox behind object-fit:contain */
.case-image--fit .case-image-inner {
  display: flex;
  flex-direction: column;
}

.case-image--fit.case-image--place-left .case-image-inner {
  align-items: flex-start;
}

.case-image--fit.case-image--place-center .case-image-inner {
  align-items: center;
}

.case-image--fit.case-image--place-right .case-image-inner {
  align-items: flex-end;
}

.case-image--fit .case-image-frame {
  width: fit-content;
  max-width: 100%;
  height: auto;
}

.case-image--fit .case-image-frame img {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  max-height: var(--case-image-height, none);
  object-fit: contain;
}

.case-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.case-image-caption {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--case-color, #9ca3af);
  font-weight: 400;
}

.case-image-empty {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile — must come after desktop split/text rules so it actually wins */
@media (max-width: 768px) {
  .case-split-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Always: text first, photo below — ignore desktop image-left/right */
  .case-split-copy {
    order: 1 !important;
  }

  .case-split-media,
  .case-split--image-left .case-split-media,
  .case-split--image-right .case-split-media {
    order: 2 !important;
  }

  /* Text / Image / Features / Gallery: full width on mobile; ignore desktop width/place unless --m-* set */
  .case-text.case-block,
  .case-image.case-block,
  .case-features.case-block,
  .case-gallery.case-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  .case-text .case-text-inner,
  .case-text--place-left .case-text-inner,
  .case-text--place-center .case-text-inner,
  .case-text--place-right .case-text-inner,
  .case-image .case-image-inner,
  .case-image--place-left .case-image-inner,
  .case-image--place-center .case-image-inner,
  .case-image--place-right .case-image-inner,
  .case-features .case-features-inner,
  .case-features--place-left .case-features-inner,
  .case-features--place-center .case-features-inner,
  .case-features--place-right .case-features-inner,
  .case-gallery .case-gallery-inner,
  .case-gallery--place-left .case-gallery-inner,
  .case-gallery--place-center .case-gallery-inner,
  .case-gallery--place-right .case-gallery-inner {
    width: min(100%, var(--m-content-width, 100%)) !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .case-text--m-place-left .case-text-inner,
  .case-image--m-place-left .case-image-inner,
  .case-features--m-place-left .case-features-inner,
  .case-gallery--m-place-left .case-gallery-inner {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .case-text--m-place-right .case-text-inner,
  .case-image--m-place-right .case-image-inner,
  .case-features--m-place-right .case-features-inner,
  .case-gallery--m-place-right .case-gallery-inner {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .case-text--m-place-center .case-text-inner,
  .case-image--m-place-center .case-image-inner,
  .case-features--m-place-center .case-features-inner,
  .case-gallery--m-place-center .case-gallery-inner {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .case-text .content-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .case-page .case-block.animate-on-scroll > *,
  .case-marquee-track,
  .case-gallery-tile img,
  .case-hero .item-image img,
  .case-media-reveal img,
  .case-lux-frame img,
  .case-image-frame img,
  .case-split-media img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }

  .case-lux-frame::after,
  .case-image-frame::after,
  .case-split-media::after,
  .case-gallery-tile::after {
    display: none !important;
  }
}