/* =====================================================================
   Autism Bucks carousel + news cards (Gareth's design)
   Colours come from the theme's design tokens (style.css section 1),
   with fallbacks in case the plugin is ever used without the theme.
   ===================================================================== */

/* ---------- Carousel frame ---------- */
.ab-carousel {
	--ab-per: 3;
	position: relative;
}

/* Room around the cards so the hover lift isn't clipped */
.ab-carousel__viewport {
	overflow: hidden;
	padding: 10px 6px 22px;
	margin: -10px -6px 0;
}

.ab-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;               /* must match GAP in carousel.js */
	transition: transform .8s ease;
}

.ab-carousel__slide {
	flex: 0 0 calc((100% - (var(--ab-per) - 1) * 20px) / var(--ab-per));
	min-width: 0;
	display: flex;
	margin: 0;
}

/* Before the JavaScript starts (or if it can't run): a plain wrapping grid */
.ab-carousel:not(.is-ready) .ab-carousel__track { flex-wrap: wrap; }
.ab-carousel:not(.is-ready) .ab-carousel__slide { flex-basis: min(100%, 340px); flex-grow: 1; }
.ab-carousel:not(.is-ready) .ab-carousel__controls,
.ab-carousel.is-single .ab-carousel__controls { display: none; }

/* ---------- Controls ---------- */
.ab-carousel__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.ab-carousel__arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--ab-teal, #274B47);
	background: #fff;
	color: var(--ab-teal, #274B47);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ab-carousel__arrow:hover { background: var(--ab-teal, #274B47); color: #fff; }

.ab-carousel__dots { display: flex; align-items: center; }

/* Each dot is a 36×44 button (easy to tap) with a small pill drawn inside */
.ab-carousel__dot {
	width: 36px;
	height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ab-carousel__dot::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: #8A9592;
	transition: width .4s ease, background-color .4s ease;
}
.ab-carousel__dot[aria-current="true"]::before {
	width: 28px;
	background: var(--ab-orange-dark, #C25700);
}

.ab-carousel__status {
	font-size: 15px;
	color: var(--ab-muted, #4A5856);
	margin-left: 4px;
}
/* Optional button at the right of the controls, e.g. "All news items".
   Styled like the theme's white ab-btn. */
.ab-carousel .ab-carousel__more {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--ab-teal, #274B47);
	border-radius: 999px;
	background: #fff;
	color: var(--ab-teal, #274B47);
	font-family: var(--ab-font-heading, Poppins, sans-serif);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}
.ab-carousel .ab-carousel__more:hover { background: var(--ab-sage, #E7EDE0); color: var(--ab-teal, #274B47); }
/* Even with one page of cards (controls hidden), keep the button */
.ab-carousel.is-single .ab-carousel__controls:has(.ab-carousel__more) { display: flex; }
.ab-carousel.is-single .ab-carousel__controls:has(.ab-carousel__more) > :not(.ab-carousel__more) { display: none; }

.ab-carousel :focus-visible {
	outline: 3px solid var(--ab-orange, #FF7300);
	outline-offset: 3px;
}

/* ---------- News card ---------- */
.ab-news {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--ab-border, #ECE6DA);
	border-radius: 18px;
	padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 28px);
	color: var(--ab-ink, #1F2A28);
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
a.ab-news:hover {
	transform: translateY(-3px);
	border-color: #F3B98A;
	background: #FFFBF7;
	box-shadow: var(--ab-shadow-hover, 0 14px 32px rgba(39, 75, 71, .12));
	color: var(--ab-ink, #1F2A28);
}

.ab-news__meta {
	font-size: 15px;
	font-weight: 700;
	color: var(--ab-muted, #4A5856);
}

.ab-news .ab-news__title {
	margin: 0;
	font-family: var(--ab-font-heading, Poppins, sans-serif);
	font-weight: 600;
	font-size: clamp(18px, 2vw, 20px);
	line-height: 1.35;
	color: var(--ab-ink, #1F2A28);
	text-wrap: pretty;
}

.ab-news__summary {
	flex: 1;
	font-size: 17px;
	line-height: 1.6;
}

.ab-news__more {
	margin-top: 6px;
	font-weight: 700;
	color: var(--ab-teal, #274B47);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ab-news__empty { color: var(--ab-muted, #4A5856); }

@media (prefers-reduced-motion: reduce) {
	.ab-carousel__track,
	.ab-news,
	.ab-carousel__dot::before { transition: none; }
}

/* ---------- Member quote card ---------- */
.ab-quote {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--ab-cream, #FBF8F2);
	border: 1px solid var(--ab-border, #ECE6DA);
	border-radius: 18px;
	padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 26px) 22px;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.ab-quote:hover {
	transform: translateY(-3px);
	border-color: #F3B98A;
	background: #FFFBF7;
}
.ab-quote__mark {
	display: block;
	height: 26px;
	font-family: var(--ab-font-heading, Poppins, sans-serif);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	color: var(--ab-orange, #FF7300);
}
.ab-quote .ab-quote__text {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ab-ink, #1F2A28);
}
.ab-quote__who {
	margin-top: 16px;
	font-size: 15px;
	color: var(--ab-muted, #4A5856);
}
@media (prefers-reduced-motion: reduce) {
	.ab-quote { transition: none; }
}