/* ==========================================================================
   Views Exposed Filters - Front Page Row Layout (Forced Overrides)
   ========================================================================== */

/* Target the exposed filter block and form containers directly */
.block-views-exposed-filter-block,
.views-exposed-form {
  width: 100%;
}

/* Force the form content container into a flex layout */
.views-exposed-form form,
.views-exposed-form .form--inline,
.views-exposed-form .clearfix {
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
}

/* Non-Mobile (Desktop/Tablet): Arrange in a clean row */
@media (min-width: 768px) {
  .views-exposed-form form,
  .views-exposed-form .form--inline,
  .views-exposed-form .clearfix {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
  }

  /* Target every individual filter item and set it to 30ch */
  .views-exposed-form .form-item,
  .views-exposed-form .js-form-type-textfield,
  .views-exposed-form .js-form-type-select,
  .views-exposed-form .js-form-item {
    width: 30ch !important;
    max-width: 100% !important;
    flex: 0 0 30ch !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Make sure select lists and inputs fill their 30ch container */
  .views-exposed-form .form-item input,
  .views-exposed-form .form-item select {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Keep form actions (submit/reset buttons) aligned nicely */
  .views-exposed-form .form-actions {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}