Vet — Our Veterinarians

:root {
  --teal: #179c8e;
  --teal-d: #0f7f73;
  --teal-50: #e6f5f2;
  --coral: #ff8a5c;
  --ink: #173a36;
  --muted: #6b827e;
  --bg: #f2f8f6;
  --white: #ffffff;
  --line: #d7e8e3;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(15, 127, 115, 0.08);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

h1, h2, h3, p, dl, dd, ul {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  color: var(--teal-d);
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(150deg, var(--teal) 0%, var(--teal-d) 100%);
  color: var(--white);
  padding: 64px 20px 72px;
}

.hero__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero__eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 14px;
}

.hero__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero__lead {
  margin-top: 16px;
  font-size: 1.05rem;
  opacity: 0.94;
}

/* ---------- Page wrap ---------- */
.page {
  max-width: 1040px;
  margin: -36px auto 0;
  padding: 0 20px 64px;
}

/* ---------- Controls ---------- */
.controls {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 20px;
  display: grid;
  gap: 18px;
}

.controls__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal-d);
  background: var(--teal-50);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.chip:hover {
  background: #d4ece7;
}

.chip:active {
  transform: scale(0.96);
}

.chip.is-active {
  background: var(--teal);
  color: var(--white);
}

.chip:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.count {
  font-size: 0.92rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}

.count strong {
  color: var(--ink);
}

/* ---------- Grid ---------- */
.team {
  margin-top: 26px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 127, 115, 0.14);
}

.card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  background: linear-gradient(140deg, var(--a, var(--teal)), var(--b, var(--teal-d)));
}

.card__name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card__role {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 2px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.tag {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--teal-d);
  background: var(--teal-50);
  border-radius: 999px;
  padding: 4px 10px;
}

.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.meta dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.meta dd {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 2px;
}

.fun {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff3ec;
  border: 1px solid #ffe1d2;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.fun span {
  color: var(--coral);
}

