/**
 * Shared presentation for editor-owned Case Study pages.
 * Content, type, colour, section spacing, and responsive columns live in
 * Elementor. These styles cover what its controls cannot express: list
 * markers, the hero figures, the services tags, and the gradients, lighting,
 * depth, and motion around the content.
 */

/* Elementor already renders the Case Study's title as the hero headline. */
.single-case_study .page-header {
  display: none;
}

/* The breadcrumb is one compact line in the design. Elementor otherwise gives
   its links the site's accent colour. */
.case-study-hero__breadcrumb.elementor-widget-text-editor p {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  align-items: baseline;
  margin: 0;
}

.case-study-hero__breadcrumb.elementor-widget-text-editor a {
  color: inherit;
  text-decoration: none;
}

.case-study-hero__breadcrumb.elementor-widget-text-editor a:hover,
.case-study-hero__breadcrumb.elementor-widget-text-editor a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.case-study-hero__breadcrumb.elementor-widget-text-editor strong {
  color: #101318;
  font-weight: 500;
}

.case-study-hero {
  background-image: var(
    --case-study-hero-gradient,
    linear-gradient(180deg, #255796 30.9%, #fff 100%)
  ) !important;
}

/* The design spaces the items of its bulleted lists: a blank line between the
   Highlights points, and a tighter gap between the Challenge and Solution
   points. The Text Editor widget styles type but has no list-spacing control,
   so the rhythm has to come from here. */
.case-study-prose--spaced li + li {
  margin-top: 1.5em;
}

.case-study-prose--list li + li {
  margin-top: 15px;
}

/* Lists across the page take a small diamond in the client's accent. */
:is(.case-study-highlights, .case-study-narrative, .case-study-hero__summary)
  .elementor-widget-text-editor ul,
.case-study-hero__summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.case-study-highlights, .case-study-narrative) .elementor-widget-text-editor li,
.case-study-hero__summary li:not(.case-study-hero__figure) {
  position: relative;
  padding-inline-start: 22px;
}

:is(.case-study-highlights, .case-study-narrative) .elementor-widget-text-editor li::before,
.case-study-hero__summary li:not(.case-study-hero__figure)::before {
  content: "";
  position: absolute;
  inset-block-start: 0.72em;
  inset-inline-start: 2px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--case-study-accent, #255796);
  transform: rotate(45deg);
}

.case-study-hero__summary li:not(.case-study-hero__figure) {
  color: #101318;
  font-size: 16px;
  font-weight: 500;
}

.case-study-hero__summary li + li {
  margin-top: 6px;
}

.case-study-hero__summary p {
  margin-bottom: 12px;
}

/* A hero list made only of figures is set as a two-column grid of stats
   (Hero_Figures marks it up on render). */
.case-study-hero__summary .case-study-hero__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

.case-study-hero__summary .case-study-hero__figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 16px 0 14px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
  line-height: 1.4;
}

