/* CSS for Works Portfolio Grid layout */

.acf-layout-works-portfolio {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
}

/* Ambient Glow Gradients (W-524px, H-524px) */
.works-portfolio-glow-tr,
.works-portfolio-glow-tl {
  position: absolute;
  width: 524px;
  height: 524px;
  border-radius: 50%;
  filter: blur(150px);
  -webkit-filter: blur(150px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.works-portfolio-glow-tr {
  top: -262px;
  right: -262px;
}

.works-portfolio-glow-tl {
  top: -262px;
  left: -262px;
}

.works-portfolio-header-row {
  margin-bottom: 50px;
}

/* Controls: Search and Filters Row */
.works-portfolio-controls {
  margin-bottom: 40px;
  z-index: 5;
  position: relative;
}

/* Search Box */
.works-search-box {
  position: relative;
  width: 100%;
}

.works-search-field {
  width: 100%;
  padding: 13px 15px;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
  transition: border-color 0.3s ease;
}

.works-search-field:focus {
  border-color: #ed9d21;
}

.works-search-icon-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Filter Bar Tabs */
.works-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.works-filter-tab {
  background-color: #1a1a1a;
  border: 1px solid transparent;
  color: #ffffff;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.works-filter-tab:hover {
  background-color: #262626;
  opacity: 1;
}

.works-filter-tab.active {
  border-color: #ffffff;
  background-color: #1a1a1a;
  opacity: 1;
}

/* Cards Grid */
.works-portfolio-item-col {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.works-portfolio-item-col.hidden-item,
.works-portfolio-item-col.hidden-load-more {
  display: none !important;
}

/* Copy of work-card styling for encapsulation */
.work-card-link-wrapper {
  text-decoration: none;
  display: block;
  height: 100%;
  color: inherit;
}

.work-card-link-wrapper:hover {
  text-decoration: none;
  color: inherit;
}

.work-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 30px;
  overflow: hidden;
}

.work-card-image-wrapper {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  background-color: #111111;
}

.work-card-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.work-card-link-wrapper:hover .work-card-img,
.work-card:hover .work-card-img {
  transform: scale(1.05);
}

.work-card-content {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.work-card-heading {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Footer & View More button */
.works-portfolio-footer-row {
  position: relative;
  z-index: 5;
  margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .works-filter-bar {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .works-portfolio-header-row {
    margin-bottom: 35px;
  }

  .work-card-image-wrapper,
  .work-card-img {
    height: 250px;
  }

  .works-filter-bar {
    gap: 8px;
  }

  .works-filter-tab {
    padding: 8px 16px;
    font-size: 13px;
  }
}