/* ==========================================================================
   media-styles.css — Responsive breakpoints (desktop-first)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1024px — Small laptops / large tablets
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #input-form-wrapper,
  #results-wrapper {
    max-width: 90%;
  }

  #auth-form-wrapper {
    max-width: 90%;
  }
}


/* --------------------------------------------------------------------------
   768px — Tablets / large phones
   Switch form rows to 2-column wrap layout
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #input-form-wrapper,
  #auth-form-wrapper,
  #results-wrapper {
    max-width: 100%;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .form-list-item {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Wrap into 2-column grid */
  .form-row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* All flex items: 2-column layout */
  .form-select-half,
  #select-ai-div,
  #select-model-div,
  #model-options-toggle,
  #extra-filters-toggle,
  #priority-div,
  #max-tokens-div,
  #temperature-div,
  #extended-thinking-div,
  #prebuilt-checkbox-div {
    flex: 1 1 calc(50% - 0.375rem);
    min-width: 0;
  }

  /* Reset the negative margin on prebuilt checkbox */
  #prebuilt-checkbox-div {
    margin-left: 0;
  }

  /* Toggle wrappers: expand to full width of their cell */
  #model-options-toggle .toggle-wrapper,
  #extra-filters-toggle .toggle-wrapper {
    width: 100%;
    min-width: 0;
  }

  /* Extra filters: 3 checkboxes per row */
  #extra-filters-list-item .form-select-half {
    flex: 1 1 calc(33.333% - 0.5rem);
  }

  /* Results section padding */
  .results-summary-section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .results-listings-section,
  .results-alternatives-section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .results-error-message {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .results-notes-section {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
}


/* --------------------------------------------------------------------------
   480px — Small phones
   Switch to fully stacked single-column layout
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  #input-form-wrapper,
  #auth-form-wrapper,
  #results-wrapper {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .form-list-item {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* All form items go full-width */
  .form-select-half,
  #select-ai-div,
  #select-model-div,
  #model-options-toggle,
  #extra-filters-toggle,
  #priority-div,
  #max-tokens-div,
  #temperature-div,
  #extended-thinking-div,
  #prebuilt-checkbox-div {
    flex: 1 1 100%;
  }

  /* Extra filters: keep 2 checkboxes per row on small phones */
  #extra-filters-list-item .form-select-half {
    flex: 1 1 calc(50% - 0.375rem);
  }

  /* Results sections */
  .results-summary-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .results-listings-section,
  .results-alternatives-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .results-error-message {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .results-notes-section {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .listing-badge {
    font-size: 0.7rem;
  }

  .listing-card__link {
    font-size: 0.78rem;
  }
}