.cocs-case-studies {
  --cocs-page: #f8f7f6;
  --cocs-text: #111113;
  --cocs-muted: #65646b;
  --cocs-card: #fff;
  --cocs-primary: #5d49a8;
  --cocs-line: #e7e4e3;
  padding: 56px 24px 64px;
  background: var(--cocs-page);
  color: var(--cocs-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cocs-case-studies *, .cocs-case-studies *::before, .cocs-case-studies *::after { box-sizing: border-box; }
.cocs-case-studies a { color: inherit; text-decoration: none; }
.cocs-shell { width: min(1280px, 100%); margin: 0 auto; }

.cocs-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.cocs-filter {
	--cocs-filter-padding-x: 18px;
	--cocs-filter-padding-y: 0px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
	padding: var(--cocs-filter-padding-y) var(--cocs-filter-padding-x) !important;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #17171a;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.cocs-filter:hover { transform: translateY(-1px); }
.cocs-filter.is-active { background: var(--cocs-primary); color: #fff; }
.cocs-filter:focus-visible, .cocs-card-link:focus-visible, .cocs-pagination button:focus-visible { outline: 3px solid rgba(93, 73, 168, .3); outline-offset: 3px; }
.cocs-filter-select-wrap { position: relative; display: none; margin: 0 0 24px; }
.cocs-filter-select {
  width: 100%;
  min-height: 48px;
  padding: 0 46px 0 16px;
  border: 1px solid #e3e0e7;
  border-radius: 10px;
  appearance: none;
  background: #fff;
  color: var(--cocs-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.cocs-filter-select:focus { border-color: var(--cocs-primary); outline: 3px solid rgba(93, 73, 168, .18); outline-offset: 1px; }
.cocs-filter-select-icon { position: absolute; top: 50%; right: 17px; width: 8px; height: 8px; border-right: 2px solid #56505f; border-bottom: 2px solid #56505f; pointer-events: none; transform: translateY(-70%) rotate(45deg); }
.cocs-case-studies.is-loading .cocs-results { opacity: .5; pointer-events: none; }

.cocs-grid {
  --cocs-grid-columns-desktop: 3;
  --cocs-grid-columns-tablet: 2;
  --cocs-grid-columns-mobile: 1;
  display: grid;
  grid-template-columns: repeat(var(--cocs-grid-columns-desktop), minmax(0, 1fr));
  gap: 24px;
}
.cocs-card {
  overflow: hidden;
  min-width: 0;
  background: var(--cocs-card);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 18, 30, .025);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.cocs-card:hover, .cocs-card:focus-within { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20, 18, 30, .075); }
.cocs-card-link { display: flex; min-height: 100%; padding: 24px; flex-direction: column; }

.cocs-card-media {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 1.65 / 1;
  margin: 0 0 18px !important;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(125deg, #3e84f6, #191546);
}
.cocs-card:nth-child(2) .cocs-card-media { background: linear-gradient(125deg, #37bd87, #181443); }
.cocs-card:nth-child(3) .cocs-card-media { background: linear-gradient(125deg, #f39c09, #241745); }
.cocs-card:nth-child(4) .cocs-card-media { background: linear-gradient(125deg, #6965ef, #211747); }
.cocs-card:nth-child(5) .cocs-card-media { background: linear-gradient(125deg, #9256ed, #201545); }
.cocs-card:nth-child(6n) .cocs-card-media { background: linear-gradient(125deg, #e33e91, #241544); }
.cocs-card-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.cocs-card-media:has(.cocs-card-image)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(42, 105, 225, .35), rgba(26, 17, 70, .5)); }
.cocs-card:hover .cocs-card-image { transform: scale(1.035); }
.cocs-card-placeholder { width: 34px; height: 34px; color: #fff; }
.cocs-card-placeholder svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }

.cocs-card-body { display: flex; flex: 1; align-items: flex-start; flex-direction: column; }
.cocs-industry {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  background: #eee9ff;
  color: #765ae1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.cocs-card:nth-child(3n + 1) .cocs-industry { background: #e9f2ff; color: #4d84e3; }
.cocs-card:nth-child(3n + 2) .cocs-industry { background: #e5faef; color: #20a875; }
.cocs-card:nth-child(3n) .cocs-industry { background: #fff1d7; color: #c98b09; }
.cocs-card-title { margin: 14px 0 10px; font-size: 19px; line-height: 1.22; font-weight: 600; letter-spacing: -.018em; }
.cocs-card-excerpt { display: -webkit-box; overflow: hidden; margin: 0 0 16px; color: var(--cocs-muted); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cocs-view-case { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; color: var(--cocs-primary); font-size: 13px; font-weight: 700; }
.cocs-view-icon { background: transparent; transition: transform 160ms ease; }
.cocs-card:hover .cocs-view-icon,
.cocs-card:focus-within .cocs-view-icon,
.elementor-editor-active .cocs-card:hover .cocs-view-icon,
.elementor-editor-active .cocs-card:focus-within .cocs-view-icon {
  background-color: transparent !important;
}
.cocs-view-icon i, .cocs-view-icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.cocs-card:hover .cocs-view-icon { transform: translateX(3px); }

.cocs-empty { margin: 0; padding: 28px; border-radius: 14px; background: #fff; color: var(--cocs-muted); }
.cocs-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--cocs-line); }
.cocs-pagination--numbers { grid-template-columns: 1fr; }
.cocs-pagination--arrows { grid-template-columns: 1fr 1fr; }
.cocs-pagination-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: max-content; min-height: 36px; padding: 0 13px; border: 1px solid #d8d8df; border-radius: 7px; background: #fff; color: #42424b; font: inherit; font-size: 13px; cursor: pointer; }
.cocs-pagination-button:last-child { justify-self: end; }
.cocs-pagination-arrow i, .cocs-pagination-arrow svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.cocs-pagination-button:disabled { cursor: default; opacity: .55; }
.cocs-pagination-pages { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cocs-pagination-page, .cocs-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; border: 0; border-radius: 5px; background: transparent; color: #565560; font: inherit; font-size: 13px; }
.cocs-pagination-page { cursor: pointer; }
.cocs-pagination-page.is-current, .cocs-pagination-page:hover { background: #fff; color: var(--cocs-primary); }

@media (max-width: 900px) {
  .cocs-grid { grid-template-columns: repeat(var(--cocs-grid-columns-tablet), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cocs-case-studies { padding: 38px 16px 48px; }
  .cocs-filters { display: none; }
  .cocs-filter-select-wrap { display: block; }
  .cocs-grid { grid-template-columns: repeat(var(--cocs-grid-columns-mobile), minmax(0, 1fr)); gap: 18px; }
  .cocs-card-link { padding: 18px; }
  .cocs-pagination { gap: 8px; }
  .cocs-pagination-button { width: 36px; padding: 0; }
  .cocs-pagination-button span:not(.cocs-pagination-arrow) { display: none; }
  .cocs-pagination-pages { gap: 0; }
  .cocs-pagination-page, .cocs-pagination-ellipsis { width: 28px; }
}