/* ==========================================================================
   Researchers View
   Confined container, stable grid, aligned dropdowns, no jump on AJAX
   ========================================================================== */

/* Keep the view confined even if global .container is overridden */
.view-id-researchers.four-column-grid.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

@media (min-width: 576px) { .view-id-researchers.four-column-grid.container { max-width: 540px; } }
@media (min-width: 768px) { .view-id-researchers.four-column-grid.container { max-width: 720px; } }
@media (min-width: 992px) { .view-id-researchers.four-column-grid.container { max-width: 960px; } }
@media (min-width: 1200px){ .view-id-researchers.four-column-grid.container { max-width: 1140px; } }
@media (min-width: 1400px){ .view-id-researchers.four-column-grid.container { max-width: 1320px; } }

/* Stop horizontal blowout on mobile when native select opens */
.view-id-researchers {
  position: relative;
  overflow-x: hidden;
}

/* Grid stays consistent across refreshes */
.view-id-researchers.four-column-grid .view-content {
  display: grid;
  grid-auto-rows: auto;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 725px)  { .view-id-researchers.four-column-grid .view-content { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .view-id-researchers.four-column-grid .view-content { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1400px) { .view-id-researchers.four-column-grid .view-content { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* Smooth visual during AJAX refresh (no hard jump) */
.view-id-researchers .view-content { transition: opacity .2s ease-in-out; }
.view-id-researchers.ajax-loading .view-content { opacity: .5; }

/* ==========================================================================
   View Header Spacing
   ========================================================================== */
.view-id-researchers .view-header {
  margin-top: 60px;
  margin-bottom: 30px;
}

/* ==========================================================================
   Exposed Filters: perfect alignment and single row on desktop
   ========================================================================== */

.view-id-researchers .views-exposed-form {
  overflow: visible;              /* do not clip native menu */
  transform: none !important;     /* avoid mobile popup misplacement */
}

.view-id-researchers .views-exposed-form .form--inline {
  display: flex;
  align-items: flex-end;          /* align baselines */
  column-gap: 12px;
  row-gap: 8px;
  flex-wrap: wrap;                /* wrap on small screens only */
}

@media (min-width: 992px) {
  .view-id-researchers .views-exposed-form .form--inline { flex-wrap: nowrap; }
}

.view-id-researchers .views-exposed-form .form-item,
.view-id-researchers .views-exposed-form .form-item-parent-category {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: flex-end;
  margin: 0 !important;           /* remove stray margins like mb-2 */
  min-width: 0;                   /* allow shrinking in flex */
}

.view-id-researchers .views-exposed-form .form-item label {
  margin: 0 0 .25rem 0;
  line-height: 1.1;
}

/* Selects: remove duplicate arrow and align sizes */
.view-id-researchers .views-exposed-form select.form-select {
  background-image: none !important;   /* remove Bootstrap SVG arrow */
  width: auto;                          /* side by side at desktop */
  min-width: 260px;                     /* stable width on desktop */
  max-width: 100%;
  height: 60px;
  font-size: 24px;
  padding: 0.375rem 0.75rem;            /* tighter since no custom arrow */
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
}

/* Hide Apply since JS auto submits */
.view-id-researchers .views-exposed-form .form-actions {
  display: none !important;
}

/* Mobile stacking: full width, smaller font to avoid burst */
@media (max-width: 767.98px) {
  .view-id-researchers .views-exposed-form .form--inline {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .view-id-researchers .views-exposed-form .form-item,
  .view-id-researchers .views-exposed-form .form-actions {
    width: 100%;
  }
  .view-id-researchers .views-exposed-form select.form-select {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    height: 52px;
    font-size: 16px;  /* >=16 avoids iOS zoom */
    padding: 0.375rem 0.75rem;
  }
}

/* Tablet: keep inline but allow natural wrap */
@media (min-width: 768px) and (max-width: 991.98px) {
  .view-id-researchers .views-exposed-form .form--inline {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .view-id-researchers .views-exposed-form .form-item {
    flex: 0 1 auto;
  }
}

/* ==========================================================================
   Researcher Card Image Normalization (fixed 300x325)
   ========================================================================== */

.view-id-researchers .views-field-field-faculty-image-link a,
.view-id-researchers .views-field-field-faculty-image a {
  display: block;
  width: 300px;
  height: 325px;
  overflow: hidden;       /* crop overflow */
  margin: 0;              /* left-align image with text */
}

.view-id-researchers .views-field-field-faculty-image-link img,
.view-id-researchers .views-field-field-faculty-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fill the frame without distortion */
  object-position: center; /* center focal point */
  display: block;
}

/* Keep consistent spacing and LEFT-aligned text */
.view-id-researchers .views-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* left align everything in card */
}

/* Text alignment for all fields */
.view-id-researchers .views-field-title,
.view-id-researchers .views-field-field-faculty-title,
.view-id-researchers .views-field-field-affiliation {
  text-align: left;
  width: 100%;
}