/*
 * resolve-queries.css
 * Styles for the Resolved Queries listing page (/resolve-queries/).
 *
 * Generated by Claude Code Phase 2B — Developer review required
 * Converted from:
 *   frontend-nextjs/src/views/pages/home/_banner.scss        (banner, banner-wrap, post-by, banner-content)
 *   frontend-nextjs/src/views/pages/More/ResolveQueries/InfographicBanner.js (home-banner-wrap--boxed usage)
 *   frontend-nextjs/src/assets/scss/_gp_common.scss          (blog-category-page-title)
 *   frontend-nextjs/src/assets/scss/components/_blog_list.scss (blog-list, blog-item)
 *
 * Most shared styles live in blog.css (already loaded on this page):
 *   .blog-category-page-title, .home-banner-wrap, .home-banner-wrap--boxed,
 *   .banner-wrap, .banner-content, .post-by, .banner-img,
 *   .home-recent-blog-wrap, .blog-list, .blog-item, .blog-item__img, .blog-item__info,
 *   .blog-item__title, .blog-item__by, .blog-cta-wrap, .blog-cta-box,
 *   .quick-links-wrap, .quick-link-box, .quick-link-cta-wrap
 *
 * This file contains:
 *   1. Page wrapper spacing
 *   2. .gap-24 fallback (defined in homepage.css; duplicated here as safety net)
 *   3. Banner pagination inside .home-banner-wrap--boxed (from _banner.scss)
 *   4. other_banner_inr_sec layout (from InfographicBanner.js .container.other_banner_inr_sec)
 *   5. Load More button spacing
 *
 * Dependency load order: bootstrap → gharpedia-main → swiper → gharpedia-blog → gharpedia-homepage → resolve-queries
 */

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.resolve-queries-page {
  overflow: hidden;
}

/* ============================================================
   .gap-24 UTILITY — safety fallback
   Source: _blog_list.scss ul.row.gap-24 / homepage.css .row.gap-24
   homepage.css already defines this; kept here so the list renders
   correctly even if load order changes.
   ============================================================ */

.resolve-queries-page .row.gap-24 > li,
.resolve-queries-page .row.gap-24 > [class*="col-"] {
  padding-bottom: 74px;
}

@media (max-width: 767px) {
  .resolve-queries-page .row.gap-24 > li,
  .resolve-queries-page .row.gap-24 > [class*="col-"] {
    padding-bottom: 40px;
  }
}

/* ============================================================
   BANNER — .home-banner-wrap--boxed OVERRIDES
   Source: frontend-nextjs/src/views/pages/home/_banner.scss  &--boxed block
   blog.css provides the base .home-banner-wrap--boxed styles;
   these are resolve-queries-specific overrides.
   ============================================================ */

/*
 * other_banner_inr_sec: container inner-section that centres banner-content
 * inside the boxed banner layout.
 * Source: InfographicBanner.js → <div className="container other_banner_inr_sec">
 */
.resolve-queries-page .home-banner-wrap--boxed .other_banner_inr_sec {
  height: 100%;
  display: flex;
  align-items: center;
}

/*
 * Boxed banner: limit max-width and centre with border-radius on large screens.
 * Source: _banner.scss .home-banner-wrap { &--boxed { max-width: 1243px; margin: 0 auto; } }
 * Note: blog.css already has the core --boxed rule; this re-asserts on resolve-queries-page
 * to ensure specificity is not overridden.
 */
.resolve-queries-page .home-banner-wrap.home-banner-wrap--boxed {
  max-width: 1243px;
  margin: 0 auto;
}

/* Banner pagination — Swiper pagination bullets placed inside banner-slider-dot */
.resolve-queries-page .home-banner-wrap--boxed .banner-slider-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 10;
  pointer-events: none;
}

.resolve-queries-page .home-banner-wrap--boxed .banner-slider-pagination {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.resolve-queries-page .home-banner-wrap--boxed .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.resolve-queries-page
  .home-banner-wrap--boxed
  .swiper-pagination-bullet-active {
  background: #fff;
  width: 12px;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .resolve-queries-page .home-banner-wrap--boxed .banner-slider-dot {
    bottom: 10px;
  }
}

/* ============================================================
   QUERIES LIST — home-recent-blog-wrap spacing
   Source: _blog_list.scss — .home-recent-blog-wrap padding
   blog.css defines the base; this adds top padding for section separation.
   ============================================================ */

.resolve-queries-page .home-recent-blog-wrap {
  padding-top: 56px;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .resolve-queries-page .home-recent-blog-wrap {
    padding-top: 40px;
  }
}

/* ============================================================
   LOAD MORE BUTTON
   Source: ResolvedQueriesList.js — "Load More" <button className="btn btn-outline-primary">
   ============================================================ */

#gp-rq-load-more-wrap {
  padding-top: 40px;
  padding-bottom: 56px;
}

#gp-rq-load-more-wrap.gp-loading {
  opacity: 0.6;
  pointer-events: none;
}

#gp-rq-load-more-wrap.gp-hidden {
  display: none;
}

@media (max-width: 767px) {
  #gp-rq-load-more-wrap {
    padding-top: 24px;
    padding-bottom: 40px;
  }
}

/* ============================================================
   QUICK LINK CTA WRAP — pt-2 utility
   Source: React <div className="quick-link-cta-wrap pt-2"> (Bootstrap pt-2 = 0.5rem)
   blog.css defines .quick-link-cta-wrap {}; this adds the top padding.
   ============================================================ */

.resolve-queries-page .quick-link-cta-wrap {
  padding-top: 0.5rem;
}
.home-banner-wrap--boxed .banner-wrap .banner-content {
  margin-left: 32px;
}
.home-banner-wrap--boxed .banner-wrap .banner-content .cta {
  padding-top: 0;
}
.home-banner-wrap--boxed .banner-wrap .banner-content .banner-title {
  padding-bottom: 0;
}
.home-banner-wrap--boxed .banner-wrap .banner-content .post-by {
  font-size: 16px;
}

.blog-cta-box {
  margin-top: 0;
}