.ap-showcase__grid { display: block; }
.ap-showcase__row { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.ap-showcase__row.cols-1  { grid-template-columns: 1fr; }
.ap-showcase__row.cols-2  { grid-template-columns: repeat(2, 1fr); }
.ap-showcase__row.cols-3  { grid-template-columns: repeat(3, 1fr); }
.ap-showcase__row.cols-4  { grid-template-columns: repeat(4, 1fr); }
.ap-showcase__row.cols-5  { grid-template-columns: repeat(5, 1fr); }
.ap-showcase__row.cols-6  { grid-template-columns: repeat(6, 1fr); }
.ap-showcase__row.cols-7  { grid-template-columns: repeat(7, 1fr); }
.ap-showcase__row.cols-8  { grid-template-columns: repeat(8, 1fr); }
.ap-showcase__row.cols-9  { grid-template-columns: repeat(9, 1fr); }
.ap-showcase__row.cols-10 { grid-template-columns: repeat(10, 1fr); }
.ap-showcase__row.cols-11 { grid-template-columns: repeat(11, 1fr); }
.ap-showcase__row.cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Grid rather than floats: a short item no longer drags the next row up,
   which is the layout bug the original's clearfix was there to patch. */
@media (max-width: 767px) {
	.ap-showcase__row[class*="cols-"] { grid-template-columns: 1fr; }
}

.ap-showcase__group { margin: 1.5rem 0 .75rem; }
.ap-showcase__title { margin: 0 0 .4rem; }
.ap-showcase__image img { max-width: 100%; height: auto; display: block; }
.ap-showcase__image.align-2 { float: left; margin: 0 1rem .5rem 0; max-width: 45%; }
.ap-showcase__image.align-3 { float: right; margin: 0 0 .5rem 1rem; max-width: 45%; }
.ap-showcase__item::after { content: ""; display: table; clear: both; }

.ap-showcase__date,
.ap-showcase__author,
.ap-showcase__category,
.ap-showcase__hits,
.ap-showcase__source { font-size: .87em; opacity: .75; margin-right: .5rem; }

.ap-showcase__intro { margin: .5rem 0 0; }
.ap-showcase__readmore { margin: .5rem 0 0; }

/* Indicators need contrast against a light page; Bootstrap's default is
   white-on-white outside a dark carousel. */
.ap-showcase .carousel-indicators [data-bs-target] { background-color: currentColor; opacity: .35; }
.ap-showcase .carousel-indicators .active { opacity: 1; }
.ap-showcase__readmore-title { font-weight: 600; }

/* ---- layouts added for the specified display styles ---------------- */

/* Grid and Pinterest share a column count set as a custom property by the
   template, so the count is validated in PHP and never interpolated into a
   selector. */
.ap-showcase--grid {
	display: grid;
	grid-template-columns: repeat(var(--ap-columns, 3), minmax(0, 1fr));
	gap: 1rem;
}

/* Masonry and Pinterest use CSS columns: a true masonry flow with no
   script, at the cost of reading down each column rather than across. */
.ap-showcase--masonry,
.ap-showcase--pinterest {
	column-count: var(--ap-columns, 3);
	column-gap: 1rem;
}

.ap-masonry__cell,
.ap-pinterest__cell {
	break-inside: avoid;
	margin-bottom: 1rem;
}

.ap-showcase--pinterest img {
	width: 100%;
	height: auto;
}

/* Magazine: one lead item, the remainder beside it. Collapses to a single
   column on a narrow screen, where a two-column magazine is unreadable. */
.ap-showcase--magazine {
	display: grid;
	gap: 1rem;
	grid-template-columns: 2fr 1fr;
}

.ap-magazine__rest {
	display: grid;
	gap: .75rem;
}

@media (max-width: 48rem) {
	.ap-showcase--magazine { grid-template-columns: 1fr; }
	.ap-showcase--grid { grid-template-columns: 1fr; }
	.ap-showcase--masonry,
	.ap-showcase--pinterest { column-count: 1; }
}

/* News wall: a grid whose rhythm varies, so the eye has somewhere to land.
   Every fifth cell spans two columns. */
.ap-showcase--newswall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
}

.ap-newswall__cell.is-wide { grid-column: span 2; }

@media (max-width: 48rem) {
	.ap-newswall__cell.is-wide { grid-column: span 1; }
}

/* Timeline */
.ap-timeline__items { list-style: none; margin: 0; padding: 0; }
.ap-timeline__item { display: grid; grid-template-columns: auto 1fr; gap: .75rem; }
.ap-timeline__date { opacity: .75; white-space: nowrap; }

/* Ticker: the one layout that moves by itself. */
.ap-showcase--ticker { overflow: hidden; }

.ap-ticker__track {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	animation: ap-ticker 30s linear infinite;
}

/* PAUSED BY HOVER AND BY FOCUS. A touchscreen cannot hover, and focus is
   how somebody tabbing to the links can reach them at all. */
.ap-showcase--ticker:hover .ap-ticker__track,
.ap-showcase--ticker:focus-within .ap-ticker__track {
	animation-play-state: paused;
}

@keyframes ap-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* REDUCED MOTION STOPS IT ENTIRELY, in CSS rather than the template, so it
   holds even when the template is overridden. A scrolling strip of text is
   precisely what this preference exists to suppress, and there is no way
   to read a ticker that will not hold still. */
