/*
 * Collection pages.
 *
 * Six listing pages that rendered a heading and stopped, because the list they
 * were supposed to draw lived in Elementor data and Elementor is not installed.
 * What is behind them is artwork with a title on it — square posters on the
 * Taudhih pages, covers on the Risalah — so the card leads with the picture and
 * the title sits beneath it.
 *
 * Every custom property carries a fallback. The plugin owns this markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

.jmns-collection {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/* -------------------------------------------------------------- search -- */

/*
 * Searching a listing that is five pages long.
 *
 * 117 Taudhih Al-Hukmi at 24 to a page, and until now the only way to reach
 * article #7 was to page through ninety-six others. A plain GET form: the
 * listing reads the term out of the URL itself, so this works with scripting
 * off, survives being bookmarked, and can be paged through.
 *
 * `<search>` is an unknown element in browsers that predate it, and an unknown
 * element is inline.
 */
.jmns-collection__search {
	display: block;
	margin-block: 0 var(--wp--preset--spacing--50, 1.5rem);
}

.jmns-collection__form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	/* Not the full 1200. A single field spanning the whole grid reads as the
	   page's masthead search rather than as a control over the list under it. */
	max-inline-size: 34rem;
}

.jmns-collection__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	/* Takes the row; the button takes what it needs. Below about 480px the basis
	   stops fitting and the two wrap, which is what the phone rule then tidies. */
	flex: 1 1 18rem;
	margin: 0;
	min-inline-size: 0;
}

.jmns-collection__field label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
}

/*
 * The field states its own box. Per ADR-052 the theme's base input rule sits in
 * `:where()` and weighs nothing, so a single class here wins outright — and
 * anything left unsaid is left unstyled rather than inherited.
 */
.jmns-collection__input {
	inline-size: 100%;
	min-inline-size: 0;
	block-size: 44px;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--30, 0.75rem);
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-pill, 999px);
	background-color: var(--wp--preset--color--surface, #fff);
	color: inherit;
	font: inherit;
	/* Under 16px iOS zooms the page when the field takes focus. */
	font-size: max(1rem, 16px);
}

.jmns-collection__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin: 0;
}

