.snaploader-project-portfolio-module {
  --snaploader-project-portfolio-filter-gap: 12px;
  --snaploader-project-portfolio-filters-top: 0px;
  --snaploader-project-portfolio-filters-height: 0px;
  /* --snaploader-project-portfolio-arrow-icon: '/wp-content/themes/snaploader/images/icons/arrow-right-navy.svg'; */
  max-width: 100%;
  min-width: 0;
  position: relative;

  &.filters-open {
    .snaploader-project-portfolio-filters-toggle-icon {
      @media (max-width: 767px) {
        transform: rotate(180deg);
      }
    }

    .et_pb_portfolio_filters {
      @media (max-width: 767px) {
        display: block;
      }
    }
  }

  .snaploader-project-portfolio-item-hidden {
    display: none !important;
  }

  .snaploader-project-portfolio-filters-toggle {
    appearance: none;
    background: transparent;
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 0;
    color: var(--gcid-primary-color);
    font: inherit;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: 18px;
    margin-bottom: 16px;
    cursor: pointer;

    @media (max-width: 767px) {
      display: flex;
    }
  }

  .snaploader-project-portfolio-filters-toggle-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: center / contain no-repeat var(--snaploader-project-portfolio-chevron-icon);
    transition: transform 0.2s ease;
  }

  .et_pb_portfolio_filters {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow: hidden;

    @media (max-width: 767px) {
      display: none;
      padding-right: 0;
      margin-bottom: 20px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(8, 31, 61, 0.08);
      padding: 10px;
      position: absolute !important;
      top: 64px;
      left: 0;
      right: -1px;
      overflow: visible;
    }

    &::after {
      @media (max-width: 767px) {
        display: none;
      }
    }

    > ul {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-around !important;
      min-width: 0;
      max-width: 100%;
      width: 100%;
      gap: var(--snaploader-project-portfolio-filter-gap);
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 4px;
      touch-action: pan-x;

      &:after {
        display: none;
      }

      @media (max-width: 767px) {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: visible;
        padding-bottom: 0;
      }

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

  .et_pb_portfolio_filter {
    flex: 0 0 auto;

    @media (max-width: 767px) {
      width: 100% !important;
      border-top: none !important;
    }

    > a {
      white-space: nowrap;

      @media (max-width: 767px) {
        display: block;
        width: 100%;
        padding: 12px 8px;
        text-align: center;
        font-size: 18px;
      }

      @media (max-width: 420px) {
        font-size: 16px;
        padding: 12px 4px;
      }
    }
  }

  .et_pb_posts {
    .et_pb_portfolio_item {
      --snaploader-project-portfolio-stagger-index: 0;
      --snaploader-project-portfolio-card-inset: 32px;
      --snaploader-project-portfolio-title-hidden-offset: calc(100% + var(--snaploader-project-portfolio-card-inset));

      border-radius: 16px;
      overflow: hidden;
      height: 450px;
      max-height: 100vh;
      object-fit: cover;
      position: relative;

      &.active {
        animation: none;
      }

      .snaploader-project-portfolio-observer-ready & {
        opacity: 0;
      }

      &.snaploader-project-portfolio-item-visible {
        opacity: 1;
        animation: fadeLeft 1s ease-in-out 1 both;
        animation-delay: calc(var(--snaploader-project-portfolio-stagger-index) * 0.05s);
      }

      a,
      .et_portfolio_image,
      .et_portfolio_image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .et_portfolio_image:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0.23deg, #000000 -6.4%, transparent 51.68%);
        background-blend-mode: multiply;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .35s var(--cubic-bezier);
      }

      .snaploader-project-title-group {
        position: absolute;
        bottom: var(--snaploader-project-portfolio-card-inset);
        left: var(--snaploader-project-portfolio-card-inset);
        right: var(--snaploader-project-portfolio-card-inset);
        pointer-events: none;
        opacity: 0;
        transform: translateY(var(--snaploader-project-portfolio-title-hidden-offset));
        transition:
          opacity 0.25s var(--cubic-bezier),
          transform 0.35s var(--cubic-bezier);
        z-index: 2;
      }

      .snaploader-project-title-group .et_pb_module_header,
      .snaploader-project-title-group .et_pb_module_header a {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .snaploader-project-types {
        position: absolute;
        top: -64px;
        right: var(--snaploader-project-portfolio-card-inset);
        transition: top .35s var(--cubic-bezier);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        max-width: calc(100% - (var(--snaploader-project-portfolio-card-inset) * 2));
        z-index: 2;
      }

      .snaploader-project-type {
        background: #ffffff;
        padding: 8px 16px;
        border-radius: 50px;
        color: var(--gcid-primary-color);
      }

      .snaploader-project-address {
        font-size: 24px;
        line-height: 32px;
        overflow-wrap: anywhere;
      }
    }
  }

  .et_pb_portfolio_filters {
    width: min(100%, 100vw);
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;

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

    &::after {
      display: none !important;
    }

    > ul {
      display: inline-flex !important;
      width: max-content !important;
      min-width: 100%;
      max-width: none !important;
      align-items: center;
      flex-wrap: nowrap !important;
      overflow: visible !important;
    }
  }

  &.is-filter-overflowing {
    .et_pb_portfolio_filters > ul {
      justify-content: flex-start !important;
      padding-right: 30px;
    }

    &::after {
      content: "" !important;
      display: block !important;
      visibility: visible !important;
      position: absolute !important;
      top: var(--snaploader-project-portfolio-filters-top);
      right: -1px;
      width: 56px !important;
      height: var(--snaploader-project-portfolio-filters-height) !important;
      transform: none;
      background-image: var(--snaploader-project-portfolio-arrow-icon), linear-gradient(90deg, rgba(242, 244, 245, 0) 0%, #f2f4f5 58%);
      background-position: calc(100% - 4px) 50%, left top;
      background-repeat: no-repeat, no-repeat;
      background-size: 18px 18px, 100% 100%;
      pointer-events: none;
      opacity: 1;
      z-index: 2;
      transition: opacity 0.2s ease;
    }
  }

  &.is-filter-overflow-start {
    .et_pb_portfolio_filters > ul {
      padding-left: 30px;
    }

    &::before {
      content: "" !important;
      display: block !important;
      visibility: visible !important;
      position: absolute !important;
      top: var(--snaploader-project-portfolio-filters-top);
      left: -1px;
      width: 56px !important;
      height: var(--snaploader-project-portfolio-filters-height) !important;
      transform: none;
      background-image: var(--snaploader-project-portfolio-arrow-icon-left), linear-gradient(270deg, rgba(242, 244, 245, 0) 0%, #f2f4f5 58%);
      background-position: 4px 50%, right top;
      background-repeat: no-repeat, no-repeat;
      background-size: 18px 18px, 100% 100%;
      pointer-events: none;
      opacity: 1;
      z-index: 2;
      transition: opacity 0.2s ease;
    }
  }

  &.is-filter-overflow-end::after {
    opacity: 0;
  }

  @media (max-width: 767px) {
    .et_pb_posts .et_pb_portfolio_item {
      --snaploader-project-portfolio-card-inset: 24px;
    }

    .et_pb_portfolio_filters {
      width: 100%;
      max-width: 100%;
      overflow: visible !important;

      > ul {
        display: flex !important;
        width: 100% !important;
        min-width: 0;
        max-width: 100% !important;
        flex-direction: column;
        align-items: stretch;
        overflow: visible !important;
      }
    }

    &::after {
      display: none !important;
    }
  }
}

.snaploader-project-portfolio-module .et_pb_portfolio_item:hover .snaploader-project-title-group,
.snaploader-project-portfolio-module .et_pb_portfolio_item:focus-within .snaploader-project-title-group,
.snaploader-project-portfolio-module .et_pb_portfolio_item:active .snaploader-project-title-group {
  opacity: 1;
  transform: translateY(0);
}

.snaploader-project-portfolio-module .et_pb_portfolio_item:hover .snaploader-project-types,
.snaploader-project-portfolio-module .et_pb_portfolio_item:focus-within .snaploader-project-types,
.snaploader-project-portfolio-module .et_pb_portfolio_item:active .snaploader-project-types {
  top: var(--snaploader-project-portfolio-card-inset);
}

.snaploader-project-portfolio-module .et_pb_portfolio_item:hover .et_portfolio_image::after,
.snaploader-project-portfolio-module .et_pb_portfolio_item:focus-within .et_portfolio_image::after,
.snaploader-project-portfolio-module .et_pb_portfolio_item:active .et_portfolio_image::after {
  transform: scaleY(1);
}