/* Horizontal cards in a vertical list switch to their compact composition at
   tablet width as well as phone width. This avoids the mixed desktop/mobile
   state between 901px and 1024px. */
@media (max-width: 64rem) {
  .card-list--column .card-list__card--horizontal { min-height: 0; flex-direction: column; }
  .card-list--column.mobile-direction-change.mobile-order-reverse .card-list__card--horizontal { flex-direction: column; }
  .card-list--column .card-list__card--horizontal .card-list__media { width: 100%; flex: 0 0 auto; align-self: auto; aspect-ratio: 4 / 3; }
  .card-list--column .card-list__card--horizontal .card-list__content { position: static; width: 100%; height: auto; flex: 0 0 auto; justify-content: flex-start; color: var(--text-default); }
}

@media (max-width: 900px) {
  .site-header__inner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .case-study-hero-cover { min-height: 100svh; padding: min(var(--hero-cover-content-space, 40rem), 72svh) var(--page-gutter) var(--section-padding); }
  .case-study-hero-cover__content { gap: var(--gap-medium); }
  .spring-card-reveal__stage { min-height: 26rem; aspect-ratio: 4 / 3; }
  .spring-card-reveal__card { width: 68%; }
  .spring-card-reveal.is-spring-complete .spring-card-reveal__card--1 { --spring-x: -13.5cqw; }
  .spring-card-reveal.is-spring-complete .spring-card-reveal__card--3 { --spring-x: 13.5cqw; }
  .spring-card-reveal__tag { bottom: var(--space-2); left: var(--space-2); font-size: var(--font-size-caption); }
  .device-list--row { --device-list-mobile-peek: var(--gap-medium); width: calc(100% + var(--page-gutter)); max-height: 100svh; padding-right: var(--page-gutter); overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 0 var(--page-gutter); scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .device-list--row::-webkit-scrollbar { display: none; }
  .device-list--row .device-list__device { max-width: calc(100vw - (2 * var(--page-gutter)) - var(--device-list-mobile-peek)); max-height: 100svh; flex: 0 0 auto; scroll-snap-align: start; }
  .device-list--row .device-list__device img { width: auto; max-width: calc(100vw - (2 * var(--page-gutter)) - var(--device-list-mobile-peek) - (2 * var(--space-1))); height: auto; max-height: calc(100svh - (2 * var(--space-1))); object-fit: contain; }
  .card-list--row.mobile-direction-change { flex-direction: column; }
  .card-list--row.mobile-direction-change > .card-list__card { width: 100%; flex: 0 0 auto; }
  .card-list--row.mobile-direction-change.mobile-order-reverse { flex-direction: column-reverse; }
  .card-list--row:not(.mobile-direction-change).mobile-order-reverse { flex-direction: row-reverse; }
  .card-list--column.mobile-order-reverse { flex-direction: column-reverse; }
  .card-list.mobile-direction-change .card-list__card--horizontal { flex-direction: column; }
  .card-list.mobile-direction-change.mobile-order-reverse .card-list__card--horizontal { flex-direction: column-reverse; }
  .card-list--thumbnail.card-list--column.mobile-direction-change .card-list__card--horizontal { min-height: 0; }
  .card-list.mobile-direction-change .card-list__card--horizontal .card-list__media { width: 100%; flex-basis: auto; aspect-ratio: 4 / 3; }
  .card-list.mobile-direction-change .card-list__card--horizontal .card-list__content { flex-basis: auto; }
  .stats-content.mobile-direction-change .stats-content__top { grid-template-columns: 1fr; }
  .stats-content.mobile-direction-change.mobile-order-reverse .stats-content__copy { order: 2; }
  .stats-content.mobile-direction-change.mobile-order-reverse .stats-content__media { order: 1; }
  .stats-content__media { min-height: 24rem; }
  .stats-content--media-stack .stats-content__media {
    --stats-media-mobile-peek: var(--gap-medium);
    width: calc(100% + var(--page-gutter));
    min-height: 0;
    gap: var(--gap-small);
    justify-content: flex-start;
    padding-right: var(--page-gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 0 var(--page-gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stats-content--media-stack .stats-content__media::-webkit-scrollbar { display: none; }
  .stats-content--media-stack .stats-content__media figure,
  .stats-content--media-stack .stats-content__media figure:nth-child(2),
  .stats-content--media-stack .stats-content__media figure:nth-child(3) {
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 22.75 / 31.25;
    flex: 0 0 calc(100% - var(--stats-media-mobile-peek));
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .stats-content--media-stack .stats-content__media figure img { filter: none; }
  .stats-content--media-stack .stats-content__media-tags {
    visibility: hidden;
    opacity: 0;
  }
  .stats-content--media-stack .stats-content__media figure.is-active .stats-content__media-tags {
    visibility: visible;
    opacity: 1;
  }
  .stats-content--media-single .stats-content__media figure { height: 24rem; }
  .thumbnaill-card--horizontal { min-height: 38.75rem; }
  .thumbnaill-card--horizontal .thumbnaill-card__picture { aspect-ratio: auto; }
  .iframe-device:not(.iframe-device--mobile) { height: min(var(--iframe-device-height, 43.75rem), 65vw); min-height: 28rem; padding: var(--space-2); border-radius: var(--radius-media); }

  .site-nav-toggle {
    position: relative;
    display: block;
    width: 3rem;
    height: 2.25rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
  }

  .site-nav {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10.5rem var(--page-gutter) var(--page-gutter);
    background: var(--background-default);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity var(--duration-medium) var(--ease-out), transform var(--duration-medium) var(--ease-out), visibility var(--duration-medium);
  }

  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-nav__list {
    width: 100%;
    flex-direction: column;
    gap: var(--gap-small);
    align-items: stretch;
  }

  .site-nav__list a,
  .site-nav__link {
    width: 100%;
    min-height: 3.125rem;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-body);
  }

  .site-nav-toggle span[aria-hidden] {
    position: absolute;
    left: 50%;
    width: 1.6rem;
    height: 0.2rem;
    margin: 0;
    border-radius: var(--radius-full);
    transform-origin: center;
  }

  .site-nav-toggle span[aria-hidden]:nth-of-type(2) {
    top: calc(50% - 0.32rem);
    transform: translateX(-50%);
  }

  .site-nav-toggle span[aria-hidden]:nth-of-type(3) {
    top: calc(50% + 0.32rem);
    transform: translateX(-50%);
  }

  .site-nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(2),
  .site-nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(3) {
    top: 50%;
  }

  .site-nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(2) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .site-nav-toggle[aria-expanded="true"] span[aria-hidden]:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  body.is-mobile-menu-open { overflow: hidden; }

  .split-layout {
    grid-template-columns: 1fr;
  }

  .split-layout--reverse .split-layout__content,
  .split-layout--reverse .split-layout__media {
    order: initial;
  }

  .site-footer__card {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spring-card-reveal__card { will-change: auto; }
}

/* Touch devices keep the compact overlapping stack shown in the mobile
   Figma variant; no hover/open state is simulated. */
@media (hover: none), (pointer: coarse) {
  .stats-content--media-stack .stats-content__copy,
  .stats-content--media-stack .stats-content__media,
  .stats-content--media-stack .stats-content__media figure {
    transition: none;
  }
}

@media (max-width: 560px) {
  body.admin-bar .site-header { top: calc(46px + var(--gap-small)); }

  .site-header { padding-block: 0; }
  .site-header__inner { min-height: 5rem; padding-inline: var(--space-4); }

  .tag--large {
    min-height: 2.5rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-card-body);
  }

  .thumbnaill-card { min-height: 38.75rem; }
  .thumbnaill-card__information,
  .text-card { padding: var(--gap-medium); }
  .text-card--round { min-height: 21.125rem; }
  .buttons-groups { gap: var(--space-1); }
  .button { padding: var(--space-1) var(--space-2); font-size: var(--font-size-small); }
  .iframe-device:not(.iframe-device--mobile) { min-height: 22rem; padding: var(--space-1); border-radius: var(--radius-container); }
  .iframe-device__browser { border-radius: var(--radius-sm); }
  .iframe-device__browser-tab { min-height: 2.75rem; gap: var(--space-2); padding-inline: var(--space-2); }
  .iframe-device__browser-decorative { transform: scale(.72); transform-origin: left center; }

  .site-footer__card {
    grid-template-columns: 1fr;
    padding: var(--space-4) var(--space-3);
  }

  .site-footer__about {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .thumbnaill-card__picture::before,
  .thumbnaill-card__picture::after,
  .card-list--thumbnail .card-list__media::before,
  .card-list--thumbnail .card-list__card::after {
    transition: none;
  }

  [data-reveal],
  .reveal {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 900px) {
  .side-by-side.mobile-direction-change .side-by-side__grid { grid-template-columns: 1fr; }
  .side-by-side.mobile-direction-change .side-by-side__content,
  .side-by-side.mobile-direction-change .side-by-side__media { order: initial; }
  .side-by-side.mobile-direction-change.mobile-order-reverse .side-by-side__content { order: 2; }
  .side-by-side.mobile-direction-change.mobile-order-reverse .side-by-side__media { order: 1; }
  .side-by-side__media { width: min(100%, 32rem); margin-inline: auto; }
}