/*
 * calculator-list.css
 *
 * Converted from:
 *   frontend-nextjs/src/views/pages/calculator/CalculatorContent/_calculator-content.scss
 *   frontend-nextjs/src/views/pages/More/_exclusive-page.scss      (only .exclusive-banner rule)
 *   frontend-nextjs/src/assets/scss/_base.scss                      (.row.gap-24 gutter)
 *
 * Used by: archive-calculator.php  (/calculator-list/)
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Load order: bootstrap → gharpedia-main → gharpedia-blog → gharpedia-calculator-list
 *
 * IMPORTANT — what is NOT overriding .blog-item here:
 *   _exclusive-page.scss scopes its card overrides (fixed 200 px height, shadow, hover lift)
 *   inside .exclusive-item-list .blog-item. The calculator-list page does NOT use that wrapper,
 *   so those styles were never active in React. The standard .blog-item rules from blog.css
 *   (61.31 % padding-bottom aspect ratio) apply as-is — no override needed.
 *
 * Sections:
 *   1. Exclusive Banner  (.exclusive-banner)
 *   2. Blog grid gutter  (.row.gap-24)
 *   3. Blog CTA override (.blog-cta-box--style2 margin reset)
 */


/* ── 1. EXCLUSIVE BANNER ──────────────────────────────────────────────────────
   Source: _exclusive-page.scss → .exclusive-banner { padding: 66px 0 108px; text-align:center }
           _calculator-content.scss → same rule (duplicate in React SCSS, identical values)
   React:  <div className="exclusive-banner">
             <div className="container">
               <h1 className="h1">{pageObj.title}</h1>
             </div>
           </div>
   Variables resolved:
     $color_raven → #7b7c7e
*/
.exclusive-banner {
	padding: 66px 0 108px;
	text-align: center;
}

/* Source: _exclusive-page.scss → p { max-width: 636px; color: $color_raven; ... } */
.exclusive-banner p {
	max-width: 636px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 150%;
	padding-top: 20px;
	color: #7b7c7e; /* $color_raven */
}
	.exclusive-banner .h1 {
		font-size: 42px;
		line-height: 120%;
		color: #232528; /* $color_shark */
	}
/* Source: _exclusive-page.scss → @include breakpoint(max, 767) { .h1 { font-size: 40px } } */
@media (max-width: 767px) {
	.exclusive-banner .h1 {
		font-size: 40px;
	}
}


/* ── 2. BLOG GRID GUTTER (.row.gap-24) ───────────────────────────────────────
   Source: frontend-nextjs/src/assets/scss/_base.scss
   React:  <ul className="row gap-24"> creates 24 px column gaps
   Note:   videos.css also defines .row.gap-24 with identical values (no conflict).
           Included here so this stylesheet is self-contained when videos.css is not loaded.
*/
.row.gap-24 {
	margin-left: -12px;
	margin-right: -12px;
}

.row.gap-24 [class*="col-"] {
	padding-left: 12px;
	padding-right: 12px;
}

@media (max-width: 767px) {
	.row.gap-24 {
		margin-left: -10px;
		margin-right: -10px;
	}

	.row.gap-24 [class*="col-"] {
		padding-left: 10px;
		padding-right: 10px;
	}
}


/* ── 3. BLOG CTA MARGIN RESET ────────────────────────────────────────────────
   Source: _calculator-content.scss → .blog-cta-box.blog-cta-box--style2 { margin-top: 0 !important }
   Why:    .blog-cta-box--style2 carries margin-top: -175px in blog.css to overlap the section
           above. The calculator-list page has no tall image section above the CTA, so the
           negative margin must be reset to prevent the box from floating over the card grid.
   This is the exact override in the original React SCSS — no value changed.
*/
.blog-cta-box.blog-cta-box--style2 {
	margin-top: 0 !important;
}