/* Mobile image sizing — prevent crop, overflow, and awkward thumbnails */

@media (max-width: 900px) {
  html,
  body {
    overflow-x: clip;
  }

  section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .cta {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  /* Homepage project cards */
  .old-grid {
    width: 100%;
    max-width: 100%;
  }

  .old-card {
    width: 100%;
    max-width: 100%;
    padding: 22px 16px;
    overflow: hidden;
  }

  .old-card::before {
    top: 22px;
    right: 16px;
  }

  .old-card:hover {
    transform: none;
    box-shadow: none;
  }

  .old-card:hover .old-card-device .device-frame.compact {
    transform: none;
  }

  .old-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-right: 28px;
  }

  .old-card h3 {
    font-size: clamp(17px, 4.6vw, 20px);
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .old-card time {
    white-space: normal;
    padding-right: 0;
    font-size: 11px;
  }

  .old-card .role,
  .old-card p.desc {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .old-card-device {
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
  }

  .old-card-device .device-frame.compact {
    width: 100%;
    max-width: 100%;
  }

  .old-card-device .device-screen {
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    display: block;
    overflow: hidden;
  }

  .old-card-device .device-screen img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  .device-frame.compact .device-chrome {
    min-width: 0;
  }

  .device-frame.compact .device-url {
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 700px) {
  /* Keep all media inside the viewport */
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  .device-frame,
  .device-figure,
  .device-showcase,
  .old-card-device,
  .visual-row,
  .visual-row-item,
  .visual-gallery,
  .desktop-showcase,
  .desktop-showcase-frame {
    max-width: 100%;
    min-width: 0;
  }

  /* Case study hero + inline device frames — show full screenshot, don't crop */
  .device-showcase .device-screen,
  .device-showcase .device-screen img {
    height: auto;
  }

  .device-showcase .device-screen img,
  .device-frame:not(.compact) .device-screen img {
    object-fit: contain;
    object-position: top center;
  }

  /* Stacked case study galleries */
  .visual-row {
    margin-top: 28px;
  }

  .visual-row-grid.visual-row-stack {
    gap: 28px;
    max-width: 100%;
  }

  .visual-row-item img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 12px;
  }

  .visual-gallery {
    padding: 16px 12px;
  }

  .visual-gallery-grid[data-count="2"],
  .visual-gallery-grid[data-count="3"],
  .visual-gallery-grid[data-count="4"],
  .visual-gallery-grid[data-count="5"],
  .visual-gallery-grid[data-count="6"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .visual-gallery-grid[data-count="3"] .visual-gallery-item:first-child,
  .visual-gallery-grid[data-count="5"] .visual-gallery-item:first-child {
    grid-row: auto;
    grid-column: auto;
  }

  .visual-gallery-thumb {
    min-height: 0;
    aspect-ratio: auto;
  }

  .visual-gallery-thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .visual-gallery-large .visual-gallery-thumb img {
    padding: 6px;
    max-height: min(85vw, 420px);
  }

  /* Premium desktop showcase blocks */
  .desktop-showcase-screen img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .flow-diagram svg {
    min-width: 0;
    width: 100%;
  }
}