Team Filter

.tab-accordion {
  border: 1px solid #ddd;
  background: #f5f5f5;
}

/* Tabs (desktop) */
.ta-controls {
  display: flex;
  border-bottom: 1px solid #ddd;
  justify-content: center;
}

.ta-btn {
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
}

.ta-btn.active {
  border-bottom: 2px solid #000;
  font-weight: bold;
}

.ta-panel {
  display: none;
  padding: 1rem;
}

.ta-panel.active {
  display: block;
}

.ta-panel-content {
	margin-top: 0 !important;
}

.ta-heading {
  margin: 2rem 0 1rem;
  display: none;
}

/* Accordion (mobile) */
@media (max-width: 1199px) {
  .ta-controls {
    display: none;
  }

  .ta-panel:not(:first-of-type) {
  	border-top: 1px solid #ddd;
  }

  .ta-panel {
    display: block;
    padding: 0;
  }

  .ta-heading {
    margin: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 1.25rem;
    display: block;
  }

  .ta-panel-content {
    padding: 1rem;
    display: none;
  }

  .ta-panel.active .ta-panel-content {
    display: flex;
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".tab-accordion");
  const buttons = container.querySelectorAll(".ta-btn");
  const panels = container.querySelectorAll(".ta-panel");
  const MOBILE_BREAKPOINT = 1200;

  function activatePanel(id) {
    buttons.forEach(btn =>
      btn.classList.toggle("active", btn.dataset.target === id)
    );

    panels.forEach(panel =>
      panel.classList.toggle("active", panel.id === id)
    );
  }

  // Tabs (desktop)
  buttons.forEach(btn => {
    btn.addEventListener("click", () => {
      activatePanel(btn.dataset.target);
    });
  });

  // Accordion (mobile)
  panels.forEach(panel => {
    const heading = panel.querySelector(".ta-heading");

    heading.addEventListener("click", () => {
      if (window.innerWidth >= MOBILE_BREAKPOINT) return;

      const isOpen = panel.classList.contains("active");

      // Close all panels first
      panels.forEach(p => p.classList.remove("active"));

      // Open clicked panel if it wasn't already open
      if (!isOpen) {
        panel.classList.add("active");

        // Scroll to top of page
        const y = panel.getBoundingClientRect().top + window.pageYOffset - 120;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    });
  });
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/team-filter",
    "title": "Team filter",
    "description": "Team filter block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-team-filter.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
				"top",
				"bottom"
			],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/team-filter/block-team-filter.css"
}