.case-study-hero__figure strong {
  color: #101318;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* The opening paragraph of each narrative chapter leads at a larger size. */
.case-study-narrative__body .elementor-widget-text-editor:first-child > p:first-child {
  color: #101318;
  font-size: 21px;
  line-height: 1.55;
}

/* The listing facts strip: a hairline between items, none before the first. */
.case-study-highlights__item + .case-study-highlights__item {
  border-left: 1px solid #e5e7eb;
}

.case-study-highlights__item:first-child {
  padding-left: 0 !important;
}

@media (max-width: 1024px) {
  .case-study-highlights__item {
    padding-left: 0 !important;
  }
}

/* Services read as tags. */
.case-study-about__services ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-study-about__services li {
  padding: 7px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #101318;
  font-size: 14px;
  line-height: 1.3;
}

.case-study-about__media img {
  box-shadow: 0 0 0 1px rgb(16 19 24 / 6%), 0 24px 48px -28px rgb(16 19 24 / 35%);
}

.case-study-results__callout .elementor-button .elementor-button-icon svg {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study-results__callout .elementor-button:hover .elementor-button-icon svg {
  transform: translateX(3px);
}

/* Elementor stacks the facts from its tablet breakpoint down. */
@media (max-width: 1024px) {
  .case-study-highlights__item + .case-study-highlights__item {
    border-left: 0;
    border-top: 1px solid #e5e7eb;
  }
}

/* Cinematic presentation. All layers are outside normal flow; Elementor owns
   the content, dimensions, spacing, and responsive column arrangements. */
.case-study-experience {
  --cs-light-color: #255796;
  --cs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  isolation: isolate;
}

.case-study-experience .case-study-hero {
  isolation: isolate;
  overflow: clip;
}

/* A still render of the backdrop's shader stands in when WebGPU is absent or
   reduced motion is preferred. The mask takes the client's CSS color. */
.case-study-experience .case-study-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, var(--cs-light-color), #e5faff 55%, var(--cs-light-color));
  /* Lighter tones of the hero color, where relative colors are supported. */
  background: linear-gradient(115deg, var(--cs-light-color), oklch(from var(--cs-light-color) calc(l + 0.3) c h) 55%, var(--cs-light-color));
  mask: url("./backdrop-refracted-mask.png") center / 100% 100% no-repeat;
  /* Backdrops set the variable, never opacity, so the ready rule below always
     hides the still once the live backdrop is drawing. */
  opacity: var(--cs-still-opacity, 0.9);
}

.case-study-experience .case-study-hero.cs-atmosphere-ready::before {
  opacity: 0;
}

.case-study-experience .case-study-hero[data-case-study-backdrop="clouds"]::before {
  background: linear-gradient(180deg, #fff, #eef3fa);
  mask-image: url("./backdrop-clouds-mask.png");
  --cs-still-opacity: 1;
}

.case-study-experience .case-study-hero[data-case-study-backdrop="water"]::before {
  background: #f0feff;
  mask-image: url("./backdrop-water-mask.png");
}

.case-study-experience .case-study-hero[data-case-study-backdrop="contours"]::before {
  background: color-mix(in srgb, var(--cs-light-color) 15%, #fff);
  background: oklch(from var(--cs-light-color) calc(l + 0.3) c h);
  mask-image: url("./backdrop-contours-mask.png");
  --cs-still-opacity: 0.8;
}

.case-study-experience .case-study-hero[data-case-study-backdrop="contours-faint"]::before {
  background: color-mix(in srgb, var(--cs-light-color) 15%, #fff);
  background: oklch(from var(--cs-light-color) calc(l + 0.3) c h);
  mask-image: url("./backdrop-contours-faint-mask.png");
  --cs-still-opacity: 0.9;
}

.case-study-experience .case-study-hero[data-case-study-backdrop="cells"]::before {
  background: color-mix(in srgb, var(--cs-light-color) 12%, #fff);
  mask-image: url("./backdrop-cells-mask.png");
}

/* Patterns stay crisp at any size, where a stretched mask would blur. */
.case-study-experience .case-study-hero[data-case-study-backdrop="signal"]::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--cs-light-color) 55%, #fff) 1.2px, transparent 2px) 0 0 / 18px 18px;
  background: radial-gradient(circle, oklch(from var(--cs-light-color) calc(l + 0.22) c h) 1.2px, transparent 2px) 0 0 / 18px 18px;
  mask: radial-gradient(ellipse 70% 60% at 30% 0%, #000, transparent), radial-gradient(ellipse 60% 70% at 80% 10%, rgb(0 0 0 / 60%), transparent);
  --cs-still-opacity: 0.55;
}

/* Satin's sheen is the hero gradient itself, lighter. */
.case-study-experience .case-study-hero[data-case-study-backdrop="satin"]::before {
  background: var(--case-study-hero-gradient);
  filter: brightness(1.5) saturate(1.1);
  mask-image: url("./backdrop-satin-mask.png");
  --cs-still-opacity: 0.7;
}

.case-study-experience .case-study-hero[data-case-study-backdrop="none"]::before {
  content: none;
}

.case-study-experience .case-study-hero__card {
  box-shadow: 0 -24px 90px rgb(12 30 56 / 18%);
  background-image: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--cs-light-color) 7%, transparent), transparent 60%);
}

.case-study-experience .case-study-hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%);
}

.case-study-experience .case-study-hero__image img {
  box-shadow: 0 24px 64px -18px color-mix(in srgb, var(--cs-light-color) 45%, transparent);
}

.case-study-experience .elementor-button {
  transition: filter 150ms ease;
}

.case-study-experience .elementor-button:focus-visible {
  outline: 3px solid var(--cs-light-color);
  outline-offset: 5px;
}

/* Pointer-transparent canvases sit between the container fill and its content. */
.case-study-experience canvas.cs-atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 900ms var(--cs-ease-out);
}

.case-study-experience .cs-atmosphere-ready > canvas.cs-atmosphere {
  opacity: 1;
}

.case-study-experience .case-study-hero > .e-con-inner {
  z-index: 1;
}

.case-study-experience .case-study-image-marquee {
  /* Soft light at the aperture edges ties the existing moving gallery to the
     refracted hero without changing its images or scroll behavior. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 24px 64px -48px rgb(23 36 61 / 40%);
}

.case-study-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 9998;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.admin-bar .case-study-reading-progress {
  top: 32px;
}

@media (hover: hover) and (pointer: fine) {
  .case-study-experience .elementor-button:hover {
    filter: brightness(0.94);
  }
}

/* Phones get no reading-progress bar. */
@media (max-width: 767px) {
  .case-study-reading-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-experience canvas.cs-atmosphere { transition: none; }
}

@media (forced-colors: active) {
  .case-study-experience canvas.cs-atmosphere,
  .case-study-reading-progress { display: none; }
}

@media print {
  .case-study-experience canvas.cs-atmosphere,
  .case-study-reading-progress { display: none; }
}