@media (prefers-reduced-motion: reduce) {
	.ap-ticker__track {
		animation: none;
		white-space: normal;
		flex-wrap: wrap;
	}
}

/* ── A PRAYER'S REACTIONS, BESIDE IT IN A LIST ─────────────────────────────
   Emoji and number are one unit and must never wrap apart from each other;
   the row is the tally, so it reads small and sits under the title. */
.ap-showcase__reactions { display: flex; flex-wrap: wrap; gap: .45rem; margin: .3rem 0 .2rem; }
.ap-showcase__reaction { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; font-size: .85em; }
.ap-showcase__reaction-emoji { line-height: 1; }
.ap-showcase__reaction-count { font-variant-numeric: tabular-nums; opacity: .75; }

/* How many people wrote something on this one. Sits with the reaction tally
   and reads as small as it is. */
.ap-showcase__said { margin: .25rem 0 .1rem; font-size: .85em; opacity: .75; }
.ap-showcase__said-n { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: .2em; }
/* Comments and responses read as one line of context, not two paragraphs. */
.ap-showcase__said { display: inline-block; margin-right: .7rem; }

/* ── A FEATURED POST ──────────────────────────────────────────────────────
   Greg, 2026-09-23: "anything on any blog can be featured if i want it to be
   make that defauly on articles plus everywhere too", and "i like it for all
   featured blogs and make it look like that across aryicles plus everywhere".

   ⚠ FEATURING USED TO BE INVISIBLE. The flag existed, the admin could set it,
   some modules filtered on it - and nothing about the post was drawn any
   differently, so in a mixed list you could not tell.

   The treatment is deliberately restrained: a warm ground, a bar down the
   leading edge and a small mark. A featured post has to stand out from the
   dozen beside it, not from the page. */
.ap-showcase__item.is-featured,
.ap-article.is-featured {
	position: relative;
	background: #fffaf0;
	border-color: #e8d5a8;
	box-shadow: 0 1px 2px rgba(120, 90, 20, .06), 0 6px 18px rgba(120, 90, 20, .07);
}
.ap-showcase__item.is-featured::before,
.ap-article.is-featured::before {
	content: "";
	position: absolute; inset: 0 auto 0 0; width: 4px;
	border-radius: inherit;
	background: #c8912b;
}
.ap-showcase__item.is-featured { padding-left: 1.15rem; }
.ap-article.is-featured { padding-left: 1.15rem; }

/* The word, so the reason for the colour is stated rather than guessed. */
.ap-showcase__item.is-featured .ap-showcase__title::after,
.ap-article.is-featured .ap-article__title::after {
	content: "Featured";
	display: inline-block; vertical-align: middle;
	margin-left: .5em; padding: .12em .5em;
	border-radius: 999px;
	background: #c8912b; color: #fff;
	font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
	.ap-showcase__item.is-featured { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
}


/* ---------------------------------------------------------------------------
   THE PAGER.

   ⚠ ALMOST NOTHING IS STYLED HERE ON PURPOSE. The pager emits Joomla's own
   .pagination / .page-item / .page-link classes, so it is painted by the site
   template and stays matched to the blog pager it was asked to look like.
   Styling the links here would win over the template and produce a pager that
   looked right today and wrong after the next template change.
   --------------------------------------------------------------------------- */

.ap-showcase__pagination {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ap-showcase__pagination .pagination { flex-wrap: wrap; justify-content: center; }

.ap-showcase__pagecount {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* =======================================================================
   THE SUBSCRIBE CORNER — the grid layout's `show_follow` control.

   ⚠ BOTTOM RIGHT, AND SMALL. It is a way out of the page for somebody who
   liked what they read, not a call to action competing with the articles
   above it; at full width with a heading it would be the loudest thing in
   the module.
   ======================================================================= */

.apf {
	display: flex;
	justify-content: flex-end;
	margin: .9rem 0 0;
}

.apf__panel {
	max-width: 26rem;
	border: 1px solid rgba(128, 128, 128, .3);
	border-radius: 8px;
	background: rgba(128, 128, 128, .05);
}

.apf__toggle {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .7rem;
	font-size: .86rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

/* The disclosure triangle is replaced by the feed mark, which says more. */
.apf__toggle::-webkit-details-marker { display: none; }
.apf__toggle::marker { content: ""; }
.apf__mark { flex: 0 0 auto; opacity: .85; }
.apf__panel[open] .apf__toggle { border-bottom: 1px solid rgba(128, 128, 128, .25); }

.apf__body { padding: .7rem; }
.apf__label { display: block; font-size: .8rem; margin: 0 0 .3rem; opacity: .8; }
.apf__row { display: flex; gap: .4rem; }

.apf__input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: .88rem;
	padding: .4rem .55rem;
	border: 1px solid rgba(128, 128, 128, .4);
	border-radius: 6px;
	background: #fff;
	color: #1c1917;
}

.apf__send {
	font: inherit;
	font-size: .84rem;
	font-weight: 600;
	padding: .4rem .8rem;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	background: #1C2647;
	color: #fff;
}

.apf__send:hover { filter: brightness(1.15); }

/* ⚠ OFF-SCREEN, NOT display:none - see the note in the template. */
.apf__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.apf__feeds {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .6rem;
	margin: .6rem 0 0;
	font-size: .78rem;
}

.apf__feeds-label { opacity: .7; }
.apf__feed { font-weight: 600; text-decoration: none; }
.apf__feed:hover { text-decoration: underline; }