/* ════════════════════════════════════════════════════════════════════════════
 * Comparador promo — ACF block (Figma 6618-54358, mobile 375 frame)
 *
 * Enqueued by block.php; this is the block's only stylesheet. Every selector is
 * prefixed `.cmpp` so nothing here can reach the rest of the site — the
 * comparador's `--cmp-*` custom properties live on `.cmp` in a stylesheet that
 * only loads on /financeiras, so this block declares its own tokens.
 *
 * No horizontal padding of its own: the block is dropped into normal post
 * content, where the theme's Bootstrap container already supplies 15px gutters
 * (card = 345 at a 375 viewport, against Figma's 343 — a 2px difference). Adding
 * 16px here on top of that gutter is what shrank the card to 313.
 *
 * Figma geometry: card 343×595. Art 343×395 sits at the top; the copy starts at
 * y=337, so art and copy overlap by 58px. 58/343 = 16.910%, and percentage
 * margins resolve against the container WIDTH — so expressing the overlap as a %
 * keeps it exact at any card width instead of pinning it to the 375 frame.
 * ════════════════════════════════════════════════════════════════════════════ */

.cmpp {
	--cmpp-primary: #2e3192;
	--cmpp-green: #28c66e;

	position: relative;
	/* Margin, not padding — padding would grow the white card itself. Vertical
	 * margins collapse with the neighbouring block's, so two stacked blocks give
	 * 48px between them rather than 96px, which is the wanted behaviour. */
	margin-top: 48px;
	margin-bottom: 48px;
	overflow: hidden; /* clips the art to the card's rounded corners */
	border-radius: 24px;
	background: #fff;
	/* Figma "shadowww": #2A335314 offset 0/40, blur 140, spread 0. The alpha byte is
	 * 0x14 = 20/255 = 0.0784, not 0.08 — measured falloff matches the canvas to within
	 * one luminance level out to 70px from the edge. */
	box-shadow: 0 40px 140px rgba(42, 51, 83, 0.0784);
}

/* ── art ─────────────────────────────────────────────────────────────────── */

.cmpp__art {
	display: block;
	margin-bottom: -16.91%; /* 58px of overlap at the 343 card, proportional above it */
	line-height: 0; /* kill the inline-image descender gap */
}

.cmpp__art picture {
	display: block; /* <picture> is inline by default, which reintroduces the descender gap */
}

.cmpp__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── copy ────────────────────────────────────────────────────────────────── */

.cmpp__body {
	position: relative; /* lift above the art it overlaps */
	padding: 0 16px 16px;
}

.cmpp__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 24px;
	color: var(--cmpp-green);
	text-transform: uppercase;
	white-space: nowrap;
}

.cmpp__title {
	margin: 2px 0 0; /* Figma gap 2 under the eyebrow */
	max-width: 279px;
	font-size: 20px;
	font-weight: 900;
	/* Figma's panel reads 1.24, but that's a rounded display value — its own text
	 * frames are 50px for two 20px lines and 60px for two 24px lines, i.e. 1.25
	 * exactly. Using 1.24 leaves the card half a pixel short at every breakpoint. */
	line-height: 1.25;
	/* Figma's panel reports -0.6111px, and it reports the SAME number at 20/24/32px,
	 * which is the tell that it isn't the real per-node value. At 32px it is provably
	 * wrong: it shrinks "Compare Loan Offers in" to 378.3px, just inside the 381px
	 * title box, so the line breaks after "in" where Figma breaks after "Offers".
	 * Pixel-diffing the rendered title against the Figma canvas puts the true value at
	 * -0.4px (mean abs diff 8.7 vs 19.2 at 375, 9.9 vs 16.6 at 768, 10.0 vs 23.8 at
	 * 1250) — and it restores the correct break with ~2px to spare. */
	letter-spacing: -0.4px;
	color: var(--cmpp-primary);
}

.cmpp__text {
	margin: 10px 0 0; /* Figma gap 10 under the title group */
	font-size: 12px;
	font-weight: 400;
	line-height: 1.88;
	color: var(--cmpp-primary);
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

/* Mirrors .cmp__btn--fill from the comparador (same Figma button component), but
 * restated here because that stylesheet only loads on /financeiras. */
.cmpp__cta {
	margin-top: 16px; /* Figma gap 16 between copy and button */
}

.cmpp__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 48px;
	padding: 16px 12px 16px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--cmpp-green);
	font-family: inherit; /* the theme styles anchors with a different face */
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

/* the theme's global `a:hover{text-decoration:underline}` would underline the
 * label; pin hover to the resting look so nothing shifts. */
