/**
 * StyleyeS v1.8 — Responsive Overrides
 * Mobile landscape fixes and layout safeguards
 */

@media screen and (orientation: landscape) and (max-height: 500px) {
  .input-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    align-items: start;
    gap: 1rem;
  }

  .input-section {
    flex: 1;
    min-width: 0;
    margin-bottom: 0.75rem;
  }

  .input-header {
    gap: 0.5rem;
  }

  .mode-btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.7rem;
  }

  .model-dropdown-trigger {
    max-width: none;
    width: 100%;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .aspect-ratio-slider-container {
    padding: 0.75rem 1rem 1.25rem;
    gap: 0.5rem;
  }

  .aspect-ratio-categories {
    padding: 0.125rem;
  }

  .aspect-ratio-categories .category-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }

  .aspect-ratio-preview {
    width: 48px;
    height: 48px;
  }

  header {
    margin-bottom: 1rem;
  }

  .logo-row {
    transform: scale(0.85);
    margin-bottom: 0.5rem;
  }

  .tag {
    font-size: 0.95rem;
  }
}

@media screen and (max-width: 932px) and (orientation: landscape) {
  body {
    overflow-x: hidden;
  }

  .app {
    min-width: unset;
    width: 100%;
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
  }
}