/* Minimal styles for server-side filter buttons to look like previous buttons */
/* Services vertical tabs */
.services-tabs-wrap { display:flex; gap:24px; }
.services-tabs-left { width: 260px; flex: 0 0 260px; }
.services-tabs-right { flex: 1 1 auto; min-height: 300px; }

/* Hide mobile select on desktop */
.svc-tabs-select, .svc-tabs-select-label { display:none; }

/* Vertical tabs (light content background) */
.svc-tabs { list-style:none; margin:0; padding:0; border-right:2px solid #eee; }
.svc-tabs li { margin:0; }
.svc-tabs a { display:block; padding:12px 14px; color:#666; text-decoration:none; letter-spacing:2px; text-transform:uppercase; transition:color .15s, font-weight .15s, background-color .15s; }
.svc-tabs a:hover { color:#111; font-weight:500; background:#f8f8f8; }
.svc-tabs a.active { color:#111; font-weight:600; background:#f0f0f0; border-left:3px solid #111; }
.services-tabs-left { background:#fff; border:1px solid #eee; border-radius:4px; }
.services-tabs-right { background:#fff; border:1px solid #eee; border-radius:4px; padding:18px; }


/* Pane */
.svc-pane { display:none; }
.svc-pane-illustration { text-align:center; margin-top:18px; }
.svc-pane-illustration img { max-width:100%; height:auto; display:inline-block; }

.svc-pane.active { display:block; }
.svc-pane-title { letter-spacing:3px; text-transform:uppercase; margin-top:0; }
.svc-pane-body h4 { margin-top:18px; }

/* Responsive: mobile shows dropdown, tabs collapse */
@media (max-width: 767px) {
  .services-tabs-wrap { flex-direction:column; }
  .services-tabs-left { width:auto; flex: none; }
  .svc-tabs { display:none; }
  .svc-tabs-select, .svc-tabs-select-label { display:block; width:100%; }
  .svc-tabs-select { margin-bottom:14px; padding:8px 10px; }
}

/* removed old filter-btn styles; using chips */

/**
 * Filterable Services Section Styles
 * - Sticky filter navigation
 * - Card animations
 * - Search functionality
 */
/* CSS Grid layout for services */
#services-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width: 991px) { #services-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575px) { #services-grid { grid-template-columns:1fr; } }
/* Ensure theme floats/widths don't shrink grid items */
#services-grid .work-item { width: auto !important; float: none !important; }
#services-grid .work-item > a, #services-grid .work-image img { width: 100%; height: auto; display: block; }


/* Chips */
.filter-chips { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 24px; }
.services-filter-nav .filter-chips { justify-content:center; }
.services-filter-nav .chip { padding:8px 14px; border-radius:16px; }

.filter-chips .chip { display:inline-block; padding:6px 12px; border:1px solid #ddd; border-radius:14px; font-size:13px; color:#444; text-decoration:none; }
.filter-chips .chip.on { background:#222; color:#fff; border-color:#222; }
.chip.small { padding:2px 8px; font-size:11px; border-radius:10px; border-color:#eee; }
.work-tags { margin:6px 0 4px; display:flex; flex-wrap:wrap; gap:6px; }

.filter-chips.highlights .chip { position:relative; cursor:default; }
.filter-chips.highlights .chip-tip { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 8px); min-width:240px; max-width:360px; background:#111; color:#fff; padding:8px 10px; border-radius:6px; font-size:12px; line-height:1.4; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.filter-chips.highlights .chip:hover .chip-tip, .filter-chips.highlights .chip:focus .chip-tip { opacity:1; }



/* Sticky Filter Navigation */
.services-filter-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e0e0e0;
  padding: 15px 0;
  margin-bottom: 40px;
  position: sticky;
  top: 70px; /* Below main navigation */
  z-index: 100;
  transition: all 0.3s ease;
}

.services-filter-nav.scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.filter-controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-buttons {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-btn {
  background: transparent;
  border: none;
  color: #666;
  padding: 12px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  text-decoration: none;
  display: inline-block;
}

.filter-btn:hover {
  color: #2E5BBA;
  background: rgba(46, 91, 186, 0.05);
}

.filter-btn.active {
  color: #2E5BBA;
  background: rgba(46, 91, 186, 0.1);
}

/* Hide search box */
.search-box {
  display: none;
}

/* Service Cards */
.service-card {
  /* transition: all 0.4s ease; */ /* Disabled to prevent fade issues */
  transform: scale(1);
  opacity: 1;
  display: block !important; /* Ensure cards are always visible */
}

.service-card.hidden {
  transform: scale(0.8);
  opacity: 0 !important;
  pointer-events: none;
  display: none !important;
  visibility: hidden !important;
}

/* Remove force-visibility overrides to allow theme CSS and JS to control layout and hover overlays */
#services-grid .service-card { }
.service-card { }
#services-grid .service-card.hidden { display: none; }

/* Let theme's style.css drive layout and hover overlays */
#services-grid .work-image { position: relative; overflow: hidden; }
#services-grid .work-image img { width: 100%; height: auto; display: block; }
/* No extra caption padding; theme uses absolute positioning for overlays */

/* Disabled animations to prevent fade issues */
/*
.service-card.filtering-out {
  transform: scale(0.9);
  opacity: 0.3;
}

.service-card.filtering-in {
  transform: scale(1.05);
  opacity: 1;
  animation: filterIn 0.4s ease;
}

@keyframes filterIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
*/

/* Grid behavior: keep the theme's default float-based 3-column grid.
   Do NOT center reduced sets; remaining cards should pack left-to-right, top-to-bottom. */
.works-grid { /* leave as-is; floats handled in theme style.css */ }
/* Removed previous centering rules for filtered states */

/* Search highlighting */
.search-highlight {
  background: rgba(255, 235, 59, 0.3);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .services-filter-nav {
    top: 60px;
    padding: 10px 0;
  }

  .filter-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .filter-buttons {
    justify-content: center;
  }

  .filter-btn {
    padding: 6px 15px;
    font-size: 12px;
  }

  .search-box input {
    width: 100%;
  }

  .service-card.filtering-in {
    transform: scale(1);
  }
}

@media (max-width: 480px) {
  .filter-buttons {
    gap: 5px;
  }

  .filter-btn {
    padding: 5px 12px;
    font-size: 11px;
  }
}

/* Loading state */
.services-loading {
  text-align: center;
  padding: 40px 0;
  color: #666;
}

.services-loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-top: 2px solid #2E5BBA;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* No results state */
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.no-results h3 {
  margin-bottom: 10px;
  color: #333;
}

.no-results p {
  margin-bottom: 20px;
}

.clear-search-btn {
  background: #2E5BBA;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-search-btn:hover {
  background: #1e4a9f;
  transform: translateY(-2px);
}