/* Homepage · What Murmur does
   Responsive geometry kept separate from the historical home stylesheet. */

.category__mobile-break {
  display: none;
}

@media (min-width: 621px) and (max-width: 1023px) {
  .category-section .category-gallery {
    --category-grid-gap: clamp(22px, 3.2vw, 34px);
    margin-top: clamp(72px, 8vw, 94px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--category-grid-gap);
    row-gap: clamp(52px, 6vw, 64px);
  }

  .category-section .category-card:last-child {
    grid-column: 1 / -1;
    width: calc((100% - var(--category-grid-gap)) / 2);
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .category__mobile-break {
    display: initial;
  }

  .category-section .category-card {
    width: 100%;
    max-width: 430px;
    justify-self: center;
  }

  /* Let the product windows hug their real content on phones. The desktop
     percentage-based minimums otherwise turn into large empty white areas. */
  .category-section .control-ai-shell,
  .category-section .meaning-match-shell,
  .category-section .experience-human-mini,
  .category-section .experience-agent-page {
    min-height: 0;
  }

  .category-section .glass-stage--control {
    height: 390px;
    aspect-ratio: auto;
  }

  .category-section .glass-stage--meaning {
    height: 400px;
    aspect-ratio: auto;
  }

  .category-section .glass-stage--experience {
    height: 350px;
    aspect-ratio: auto;
  }
}

@media (max-width: 430px) {
  .category-section .card-logic,
  .category-section .control-ai-head,
  .category-section .control-ai-label,
  .category-section .control-ai-approved__head,
  .category-section .meaning-match-head,
  .category-section .meaning-match-context span,
  .category-section .meaning-match-result__head {
    font-size: 6px;
  }

  .category-section .meaning-match-labels {
    font-size: 5px;
  }

  .category-section .meaning-match-row div strong {
    font-size: 7px;
  }

  .category-section .meaning-match-result > p {
    font-size: 10px;
  }
}