.aasc-discovery {
	padding-top: 10px;
	width: 100%;
}

.aasc-archive__header a {
	color: #0068a8;
	font-weight: 600;
	text-decoration: none;
}

.aasc-archive__header a:hover,
.aasc-archive__header a:focus {
	color: #004a78;
	text-decoration: none;
}

.aasc-read-more:hover,
.aasc-read-more:focus-visible,
.aasc-card:hover .aasc-read-more,
.aasc-card:focus-within .aasc-read-more {
	color: var(--green, #50a38a);
}

.aasc-search__controls {
	display: flex;
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--ink, #141414);
	border-radius: 999px;
	background: #fff;
}

.aasc-search input[type="search"] {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	height: 42px;
	padding: 8px 18px 8px 52px;
	border: 0;
	border-radius: 999px 0 0 999px;
	outline: 0;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
	background-position: 18px center;
	background-repeat: no-repeat;
	color: var(--ink, #141414);
	font: inherit;
}

.aasc-search__controls:focus-within {
	box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.18);
}

.aasc-search__controls .header-button {
	align-items: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 42px;
	min-height: 42px;
	min-width: 140px;
	border: 0;
	border-radius: 0 999px 999px 0;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}

.aasc-search__clear {
	display: inline-block;
	margin-top: 8px;
	color: var(--ink, #141414);
	font-weight: 700;
}

.aasc-card-row {
	row-gap: 24px;
}

.aasc-card-column,
.aasc-ad-column {
	display: flex;
}

.aasc-card__excerpt--long {
	display: none !important;
}

.aasc-ad-slot {
	aspect-ratio: 2 / 3;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

.aasc-ad-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.aasc-title-break {
	display: none;
}

.aasc-manual-title-break {
	display: none;
}

.aasc-manual-title-space {
	display: inline;
}

@media (max-width: 600px) {
	.aasc-search__controls {
		align-items: stretch;
	}

	.aasc-search__controls .header-button {
		justify-content: center;
		min-width: 108px;
		width: auto;
	}

}

@media (min-width: 768px) {
	.aasc-card.h-100 {
		aspect-ratio: 2 / 3;
		height: auto !important;
		min-height: 0;
		overflow: hidden;
		width: 100%;
	}

	.aasc-card > p:not(.aasc-card__date) {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
	}

	.aasc-card h2 {
		display: flex;
		align-items: flex-start;
		overflow: hidden;
		height: 2.3em;
		font-size: 1.75rem;
		hyphens: auto;
		-webkit-hyphens: auto;
		word-break: normal;
		overflow-wrap: normal;
	}

	.aasc-card__title-text {
		display: block;
		width: 100%;
	}

	.aasc-card-column.aasc-heading-row--three-lines h2 {
		height: 3.45em;
	}

	.aasc-title-break {
		display: inline;
	}

	.aasc-manual-title-break {
		display: inline;
	}

	.aasc-manual-title-space {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.aasc-card h2 {
		font-size: 1.5rem;
	}
}

@media (min-width: 992px) {
	.aasc-card {
		padding: 1.5rem;
	}

	.aasc-card .aasc-read-more {
		font-size: 16px;
		white-space: nowrap;
	}

	.aasc-card .aasc-read-more span {
		font-size: 21px;
		margin-left: 5px;
	}
}

@media (min-width: 1200px) {
	.aasc-card__excerpt--short {
		display: none !important;
	}

	.aasc-card .aasc-card__excerpt--long {
		display: -webkit-box !important;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 8 !important;
	}
}

/* The copy above the grid, page 2 onward -- see the note on .edition-pagination-top. The margin-top
   undoes the 3rem that stoep-chat.css puts on every .aasc-pagination: that space is there to part
   the list from the pagination at the foot of the page, and up here the header's own padding
   already does that job, so the 3rem only pushed the row away from the heading it belongs to. */
.aasc-pagination-top {
	margin-top: 0;
	margin-bottom: var(--action-ads-half-padding, 30px);
}

.aasc-pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aasc-pagination .page-numbers:not(.current):not(.next):not(.prev):not(.dots) {
	align-items: center;
	background-color: transparent !important;
	border: 1px solid var(--ink, #141414);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--ink, #141414);
	display: inline-flex;
	flex: 0 0 44px;
	font-weight: 700;
	height: 44px;
	justify-content: center;
	line-height: 1;
	min-width: 44px;
	padding: 0 !important;
	text-decoration: none;
	width: 44px;
}

.aasc-pagination .page-numbers.current {
	align-items: center;
	background-color: var(--ink, #141414) !important;
	border: 1px solid var(--ink, #141414);
	border-radius: 50%;
	box-sizing: border-box;
	color: #fff;
	display: inline-flex;
	flex: 0 0 44px;
	font-weight: 700;
	height: 44px;
	justify-content: center;
	line-height: 1;
	min-width: 44px;
	padding: 0 !important;
	width: 44px;
}

.aasc-pagination a.page-numbers:not(.current):not(.next):not(.prev):not(.dots):hover,
.aasc-pagination a.page-numbers:not(.current):not(.next):not(.prev):not(.dots):focus-visible {
	background-color: var(--green, #50a38a) !important;
	border-color: var(--green, #50a38a);
	color: #fff;
}

.aasc-pagination .next,
.aasc-pagination .prev {
	color: var(--red, #c1272d);
	font-weight: 700;
	text-decoration: none;
}

.aasc-pagination .next {
	margin-left: 12px;
}

.aasc-pagination .next:hover,
.aasc-pagination .next:focus-visible,
.aasc-pagination .prev:hover,
.aasc-pagination .prev:focus-visible {
	color: var(--green, #50a38a);
}

/* Arrows in place of the words, and smaller circles so the whole run still fits on one row --
   see the note on .edition-pagination in the theme, including why the selectors below have to
   repeat the :not()s of the rules above them one for one. */
@media (max-width: 480px) {
	/* The words go, the arrows arrive. The text stays in the markup -- font-size: 0 hides it from
	   the eye, not from a screen reader -- and min-height keeps the arrow a thumb's width tall now
	   that the text is not setting its height. */
	.aasc-pagination .prev,
	.aasc-pagination .next {
		align-items: center;
		display: inline-flex;
		font-size: 0;
		min-height: 44px;
	}

	.aasc-pagination .prev::before {
		content: "\2190";
	}

	.aasc-pagination .next::after {
		content: "\2192";
	}

	.aasc-pagination .prev::before,
	.aasc-pagination .next::after {
		font-size: 24px;
		line-height: 1;
	}

	/* The arrows already carry their own spacing in from the row's gap. */
	.aasc-pagination .next {
		margin-left: 0;
	}

	/* Five circles, two ellipses and two arrows come to about 375px at full size, and a 375px
	   phone gives the row 315 to put them in. Something has to give, and 4px off the circle is the
	   least of the options: it stays round -- round and smaller is not the same as squashed -- and
	   40px is still a tap target you can hit. The alternative was dropping to three circles, which
	   would have been 44px with room to spare.
	
	   All four of width, min-width, height and flex have to be named, because the rules above set
	   every one of them to 44px and leaving any behind is what turns a circle into an oval. The
	   selectors repeat those rules' :not()s and .current one for one as well: anything less and
	   they are the more specific of the pair and keep their 44px whatever the order here.
	
	   The shrink factor of 1 is the floor under all of it. Below about 350px even this row runs
	   out of width, and a circle that gives a little is better than an arrow off the screen. */
	.aasc-pagination .nav-links {
		flex-wrap: nowrap;
		gap: 4px;
	}

	.aasc-pagination .page-numbers:not(.current):not(.next):not(.prev):not(.dots),
	.aasc-pagination .page-numbers.current {
		flex: 0 1 40px;
		font-size: 15px;
		height: 40px;
		min-width: 0;
		width: 40px;
	}
}

/* ---------- 1400 and up: fill the card rather than pad it ----------
   The card's height is set by the advert in the grid beside it and must not change. At this width
   that left about 150px of nothing between the excerpt and the "read more" link.

   Type size alone could not close that. The excerpt is clamped to 8 lines, and a clamp is a cap on
   lines, not a cap on height -- a larger font buys taller lines but still only eight of them, which
   is about 25px of the 150. So the clamp goes up with the size.

   There is plenty to show: each excerpt carries 100 words, which runs to 13 or 14 lines here, so
   the extra lines are real sentences rather than the same text set larger. */
@media (min-width: 1400px) {
	.aasc-card .aasc-card__excerpt--long {
		font-size: 1.25rem;
		-webkit-line-clamp: 12 !important;
	}
}