/* Shared responsive helpers. Legacy responsive rules remain in their original files. */
@media (max-width: 1024px) {
  .cgl-grid-4,
  .cgl-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cgl-split {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .cgl-page {
    padding-inline: var(--cgl-space-4);
  }

  .cgl-grid-4,
  .cgl-grid-3,
  .cgl-grid-2 {
    grid-template-columns: 1fr;
  }

  .cgl-modal {
    max-height: 92vh;
    border-radius: var(--cgl-radius-lg);
  }

  .cgl-button {
    width: 100%;
  }
}