/**
 * @file
 * Views display styles for Aotearoa theme.
 *
 * Card utility classes (.card-base, .has-watermark) are added via
 * aotearoa_preprocess_views_view_unformatted() in aotearoa.theme.
 */

/* ==========================================================================
   View Filters
   ========================================================================== */

.view-filters {
  padding-bottom: var(--sp4);

  > form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp2);
    align-items: flex-end;

    @media (width < 768px) {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .form-type-multiselect-dropdown > label {
      font-weight: var(--h1-weight);
    }

    .multiselect-dropdown {
      border: 1px solid var(--neutral-800);
      border-radius: var(--radius-lg);
      padding: var(--sp1);
      margin-top: var(--sp1);
    }
  }
}

/* Collapsible filters toggle (mobile only) */
.view-filters__toggle {
  display: none;
  width: 100%;
  padding: var(--sp2);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--h1-weight);
  justify-content: space-between;
  align-items: center;

  @media (width < 768px) {
    display: flex;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }
}

.view-filters__toggle-icon {
  width: 1rem;
  height: 1rem;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 0.2s ease;
  }

  &::before {
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  &::after {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

.view-filters__toggle[aria-expanded="true"] .view-filters__toggle-icon::after {
  transform: translateX(-50%) rotate(90deg);
}

.view-filters__content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp2);
  align-items: flex-end;

  @media (width < 768px) {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--sp2);

    &.is-open {
      display: flex;
    }
  }
}

/* ==========================================================================
   View Content
   ========================================================================== */

.view-content {
  padding-block: var(--sp4);
}

/* ==========================================================================
   View Cards - Size Constraints Only
   Base card styling comes from .card-base utility via preprocess.
   ========================================================================== */

.view-content .views-showcase-block-row {
  min-width: 350px;
  max-width: 400px;

  @media (width > 992px) {
    min-width: 400px;
  }

  @media (width < 480px) {
    min-width: 300px;
  }
}

/* ==========================================================================
   Homepage Showcase Block (Blue Background)
   ========================================================================== */

.view-display-id-all_showcases {
  position: relative;

  .view-content {
    position: relative;
    z-index: 1;
  }

  .sidescroller-nav {
    position: relative;
    z-index: 1;
    max-width: var(--container-width);
    margin-inline: auto;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 85vw;
    max-width: var(--container-max-pixel);
    height: 60%;
    background-color: rgba(6, 120, 190, 0.7);
    border-radius: var(--radius-xl);
    z-index: 0;
  }
}

/* ==========================================================================
   Company Showcase (Full Bleed Scroll)
   ========================================================================== */

.node--type-company .view--company-showcase .view-content {
  display: flex;
  gap: var(--sp3);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 7%;
  padding-top: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.view-taxonomy-term .views-row {
  border-bottom: 1px solid var(--neutral-200);
}

.node--type-company .layout:not(:has(.view-content)):not(:has(.field)) {
  display: none;
}

.views-view-responsive-grid__item-inner {
  height: 100%;
}

.multiselect-dropdown__dialog {
  z-index: 20;
}