/* QV Landing Box — self-contained. Values measured from buzzblitz.net/cow-fortnite-en.
   Own classes so it is never touched by the offer-page mu-plugin rewrites and looks
   identical on any page/skin. !important on link colour/decoration beats the theme's
   `.rw-prose a` rules (the block stylesheet loads before the theme). */
.qv-landing {
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding: 16px;
	color: #212529;
}

/* ── Landing area ─────────────────────────────────────────────────────────
   Desktop: image left (41.67%) spanning full height, text top-right, button
   bottom-right. A flat structure (media/text/actions are siblings) so the
   mobile order can be text -> image -> button. */
.qv-landing__top {
	display: grid;
	grid-template-columns: 41.6667% 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"media text"
		"media actions";
	column-gap: 24px;
}

.qv-landing__media { grid-area: media; }

.qv-landing__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 190px;
	object-fit: cover;
	border: 1px solid #DEE2E6;
	border-radius: 6px !important;
	margin: 0 !important;
}

.qv-landing__text {
	grid-area: text;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	text-align: center;
	color: #212529;
	padding-bottom: 12px;
}

.qv-landing__actions {
	grid-area: actions;
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* ── Benefits list ────────────────────────────────────────────────────────*/
.qv-landing__benefits { margin-top: 24px; }

.qv-landing__list-intro {
	display: block;
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 28px;
	/* Left-aligned on all sizes. !important beats the fs-18 utility (offer-page.css),
	   which centers it at higher specificity. */
	text-align: left !important;
	color: #212529;
}

.qv-landing__footnote { font-size: 18px; line-height: 28px; }

.qv-landing__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 8px;
}

.qv-landing__tile {
	display: flex;
	align-items: center;
	padding: 24px;
	background: #F8F9FA;
	border-radius: 6px;
}

.qv-landing__tile svg {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 12px;
	color: #198754;
}

.qv-landing__tile span {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	color: #212529;
}

/* ── Bottom CTA ───────────────────────────────────────────────────────────*/
.qv-landing__cta {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Buttons + notes (shared) ─────────────────────────────────────────────*/
.qv-landing__btn {
	display: inline-block;
	width: 60%;
	padding: 8px 0;
	background: #15803D;
	color: #FFFFFF !important;
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	text-align: center;
	text-decoration: none !important;
	border: 0;
	border-radius: 6px;
	transition: background 150ms ease;
}

.qv-landing__btn:hover { background: #126532; }

.qv-landing__note {
	width: 60%;
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.4;
	color: rgba(33, 37, 41, 0.75);
	text-align: center;
}

/* ── Mobile: stack + reorder the landing area to text -> image -> button ──*/
@media (max-width: 767px) {
	.qv-landing__top {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.qv-landing__text { order: 1; padding-bottom: 0; }
	.qv-landing__media { order: 2; }
	.qv-landing__actions { order: 3; align-self: stretch; align-items: stretch; }
	.qv-landing__img { height: auto; min-height: 0; }

	.qv-landing__tiles { grid-template-columns: 1fr; }

	.qv-landing__btn,
	.qv-landing__actions .qv-landing__note { width: 100%; }
}