/* ==========================================================================
   Case Studies — header + filter bar (from Figma "Our work page").
   Restyles the listing header only; the project cards grid is untouched.
   Keeps all functional hooks (.category-item, #child-categories-dropdown).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;800&display=swap");

.case-studies_listing .dd-cw { font-family: "Manrope", system-ui, sans-serif; text-align: left; }

/* eyebrow */
.dd-cw__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 !important;
  font-family: "Manrope", sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase; color: #a1a1a1 !important;
}
.dd-cw__eyebrow::before { content: ""; width: 32px; height: 1px; background: rgba(255,255,255,0.35); }

/* heading + dropdown row */
.dd-cw__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dd-cw__headtext { display: flex; flex-direction: column; max-width: 640px; }
.dd-cw__title {
  margin: 0 !important; max-width: 640px;
  font-family: "Manrope", sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3rem) !important; line-height: 1.05 !important;
  letter-spacing: -1.2px !important; color: #fff !important;
}
.dd-cw__title .dd-cw__dim { color: #737373; }
.dd-cw__sub {
  margin: 14px 0 0 !important; max-width: 560px;
  font-family: "Manrope", sans-serif; font-weight: 400; font-size: 15px !important;
  line-height: 1.6 !important; color: #a1a1a1 !important;
}

/* industry dropdown (reuses .child-casestudies-dropdown / .dropdown-* markup) */
.dd-cw__top .child-categories-tab { flex: 0 0 auto; margin: 6px 0 0; }
.dd-cw .child-casestudies-dropdown { position: relative; }
.dd-cw .dropdown-toggle {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 201px; height: 46px; padding: 0 20px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px; cursor: pointer;
  font-family: "Manrope", sans-serif; font-weight: 400; font-size: 14px; color: #e5e5e5;
  transition: background-color .25s, border-color .25s;
}
.dd-cw .dropdown-toggle:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
.dd-cw .dropdown-label { line-height: 20px; }
.dd-cw .dropdown-arrow { display: inline-flex; }
.dd-cw .dropdown-arrow svg { width: 14px; height: 9px; display: block; }
.dd-cw .child-casestudies-dropdown.open .dropdown-arrow svg { transform: rotate(180deg); }

/* dropdown menu popup */
.dd-cw .dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 240px;
  list-style: none; margin: 0; padding: 6px;
  background: #14161a; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8); max-height: 320px; overflow-y: auto;
}
.dd-cw .dropdown-menu li {
  list-style: none; padding: 10px 14px; border-radius: 8px; cursor: pointer;
  font-family: "Manrope", sans-serif; font-size: 14px; color: #a1a1a1; transition: background-color .2s, color .2s;
}
.dd-cw .dropdown-menu li:hover { background: rgba(255,255,255,0.06); color: #f5f5f5; }
.dd-cw .dropdown-menu li.active { color: #fff; background: rgba(255,255,255,0.08); }

/* filter pills (reuses #categories-list / .category-item) */
.dd-cw .categories-tab { margin-top: 32px; }
.dd-cw #categories-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0;
}
.dd-cw .category-item {
  list-style: none; cursor: pointer; padding: 8px 20px; border-radius: 999px;
  font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 20px;
  color: #a1a1a1; background: transparent; border: 1px solid transparent;
  transition: color .25s, background-color .25s, border-color .25s;
}
.dd-cw .category-item:hover { color: #fff; }
.dd-cw .category-item.active { background: #fff; color: #000; }

/* responsive */
@media (max-width: 700px) {
  .dd-cw__top { align-items: flex-start; }
  .dd-cw__top .child-categories-tab { width: 100%; }
  .dd-cw .dropdown-toggle { width: 100%; }
  .dd-cw .dropdown-menu { left: 0; right: 0; }
}