/**
 * CTA Banner — Figma section 05 (node 1092:19072)
 * 1920x196, padding 0 240.
 * Auto-layout gap of 870.17px between the two columns = space-between.
 *
 * The band is drawn two ways: #F2FAF5 with a #010101 heading over #373E45 copy
 * on the homepage, and #010101 with both lines in #FFFFFF on Get a Quote and
 * Metal Roofs. The pale one is the block default (it is where this was built);
 * the dark one is the Background field set to Black, which swaps the palette
 * class — so the type colours have to follow it.
 */

.cta-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-40);
	min-height: 196px;
}

.cta-banner__content {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

.cta-banner__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--primary-green);
}

/* 43 at the developer's instruction. The design's own vector is a 36x40 ink
 * box (node 1092:19072, x=242 y=2120); the icon's viewBox carries its own
 * padding, so the drawn glyph is smaller than the square it sits in. */
.cta-banner__icon svg {
	width: 43px;
	height: 43px;
}

.cta-banner__text-group {
	display: flex;
	flex-direction: column;
	/* 0 at the developer's instruction. Figma's Heading frame ends at y=2142
	 * and the Paragraph frame opens at 2146, which is where the 4 came from —
	 * but those are node boxes, and Anek's line box already carries the slack
	 * (the pair measured 78 against the design's 68 container with the 4 in).
	 * Closing it takes 4 of that 10 back. */
	gap: 0;
}

.cta-banner__heading {
	margin: 0;
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-36);
	font-weight: 700;
	line-height: var(--lh-36);
}

.cta-banner__text {
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

/* On the dark band Figma sets BOTH lines to #FFFFFF — the body copy is not
 * dimmed the way `--body-grey` dims it on the pale one. */
.cta-banner.section-black .cta-banner__heading,
.cta-banner.section-black .cta-banner__text {
	color: var(--white);
}

/* Position only — appearance comes from the global button system. */
.cta-banner__button {
	flex: 0 0 auto;
	min-width: clamp(200px, 17.5vw, 330px);
}

@media (min-width: 1281px) { 
	
	.cta-banner__button { padding: var(--space-15) var(--space-60); }
	
}

@media (max-width: 767px) {

	.cta-banner__inner {
		flex-direction: column;
		align-items: flex-start;
		/* Stacked, the 40 that separated the copy from the button across the
		 * row is too much space between them. 20 at the developer's
		 * instruction. */
		gap: var(--space-20);
		min-height: 0;
		padding-block: var(--space-40);
	}
}