/* ============================================================
   CTA panel (template-parts/components/cta-panel.php): a contained
   Primary Navy panel with 20px corners - an eyebrow, a White Koulen
   heading, a Cream paragraph and a Cream arrow link. The caller
   places it (margins, width); the panel sets only its own look.

   Two sizes, as the two design files draw the same panel:
   - Default: CW v2's "Need a different date?" (docs/notes/
     course-page.md 4.9, 5.9), measured from the renders:
       phones and tablets: 39px top and bottom, 32px sides (the
       file: 33); the heading's caps 12px under a two-line eyebrow,
       Koulen 30; the text 20px under the heading, the link 28px
       under the text (16px both);
       desktop (>= 1024): 39px top and bottom, 30px sides; the
       eyebrow's caps 43px from the top, the heading's 34px below
       them (Koulen 36), the text 12px under the heading, the link
       9px under the text, as drawn.
   - lg: List v2's "Looking for something more bespoke?" (docs/notes/
     listing-pages.md 3.8, 4.6), exactly as the listing built it
     before this component existed: 56px top and 24px sides on
     phones with a 14px text and link, 38px sides from 768, 62px
     top and 60px bottom on desktop.
   The heading line boxes are set so the caps land where drawn
   (Koulen's caps sit about L/2 - 0.39em into a line of height L).
   Heading level: the caller's (h2 on the listing, h3 inside the
   course page's Dates & Prices); the look does not change with it.
   Windows High Contrast: the navy fill goes, so a transparent
   outline turns into the system's text colour and keeps the panel's
   edge.
   ============================================================ */

.cta-panel {
	padding: 39px 32px;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-dark);
	color: var(--color-text-on-dark);
}

.cta-panel__title {
	margin-top: 12px;
	color: var(--color-heading-on-dark);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: 1.25;
	text-transform: uppercase;
}

.cta-panel__body {
	margin-top: 20px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

.cta-panel__body p + p {
	margin-top: 1em;
}

.cta-panel__link {
	margin-top: 28px;
	color: var(--color-link-on-dark);
	font-size: var(--fs-body);
}

/* Hover and keyboard focus: the whole link turns Light Orange (on navy,
   6.05:1) and its arrow slides (main.css "Arrow link"). */
.cta-panel__link:focus-visible {
	color: var(--color-link-hover-on-dark);
}

@media (hover: hover) {
	.cta-panel__link:hover {
		color: var(--color-link-hover-on-dark);
	}
}

.cta-panel__link .icon {
	color: inherit;
}

@media (min-width: 1024px) {
	.cta-panel {
		padding: 39px 30px;
	}

	.cta-panel__title {
		margin-top: 13px;
	}

	.cta-panel__body {
		margin-top: 12px;
	}

	.cta-panel__link {
		margin-top: 9px;
	}
}

/* ---------- lg: the listing's panel (List v2) ---------- */

.cta-panel--lg {
	padding: 56px 24px 52px;
}

.cta-panel--lg .cta-panel__title {
	margin-top: 37px;
	line-height: 1.267; /* 30/38 on phones */
}

.cta-panel--lg .cta-panel__body {
	margin-top: 19px;
	font-size: var(--fs-small);
}

.cta-panel--lg .cta-panel__link {
	margin-top: 20px;
	font-size: var(--fs-small);
}

@media (min-width: 768px) {
	.cta-panel--lg {
		padding: 56px 38px;
	}

	.cta-panel--lg .cta-panel__body,
	.cta-panel--lg .cta-panel__link {
		font-size: var(--fs-body);
	}
}

@media (min-width: 1024px) {
	.cta-panel--lg {
		padding: 62px 38px 60px;
	}

	.cta-panel--lg .cta-panel__title {
		margin-top: 3px;
		line-height: 1.6; /* the drawn 62px from the heading's span to the text's */
	}

	.cta-panel--lg .cta-panel__body {
		margin-top: 7px;
	}

	.cta-panel--lg .cta-panel__link {
		margin-top: 29px;
	}
}

@media (forced-colors: active) {
	.cta-panel {
		outline: var(--border-hairline) solid transparent;
	}
}