/* Case Study responsive hardening -----------------------------------------
 * Figma remains the visual source at 430px and 1440px. These rules only
 * replace fixed-size layout behavior that clips real content between those
 * anchors. The file is loaded by the ten pages in /case studies only.
 */

body.case-study-page .case-scope-card,
body.case-study-page .case-result-card,
body.case-study-page .case-result-card > *,
body.case-study-page .case-result-card > div > * {
  min-width: 0;
}

body.case-study-page .case-result-card h3,
body.case-study-page .case-result-card strong,
body.case-study-page .case-result-card span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.case-study-page .case-scope-card h3 {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.case-study-page .case-result-card strong {
  white-space: normal;
}

/* Six-service desktop pages: keep Figma's four-card rhythm, then center the
   remaining pair on a second row instead of clipping it outside the frame. */
@media (min-width: 1100px) {
  body.case-lhh .case-scope-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.case-lhh .case-scope-card {
    width: auto;
    flex-basis: auto;
  }

  body.case-lhh .case-scope-card h3,
  body.case-time-square .case-scope-card h3 {
    font-size: clamp(19px, 1.46vw, 21px);
  }

  body.case-rafa .case-scope,
  body.case-lmd .case-scope,
  body.case-time-square .case-scope {
    height: auto;
    min-height: 0;
  }

  body.case-rafa .case-scope-grid,
  body.case-lmd .case-scope-grid,
  body.case-time-square .case-scope-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    overflow: visible;
  }

  body.case-rafa .case-scope-card,
  body.case-lmd .case-scope-card,
  body.case-time-square .case-scope-card {
    width: auto;
    height: auto;
    min-height: 248px;
    flex-basis: auto;
  }

  body.case-rafa .case-scope-card:nth-child(5),
  body.case-lmd .case-scope-card:nth-child(5),
  body.case-time-square .case-scope-card:nth-child(5) {
    grid-column: 2;
  }

  body.case-study-page .case-result-card {
    height: auto;
    min-height: 306px;
  }
}

@media (min-width: 1100px) and (max-width: 1279px) {
  body.case-lhh .case-scope-card,
  body.case-time-square .case-scope-card {
    padding-inline: 40px;
  }

  body.case-rafa .case-scope-grid,
  body.case-lmd .case-scope-grid,
  body.case-time-square .case-scope-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.case-rafa .case-scope-card:nth-child(5),
  body.case-lmd .case-scope-card:nth-child(5),
  body.case-time-square .case-scope-card:nth-child(5) {
    grid-column: auto;
  }
}

/* Tablet: allow content to determine card height and use two comfortable
   columns. The final result is centered when the item count is odd. */
