/*
 * common-confusion.css
 * Compiled from React SCSS sources for the Common Confusion / Exclusive Category pages.
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Sources compiled:
 *   _cc-banner.scss    (CommonConfusionBanner / More/CommonConfusionBanner)
 *   _discover-more.scss (More/DiscoverMore — .common-confussion-discover modifier)
 *   _home_design.scss  (pagination-container / pagination-button)
 *
 * Variables resolved:
 *   $secondary       → #19263a
 *   $white           → #ffffff
 *   $primary         → #e78125
 *   $color_shark     → #232528
 *   $color_gun_powder→ #464566
 *   $color_raven     → #7b7c7e
 *
 * Note: .need-help-wrap, .need-help-wrap-light, .discover-more-wrap.need-help-wrap,
 *       .blog-item, .blog-list, .home-recent-blog-wrap are already in blog.css.
 *       Only styles NOT already in blog.css/main.css are included here.
 */

/* ============================================================
   COMMON CONFUSION BANNER
   Source: _cc-banner.scss (both Sections and More variants)
   ============================================================ */

.common-confussion-banner {
  background: #19263a; /* $secondary */
  padding: 78px 0 236px;
}

@media (max-width: 991px) {
  .common-confussion-banner {
    padding: 60px 0;
  }
}

.common-confussion-banner .page-title {
  text-align: center;
  color: #ffffff;
}

.common-confussion-banner .page-title-desc {
  text-align: center;
  color: #cdcdcd;
  font-size: 18px;
  line-height: 22px;
  padding-top: 5px;
}

/* ============================================================
   DISCOVER MORE — SLIDER VISIBILITY
   Source: _discover-more.scss → .discover-more-wrap.need-help-wrap .need-help-slider
   Desktop: show static tag cloud (.discover-more-tags), hide slider.
   Mobile (≤767px): hide tag cloud, show slider.
   ============================================================ */

.discover-more-wrap.need-help-wrap .need-help-slider {
  display: none;
}

@media (max-width: 767px) {
  .discover-more-wrap.need-help-wrap .need-help-slider {
    display: block;
  }
}

/* ============================================================
   DISCOVER MORE — COMMON CONFUSION VARIANT
   Source: _discover-more.scss → &.common-confussion-discover {}
   Overlays the banner (negative margin-top) on desktop, stacks on mobile.
   ============================================================ */

.discover-more-wrap.common-confussion-discover {
  background: #ffffff;
  max-width: 990px;
  margin: -164px auto 0;
  padding: 44px 70px 20px;
  border-radius: 8px;
}

@media (max-width: 991px) {
  .discover-more-wrap.common-confussion-discover {
    border-radius: 0;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .discover-more-wrap.common-confussion-discover {
    padding: 25px 11px;
  }
}

/* ============================================================
   PAGINATION — matches React .pagination-container classes
   Source: _home_design.scss → .pagination-container block
   Used by cc-post-list.php (replaces React's client-side pagination)
   ============================================================ */

.pagination-container {
  max-width: 100%;
  margin-top: 32px;
  width: 100%;
}

.pagination-container .wrapper {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination-container .pagination-button {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  color: #000000;
  border-radius: 8px;
  border: 2px solid #e68125;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  font-size: inherit;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.pagination-container .pagination-button:hover {
  background: #e68125;
  color: #ffffff;
}

.pagination-container .pagination-button.active {
  background: #e68125;
  color: #ffffff;
  cursor: default;
}

.pagination-container .pagination-button.disabled,
.pagination-container .pagination-button[disabled] {
  cursor: default;
  filter: saturate(0);
  opacity: 0.6;
}

.pagination-container .pagination-ellipsis {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b7c7e; /* $color_raven */
  font-size: 1.2em;
}

@media screen and (max-width: 575px) {
  .pagination-container .wrapper {
    gap: 6px;
  }

  .pagination-container .pagination-button {
    min-width: 32px;
    height: 36px;
    padding: 0 8px;
    font-size: 14px;
  }
}

/* ============================================================
   EXCLUSIVE CATEGORY SUB-PAGE — .blog-category-page-title
   Source: CommonConfusion.js — else branch (non-common-confusion slugs)
   Note: .blog-category-page-title base styles are already in blog.css.
   This adds the text-center override used on CC sub-pages.
   ============================================================ */

.blog-category-page-title .h1.text-center,
.blog-category-page-title h1.text-center {
  text-align: center;
  margin-bottom: 0;
}

.blog-category-page-title p.text-center {
  text-align: center;
}

/* ============================================================
   POPULAR DESIGN SECTION WRAPPER
   Source: CommonConfusionList.js — .home-recent-blog-wrap.popular-design-section
   Note: .home-recent-blog-wrap base styles are already in blog.css.
   ============================================================ */

.home-recent-blog-wrap.popular-design-section {
  padding-top: 70px;
}

@media (max-width: 991px) {
  .home-recent-blog-wrap.popular-design-section {
    padding-top: 24px;
  }
}

/* ============================================================
   AD BLOCK
   Source: CommonConfusionList.js — .ad-block > .g-ad
   ============================================================ */

.ad-block {
  width: 100%;
}

.ad-block .g-ad {
  text-align: center;
  padding: 16px 0;
  min-height: 90px;
}
.exhibition-static-wrap {
  background: #f9f5f2;
}
.exhibition-static-wrap img {
  margin: auto;
}