/* ==========================================================================
   Layout Structure
========================================================================== */

/* Force the page to take full height */
html, body {
  height: 100%;
}

/* Layout builder content wrapper */
.layout-builder-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Main site content area */
.main-content {
  flex: 1 0 auto;
}

/* Footer */
footer {
  flex-shrink: 0;
}

/* Optional: If you have a <main> tag you want full height */
main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
}

/* ==========================================================================
   Reusable Grid System for Drupal 11 Views with Bootstrap 5
   Usage: Add 'four-column-grid' or 'three-column-grid' class to view format settings
   ========================================================================== */

/* Base styles for the four-column grid container */
.four-column-grid .view-content {
  display: grid;
  grid-auto-rows: auto;
  gap: 30px;
  justify-items: start;
}

/* Individual grid items */
.four-column-grid .view-content .views-row {
  margin-bottom: 0; /* Remove default margin since we're using grid gap */
}

/* Mobile First - Single Column (Default) */
.four-column-grid .view-content {
  grid-template-columns: 1fr;
}

/* Extra Small Devices, Phones - Starting from 724px */
@media only screen and (min-width: 724px) {
  .four-column-grid .view-content {
    grid-template-columns: 1fr;
  }
}

/* Small Devices, Tablets - Two Columns from 725px */
@media only screen and (min-width: 725px) {
  .four-column-grid .view-content {
    grid-template-columns: 1fr 1fr;
  }
}

