/* ==========================================================================
   PAGE / tool-containment — TOOL DETAIL (יומן מעקב רווחה ומצוקה)
   Rebuilt (2026) from the real Figma CSS export. The value section
   ("פענוח מצוקה..."), case studies ("מקרי בוחן"), reviews ("הורים
   משתפים"), and tools grid ("כלים נוספים") are the SAME content/design
   already built for Category.html/Course.html — this page reuses
   those shared components (components/_detailed-value.css,
   _case-study-card.css, _section-header.css, _review-cards.css,
   _tools-section.css) instead of duplicating them. Only the hero and
   the product/PDF mockup below are genuinely unique to this page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.tool-hero {
  width: 100%;
  max-width: 1475px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 60px;
  box-sizing: border-box;
  direction: rtl;
  justify-content: center;
}

.tool-hero-body {
  flex: 1 1 640px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  text-align: right;
}

.tool-breadcrumb {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #000080;
  margin: 0;
}

.tool-breadcrumb a{
  text-decoration: none;
}

.tool-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 60px;
  color: #000080;
  margin: 0;
}

.tool-subtitle {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #000080;
  margin: 0;
  max-width: 530px;
}

.tool-rating-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(24, 59, 81, 0.3);
  box-sizing: border-box;
}

.tool-rating-row .rating-stars {
  display: inline-flex;
  gap: 2px;
  color: #C22DAF;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
}

.tool-rating-row .rating-summary-count {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  color: #183B51;
  white-space: nowrap;
}

/* --- Tags row (3 pastel pills, matches the Figma export exactly) --- */
.tool-tags-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.tool-tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 9999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 16px;
  color: #000080;
  white-space: nowrap;
}

.tool-tag-pill--peach { background: #FFE1C7; }
.tool-tag-pill--blue { background: #A1CEE1; text-transform: uppercase; }
.tool-tag-pill--lavender { background: #EEEEFC; }

/* --- Price row (identical treatment to Course.html) --- */
.tool-price-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  box-sizing: border-box;
}

.tool-price-current {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 32px;
  color: #000080;
}

.tool-price-old {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 20px;
  color: #000080;
  text-decoration: line-through;
}

.tool-price-discount {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  color: #000080;
}

/* --- Actions row --- */
.tool-actions-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  /* flex-wrap: wrap; */
  margin-top: 5px;
  box-sizing: border-box;
}

.tool-add-to-cart-btn {
  flex: 1 1 416px;
  max-width: 416px;
  height: 50px;
  box-sizing: border-box;
  border: none;
  border-radius: 9999px;
  padding: 10px 24px;
  background: #CB6DA7;
  color: #FFFFFF;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s ease;
}

.tool-add-to-cart-btn:hover {
  background: #c22daf;
}

.tool-favorite-link {
  height: 50px;
  box-sizing: border-box;
  /* border: 1px solid rgba(24, 59, 81, 0.3); */
  border-radius: 9999px;
  padding: 12px 32px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #183B51;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.tool-favorite-link svg {
  color: #C22DAF;
  flex-shrink: 0;
}

.tool-favorite-link:hover {
  background: rgba(24, 59, 81, 0.05);
}

/* --- Meta grid (format / scope / language / age, pink-tinted box) --- */
.tool-meta-grid {
  width: 100%;
  box-sizing: border-box;
  background: rgba(247, 192, 255, 0.45);
  border-radius: 24px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.tool-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: right;
}

.tool-meta-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #183B51;
}

.tool-meta-value {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
  color: #183B51;
}

/* --------------------------------------------------------------------------
   Product / PDF mockup — genuinely unique to this page (a downloadable
   PDF, not a course with an instructor photo, so it doesn't reuse
   Course.html's circle-photo hero).
   -------------------------------------------------------------------------- */
.tool-hero-media {
  position: relative;
  width: 720px;
  max-width: 100%;
  height: 581px;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: #E3EEF3;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-hero-media::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1.5px dashed #5E2E8A;
  opacity: 0.9;
  border-radius: 24px;
  pointer-events: none;
}

.tool-hero-media svg {
  color: #183B51;
}

.tool-hero-media-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: #183B51;
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 16px;
  letter-spacing: 0.3px;
  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Section title (used above the value section — the case-studies /
   reviews / tools sections below it use the shared
   components/_section-header.css and components/_review-cards.css
   headers instead).
   -------------------------------------------------------------------------- */
.tool-section {
  width: 100%;
  max-width: 1475px;
  margin: 0 auto 80px;
  padding: 0 32px;
  box-sizing: border-box;
}

.tool-section-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: #000080;
  text-align: right;
  margin: 0;
}

.tool-reviews-subtitle {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  color: #000080;
  text-align: right;
  margin: 8px 0 0;
}

@media (max-width: 1023px) {
  .tool-hero {
    flex-direction: column-reverse;
    padding: 32px 24px 0;
    gap: 32px;
    text-align: center;
  }

  .tool-hero-body {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  .tool-rating-row,
  .tool-tags-row,
  .tool-price-row,
  .tool-actions-row {
    justify-content: center;
  }

  .tool-hero-media {
    width: 100%;
    height: 320px;
    margin: 0 auto;
  }

  .tool-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .tool-title {
    font-size: 34px;
    line-height: 42px;
  }

  .tool-subtitle {
    font-size: 19px;
    line-height: 27px;
    max-width: 100%;
  }

  .tool-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tool-add-to-cart-btn,
  .tool-favorite-link {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .tool-hero-media {
    height: 240px;
  }

  .tool-hero-media-badge {
    top: 12px;
    right: 12px;
    padding: 6px 14px;
    font-size: 14px;
  }

  .tool-meta-grid {
    grid-template-columns: 1fr 1fr;
    padding: 16px;
  }

  .tool-section-title {
    font-size: 26px;
    line-height: 32px;
  }
}