/**
 * material-buying-guide-detail.css
 * Page: /material-buying-guide-detail/  (page-material-buying-guide-detail.php)
 *
 * Converted from:
 *   frontend-nextjs/src/views/pages/material-buying-guide-detail/professionals-section.scss
 *   frontend-nextjs/src/views/pages/material-buying-guide-detail/_blog-detail-header.scss  (→ blog.css)
 *   frontend-nextjs/src/views/pages/material-buying-guide-detail/_share-post-fixed.scss    (→ blog.css)
 *   frontend-nextjs/src/views/pages/material-buying-guide-detail/_home_recent_blog.scss    (→ blog.css)
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Loaded AFTER blog.css, which already provides the bulk of this page:
 *   .blog-detail-header-wrap / .blog-detail-header-content / .blog-author-share
 *   .share-post-fixed / .sticky-bar
 *   .detail-page-content / .blog-featured-img / .content-block (+ h2/h3/p/ul/a)
 *   .related-quiz-wrap / .related-quiz-wrap.related-survey-wrap / .related-quiz-item
 *   .home-recent-blog-wrap / .blog-item
 *   .title-sub-txt / .section-title / .btn-link / .btn-right-icon
 *
 * This file only adds what blog.css does NOT carry:
 *   1. .primary-bg-light            — the RelatedBlogs wrapper background (from homepage.css)
 *   2. .content-block h2.title-no   — the numbered "01. Heading" style (from services.css)
 *   3. .content-block figure        — figure/figcaption styling (from services.css)
 *   4. .professionals-wrap          — the MBG-specific professionals section
 *   5. .professional-list*          — card grid (from professional-listing.css), so this
 *                                     page does not have to load that whole stylesheet
 */

/* ============================================================
   1. SECTION BACKGROUND
   Source: React <div className="primary-bg-light"><RelatedBlogs /></div>
   Copied from homepage.css so this page does not depend on it.
   ============================================================ */
.primary-bg-light {
  background: #f9f5f2;
}

/* ============================================================
   2. NUMBERED CONTENT HEADINGS
   Source: React <h2 className="title-no"><span>01.</span>Need or Desire of Material</h2>
   Copied from services.css (.content-block h2.title-no) — blog.css has no .title-no rule.
   ============================================================ */
.content-block h2.title-no {
  max-width: 660px;
  font-size: 38px;
  display: flex;
  justify-content: center;
  padding-bottom: 38px;
  color: #232528;
}

@media (max-width: 767px) {
  .content-block h2.title-no {
    font-size: 22px;
    padding-bottom: 24px;
  }
}

/* The "01." prefix inside the numbered heading */
.content-block h2.title-no span {
  color: #7b7c7e;
  text-align: center;
  flex-shrink: 0;
  margin-right: 10px;
}

/* ============================================================
   3. FIGURES + CAPTIONS
   Source: React <figure><img/><figcaption>Caption: Lorem Ipsum</figcaption></figure>
   Copied from services.css — blog.css styles .content-block img but not <figure>.
   ============================================================ */
.content-block figure {
  padding-bottom: 38px;
  margin: 0;
}

@media (max-width: 767px) {
  .content-block figure {
    padding-bottom: 24px;
  }
}

.content-block figure img {
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}

.content-block figure figcaption {
  text-align: center;
  font-size: 12px;
  line-height: 150%;
  color: #838383;
  padding-top: 8px;
}

/* ============================================================
   4. EXPLORE NEARBY PROFESSIONALS (MBG variant)
   Source: professionals-section.scss
     .professionals-wrap { padding: 77px 0 44px; background: $color_fantasy; }
     $color_fantasy = #f9f5f2
   NOTE: this is NOT .nearby-professionals-wrap (the homepage component).
   ============================================================ */
.professionals-wrap {
  padding: 77px 0 44px;
  background: #f9f5f2;
}

@media (max-width: 767px) {
  .professionals-wrap {
    padding: 40px 0 24px;
  }
}

/* Source: professionals-section.scss .title-wrap */
.professionals-wrap .title-wrap {
  display: flex;
  justify-content: space-between;
  padding-bottom: 45px;
}

@media (max-width: 767px) {
  .professionals-wrap .title-wrap {
    flex-direction: column;
    padding-bottom: 24px;
  }
}

.professionals-wrap .title-wrap h2 {
  margin: 0;
}

/* Source: professionals-section.scss .title-wrap .cta */
.professionals-wrap .title-wrap .cta {
  flex-shrink: 0;
  margin-left: 15px;
  padding-top: 10px;
}

@media (max-width: 767px) {
  .professionals-wrap .title-wrap .cta {
    margin-left: 0;
    padding-top: 12px;
  }
}

/* Source: professionals-section.scss — white cards with a warm shadow, no border */
.professionals-wrap .professional-list .professional-list-box {
  background: #ffffff;
  border: 0;
  box-shadow: 0px 14px 26px #f2e8e1;
}

/* ============================================================
   5. PROFESSIONAL CARD GRID
   Source: professional-listing.css (.professional-list, .professional-list-box)
   Duplicated here so /material-buying-guide-detail/ stays self-contained and does
   not have to enqueue the whole professional-listing.css.
   ============================================================ */
.professional-list ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  list-style: none;
  padding: 0;
  width: 100%;
}

.professional-list ul li {
  width: 33.33%;
  padding: 0 15px 30px;
  flex: 1 1 auto;
  max-width: 500px;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .professional-list ul li {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .professional-list ul li {
    width: 100%;
    padding-bottom: 12px;
  }
}

.professional-list-box {
  border: 1px solid rgba(123, 124, 126, 0.2);
  border-radius: 4px;
  padding: 25px 29px;
  height: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease-in-out;
}

.professional-list-box:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 767px) {
  .professional-list-box {
    display: flex;
    padding: 12px;
  }
}

.professional-list-box .img {
  width: 100%;
  height: 190px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 24px;
}

.professional-list-box .img img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
}

@media (max-width: 767px) {
  .professional-list-box .img {
    margin-bottom: 0;
    width: 60px;
    height: 60px;
    margin-right: 15px;
    flex-shrink: 0;
  }
}

.professional-list-box .txt {
  flex: 1;
}

.professional-list-box h4 {
  font-size: 22px;
  line-height: 116%;
  font-weight: 500;
  color: #232528;
  padding-bottom: 6px;
  margin: 0;
}

@media (max-width: 767px) {
  .professional-list-box h4 {
    font-size: 16px;
  }
}

.professional-list-box .tag {
  font-size: 16px;
  line-height: 150%;
  font-weight: 500;
  color: #7b7c7e;
}

@media (max-width: 767px) {
  .professional-list-box .tag {
    font-size: 12px;
  }
}

/* ============================================================
   6. BOOKMARK TOGGLE (presentational)
   Source: MaterialBuyingDetailHeader.js — useState toggle swapping
   FaRegBookmark ↔ FaBookmark. Both SVGs are in the DOM; only one shows.
   Toggled by assets/js/material-buying-guide-detail.js.
   ============================================================ */
.bookmark-btn .bookmark .bookmark__icon-on {
  display: none;
}

.bookmark-btn .bookmark.active .bookmark__icon-off {
  display: none;
}

.bookmark-btn .bookmark.active .bookmark__icon-on {
  display: inline-block;
}