/* Medium Devices, Tablets - Three Columns from 1050px */
@media only screen and (min-width: 1050px) {
  .four-column-grid .view-content {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Large Devices, Desktops - Four Columns from 1400px */
@media only screen and (min-width: 1400px) {
  .four-column-grid .view-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* XLarge Devices, Wide Screens - Maintain Four Columns */
@media only screen and (min-width: 1600px) {
  .four-column-grid .view-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* ==========================================================================
   Drupal 11 Views Using CSS Grid - Three Column Layout with Bootstrap 5
   ========================================================================== */

/* Base styles for the three-column grid container */
.three-column-grid .view-content {
  display: grid;
  grid-auto-rows: auto;
  gap: 30px;
  justify-items: start;
}

/* Individual grid items */
.three-column-grid .view-content .views-row {
  margin-bottom: 0;
}

/* Mobile First - Single Column (Default) */
.three-column-grid .view-content {
  grid-template-columns: 1fr;
}

/* Extra Small Devices, Phones - Single Column from 600px */
@media only screen and (min-width: 600px) {
  .three-column-grid .view-content {
    grid-template-columns: 1fr;
  }
}

/* Small Devices, Tablets - Two Columns from 750px */
@media only screen and (min-width: 750px) {
  .three-column-grid .view-content {
    grid-template-columns: 1fr 1fr;
  }
}

/* Medium Devices and up - Three Columns from 1200px */
@media only screen and (min-width: 1200px) {
  .three-column-grid .view-content {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ==========================================================================
   View Header Styling
   ========================================================================== */

/* View header spacing and typography */
.view-header {
  margin-top: 60px;
}

.view-header h1 {
  text-transform: uppercase;
  margin-bottom: 0;
  font-family: 'League Gothic', sans-serif;
}

/* Add breathing room between view header and content */
.view-content {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* ==========================================================================
   Exposed Filters Styling for Views with Grid Layout
   Note: Update form selectors as needed for specific views
   ========================================================================== */

/* General exposed form styling for grid layout views */
.four-column-grid .views-exposed-form,
.three-column-grid .views-exposed-form,
form.views-exposed-form[data-drupal-selector*="researchers"] {
  margin-bottom: 40px;
  margin-top: 0;
}

/* Bootstrap 5 inline form layout - replaces Bootstrap 3 form-inline */
.four-column-grid .views-exposed-form .form--inline,
.three-column-grid .views-exposed-form .form--inline,
.views-exposed-form .form--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.four-column-grid .views-exposed-form .form--inline .form-item,
.three-column-grid .views-exposed-form .form--inline .form-item,
.views-exposed-form .form--inline .form-item {
  margin-bottom: 0;
  margin-right: 5px;
  flex: 0 0 auto;
}

.four-column-grid .views-exposed-form .form--inline .form-actions,
.three-column-grid .views-exposed-form .form--inline .form-actions,
.views-exposed-form .form--inline .form-actions {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* Form control styling for grid layout exposed filters */
.four-column-grid .views-exposed-form .form-control,
.four-column-grid .views-exposed-form .form-select,
.three-column-grid .views-exposed-form .form-control,
.three-column-grid .views-exposed-form .form-select,
form.views-exposed-form[data-drupal-selector*="researchers"] .form-control,
form.views-exposed-form[data-drupal-selector*="researchers"] .form-select {
  height: 60px;
  font-size: 24px;
}

/* Bootstrap 5 specific select adjustments */
.four-column-grid .views-exposed-form select.form-select,
.three-column-grid .views-exposed-form select.form-select,
form.views-exposed-form[data-drupal-selector*="researchers"] select.form-select {
  height: 60px;
  font-size: 24px;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
}

/* Submit button styling for exposed filters */
.four-column-grid .views-exposed-form input[type="submit"],
.three-column-grid .views-exposed-form input[type="submit"],
form.views-exposed-form[data-drupal-selector*="researchers"] input[type="submit"],
input#edit-submit-researchers {
  font-size: 24px;
  height: 60px;
}

/* ==========================================================================
   General View Content Adjustments
   ========================================================================== */

/* Maintain compatibility with existing item classes if present */
.four-column-grid .view-content .item,
.three-column-grid .view-content .item {
  margin-bottom: 0; /* Use grid gap instead */
}

/* Ensure proper spacing for views-row elements */
.four-column-grid .views-row,
.three-column-grid .views-row {
  width: 100%;
}

/* ==========================================================================
   Layout Builder Integration
   ========================================================================== */

/* Ensure the layout builder block containers don't interfere */
.layout__region .four-column-grid,
.layout__region .three-column-grid {
  width: 100%;
}

/* Container adjustments for Bootstrap 5 */
.four-column-grid.container,
.three-column-grid.container {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* ==========================================================================
   Responsive Image and Content Adjustments
   ========================================================================== */

/* Ensure images are responsive within grid items */
.four-column-grid .views-row img,
.three-column-grid .views-row img {
  max-width: 100%;
  height: auto;
}

/* Faculty/researcher card styling consistency */
.four-column-grid .views-field,
.three-column-grid .views-field {
  margin-bottom: 0.5rem;
}

.four-column-grid .views-field:last-child,
.three-column-grid .views-field:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Grid Item Title and Member Name Styling
   ========================================================================== */

/* Member name styling for grid layout views */
.four-column-grid .views-field-field-other-members-member-name,
.three-column-grid .views-field-field-other-members-member-name {
  font-size: 1.5em;
  font-family: 'Milo', sans-serif;
  margin-top: 10px;
  line-height: 1em;
}

.four-column-grid .views-field-field-other-members-member-name a,
.three-column-grid .views-field-field-other-members-member-name a {
  text-decoration: none;
}

/* Title field styling for grid layout views */
.four-column-grid .views-field-title,
.three-column-grid .views-field-title {
  font-size: 1.5em;
  font-family: 'Milo', sans-serif;
  margin-top: 10px;
  line-height: 1em;
}

/* Remove underline from title links */
.four-column-grid .views-field-title a,
.three-column-grid .views-field-title a {
  text-decoration: none;
}

/* Optional: Add hover effect for better UX */
.four-column-grid .views-field-title a:hover,
.three-column-grid .views-field-title a:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* ==========================================================================
   Advisory Board Specific Styling Overrides
   ========================================================================== */

/* Override title styling for advisory board view only */
.four-column-grid.view-advisory-board .views-field-title,
.three-column-grid.view-advisory-board .views-field-title {
  font-size: 1em;
}

/* Company field styling for advisory board view only */
.four-column-grid.view-advisory-board .views-field-field-members-company,
.three-column-grid.view-advisory-board .views-field-field-members-company {
  font-size: 1em;
  margin-top: 5px;
  line-height: 1.2em;
}

/* ==========================================================================
   Form Control Focus Override
   ========================================================================== */

/* Custom focus styling for form controls - Bootstrap 5 override */
.form-control:focus,
.form-select:focus {
  border-color: #c8102e;
  outline: 0;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(200, 16, 46, 0.6);
}

/* Ensure focus styles work with grid layout exposed filters */
.four-column-grid .views-exposed-form .form-control:focus,
.four-column-grid .views-exposed-form .form-select:focus,
.three-column-grid .views-exposed-form .form-control:focus,
.three-column-grid .views-exposed-form .form-select:focus {
  border-color: #c8102e;
  outline: 0;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(200, 16, 46, 0.6);
}