/* ========================================
   Case Study Listing / Index Page
   2-col layout: sticky filter sidebar + results grid
   All classes prefixed csi- to avoid collisions
   Designed to be reusable for future resource listings.
   ======================================== */

/* Hero */
.csi-hero {
  background: linear-gradient(180deg, #f8f1ff 0%, #FFFBF8 77.6%, rgba(255, 255, 255, 0) 100%);
  padding: 7rem 0 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .csi-hero { padding: 9rem 0 2.5rem; }
}

.csi-hero__title {
  font-size: 1.75rem;
  font-weight: var(--fnt-bold, 700);
  color: var(--neutral-900, #111928);
  margin: 0 0 0.75rem !important;
  text-align: center !important;
}
@media (min-width: 768px) {
  .csi-hero__title { font-size: 2.75rem; }
}

.csi-hero__desc {
  font-size: 1rem;
  color: var(--neutral-600, #4B5563);
  max-width: 680px;
  margin: 0 auto !important;
  line-height: 1.6;
  text-align: center !important;
}
@media (min-width: 768px) {
  .csi-hero__desc { font-size: 1.125rem; }
}

/* ========================================
   Active filter chips (rendered below results header)
   ======================================== */
.csi-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.csi-active-filters:empty { margin-bottom: 0; }

.csi-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: var(--fnt-medium, 500);
  background: var(--purple-050, #F6F5FF);
  border: 1px solid var(--purple-200, #DCD7FE);
  color: var(--purple-900, #4A1D96);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.csi-filter-tag:hover {
  background: var(--purple-200, #DCD7FE);
  transform: translateY(-1px);
}
.csi-filter-tag i { font-size: 0.875rem; }

.csi-active-filters__clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--neutral-500, #6B7280);
  font-size: 0.8125rem;
  font-weight: var(--fnt-medium, 500);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  text-decoration: underline;
}
.csi-active-filters__clear:hover { color: #673695; }

/* ========================================
   Main 2-col layout
   ======================================== */
.csi-main { padding: 3rem 0 4rem; }

/* ========================================
   Sidebar (sticky filters)
   ======================================== */
.csi-sidebar {
  background: #fff;
  border: 1px solid var(--neutral-100, #F3F4F6);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

@media (min-width: 992px) {
  .csi-sidebar {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  /* Subtle scrollbar */
  .csi-sidebar::-webkit-scrollbar { width: 6px; }
  .csi-sidebar::-webkit-scrollbar-track { background: transparent; }
  .csi-sidebar::-webkit-scrollbar-thumb {
    background: var(--neutral-200, #E5E7EB);
    border-radius: 3px;
  }
  .csi-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-300, #D1D5DB);
  }
}

.csi-sidebar__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.875rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--neutral-100, #F3F4F6);
}

.csi-sidebar__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--fnt-semi, 600);
  color: var(--neutral-900, #111928);
}
.csi-sidebar__title i {
  font-size: 1.125rem;
  color: #673695;
}

.csi-sidebar__clear {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 0.8125rem;
  font-weight: var(--fnt-medium, 500);
  color: #673695;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.csi-sidebar__clear:hover { background: var(--purple-050, #F6F5FF); }

.csi-sidebar__close {
  display: none;
  background: transparent;
  border: none;
  color: var(--neutral-500, #6B7280);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
}

/* Mobile drawer */
@media (max-width: 991.98px) {
  .csi-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 88vw);
    max-height: 100vh;
    overflow-y: auto;
    z-index: 1050;
    border-radius: 0 14px 14px 0;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
  }
  .csi-sidebar.is-open { transform: translateX(0); }
  .csi-sidebar__close { display: inline-flex; }
  .csi-sidebar__overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1040;
  }
  .csi-sidebar__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ========================================
   Accordion filter group
   ======================================== */
.csi-accordion {
  border-bottom: 1px solid var(--neutral-100, #F3F4F6);
  padding: 0.5rem 0;
}
.csi-accordion:last-child { border-bottom: none; }

.csi-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.625rem 0;
  background: transparent;
  border: none;
  font-size: 0.9375rem;
  font-weight: var(--fnt-semi, 600);
  color: var(--neutral-900, #111928);
  cursor: pointer;
  text-align: left;
}
.csi-accordion__btn:hover { color: #673695; }

.csi-accordion__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.csi-accordion__label i {
  font-size: 1rem;
  color: var(--neutral-500, #6B7280);
}
.csi-accordion__btn:hover .csi-accordion__label i { color: #673695; }

.csi-accordion__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.csi-accordion__selected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #673695;
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--fnt-semi, 600);
}

.csi-accordion__chevron {
  font-size: 1.25rem;
  color: var(--neutral-500, #6B7280);
  transition: transform 0.2s ease;
}
.csi-accordion.is-open .csi-accordion__chevron { transform: rotate(180deg); }

.csi-accordion__panel {
  display: none;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}
.csi-accordion.is-open .csi-accordion__panel { display: block; }

/* ========================================
   Checklist (within accordion)
   ======================================== */
.csi-checklist {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}
.csi-checklist::-webkit-scrollbar { width: 6px; }
.csi-checklist::-webkit-scrollbar-thumb {
  background: var(--neutral-200, #E5E7EB);
  border-radius: 3px;
}

.csi-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--neutral-700, #374151);
  transition: background 0.15s ease, color 0.15s ease;
  margin: 0 !important;
}
.csi-checklist__item:hover { background: var(--neutral-050, #F9FAFB); }

.csi-checklist__item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.csi-checklist__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--neutral-300, #D1D5DB);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.csi-checklist__box::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.485 4.515a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L6.778 9.808l5.293-5.293a1 1 0 011.414 0z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.485 4.515a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L6.778 9.808l5.293-5.293a1 1 0 011.414 0z'/></svg>") no-repeat center / contain;
  opacity: 0;
  transition: opacity 0.15s;
}
.csi-checklist__item input[type="checkbox"]:checked + .csi-checklist__box {
  background: #673695;
  border-color: #673695;
}
.csi-checklist__item input[type="checkbox"]:checked + .csi-checklist__box::after { opacity: 1; }
.csi-checklist__item input[type="checkbox"]:focus-visible + .csi-checklist__box {
  box-shadow: 0 0 0 3px rgba(103, 54, 149, 0.18);
}
.csi-checklist__item input[type="checkbox"]:checked ~ .csi-checklist__label {
  color: var(--neutral-900, #111928);
  font-weight: var(--fnt-medium, 500);
}

.csi-checklist__label { line-height: 1.35; }

/* ========================================
   Results column
   ======================================== */
.csi-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0.9em 1.25rem;
}

.csi-results__tools {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex: 1 1 280px;
  min-width: 0;
}

/* Filter toggle (mobile only) */
.csi-results__filter-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem;
  height: 44px;
  background: var(--neutral-050, #F9FAFB);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: var(--fnt-medium, 500);
  color: var(--neutral-700, #374151);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.csi-results__filter-toggle:hover {
  border-color: #673695;
  color: #673695;
}
.csi-results__filter-toggle i { font-size: 1.125rem; }

.csi-results__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #673695;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: var(--fnt-semi, 600);
}

@media (max-width: 991.98px) {
  .csi-results__filter-toggle { display: inline-flex; }
}

/* Search — pill style, capped width for visual balance */
.csi-results__search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 0 1 360px;
  min-width: 0;
  height: 44px;
  padding: 0 1.125rem;
  background: var(--neutral-050, #F9FAFB);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.csi-results__search:focus-within {
  background: #fff;
  border-color: #673695;
  box-shadow: 0 0 0 3px rgba(103, 54, 149, 0.12);
}
.csi-results__search-icon {
  color: var(--neutral-500, #6B7280);
  font-size: 1.125rem;
  flex-shrink: 0;
}
.csi-results__input {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 0.875rem;
  color: var(--neutral-900, #111928);
  background: transparent;
  min-width: 0;
}
.csi-results__input::placeholder {
  color: var(--neutral-500, #6B7280);
}

/* Search clear (×) — visible only when input has text */
.csi-results__clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--neutral-200, #E5E7EB);
  color: var(--neutral-700, #374151);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.csi-results__clear i {
  font-size: 1rem;
  line-height: 1;
}
.csi-results__clear.is-visible { display: inline-flex; }
.csi-results__clear:hover {
  background: #673695;
  color: #fff;
  transform: scale(1.05);
}
.csi-results__clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(103, 54, 149, 0.25);
}

/* Count badge (right side of header) */
.csi-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem;
  height: 44px;
  background: linear-gradient(135deg, #F6F5FF 0%, #FFF8F1 100%);
  border: 1px solid #efe7ff;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: var(--fnt-medium, 500);
  color: var(--neutral-700, #374151);
  white-space: nowrap;
  flex-shrink: 0;
}
.csi-count-badge i {
  font-size: 0.9375rem;
  color: #673695;
}
.csi-count-badge span:nth-of-type(1) {
  font-weight: var(--fnt-bold, 700);
  color: #4A1D96;
}

/* Mobile: stack tools row above the count badge */
@media (max-width: 575.98px) {
  .csi-results__header {
    flex-direction: column;
    align-items: stretch;
  }
  .csi-results__tools { flex: 1 1 auto; }
  .csi-count-badge { align-self: flex-start; }
}

/* ========================================
   Card
   ======================================== */
.csi-grid { margin: 0; }

.csi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--neutral-100, #F3F4F6);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.csi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: #efe7ff;
  text-decoration: none;
  color: inherit;
}

.csi-card__icon-wrap {
  position: relative;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FEEFE2;
  transition: background 0.2s ease;
}
.csi-card__icon-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5) 0%, transparent 40%),
                    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 40%);
  pointer-events: none;
}
.csi-card__icon-wrap i {
  position: relative;
  font-size: 2.875rem;
  transition: transform 0.3s ease;
  z-index: 1;
}
.csi-card:hover .csi-card__icon-wrap i {
  transform: scale(1.08);
}

.csi-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.125rem 1.25rem 1.25rem;
}

/* Tags row — holds industry / region / product pills + the SVG arrow.
   Arrow is absolutely positioned at the top-right so it never collides
   with the pills and stays anchored even when tags wrap. */
.csi-card__tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding-right: 28px;
  margin-bottom: 0.875rem;
}

.csi-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 24px;
  padding: 0 0.6rem;
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: var(--fnt-semi, 600);
  border-radius: 6px;
  letter-spacing: 0.02em;
  text-transform: none;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csi-card__tag i { font-size: 0.875rem; }

.csi-card__tag--industry {
  background: var(--purple-050, #F6F5FF);
  color: var(--purple-900, #4A1D96);
  border: 1px solid var(--purple-200, #DCD7FE);
}
.csi-card__tag--region {
  background: #F0F9FF;
  color: #0C4A6E;
  border: 1px solid #BAE6FD;
}
.csi-card__tag--product {
  background: var(--secondary-100, #FEECDC);
  color: var(--secondary-700, #B43403);
  border: 1px solid var(--secondary-200, #FCD9BD);
}

/* TEMP: product chip hidden in card body — filtering by product/topic
   still works because the JS reads data-product on .csi-card-col, not the
   visible chip. To re-enable the chip, delete the rule below. */
.csi-card__tag--product { display: none; }

/* SVG arrow inside the tags row, anchored top-right of the tags container.
   Padding-right on .csi-card__tags reserves space so pills never touch it. */
.cs-card-arrow {
  position: absolute;
  top: 4px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--neutral-300, #D1D5DB);
  transition: color 0.2s ease;
  pointer-events: none;
}
.cs-card-arrow svg {
  display: block;
  transition: transform 0.2s ease;
}
.csi-card:hover .cs-card-arrow { color: #673695; }
.csi-card:hover .cs-card-arrow svg { transform: translate(2px, -2px); }

.csi-card__title {
  font-size: 1rem;
  font-weight: var(--fnt-semi, 600);
  color: var(--neutral-900, #111928);
  line-height: 1.4;
  margin: 0 0 0.875rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.csi-card__desc {
  font-size: 0.875rem;
  color: var(--neutral-600, #4B5563);
  line-height: 1.55;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ========================================
   Empty state
   ======================================== */
.csi-empty {
  text-align: center;
  padding: 3.5rem 2rem;
  background: #fff;
  border: 1px dashed var(--neutral-200, #E5E7EB);
  border-radius: 14px;
  color: var(--neutral-500, #6B7280);
}
.csi-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  color: var(--neutral-400, #9CA3AF);
}
.csi-empty h3 {
  font-size: 1.25rem;
  font-weight: var(--fnt-semi, 600);
  color: var(--neutral-700, #374151);
  margin: 0 0 0.5rem !important;
}
.csi-empty p { font-size: 0.9375rem; margin: 0 0 1.25rem !important; }
.csi-empty__reset {
  background: #673695;
  color: #fff;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: var(--fnt-medium, 500);
  cursor: pointer;
  transition: background 0.15s;
}
.csi-empty__reset:hover { background: #54256c; }

/* Hide filtered-out cards */
.csi-card-col.hidden { display: none; }

/* ========================================
   Pagination
   ======================================== */
.csi-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.csi-pagination__pages {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.25rem;
  align-items: center;
}
.csi-pagination__pages li { margin: 0; }
.csi-pagination__btn,
.csi-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.625rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #374151;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.csi-pagination__btn { color: #6b7280; }
.csi-pagination__btn i { font-size: 1.25rem; }
.csi-pagination__btn:hover:not(:disabled),
.csi-pagination__page:hover {
  background: #FFF8F1;
  border-color: #f26739;
  color: #f26739;
}
.csi-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.csi-pagination__page.is-active {
  background: #f26739;
  border-color: #f26739;
  color: #fff;
}
.csi-pagination__page.is-active:hover {
  background: #f26739;
  color: #fff;
}
.csi-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: #9ca3af;
}
@media (max-width: 480px) {
  .csi-pagination__btn,
  .csi-pagination__page,
  .csi-pagination__ellipsis {
    min-width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }
}