.bio-toggle {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-d);
  background: none;
  border: none;
  padding: 14px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bio-toggle::after {
  content: "▾";
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.bio-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.bio-toggle:hover {
  color: var(--teal);
}

.bio-toggle:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.bio {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 28px 20px 48px;
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .hero {
    padding: 48px 18px 60px;
  }

  .page {
    padding: 0 14px 48px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .meta {
    grid-template-columns: 1fr;
  }
}

(function () {
  "use strict";

  var grid = document.getElementById("grid");
  if (!grid) return;

  var cards = Array.prototype.slice.call(grid.querySelectorAll(".card"));
  var countNum = document.getElementById("count-num");
  var emptyMsg = document.getElementById("empty");

  var active = { role: "all", specialty: "all" };

  // ---- Filtering ----
  function matches(card) {
    var roleOk = active.role === "all" || card.dataset.role === active.role;
    var specOk =
      active.specialty === "all" ||
      (card.dataset.specialty || "").split(/\s+/).indexOf(active.specialty) !== -1;
    return roleOk && specOk;
  }

  function applyFilters() {
    var shown = 0;
    cards.forEach(function (card) {
      var ok = matches(card);
      card.hidden = !ok;
      if (ok) shown++;
    });
    if (countNum) countNum.textContent = String(shown);
    if (emptyMsg) emptyMsg.hidden = shown !== 0;
  }

  // ---- Chip groups ----
  var groups = document.querySelectorAll(".chips[data-filter]");
  Array.prototype.forEach.call(groups, function (group) {
    var key = group.getAttribute("data-filter");
    group.addEventListener("click", function (e) {
      var btn = e.target.closest(".chip");
      if (!btn || !group.contains(btn)) return;

      group.querySelectorAll(".chip").forEach(function (c) {
        var on = c === btn;
        c.classList.toggle("is-active", on);
        c.setAttribute("aria-pressed", on ? "true" : "false");
      });

      active[key] = btn.getAttribute("data-value");
      applyFilters();
    });
  });

  // ---- Bio expand / collapse ----
  grid.addEventListener("click", function (e) {
    var toggle = e.target.closest(".bio-toggle");
    if (!toggle) return;

    var bio = toggle.parentElement.querySelector(".bio");
    if (!bio) return;

    var open = toggle.getAttribute("aria-expanded") === "true";
    toggle.setAttribute("aria-expanded", open ? "false" : "true");
    toggle.textContent = open ? "Read bio" : "Hide bio";
    bio.hidden = open;
  });

  applyFilters();
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Our Veterinarians — Brookside Animal Care</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="hero">
    <div class="hero__inner">
      <p class="hero__eyebrow">Brookside Animal Care <span aria-hidden="true">🐾</span></p>
      <h1 class="hero__title">Meet our veterinarians &amp; care team</h1>
      <p class="hero__lead">
        The caring humans behind every wagging tail and contented purr. Gentle hands, calm voices,
        and a whole lot of love for your companions.
      </p>
    </div>
  </header>

  <main class="page">
    <section class="controls" aria-label="Filter the team">
      <div class="controls__group">
        <h2 class="controls__label" id="role-label">Role</h2>
        <div class="chips" role="group" aria-labelledby="role-label" data-filter="role">
          <button type="button" class="chip is-active" data-value="all" aria-pressed="true">Everyone</button>
          <button type="button" class="chip" data-value="vet" aria-pressed="false">Veterinarians</button>
          <button type="button" class="chip" data-value="tech" aria-pressed="false">Vet techs</button>
          <button type="button" class="chip" data-value="behaviour" aria-pressed="false">Behaviourist</button>
          <button type="button" class="chip" data-value="frontdesk" aria-pressed="false">Front desk</button>
        </div>
      </div>

      <div class="controls__group">
        <h2 class="controls__label" id="spec-label">Specialty</h2>
        <div class="chips" role="group" aria-labelledby="spec-label" data-filter="specialty">
          <button type="button" class="chip is-active" data-value="all" aria-pressed="true">All specialties</button>
          <button type="button" class="chip" data-value="dentistry" aria-pressed="false">Dentistry</button>
          <button type="button" class="chip" data-value="surgery" aria-pressed="false">Surgery</button>
          <button type="button" class="chip" data-value="exotics" aria-pressed="false">Exotics</button>
          <button type="button" class="chip" data-value="cats" aria-pressed="false">Feline care</button>
          <button type="button" class="chip" data-value="emergency" aria-pressed="false">Emergency</button>
        </div>
      </div>

      <p class="count" aria-live="polite"><strong id="count-num">6</strong> team members shown</p>
    </section>

    <section class="team" aria-label="Our team">
      <ul class="grid" id="grid">

        <li class="card" data-role="vet" data-specialty="surgery emergency">
          <article>
            <div class="card__top">
              <span class="avatar" style="--a:#179c8e;--b:#0f7f73" aria-hidden="true">EM</span>
              <div>
                <h3 class="card__name">Dr. Elena Marquez</h3>
                <p class="card__role">Lead Veterinarian, DVM</p>
              </div>
            </div>
            <ul class="tags" aria-label="Specialties">
              <li class="tag">Surgery</li>
              <li class="tag">Emergency</li>
            </ul>
            <dl class="meta">
              <div><dt>With us since</dt><dd>2014</dd></div>
              <div><dt>Languages</dt><dd>English, Spanish</dd></div>
            </dl>
            <p class="fun"><span aria-hidden="true">✨</span> Once performed surgery on a tortoise named Gandalf.</p>
            <button type="button" class="bio-toggle" aria-expanded="false">Read bio</button>
            <p class="bio" hidden>
              Elena founded Brookside's surgical suite and has logged over 4,000 procedures. She is
              calmest in the middle of an emergency and believes every patient deserves a treat on the
              way out.
            </p>
          </article>
        </li>

        <li class="card" data-role="vet" data-specialty="dentistry cats">
          <article>
            <div class="card__top">
              <span class="avatar" style="--a:#ff8a5c;--b:#f06d3a" aria-hidden="true">PT</span>
              <div>
                <h3 class="card__name">Dr. Priya Tanaka</h3>
                <p class="card__role">Veterinarian, DVM</p>
              </div>
            </div>
            <ul class="tags" aria-label="Specialties">
              <li class="tag">Dentistry</li>
              <li class="tag">Feline care</li>
            </ul>
            <dl class="meta">
              <div><dt>With us since</dt><dd>2018</dd></div>
              <div><dt>Languages</dt><dd>English, Japanese</dd></div>
            </dl>
            <p class="fun"><span aria-hidden="true">✨</span> Has fostered 31 cats and counting.</p>
            <button type="button" class="bio-toggle" aria-expanded="false">Read bio</button>
            <p class="bio" hidden>
              Priya leads our dental program and is the cat whisperer of the clinic. Nervous felines
              relax the moment she lowers the lights and brings out her slow-blink routine.
            </p>
          </article>
        </li>

        <li class="card" data-role="vet" data-specialty="exotics surgery">
          <article>
            <div class="card__top">
              <span class="avatar" style="--a:#3aa8c0;--b:#1f8aa3" aria-hidden="true">OK</span>
              <div>
                <h3 class="card__name">Dr. Omar Khalil</h3>
                <p class="card__role">Veterinarian, DVM</p>
              </div>
            </div>
            <ul class="tags" aria-label="Specialties">
              <li class="tag">Exotics</li>
              <li class="tag">Surgery</li>
            </ul>
            <dl class="meta">
              <div><dt>With us since</dt><dd>2020</dd></div>
              <div><dt>Languages</dt><dd>English, Arabic, French</dd></div>
            </dl>
            <p class="fun"><span aria-hidden="true">✨</span> Keeps a bearded dragon named Pixel at his desk.</p>
            <button type="button" class="bio-toggle" aria-expanded="false">Read bio</button>
            <p class="bio" hidden>
              From parrots to pythons, Omar is our go-to for anything scaly, feathered or unusual. He
              runs free monthly "exotic pet care" workshops for the neighbourhood.
            </p>
          </article>
        </li>

        <li class="card" data-role="tech" data-specialty="emergency cats">
          <article>
            <div class="card__top">
              <span class="avatar" style="--a:#7c9a5a;--b:#5f7d3f" aria-hidden="true">JR</span>
              <div>
                <h3 class="card__name">Jordan Reyes</h3>
                <p class="card__role">Senior Vet Technician, CVT</p>
              </div>
            </div>
            <ul class="tags" aria-label="Specialties">
              <li class="tag">Emergency</li>
              <li class="tag">Feline care</li>
            </ul>
            <dl class="meta">
              <div><dt>With us since</dt><dd>2016</dd></div>
              <div><dt>Languages</dt><dd>English, Tagalog</dd></div>
            </dl>
            <p class="fun"><span aria-hidden="true">✨</span> Can find a vein on a wiggly puppy in one try.</p>
            <button type="button" class="bio-toggle" aria-expanded="false">Read bio</button>
            <p class="bio" hidden>
              Jordan runs our triage bay and trains every new technician who walks through the door.
              Steady, fast and impossibly kind on the hardest nights.
            </p>
          </article>
        </li>

        <li class="card" data-role="behaviour" data-specialty="dentistry">
          <article>
            <div class="card__top">
              <span class="avatar" style="--a:#b97cc0;--b:#9a5fa3" aria-hidden="true">HN</span>
              <div>
                <h3 class="card__name">Hannah Novak</h3>
                <p class="card__role">Animal Behaviourist</p>
              </div>
            </div>
            <ul class="tags" aria-label="Specialties">
              <li class="tag">Behaviour</li>
              <li class="tag">Puppy class</li>
            </ul>
            <dl class="meta">
              <div><dt>With us since</dt><dd>2021</dd></div>
              <div><dt>Languages</dt><dd>English, German</dd></div>
            </dl>
            <p class="fun"><span aria-hidden="true">✨</span> Wrote a tiny book on calming reactive dogs.</p>
            <button type="button" class="bio-toggle" aria-expanded="false">Read bio</button>
            <p class="bio" hidden>
              Hannah helps anxious pets and stressed owners find a calmer routine together. Her
              fear-free handling techniques are now used clinic-wide for every visit.
            </p>
          </article>
        </li>

        <li class="card" data-role="frontdesk" data-specialty="">
          <article>
            <div class="card__top">
              <span class="avatar" style="--a:#e0a23a;--b:#c2851f" aria-hidden="true">SM</span>
              <div>
                <h3 class="card__name">Sofia Mbeki</h3>
                <p class="card__role">Client Care Lead</p>
              </div>
            </div>
            <ul class="tags" aria-label="Specialties">
              <li class="tag">Scheduling</li>
              <li class="tag">New pet welcome</li>
            </ul>
            <dl class="meta">
              <div><dt>With us since</dt><dd>2019</dd></div>
              <div><dt>Languages</dt><dd>English, Zulu, Spanish</dd></div>
            </dl>
            <p class="fun"><span aria-hidden="true">✨</span> Remembers every pet's name — and their birthdays.</p>
            <button type="button" class="bio-toggle" aria-expanded="false">Read bio</button>
            <p class="bio" hidden>
              Sofia is the warm voice that greets you at the door and the one who makes sure your
              appointment runs on time. Nothing slips past her welcome desk.
            </p>
          </article>
        </li>

      </ul>

      <p class="empty" id="empty" hidden>No team members match those filters — try clearing one.</p>
    </section>
  </main>

  <footer class="foot">
    <p>Brookside Animal Care · 218 Maple Row · Open 7 days · <a href="tel:+15550148822">(555) 014-8822</a></p>
  </footer>

  <script src="script.js"></script>
</body>
</html>