/* ============================================================
   CBM Pillar Backlinks - Made by Ozaar
   Minimal, responsive. Accent color controllable per widget.
   ============================================================ */

.cbm-areas,
.cbm-calculators {
	--cbm-navy: #0d2340;
	--cbm-accent: #14498c;
	--cbm-muted: #5a6b7b;
	--cbm-line: #eceff3;
	font-family: inherit;
}

/* ---- Shared header ---- */
.cbm-section-head { margin-bottom: 20px; }

.cbm-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cbm-accent);
	margin-bottom: 8px;
}

.cbm-heading {
	font-size: clamp( 20px, 2.2vw, 28px );
	line-height: 1.25;
	font-weight: 700;
	color: var(--cbm-navy);
	margin: 0 0 10px;
}

.cbm-desc {
	color: var(--cbm-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	max-width: 46ch;
}

.cbm-chev { font-weight: 700; }

/* ============================================================
   PILLAR BACKLINKS (areas)
   ============================================================ */
.cbm-areas-grid {
	display: grid;
	grid-template-columns: repeat( var( --cbm-cols, 6 ), 1fr );
	gap: 16px;
}

.cbm-area-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.cbm-area-thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	background-color: #e9eef4;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1) {
	.cbm-area-thumb { padding-top: 75%; }
}

.cbm-area-thumb picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Target the <img> structurally: Imagify's WebP conversion moves the
   .cbm-area-img class onto the <picture> wrapper, so a class-based rule
   stops matching the inner <img>. This survives that relocation. */
.cbm-area-thumb img,
.cbm-area-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center;
	display: block;
	transition: opacity 0.18s ease;
}

.cbm-area-card:hover .cbm-area-img { opacity: 0.9; }

.cbm-area-title {
	font-weight: 700;
	color: var(--cbm-navy);
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.3;
}

.cbm-area-link {
	color: var(--cbm-accent);
	margin-top: 3px;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.cbm-view-all-wrap { text-align: center; margin-top: 22px; }

.cbm-view-all {
	color: var(--cbm-accent);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cbm-empty { color: var(--cbm-muted); }

/* ============================================================
   CALCULATORS
   ============================================================ */
.cbm-calc-list { display: flex; flex-direction: column; gap: 6px; }

.cbm-calc-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--cbm-line);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.cbm-calc-item:hover { opacity: 0.75; }
.cbm-calc-item.cbm-hidden { display: none; }

.cbm-calc-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #79123F;
	line-height: 0;
}

.cbm-calc-icon svg,
.cbm-calc-icon i { width: 16px; height: 16px; font-size: 16px; fill: currentColor; }

.cbm-calc-text { display: flex; flex-direction: column; flex: 1 1 auto; }

.cbm-calc-title { font-weight: 700; color: var(--cbm-accent); font-size: 14px; }
.cbm-calc-desc { color: var(--cbm-muted); font-size: 12.5px; margin-top: 1px; }
.cbm-calc-item .cbm-chev { color: #b3bdca; font-size: 18px; }

.cbm-calculators .cbm-calc-loadmore,
.cbm-calculators .cbm-calc-loadmore:hover,
.cbm-calculators .cbm-calc-loadmore:focus {
	-webkit-appearance: none;
	appearance: none;
	margin-top: 16px;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
	color: var( --cbm-accent ) !important;
	font: inherit;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 !important;
	width: auto !important;
	text-decoration: none !important;
}

.cbm-calculators .cbm-calc-loadmore:hover { text-decoration: underline !important; }

/* ============================================================
   RESPONSIVE  (tablet 900, mobile 767 — matches the site's breakpoints)
   ============================================================ */
@media ( max-width: 900px ) {
	.cbm-areas-grid { grid-template-columns: repeat( 3, 1fr ); }
}

@media ( max-width: 767px ) {
	.cbm-section-head { margin-bottom: 16px; }

	/* Default mobile grid (when slider is off) */
	.cbm-areas-grid { grid-template-columns: repeat( 2, 1fr ); gap: 12px; }

	/* Swipe slider */
	.cbm-areas-grid.is-slider {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 2px 16px 8px;
	}
	.cbm-areas-grid.is-slider::-webkit-scrollbar { display: none; }
	.cbm-areas-grid.is-slider > .cbm-area-card {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
	.cbm-area-title { font-size: 15px; }
	.cbm-area-link { font-size: 14px; }

	/* Calculators: a touch more breathing room on phones */
	.cbm-calc-item { padding: 14px 2px; }
	.cbm-calc-title { font-size: 15px; }
	.cbm-calc-desc { font-size: 13px; }
}