/**
 * Two-Column CTA -- the "Current Campaign" and "Ebook" rows.
 *
 * Retypes the module to the scale in Unify's mockup (tag ~13px gray, heading
 * ~30px navy, copy ~16px gray) and takes the image down from a full-height half
 * of a 1700px row, which was reading as far too dominant.
 *
 * Hand-authored outside the gulp/SASS build -- see CLAUDE.md. Enqueued after
 * unify2021-style, so equal-specificity rules in the compiled style.css lose to
 * these; anything competing with a `.ctacol__right h2`-style selector is given
 * one extra class to outrank it rather than !important.
 *
 * SCOPE: everything here is behind .ctacol--labelled, which flex-twocol-cta.php
 * only sets when a row fills in BOTH `title` and `headline`. All 20 pre-existing
 * rows on the site fill in `title` alone, so none of them are touched.
 *
 * The breakpoint is 783px ($bp-tablet-s), the theme's own -- it has to hand off
 * exactly where the compiled style.css switches this module to two columns, and
 * that rule is not editable without a rebuild.
 */

.ctacol--labelled {
	--ctacol-gray: #6a747c; /* $color-gray      */
	--ctacol-navy: #143250; /* $color-dark-blue */
	--ctacol-teal: #1dc2bb; /* $color-teal -- legible only on the navy panel */
}

/* --- The tag: "EBOOK", "CURRENT CAMPAIGN" ---------------------------------
   Was a 50px black h2. Sized to match .hero__eyebrow so the two tags on a page
   read as the same object, and left in the body font for the same reason. */

.ctacol--labelled .ctacol__label {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ctacol-gray);
}

/* --light is the theme's name for LIGHT TEXT, i.e. the navy panel. Gray would
   disappear there, so the tag goes teal -- same as the tag over the hero. */
.ctacol--light.ctacol--labelled .ctacol__label {
	color: var(--ctacol-teal);
}

/* --- The heading ----------------------------------------------------------
   Was a 32px paragraph under the tag; now the h2, at the mockup's ~30px. */

.ctacol--labelled .ctacol__right .ctacol__title {
	margin: 0;
	font-size: clamp(24px, 2.1vw, 31px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ctacol-navy);
}

.ctacol--light.ctacol--labelled .ctacol__right .ctacol__title {
	color: #fff;
}

/* --- Body copy ------------------------------------------------------------ */

.ctacol--labelled .ctacol__text {
	margin-top: 16px;
	max-width: 42em;
}

.ctacol--labelled .ctacol__text p {
	font-size: clamp(15px, 1.1vw, 16px);
	line-height: 1.7;
	color: var(--ctacol-gray);
}

.ctacol--labelled .ctacol__text p:not(:last-child) {
	margin-bottom: 1em;
}

.ctacol--light.ctacol--labelled .ctacol__text p {
	color: #c8d8e6;
}

.ctacol--labelled .ctacol__right .btn {
	margin-top: 28px;
}

/* --- Size -----------------------------------------------------------------
   The stock module gives the image half the row and lets it stretch to whatever
   height the copy happens to need -- 105px of vertical padding on the text
   column alone. Hand the text the larger share, and give the image a ratio box
   with a ceiling so it can no longer grow with the copy. */

/* Put the module in the page's container. The stock .ctacol__wrap is
   `constrain(1700px, 100%)` -- it passes 100% where the mixin's default, and
   every other row on the page via .constrained, is 90%. That full bleed is the
   point for the navy rows, which are meant to read as an edge-to-edge colour
   band. On a white panel there is no band to see, so the image simply ran past
   the 5% gutter that the hero, the video row, the insights grid and the footer
   all start at. Setting the width here rather than on an inner element keeps
   the 1700px cap shared, so the two agree above 1889px as well. */
.ctacol--labelled.ctacol__wrap {
	width: 90%;
}

/* The container now supplies the outer gutter, so the copy only needs padding
   on the side that faces the image -- and which side that is flips with
   .ctacol--img-right, whose row is reversed. */
.ctacol--labelled .ctacol__right {
	padding: 32px 0;
}

@media (min-width: 783px) {
	.ctacol--labelled .ctacol__cols {
		align-items: center;
	}

	.ctacol--labelled .ctacol__left {
		flex: 0 0 44%;
	}

	.ctacol--labelled .ctacol__right {
		flex: 0 0 56%;
	}

	.ctacol--labelled.ctacol--img-left .ctacol__right {
		padding: 24px 0 24px clamp(24px, 3.2vw, 56px);
	}

	.ctacol--labelled.ctacol--img-right .ctacol__right {
		padding: 24px clamp(24px, 3.2vw, 56px) 24px 0;
	}

	/* Ratio only, no max-height: with an auto width the height cap transfers
	   back through the ratio and shrinks the image off its own column, leaving
	   a dead strip beside it. The container is capped at 1700px, so 44% x 16/10
	   tops out around 468px tall on its own. */
	.ctacol--labelled .ctacol__image {
		height: auto;
		aspect-ratio: 16 / 10;
	}
}