.jmns-collection__submit {
	min-block-size: 44px;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--40, 1.25rem);
	border: 1px solid transparent;
	border-radius: var(--r-pill, 999px);
	background-color: var(--wp--preset--color--interactive, #245746);
	color: var(--jmns-on-primary, #FFFFFF);
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	cursor: pointer;
}

.jmns-collection__submit:hover {
	background-color: var(--wp--preset--color--interactive-hover, #173D32);
}

/* The same 44px as the button beside it: a control that only just clears the
   24px minimum is one nobody chose the size of. */
.jmns-collection__reset {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/*
 * A search that found nothing.
 *
 * A sentence naming what was searched for and a way out of it. The alternative
 * is a bare empty grid, which reads as the page having broken rather than as
 * the department having nothing on the subject.
 */
.jmns-collection__empty {
	margin-block: 0 var(--wp--preset--spacing--40, 1.25rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
}

.jmns-collection__empty p {
	margin-block: 0 0.5rem;
}

.jmns-collection__empty p:last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------------- listing -- */

.jmns-collection__count {
	margin-block: 0 var(--wp--preset--spacing--40, 1.25rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/*
 * `min(100%, 15rem)` so the track can never be wider than its container — a
 * bare `minmax(15rem, 1fr)` overflows the page below 15rem.
 */
.jmns-collection__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-collection__item {
	margin: 0;
	padding: 0;
}

.jmns-item {
	block-size: 100%;
}

/*
 * The whole card is one link — cover, title and summary inside a single
 * anchor — so the target is the card rather than a line of text, and there is
 * one stop in the tab order per publication instead of three pointing at the
 * same post.
 */
.jmns-item__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	block-size: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * Square, because the covers are.
 *
 * This was 1/1.414, the ratio of an A4 page, on the reasoning that these are
 * scans of documents. They are not: of the 113 thumbnails on the Taudhih
 * Al-Hukmi page, 83 are exactly 1:1 and 29 are 1:1.193, which are social posters
 * rather than pages. Against an A4 frame that left 119px of empty tint under
 * every square one — 29% of the image box, 24 times a page — and the grid read
 * as a set of cards that had failed to load.
 *
 * Not 4:3, which was the other candidate. A 4:3 frame is shorter than a square
 * poster, so with `cover` it would crop a quarter of the height away, and on
 * these that is exactly where the content is: the title band across the top and
 * the JMNS logo along the bottom. A cover cropped to fit is a publication with
 * its title cut off.
 *
 * So `contain` stays with it. It costs a little tint left and right on the 29
 * that are 1:1.193, which is a fifth of what the old frame cost every card, and
 * it costs nothing that anybody has to read.
 *
 * Reserved before the image arrives, so a lazy grid of them does not shift the
 * page as each one loads.
 *
 * Square is the default and not the only frame: three of these nine pages are
 * scans of documents and keep the page shape, below.
 */
.jmns-item__cover {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-input, 12px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

/*
 * The three collections that really are A4.
 *
 * Risalah Falak, Buletin At-Taqwa and Garis Panduan are scanned documents, and
 * every one of their 55 covers measures 1:1.414 to two decimal places. Dropped
 * into the square frame above they would have paid the same 29% in tint the
 * square was introduced to save, down the sides instead of along the bottom.
 *
 * Driven by a `frame` key in the renderer's page table rather than by the slug,
 * so the next collection to arrive declares its shape rather than being guessed
 * at from here.
 */
.jmns-collection__list--a4 .jmns-item__cover {
	aspect-ratio: 1 / 1.414;
}

.jmns-item__cover--none {
	/* `aspect-ratio` needs a filled box to act on when there is no image. */
	inline-size: 100%;
	block-size: auto;
}

.jmns-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	/* Takes the height the cover leaves, so the control at the end of it can be
	   pushed to the foot of the card rather than trailing whatever the summary
	   happened to run to. The grid already equalises the cards in a row, which
	   is what there is to take. */
	flex: 1 1 auto;
	min-inline-size: 0;
}

.jmns-item__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	line-height: 1.35;
	/* Publication titles run long and are sometimes a single unbroken string;
	   they must break rather than widen the track they sit in. */
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/*
 * Clamped to three lines. The excerpts are a sentence on the Risalah and a
 * paragraph on the Taudhih, and letting them run sets one card four times the
 * height of its neighbour.
 */
.jmns-item__summary {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
}

/*
 * "Baca Penjelasan →".
 *
 * The card is one anchor and has no visible affordance in it — a cover, a title
 * and a paragraph, none of which says the card can be opened. This is the same
 * part the theme puts at the foot of every archive row (`.entry-card__go`), and
 * the same bargain: a span rather than a second link, hidden from assistive
 * technology, because a real one would be a second tab stop on each of
 * twenty-four cards saying what the title above it has already said.
 *
 * `gap`, not a space. The label and the arrow are two flex items and whitespace
 * between flex items is discarded, so a literal space between them renders as
 * "Baca Penjelasan→".
 *
 * `margin-block-start: auto` puts it at the foot. Following the summary it sat
 * at a different height in every card of a row — a two-line title or a missing
 * summary moved it — so four controls that do the same thing landed on four
 * different lines. The same fix as `.jmns-officer__details` in the directory.
 */
.jmns-item__go {
	display: inline-flex;
	align-items: center;
	align-self: start;
	gap: 0.35rem;
	margin-block-start: auto;
	/* Off the last line of text: it is an action, not a fourth line of
	   description. The 0.2em the body sets between its parts is not enough to
	   read as a break. */
	padding-block-start: var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
}

.jmns-item__arrow {
	transition: transform var(--t-fast, 150ms) var(--ease, ease);
}

.jmns-item__link:hover .jmns-item__arrow,
.jmns-item__link:focus-visible .jmns-item__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.jmns-item__arrow {
		transition: none;
	}
}

.jmns-item__link:hover .jmns-item__cover,
.jmns-item__link:focus-visible .jmns-item__cover {
	border-color: var(--wp--preset--color--border-strong, #6F8D7A);
}

.jmns-item__link:hover .jmns-item__title {
	color: var(--wp--preset--color--interactive-hover, #173D32);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * The focus ring goes on the link so it surrounds the whole card. Declared
 * here rather than left to the base rule because the link is `display: flex`
 * and the default outline traces only the text box on some engines.
 */
.jmns-item__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 3px;
	border-radius: var(--r-card, 16px);
}

/* -------------------------------------------------------------- mobile -- */

@media (max-width: 30rem) {
	/* Every control the full row. A 44px target beside a 44px target on a 342px
	   row leaves neither of them a label that fits. */
	.jmns-collection__form > * {
		flex-basis: 100%;
		inline-size: 100%;
	}

	.jmns-collection__actions {
		justify-content: space-between;
	}

	.jmns-collection__submit {
		flex: 1 1 auto;
	}

	/*
	 * Two across rather than one. These are covers, not articles — at one per
	 * row a nine-item listing is nine screens of scrolling, and the cover is
	 * still legible at half the width.
	 */
	.jmns-collection__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30, 1rem);
	}

	.jmns-item__title {
		font-size: var(--wp--preset--font-size--small, 0.875rem);
	}

	/* The summary is the first thing to go when the card is half as wide. */
	.jmns-item__summary {
		display: none;
	}
}

/* ---------------------------------------------------------- text list -- */

/*
 * News, not publications.
 *
 * Mufti Di Media and Kenyataan Media are the same shape as the rest — a term of
 * a post type — but one of their 41 items has a featured image and none of the
 * other seven do. In the cover grid that is forty empty frames pretending to be
 * a gallery. What they have is excerpts, so they are set as a list and led by
 * the title.
 */
.jmns-collection__list--text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.jmns-collection__list--text .jmns-item__link {
	flex-direction: row;
	/* `start`, not `baseline`: only one of the 41 items has a thumbnail, and a
	   baseline aligns its title against the image box rather than against the
	   titles of the rows above and below it. */
	align-items: start;
	gap: var(--wp--preset--spacing--30, 1rem);
	padding-block: var(--wp--preset--spacing--30, 1rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

/* The cover is incidental here: a thumbnail beside the title when one exists,
   and nothing at all when it does not — rather than a placeholder box.

   Still the portrait box the grid used to carry, and left there deliberately.
   Exactly one of the 42 items across these two pages has a thumbnail at all, a
   press photograph at 1.94:1, so a 4.5rem chip of it is letterboxed whichever
   ratio is chosen here. Re-cutting the frame on a sample of one would be a
   guess dressed as a measurement; the grid's square above was counted off 180
   covers. */
.jmns-collection__list--text .jmns-item__cover {
	flex: 0 0 auto;
	inline-size: 4.5rem;
	aspect-ratio: 1 / 1.414;
}

.jmns-collection__list--text .jmns-item__cover--none {
	display: none;
}

.jmns-collection__list--text .jmns-item__title {
	font-size: var(--wp--preset--font-size--medium, 1rem);
}

/* Two lines is enough to judge a news item by; three sets one row twice the
   height of its neighbours. */
.jmns-collection__list--text .jmns-item__summary {
	-webkit-line-clamp: 2;
}

@media (max-width: 30rem) {
	/* The list stays a list at every width — it never had a grid to fall out
	   of, and the two-across rule above is for covers. */
	.jmns-collection__list--text {
		display: flex;
	}

	.jmns-collection__list--text .jmns-item__summary {
		display: -webkit-box;
	}
}