.cmpp__btn:hover,
.cmpp__btn:focus,
.cmpp__btn:visited {
	background: var(--cmpp-green);
	color: #fff;
	text-decoration: none;
}

/* 20×20 slot with a 10×10 glyph, per Figma */
.cmpp__btn-ic {
	display: flex;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.cmpp__btn-ic img {
	display: block;
	width: 10px;
	height: 10px;
}

/* ════════════════════════ ≥768 — Figma 6618-52741 ═════════════════════════
 * The card turns horizontal: copy left in a 40px-padded column, illustration
 * absolutely placed on the right half and bleeding off the card.
 *
 * Figma frame 768 → card 720×402 (24px side margins from the container). The
 * card's 402 height is not set anywhere — it falls out of 40 + 322 + 40, where
 * 322 is the copy column (92 eyebrow+title, +10, 140 body, +24, 56 button).
 * ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
	/* Figma puts the illustration at x=360 inside the 720 card — exactly half —
	 * so left/width in % keeps the split correct at any card width, and the card's
	 * overflow:hidden does the clipping. Absolute, so the copy column alone sets
	 * the card height. It stays behind the copy: both are positioned, and the art
	 * comes first in the DOM. */
	/* top/right/bottom/left longhands rather than `inset` — the block has to render
	 * on older engines too, and only `left` then changes at ≥1250. */
	.cmpp__art {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 50%;
		margin-bottom: 0; /* the mobile overlap trick is off here */
	}

	/* At the Figma 720 card the right half is 360 wide and the crop is 360×402 —
	 * a 1:1 fit, nothing cropped. Below that (the theme container is 690 at a 768
	 * viewport) `height:auto` would leave the art 16px short of the card bottom,
	 * so it fills instead and trims from the right, which is the bleeding edge. */
	.cmpp__art picture,
	.cmpp__art img {
		width: 100%;
		height: 100%;
	}

	.cmpp__art img {
		object-fit: cover;
		object-position: left top;
	}

	/* margin-top stays at the base 48px; only the gap to the next block grows. */
	.cmpp {
		margin-bottom: 64px;
	}

	.cmpp__body {
		padding: 40px;
	}

	.cmpp__eyebrow {
		font-size: 14px;
	}

	.cmpp__title {
		margin-top: 8px;
		font-size: 24px;
	}

	.cmpp__text {
		margin-top: 10px;
		max-width: 329px;
		font-size: 14px;
		line-height: 28px;
	}

	.cmpp__cta {
		margin-top: 24px;
	}

	/* inline-flex, not flex: a block-level flex container would stretch to the
	 * column width, but Figma has the button shrink to its content (217×56). */
	.cmpp__btn {
		display: inline-flex;
		width: auto;
		height: 56px;
		padding: 16px 24px;
	}

	.cmpp__btn-ic {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
	}

	.cmpp__btn-ic img {
		width: 12px; /* Figma insets the glyph 25% inside the slot */
		height: 12px;
	}
}

/* ════════════════════════ ≥1250 — Figma 6585-51562 ════════════════════════
 * Same horizontal card, roomier: padding 64, a 32px title and a wider copy
 * column. Card 1096×414 in the design — which is the theme's ≥1250 content
 * column (the comparador uses 1099) — and 414 again falls out of 64 + 286 + 64.
 * The CTA is byte-identical to ≥768 (217×56), so nothing is restated for it.
 * ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1250px) {
	/* Figma puts the illustration at x=582 in the 1096 card. Unlike ≥768 that is
	 * not the midpoint — 53.102% — and it bleeds past the top and bottom edges
	 * too, which object-fit: cover already handles. */
	.cmpp {
		margin-bottom: 120px;
	}

	.cmpp__art {
		left: 53.102%;
	}

	.cmpp__body {
		padding: 64px;
	}

	/* 451px, not Figma's 381: at 381 the title wrapped onto THREE lines
	 * ("Compare Todas as Ofertas de Crédito Consolidado" measures 298/305/202), which reads
	 * badly against the two-line version every smaller breakpoint gets. Two lines need 431px;
	 * 451 is used instead because it is the width `.cmpp__text` below already occupies — so
	 * the two blocks share an edge, and there is slack for the final PT copy without this
	 * tipping back to three lines. Still well clear of the illustration, which starts at
	 * 53.102% of the card (≈589px) minus the 64px padding.
	 * ≥1250 ONLY — the 20px/24px sizes below already fit the copy as designed. */
	.cmpp__title {
		max-width: 451px;
		font-size: 32px;
	}

	.cmpp__text {
		max-width: 451px;
	}
}