/* =============================================================================
   06-callouts.css — a full-width highlighted band

     <div class="callout callout_purple">
       <div class="callout_inner">
         <span class="callout_label">Every week, no booking needed</span>
         <h3>Never miss a job</h3>
         <p>…</p>
       </div>
       <div class="callout_action"><a class="purple_black_btn" href="#">Sign up</a></div>
     </div>

     colour  callout_purple  callout_blue  callout_orange  callout_yellow
             callout_grey (default)
     style   (none = soft: tinted panel, coloured border and label)
             callout_solid  filled with the colour
             callout_edge   no border, thick coloured bar down the left

   Each colour class sets two custom properties and every rule below reads
   them, so a new colour is two lines rather than ten:
     --callout-colour  the brand colour — borders and fills
     --callout-ink     the darkened version — text on the pale panel
   ============================================================================= */

.callout {
	--callout-colour: var(--js-grey);
	--callout-ink: var(--js-grey);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.875rem;
	padding: 0.625rem 0.9375rem;
	border: 2px solid var(--callout-colour);
	border-radius: 10px;
	background-color: var(--js-beige-tint);

	/* Stops a #anchor jump parking the callout under the sticky header. */
	scroll-margin-top: 120px;
}

.callout_inner {
	flex: 1 1 auto;
}

.callout_label {
	display: inline-block;
	font-family: var(--js-font-bold);
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--callout-ink);
	margin-bottom: 0.625rem;
}

.callout_inner h3 {
	font-size: clamp(1rem, 0.5rem + 1vw, 2rem);
	margin-bottom: 0.625rem;
}

.callout_inner p {
	margin: 0;
	max-width: 1000px;
	color: var(--js-grey);
}

.callout_action {
	flex: 0 0 auto;
}

.callout_action a {
	margin-bottom: 0;
}

/* --- Colours -------------------------------------------------------------- */
.callout_purple {
	--callout-colour: var(--js-purple);
	--callout-ink: var(--js-purple);
}

.callout_blue {
	--callout-colour: var(--js-blue);
	--callout-ink: var(--js-blue-ink);
}

.callout_orange {
	--callout-colour: var(--js-orange);
	--callout-ink: var(--js-orange-ink);
}

.callout_yellow {
	--callout-colour: var(--js-yellow);
	--callout-ink: var(--js-yellow-ink);
}

.callout_grey {
	--callout-colour: var(--js-grey);
	--callout-ink: var(--js-grey);
}

/* --- Style variants ------------------------------------------------------- */

.callout_solid {
	background-color: var(--callout-colour);
	border-color: var(--callout-colour);
}

.callout_solid .callout_label,
.callout_solid .callout_inner h2,
.callout_solid .callout_inner h3,
.callout_solid .callout_inner p {
	color: var(--js-white);
}

/* Yellow is too light to carry white text. */
.callout_solid.callout_yellow .callout_label,
.callout_solid.callout_yellow .callout_inner h2,
.callout_solid.callout_yellow .callout_inner h3,
.callout_solid.callout_yellow .callout_inner p {
	color: var(--js-grey);
}

/* Bar down the left edge instead of a full border. */
.callout_edge {
	border: 0;
	border-left: 8px solid var(--callout-colour);
	border-radius: 0 20px 20px 0;
}

/* --- The whole callout as one link ---------------------------------------
   Write it as <a class="callout …"> and leave the inner button out — a link
   cannot contain another link. An <a> brings browser link styling with it
   (blue, underlined), so these rules undo that and add a hover state where
   the button would have been.
   -------------------------------------------------------------------------- */
a.callout {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

a.callout:hover,
a.callout:focus-visible {
	/* 30% of the callout's own colour over the panel, so this follows whatever
	   colour class the callout carries. */
	background-color: color-mix(in srgb, var(--callout-colour) 30%, transparent);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

/* No button inside, so don't leave a flex gap where one would have been. */
a.callout .callout_action:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	a.callout {
		transition: none;
	}
}

/* ============================================================================= */

@media (max-width: 750px) {
	/* Stacked, with padding that shrinks smoothly rather than at a second
	   breakpoint: 3.5vw is 30px at 850px wide and 26px at 750px. */
	.callout {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.375rem;
		padding: clamp(26px, 3.5vw, 30px) clamp(24px, 3.2vw, 28px);
		margin-top: 2.1875rem;
	}
}