/* ===== Projects Widget Styles ===== */
.projects-listing {
  width: 100%;

  .project-item {
    width: 100%;
    margin-bottom: 48px !important;
    overflow: hidden;
    background-color: var(--e-global-color-primary);
    border-radius: 10px;
  }

  /* == Layout == */
  .project-inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0 !important;
  }

  /* == Gallery Column == */
  .project-gallery-col {
    flex: 0 0 50%;
    max-width: 50%;

    .project-gallery {
      position: relative;
      width: 100%;
      height: auto;
    }

    .gallery-slides {
      position: relative;
      width: 100%;
      height: 87%;
      overflow: hidden;

      .gallery-slide {
        display: none;
        width: 100%;
        height: 100%;

        &.active {
          display: block;
        }

        img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
          object-position: center;
        }
      }
    }

    /* == Dots == */
    .gallery-dots {
      display: flex;
      justify-content: start;
      padding: 32px;

      .gallery-dot {
        border-radius: 50%;
        background-color: var(--e-global-color-text) !important;
        border: 1px solid var(--e-global-color-text);
        padding: 0;
        cursor: pointer;
        transition: all 0.2s ease-in-out;

        &.active {
          background-color: transparent !important;
          border-color: 1px solid var(--e-global-color-primary);
        }
      }
    }
  }

  /* == Content Column == */
  .project-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 32px min(96px, 5vw);

    .project-categories,
    .project-locations {
      margin-bottom: 6px;
    }

    .project-category,
    .project-location {
      font-size: 0.8em;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .project-title {
      margin: 6px 0;
    }

    .project-sub-heading {
      margin: 4px 0 12px;
    }
  }
}
/* ===== Projects Slider ===== */
.projects-slider {
  width: 100%;
  overflow: hidden; /* clips the strip */

  /* == Slide Track — flex strip, all slides side by side == */
  .slider-track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transition: transform 380ms ease;
    will-change: transform;

    .slider-slide {
      flex: 0 0 100%;
      min-width: 100%;
      display: flex;         /* column so children can fill track height */
      flex-direction: column;

      .project-item {
        flex: 1;             /* stretch to fill slide height */
        background-color: var(--e-global-color-primary);
        overflow: hidden;
        border-radius: 10px;

        .project-inner {
          display: flex;
          flex-direction: row;
          height: 100%;      /* fill project-item */
          gap: 0 !important;

          .project-gallery-col {
            flex: 1;

            .project-featured-image {
              width: 100%;
              height: 100%;

              img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
                object-position: center;
              }
            }
          }

          .project-content-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 32px min(96px, 5vw);
            gap: 16px;

            * {
              margin: 0 !important;
            }
          }
        }
      }
    }
  }

  /* == Fade variant — override strip with opacity stack == */
  &.gk-slider-fade {
    .slider-track {
      display: block;
      position: relative;
      transition: none;

      .slider-slide {
        display: none;
        flex: none;
        min-width: 0;

        &.active {
          display: block;
        }
      }
    }
  }

  /* == Slider Dots (half size of gallery dots) == */
  .slider-dots {
    display: flex;
    justify-content: center;
    padding: 16px 32px;
    gap: 8px;
    margin-top: 14px;

    .slider-dot {
      border-radius: 50%;
      background-color: var(--e-global-color-text);
      border: 1px solid var(--e-global-color-text);
      padding: 0;
      cursor: pointer;
      transition: all 0.2s ease-in-out;

      &.active {
        background-color: transparent;
        border-color: 
      }
    }
  }
}

/* ===== Tablet ===== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* == Project Listings == */
  .projects-listing {
    .project-item {
      margin-bottom: 32px !important;
    }
    .project-inner {
      flex-direction: column;
    }

    .project-gallery-col,
    .project-content-col {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
    }

    .project-content-col {
      padding: 32px;
    }
  }
  /* == Project Slider == */
  .projects-slider {
    .slider-track {
      .slider-slide {
        .project-item {
          .project-inner {
            flex-direction: column;
          }
        }
      }
    }
  }
}
/* ===== Mobile ===== */
@media only screen and (max-width: 767px) {
  /* == Project Listings == */
  .projects-listing {
    .project-item {
      margin-bottom: 32px !important;
    }
    .project-inner {
      flex-direction: column;
    }

    .project-gallery-col,
    .project-content-col {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
    }

    .project-content-col {
      padding: 16px;
    }
  }
  /* == Project Slider == */
  .projects-slider {
    .slider-track {
      .slider-slide {
        .project-item {
          .project-inner {
            flex-direction: column;
          }
        }
      }
    }
  }
}