/* Additional case-study variants -----------------------------------------
 * Built from the approved FedEx template. All overrides are scoped to
 * .case-template-variant so the approved FedEx page and shared pages remain
 * byte-for-byte unchanged.
 */

body.case-template-variant .case-scope-title {
  width: min(1312px, 100%);
  height: 90px;
  overflow: visible;
  color: #fff;
  font-size: 60px;
  font-weight: 500;
  line-height: 90px;
  letter-spacing: -3px;
  text-align: right;
  text-transform: uppercase;
}

body.case-template-variant .case-scope-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 310px;
  justify-content: start;
  overflow: visible;
}

body.case-template-variant .case-showcase-collage {
  position: relative;
  width: min(1280px, 100%);
  margin: 0 auto;
}

body.case-template-variant .case-showcase-collage img {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

body.case-template-variant .case-showcase-mobile {
  display: none;
}

body.case-template-variant .fallback-case-icon {
  filter: brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(5253%) hue-rotate(358deg) brightness(74%) contrast(112%);
}

/* Enterprise Rent-A-Car Egypt */
body.case-enterprise .case-scope,
body.case-rafa .case-scope,
body.case-lmd .case-scope,
body.case-park-st .case-scope {
  min-height: 513px;
  padding: 95px 64px 40px;
}

body.case-enterprise .case-showcase { min-height: 1110px; padding: 128px 32px 140px; }
body.case-enterprise .case-enterprise-collage { height: 672px; }
body.case-enterprise .case-enterprise-collage .asset-1 { left: 0; top: 0; width: 350px; height: 376px; }
body.case-enterprise .case-enterprise-collage .asset-2 { left: 0; top: 400px; width: 807px; height: 272px; }
body.case-enterprise .case-enterprise-collage .asset-3 { left: 831px; top: 0; width: 436px; height: 672px; }
body.case-enterprise .case-enterprise-collage .asset-4 { left: 374px; top: 0; width: 433px; height: 376px; }
body.case-enterprise .case-results { min-height: 490px; }
body.case-enterprise .case-scope { margin-top: 32px; }
body.case-enterprise .case-showcase,
body.case-enterprise .case-results { margin-top: 32px; }
body.case-enterprise .case-cta { margin: 32px 0 131px; }

/* Rafa Nadal Academy Kuwait */
body.case-rafa .case-scope { margin-top: -19px; }
body.case-rafa .case-showcase { min-height: 1146px; margin-top: 60px; padding: 128px 32px 108px; }
body.case-rafa .case-rafa-collage { height: 740px; }
body.case-rafa .case-rafa-collage .asset-1 { left: 0; top: 0; width: 365px; height: 200px; }
body.case-rafa .case-rafa-collage .asset-2 { left: 0; top: 224px; width: 365px; height: 515px; }
body.case-rafa .case-rafa-collage .asset-3 { left: 389px; top: 0; width: 416px; height: 740px; }
body.case-rafa .case-rafa-collage .asset-4 { left: 829px; top: 0; width: 434px; height: 739px; }
body.case-rafa .case-results { min-height: 476px; margin-top: 96px; }
body.case-rafa .case-cta { margin: 109px 0; }

/* LMD */
body.case-lmd .case-scope,
body.case-lmd .case-showcase,
body.case-lmd .case-results { margin-top: 32px; }
body.case-lmd .case-showcase { min-height: 1507px; padding: 128px 32px 140px; }
body.case-lmd .case-lmd-collage { height: 1069px; }
body.case-lmd .case-lmd-collage .asset-1 { left: 0; top: 223px; width: 365px; height: 522px; }
body.case-lmd .case-lmd-collage .asset-2 { left: 0; top: 0; width: 365px; height: 200px; }
body.case-lmd .case-lmd-collage .asset-3 { left: 389px; top: 0; width: 357px; height: 415px; }
body.case-lmd .case-lmd-collage .asset-4 { left: 770px; top: 1px; width: 510px; height: 414px; }
body.case-lmd .case-lmd-collage .asset-5 { left: 389px; top: 439px; width: 891px; height: 306px; }
body.case-lmd .case-lmd-collage .asset-6 { left: 0; top: 769px; width: 571px; height: 300px; }
body.case-lmd .case-lmd-collage .asset-7 { left: 595px; top: 769px; width: 685px; height: 300px; }
body.case-lmd .case-results { min-height: 540px; }
body.case-lmd .case-cta { margin: 32px 0 85px; }

/* Park St. */
body.case-park-st .case-scope,
body.case-park-st .case-showcase,
body.case-park-st .case-results { margin-top: 32px; }
body.case-park-st .case-showcase { min-height: 1183px; padding: 128px 32px 131px; }
body.case-park-st .case-park-collage { height: 754px; }
body.case-park-st .case-park-collage .asset-1 { left: 0; top: 0; width: 308px; height: 457px; }
body.case-park-st .case-park-collage .asset-2 { left: 0; top: 482px; width: 807px; height: 272px; }
body.case-park-st .case-park-collage .asset-3 { left: 831px; top: 0; width: 436px; height: 754px; }
body.case-park-st .case-park-collage .asset-4 { left: 331px; top: 0; width: 476px; height: 458px; }
body.case-park-st .case-results { min-height: 476px; }
body.case-park-st .case-cta { margin: 32px 0 125px; }

@media (min-width: 768px) and (max-width: 1099px) {
  body.case-template-variant .case-scope {
    min-height: 0;
    margin-top: 0;
    padding: 72px 40px 88px;
  }

  body.case-template-variant .case-scope-title {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 0 40px;
    clip: auto;
    color: #fff;
    font-size: 46px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  body.case-template-variant .case-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  body.case-template-variant .case-showcase,
  body.case-template-variant .case-results {
    min-height: 0;
    margin-top: 0;
  }

  body.case-template-variant .case-cta { margin: 72px 0; }

  body.case-template-variant .case-showcase-collage {
    transform-origin: top left;
    width: 1280px;
  }

  body.case-enterprise .case-enterprise-collage,
  body.case-rafa .case-rafa-collage,
  body.case-lmd .case-lmd-collage,
  body.case-park-st .case-park-collage {
    --collage-scale: calc((100vw - 80px) / 1280);
    transform: scale(var(--collage-scale));
  }

  body.case-enterprise .case-showcase { padding-bottom: 72px; }
  body.case-enterprise .case-enterprise-collage { height: calc((100vw - 80px) * 672 / 1280); }
  body.case-rafa .case-showcase { padding-bottom: 72px; }
  body.case-rafa .case-rafa-collage { height: calc((100vw - 80px) * 740 / 1280); }
  body.case-lmd .case-showcase { padding-bottom: 72px; }
  body.case-lmd .case-lmd-collage { height: calc((100vw - 80px) * 1069 / 1280); }
  body.case-park-st .case-showcase { padding-bottom: 72px; }
  body.case-park-st .case-park-collage { height: calc((100vw - 80px) * 754 / 1280); }
}

@media (min-width: 768px) {
  body.case-enterprise .case-results-heading p { width: 351px; }
  body.case-lmd .case-results-heading p { width: 388px; }
  body.case-park-st .case-results-heading p { width: 311px; }
  body.case-lmd .result-positioning { order: 1; }
  body.case-lmd .result-awareness { order: 2; }
  body.case-lmd .result-luxury { order: 3; }
}

@media (max-width: 767px) {
  body.case-template-variant .case-intro {
    height: 830px;
    padding: 150px 25px 47px;
  }

  body.case-template-variant .case-intro-copy { min-height: 221px; }

  body.case-template-variant .case-scope,
  body.case-template-variant .case-showcase,
  body.case-template-variant .case-results {
    margin-top: 0;
  }

  body.case-template-variant .case-scope {
    height: 382px;
    min-height: 382px;
    padding: 16px 19px 17px;
  }

  body.case-template-variant .case-scope-title {
    width: auto;
    height: 53px;
    margin: 0 auto 16px;
    color: #fff;
    font-size: clamp(30px, 8.372vw, 36px);
    line-height: 53px;
    letter-spacing: -2.4px;
    text-align: center;
  }

  body.case-template-variant .case-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  body.case-template-variant .case-showcase-desktop { display: none; }
  body.case-template-variant .case-showcase-mobile { display: block; }
  body.case-template-variant .case-showcase-track figure:first-child img { object-fit: contain; }

  body.case-enterprise .case-showcase,
  body.case-park-st .case-showcase { height: 418px; min-height: 418px; padding: 0; }
  body.case-lmd .case-showcase { height: 429px; min-height: 429px; padding: 0; }

  body.case-enterprise .case-showcase-track figure,
  body.case-park-st .case-showcase-track figure { height: 325px; }
  body.case-lmd .case-showcase-track figure { height: 336px; }

  body.case-enterprise .case-results { height: 630px; min-height: 630px; padding-bottom: 39px; }
  body.case-park-st .case-results { height: 598px; min-height: 598px; padding-bottom: 39px; }
  body.case-lmd .case-results { height: 614px; min-height: 614px; padding-bottom: 39px; }

  body.case-template-variant .case-cta { margin: 0; }

  body.case-rafa .case-intro {
    height: 782px;
    padding: 113px 25px 24px;
  }

  body.case-rafa .case-intro-copy { min-height: 233px; }
  body.case-rafa .case-scope { height: 504px; min-height: 504px; padding-bottom: 15px; }
  body.case-rafa .case-scope-card,
  body.case-lmd .case-scope-card { height: 124px; }

  body.case-lmd .case-scope { height: 504px; min-height: 504px; padding-bottom: 15px; }

  body.case-rafa .case-showcase {
    height: 424px;
    min-height: 424px;
    padding: 0;
  }

  body.case-rafa .case-showcase-heading { margin-bottom: 16px; }

  body.case-rafa .case-results { height: 597px; min-height: 597px; padding-bottom: 39px; }
  body.case-rafa .case-result-card {
    grid-template-columns: 30px 125px minmax(0, 1fr);
    gap: 16px;
    padding-inline: 32px 24px;
  }

  body.case-template-variant .case-showcase {
    height: auto;
    min-height: 0;
  }

  body.case-template-variant .case-showcase-track figure:first-child {
    height: auto;
  }
}

@media (max-width: 389px) {
  body.case-template-variant .case-intro { padding-inline: 20px; }
  body.case-template-variant .case-scope { padding-inline: 16px; }
  body.case-template-variant .case-scope-card { padding: 20px; }
}
