/*
 * The invitation under an article, as a banner.
 *
 * Bootstrap 4 already does the layout — card, d-md-flex, the spacing scale —
 * so this file only does colour, and only inside .srai-cta. Nothing here
 * reaches the article above it or the theme around it.
 *
 * WHY IT IS A FILE AND NOT INLINE CSS. Super Cache writes every article to its
 * own static HTML file. Inlined, these rules would be copied into every one of
 * them and re-downloaded with each article a devotee opens; as a file they are
 * fetched once and reused across the whole site.
 *
 * THE PALETTE IS DECLARED ON .srai-cta, NOT :root. public.css scopes its own
 * tokens to .srai-public and is not loaded on article pages, so this carries
 * the subset it needs. The values are copied from there deliberately — if the
 * assistant is ever recoloured, this file is the second place to change, and a
 * banner in last season's colours beside a link to this season's assistant is
 * the symptom.
 *
 * WHY IT IS LOUD. It began as a quiet cream card with a thin maroon edge and
 * was judged, on production where Bootstrap 4 is actually in force, to be too
 * easily skipped. A block shaped like an advertisement is normally the wrong
 * answer — readers have taught themselves to skip that shape — so the mitigation
 * is that this is loud in the site's OWN colours rather than in the palette of
 * a sponsor. It should read as the site raising its voice, not as an ad slot.
 */

.srai-cta {
	--srai-brand: #7A1C2E;
	--srai-brand-dark: #5F1423;
	--srai-accent: #E8641A;
	--srai-accent-dark: #C9520F;

	/* The gradient is barely visible and is doing real work: a flat rectangle
	   of one colour is the thing that reads as an ad slot, and a panel with
	   some depth to it reads as part of the page. */
	background: linear-gradient(160deg, var(--srai-brand) 0%, var(--srai-brand-dark) 100%);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(36, 27, 30, .18);
}

.srai-cta .card-body {
	/* Bootstrap's own card-body padding is too tight for something this size. */
	padding: 1.5rem;
}

.srai-cta-heading {
	color: #fff;
	font-weight: 700;
	/*
	 * NO text-transform HERE, AND NOT ANYWHERE IN THIS FILE.
	 *
	 * The heading and the button label are settings, and they are written in
	 * Telugu and Hindi as often as in English. Uppercase does nothing at all to
	 * Telugu script, so forcing it would shout in one language and be silently
	 * ignored in the others — two different tones out of one setting. If a
	 * shouted heading is wanted, it belongs in the words somebody typed.
	 */
	letter-spacing: .01em;
	margin-bottom: .3rem;
}

.srai-cta-text {
	/* White at a lower opacity rather than a fourth colour: it gives the two
	   lines a hierarchy without introducing anything new to keep in step. */
	color: rgba(255, 255, 255, .85);
	line-height: 1.5;
}

/*
 * The button.
 *
 * Saffron is the established action colour and the one thing on this banner
 * that is not maroon, which is exactly what a call to action should be.
 *
 * CONTRAST, MEASURED. White on this saffron is about 3.35:1, which meets AA for
 * large bold text and not for ordinary text — which is why the weight and size
 * below are specified here rather than left to inherit from the theme. If AA at
 * every size is ever required, swap the background for #fff and the colour for
 * var(--srai-brand): that pairing measures about 10:1 and needs no other change.
 */
.srai-cta-btn,
.srai-cta-btn:link,
.srai-cta-btn:visited {
	background: var(--srai-accent);
	border: 1px solid var(--srai-accent);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	padding: .7rem 1.9rem;
	box-shadow: 0 1px 4px rgba(36, 27, 30, .25);
}

.srai-cta-btn:hover,
.srai-cta-btn:focus,
.srai-cta-btn:active {
	background: var(--srai-accent-dark);
	border-color: var(--srai-accent-dark);
	color: #fff;
	text-decoration: none;
}

/* Bootstrap's default focus ring is blue and vanishes against maroon. */
.srai-cta-btn:focus {
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .55);
	outline: none;
}

/*
 * Below md the banner stacks, and a button that only spans its own text looks
 * like an afterthought at the bottom of a full-width block.
 */
@media (max-width: 767.98px) {
	.srai-cta .card-body {
		padding: 1.25rem;
	}

	.srai-cta-btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}

@media (min-width: 768px) {
	.srai-cta .card-body {
		padding: 2rem;
	}
}