/* ---------------------------------------------------------------
   Story card grid
   --------------------------------------------------------------- */

.cwa-stories{--cwa-story-hover:#2F7DBA;margin-block:0 clamp(32px,5vw,64px)}

.cwa-stories__heading{font-size:34px;font-weight:700;color:#333;margin:0 0 28px}

.cwa-stories__grid{display:grid;gap:18px;align-items:start}
.cwa-stories__grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cwa-stories__grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cwa-stories__grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}

/* WPBakery wraps child elements — make its wrapper transparent to the grid. */
.cwa-stories__grid > .wpb_column,
.cwa-stories__grid > .vc_column_container,
.cwa-stories__grid > .wpb_wrapper{display:contents}

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */

.cwa-story{
	/* Circle tuning knobs. */
	--cwa-circle-size:170px;    /* big circle diameter */
	--cwa-circle-top:-83px;     /* how far both sit above the card edge */
	--cwa-circle-overlap:120px;  /* small circle's start, before the shift below */
	--cwa-circle-ratio:.7;     /* small circle size, as a fraction of the big one */
	--cwa-circle-shift:-39px;   /* moves BOTH circles left together */
	--cwa-circle-fade:.75;      /* small circle opacity, for the overlap blend */

	/* Internal padding. The % scales with the column; the clamps stop it
	   getting cramped in narrow columns or absurd in wide ones. Padding-top
	   is derived from the circles so the title always clears them. */
	--cwa-pad-x:clamp(24px,13%,60px);
	--cwa-pad-bottom:clamp(28px,10%,48px);
	--cwa-pad-top:calc(var(--cwa-circle-size) + var(--cwa-circle-top) + 15px);

	position:relative;
	overflow:hidden;
	background:#fff;
	border-radius:14px;
	padding:var(--cwa-pad-top) var(--cwa-pad-x) var(--cwa-pad-bottom);
	height:100%;
	box-sizing:border-box;
}

.cwa-story__circles{position:absolute;top:0;left:0;right:0;height:90px;pointer-events:none}

.cwa-story__circle{
	position:absolute;
	display:block;
	aspect-ratio:1;
	border-radius:50%;
	background:var(--cwa-story-colour,#C8465A);
	top:var(--cwa-circle-top);
}

.cwa-story__circle--a{
	width:var(--cwa-circle-size);
	left:var(--cwa-circle-shift);
	z-index:1;
}

/* Sits in front, so its own opacity does the blending over the big circle. */
.cwa-story__circle--b{
	width:calc(var(--cwa-circle-size) * var(--cwa-circle-ratio));
	left:calc(var(--cwa-circle-overlap) + var(--cwa-circle-shift));
	background:var(--cwa-story-colour-light,var(--cwa-story-colour,#C8465A));
	opacity:var(--cwa-circle-fade);
	z-index:2;
}

.cwa-story__title{
	font-size:21px;
	font-weight:700;
	line-height:1.25;
	color:#3A3A3A;
	margin:0 0 16px;
}

/* ---------------------------------------------------------------
   Links — pill fills in on hover, chevron slides to the right edge
   --------------------------------------------------------------- */

.cwa-story__links{list-style:none;margin:0;padding:0}
.cwa-story__item{margin:0}

.cwa-story__link{
	display:flex;
	align-items:center;
	gap:6px;
	padding:11px 18px;
	margin:0 calc(-1 * min(18px, var(--cwa-pad-x)));
	border-radius:8px;
	font-size:15px;
	line-height:1.35;
	color:#4A4A4A;
	text-decoration:none;
	background:transparent;
	transition:background-color .2s ease,color .2s ease;
}

.cwa-story__spacer{flex:0 1 0;transition:flex-grow .55s cubic-bezier(.22,.61,.36,1)}

.cwa-story__chev{width:7px;height:12px;flex:0 0 auto;color:var(--cwa-story-hover)}

.cwa-story__link:hover,
.cwa-story__link:focus-visible{
	background:var(--cwa-story-hover);
	color:#fff;
	text-decoration:none;
}
.cwa-story__link:hover .cwa-story__chev,
.cwa-story__link:focus-visible .cwa-story__chev{color:#fff}
.cwa-story__link:hover .cwa-story__spacer,
.cwa-story__link:focus-visible .cwa-story__spacer{flex-grow:1}

.cwa-story__link:focus-visible{outline:2px solid #123A5E;outline-offset:2px}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media(max-width:991px){
	.cwa-stories__grid[data-cols="3"],
	.cwa-stories__grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
	.cwa-stories__grid,
	.cwa-stories__grid[data-cols="2"],
	.cwa-stories__grid[data-cols="3"],
	.cwa-stories__grid[data-cols="4"]{grid-template-columns:minmax(0,1fr)}
	.cwa-stories__heading{font-size:26px}
}

@media(prefers-reduced-motion:reduce){
	.cwa-story__link,
	.cwa-story__spacer{transition:none}
}