@media (min-width: 768px) and (max-width: 1099px) {
  body.case-study-page .case-scope,
  body.case-study-page .case-results {
    height: auto;
    min-height: 0;
  }

  body.case-study-page .case-scope-card {
    width: auto;
    height: auto;
    min-height: 210px;
    flex-basis: auto;
  }

  body.case-study-page .case-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  body.case-study-page .case-result-card {
    height: auto;
    min-height: 250px;
  }

  body.case-study-page .case-result-card:last-child:nth-child(odd) {
    width: calc(50% - 8px);
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* Mobile: reproduce the Figma two-column Scope and row-based Results at
   430px, then let both patterns contract safely down to 320px. */
@media (max-width: 767px) {
  body.case-study-page .case-scope,
  body.case-study-page .case-results,
  body.case-rafa .case-scope,
  body.case-lmd .case-scope,
  body.case-remaining .case-scope,
  body.case-rafa .case-results,
  body.case-remaining .case-results {
    height: auto;
    min-height: 0;
  }

  body.case-study-page .case-scope {
    padding: 16px clamp(16px, 4.42vw, 19px) 17px;
  }

  body.case-study-page .case-scope-grid,
  body.case-template-variant .case-scope-grid,
  body.case-remaining .case-scope-grid {
    width: min(392px, 100%);
    margin-inline: auto;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    overflow: visible;
  }

  body.case-study-page .case-scope-card,
  body.case-middle-east-security .case-scope-card,
  body.case-sipes .case-scope-card,
  body.case-venti .case-scope-card,
  body.case-rafa .case-scope-card,
  body.case-lmd .case-scope-card {
    width: auto;
    height: auto;
    min-height: 132px;
    flex-basis: auto;
    padding: clamp(18px, 5.58vw, 24px);
  }

  body.case-sipes .case-scope-card,
  body.case-venti .case-scope-card {
    min-height: 151px;
  }

  body.case-study-page .case-scope-card:last-child:nth-child(odd),
  body.case-sipes .case-scope-card:last-child,
  body.case-venti .case-scope-card:last-child {
    width: calc(50% - 8px);
    grid-column: 1 / -1;
    justify-self: center;
  }

  body.case-study-page .case-results {
    padding: 0 clamp(16px, 5.58vw, 24px) 40px;
  }

  body.case-study-page .case-results-heading,
  body.case-study-page .case-results-grid {
    width: 100%;
    max-width: 382px;
  }

  body.case-study-page .case-results-heading p,
  body.case-remaining .case-results-heading p {
    width: min(100%, 362px);
  }

  body.case-study-page .case-result-card,
  body.case-rafa .case-result-card {
    width: 100%;
    height: auto;
    min-height: 139px;
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    column-gap: clamp(12px, 3.72vw, 16px);
    padding: clamp(20px, 5.58vw, 24px);
  }

  body.case-study-page .case-result-card > img {
    align-self: center;
  }

  body.case-study-page .case-result-card h3,
  body.case-study-page .case-result-card div {
    align-self: center;
  }

  body.case-study-page .case-result-card strong {
    font-size: clamp(20px, 5.58vw, 24px);
    line-height: 1.2;
  }

  body.case-study-page .case-result-card span {
    letter-spacing: clamp(.6px, .23vw, 1px);
  }
}

/* Very narrow phones need a two-column card rather than three compressed
   columns. The metric moves under its heading while preserving reading order. */
@media (max-width: 359px) {
  body.case-study-page .case-result-card,
  body.case-rafa .case-result-card {
    min-height: 150px;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 16px;
    row-gap: 8px;
    padding: 20px;
  }

  body.case-study-page .case-result-card > img {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body.case-study-page .case-result-card h3 {
    grid-column: 2;
    grid-row: 1;
  }

  body.case-study-page .case-result-card > div {
    grid-column: 2;
    grid-row: 2;
  }

  body.case-study-page .case-result-card strong {
    font-size: 19px;
  }
}

/* Scope carousel ----------------------------------------------------------
 * Figma's desktop/laptop composition keeps Scope cards in one horizontal
 * row. Six-card studies continue beyond the visible rail and are draggable;
 * the mobile reference deliberately changes to a two-column grid.
 */
@media (min-width: 768px) {
  body.case-study-page .case-scope {
    overflow: hidden;
  }

  body.case-study-page .case-scope-grid,
  body.case-template-variant .case-scope-grid,
  body.case-remaining .case-scope-grid,
  body.case-rafa .case-scope-grid,
  body.case-lmd .case-scope-grid,
  body.case-time-square .case-scope-grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    justify-content: flex-start;
    align-items: stretch;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body.case-study-page .case-scope-grid::-webkit-scrollbar {
    display: none;
  }

  body.case-study-page .case-scope-grid:focus-visible {
    outline: 2px solid #e6da78;
    outline-offset: 8px;
  }

  body.case-study-page .case-scope-grid.is-scrollable {
    cursor: grab;
  }

  body.case-study-page .case-scope-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  body.case-study-page .case-scope-card,
  body.case-template-variant .case-scope-card,
  body.case-remaining .case-scope-card,
  body.case-rafa .case-scope-card,
  body.case-lmd .case-scope-card,
  body.case-time-square .case-scope-card {
    flex: 0 0 310px;
    width: 310px;
    height: 248px;
    min-height: 248px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.case-middle-east-security .case-scope-grid {
    justify-content: center;
  }

  body.case-middle-east-security .case-scope-card {
    flex-basis: 450px;
    width: 450px;
  }

  body.case-rafa .case-scope,
  body.case-lmd .case-scope,
  body.case-time-square .case-scope {
    min-height: 513px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  body.case-study-page .case-scope-grid {
    width: 100%;
  }

  body.case-study-page .case-scope-card,
  body.case-template-variant .case-scope-card,
  body.case-remaining .case-scope-card,
  body.case-rafa .case-scope-card,
  body.case-lmd .case-scope-card,
  body.case-time-square .case-scope-card {
    flex-basis: min(310px, calc((100vw - 104px) / 2));
    width: min(310px, calc((100vw - 104px) / 2));
    height: auto;
    min-height: 210px;
  }

  body.case-middle-east-security .case-scope-card {
    flex-basis: min(450px, calc((100vw - 104px) / 2));
    width: min(450px, calc((100vw - 104px) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.case-study-page .case-scope-grid {
    scroll-behavior: auto;
  }
}