/* QV Related Content — self-contained horizontal card (image left, copy + CTA right).
   The front-end root has no wrapper class, so every rule is scoped to .d-sm-block
   (this block's outer div). Its 1px top/bottom rules are inline in the markup.

   On offer pages the roamways-offer-page mu-plugin rebuilds this block into the
   .rwop-offer card (styled by offer-page.css), so .d-sm-block is only present —
   and these rules only apply — on sites without that mu-plugin. */

.d-sm-block {
	display: block;
	max-width: 960px;
	margin: 48px auto;
	padding: 16px;
}

/* Optional centered eyebrow heading. */
.d-sm-block .text-center { text-align: center; }
.d-sm-block > .text-center { margin-bottom: 24px; }
.d-sm-block h6 {
	margin: 0;
	padding-top: 16px;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 500;
	color: #111827;
}

/* Two-column row: image | copy. */
.d-sm-block .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 -12px;
}
.d-sm-block .row > [class*="col-"] { padding: 0 12px; }
.d-sm-block [class*="col-sm-12"] { width: 100%; }

@media (min-width: 768px) {
	.d-sm-block [class*="col-md-5"],
	.d-sm-block [class*="col-lg-5"] { width: 41.6667%; }
	.d-sm-block [class*="col-md-7"],
	.d-sm-block [class*="col-lg-7"] { width: 58.3333%; }
}

/* Image. */
.d-sm-block img.w-100 {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	border: 1px solid #dee2e6;
	border-radius: 6px;
}

/* Copy column — column flex so the button pins to the bottom-right. */
.d-sm-block .d-flex { display: flex; }
.d-sm-block .flex-column { flex-direction: column; }
.d-sm-block .justify-content-between { justify-content: space-between; }
.d-sm-block .mt-auto { margin-top: auto; }
.d-sm-block .align-items-end { align-items: flex-end; }

.d-sm-block h3 {
	margin: 0 0 4px;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 500;
	color: #111827;
}

/* Tag pills between the title and the description (buzzblitz style: light-green
   pill, dark-green uppercase text). */
.d-sm-block .qv-rc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0 0 4px;
}
.d-sm-block .qv-rc-tag {
	display: inline-block;
	padding: 3px 10px;
	background: #f0fdf4;
	color: #15803d;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
}
.d-sm-block .text-justify {
	padding: 12px 0;
	font-size: 16px;
	line-height: 1.6;
	color: #212529;
	text-align: justify;
}

/* CTA button — .btn-block also matches cta-button-green's rule, so scope + one
   extra class keeps this card's button its own (auto width, bottom-right). */
.d-sm-block a.bg-green-700.btn-block {
	display: inline-block;
	width: auto;
	padding: 8px 32px;
	background: #15803d;
	color: #fff;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 6px;
	transition: background 150ms ease;
}
.d-sm-block a.bg-green-700.btn-block:hover { background: #126532; }

/* Small note under the button. .rwop-cc-note is the current marker; the second
   selector catches notes saved with the older `text-xs text-muted` markup so they
   stay 11px without needing the block to be re-saved. */
.d-sm-block .rwop-cc-note,
.d-sm-block .text-xs.text-muted {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: rgba(33, 37, 41, 0.75);
	text-align: center;
}

@media (max-width: 767px) {
	.d-sm-block a.bg-green-700.btn-block { display: block; width: 100%; }
	.d-sm-block .align-items-end { align-items: stretch; }
}