/* ==========================================================================
   COMPONENT / CASE STUDY CARD ("מקרי בוחן")
   Two-column item (text panel + dashed-border photo panel). Moved out
   of pages/_category.css (2026) — Tool.html shows the exact same case
   studies (same content, same design), so this now lives here instead
   of Tool.html duplicating ~190 lines of CSS. Any page using it links
   this file, provides a .cat-case-section wrapper with a
   .cat-section__header (components already shared) + .cat-case-grid,
   and renders .cat-case-item children via
   components/related-cards.js's caseStudyCardHTML()/
   renderRelatedCaseStudies().
   ========================================================================== */

/* ==========================================================================
   Case Study Section & Items ("מקרי בוחן") — rebuilt (2026) from the
   real Figma CSS export. This replaces the earlier approximation that
   reused the generic vertical .content-card component: the actual
   design is a distinct two-column item (text panel + dashed-border
   photo panel side by side), not an image-on-top card, so it gets its
   own markup/classes instead of being forced into .content-card.
   ========================================================================== */
.cat-case-section {
  width: 100%;
  max-width: 1662px; /* 1462px content row + 72px side padding, per spec */
  margin: 160px auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

.cat-case-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  padding-inline-end: 50px;
}

/* One text+photo pair. row-reverse (inside the page's RTL context)
   puts the text panel on the physical left and the photo panel on the
   physical right, matching the reference exactly. */
.cat-case-item {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 30px;
  flex: 1 1 640px;
  max-width: 743px;
}

.cat-case-item__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  flex: 1 1 270px;
  max-width: 332px;
  padding-top: 22px; /* optical alignment with the media panel's top */
  box-sizing: border-box;
}

.cat-case-item__tag {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #CB6DA7;
}

.cat-case-item__title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;
  color: #000080;
  margin: 0;
  text-align: right;
}

.cat-case-item__desc {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 28px;
  color: #3A3A55;
  margin: 0;
  text-align: right;
}

.cat-case-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 22px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #000080;
  border-radius: 9999px;
  filter: drop-shadow(0px 4px 20px rgba(26, 35, 126, 0.1));
  background: transparent;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #000080;
  text-decoration: none;
  white-space: nowrap;
}

.cat-case-item__btn:hover {
  background: rgba(0, 0, 128, 0.05);
}

/* Photo panel: dashed pink border + soft navy drop-shadow combined
   directly on one box (Figma exported these as two stacked absolutely
   positioned layers — a shadow div and a dashed-border div — which
   collapse into a single border + box-shadow declaration in real CSS). */
.cat-case-item__media {
  flex: 0 0 420px;
  width: 420px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 14px 22px;
  background: #FFFFFF;
  border: 1.5px dashed #E89DC4;
  border-radius: 18px;
  box-shadow: 0px 14px 30px -14px rgba(0, 0, 128, 0.27), 0px 2px 6px rgba(0, 0, 128, 0.082);
}

.cat-case-item__media-inner {
  width: 100%;
  height: 251px;
  background: rgba(230, 230, 250, 0.4);
  border-radius: 12px;
  overflow: hidden;
}

.cat-case-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  .cat-case-section {
    padding: 0 24px;
  }

  .cat-case-item {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    gap: 20px;
  }

  .cat-case-item__text {
    max-width: 100%;
    padding-top: 0;
    flex: 1 1 auto;
  }

  .cat-case-item__media {
    width: 100%;
    flex: 1 1 auto;
  }
}

@media (max-width: 599px) {
  .cat-case-section {
    padding: 0 20px;
    margin: 80px auto;
  }

  .cat-case-item__media-inner {
    height: 200px;
  }
  .cat-case-grid {
      padding-inline-end: 0;
  }
  .cat-case-item {
    flex-direction: column-reverse;
  }
  .cat-value__container {
    padding: 0;
  }
  .cat-value__media-col {
      width: calc(100% - 30px);
  }
  .cat-hero__content {
      flex: 0;
  }
  .cat-hero__media {
      margin: 60px 0;
  }
  .cat-hero__filters {
      margin-top: 30px;
  }
}