/*
 * The publications archive, grouped by type.
 *
 * Only the parts that are new: the chips, the section heads and the counts. The
 * cards themselves are collection.css, which this file is enqueued behind, so a
 * change to how a cover is framed happens once and shows in both places.
 *
 * The section head, its count pill and the 64px between sections are the staff
 * directory's, restated here rather than shared. The two pages have no
 * stylesheet in common and never load together, and lifting six rules into a
 * third file that both must import buys nothing but a file to forget.
 *
 * 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-penerbitan {
	/* Nothing at the top. The gap above the chips is the search box's, and two
	   margins arguing about it is how a declared rhythm stops being one. */
	margin-block-start: 0;
}

/* -------------------------------------------------------------- filters -- */

.jmns-penerbitan__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	/* 16px to the count below, which is the tightest of the page's gaps: the
	   count is what the chips just changed, and it belongs to them. */
	margin-block-end: var(--wp--preset--spacing--40, 1rem);
}

/*
 * Chips, not a select. Six types fit on one row at 1440 and three rows at 390,
 * and a select would hide the whole choice — including how many kinds of thing
 * this archive holds — behind a click to save room the page is not short of.
 *
 * Anchors rather than buttons, because they have to work before the script
 * arrives; see Render::chips() for where they point and why. That means the
 * theme's link colour and underline both have to be turned off here, and the
 * 44px target the theme gives its own controls has to be built rather than
 * inherited.
 */
.jmns-penerbitan__chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	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);
	/* A ground of its own, so an unselected chip reads as a control at rest
	   rather than as text that happens to have a ring drawn round it. */
	background-color: var(--wp--preset--color--surface-muted, #F1F3F1);
	color: var(--wp--preset--color--text-primary, #1F2925);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--t-fast, 150ms) var(--ease, ease);
}

.jmns-penerbitan__chip:hover,
.jmns-penerbitan__chip:focus-visible {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--text-primary, #1F2925);
	text-decoration: none;
}

/*
 * The chip that is on.
 *
 * Doubled deliberately. `.jmns-penerbitan__chip:hover` above is 0-2-0, and a
 * single class here is 0-1-0 — so the selected chip lost its dark ground the
 * moment a pointer touched it, and the page had two chips looking selected and
 * none looking selected under the cursor. Doubling the class makes the active
 * state 0-2-0 as well, and it is declared after, which is what settles a tie.
 */
.jmns-penerbitan__chip--active.jmns-penerbitan__chip--active {
	background-color: var(--wp--preset--color--interactive, #245746);
	border-color: var(--wp--preset--color--interactive, #245746);
	color: var(--wp--preset--color--surface, #fff);
}

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

/* --------------------------------------------------------------- groups -- */

/* A group the chips have switched off. Stated, because `hidden` is a
   presentation hint and any `display` set on the element beats it. */
.jmns-penerbitan__group[hidden] {
	display: none;
}

/*
 * Air above a section the browser has just scrolled to.
 *
 * These are the chips' targets when there is no scripting, so they are jumped
 * to far more often than an ordinary anchor. The theme reserves 170px of
 * `scroll-padding-block-start` on `html` for the sticky masthead, which is
 * measured against the header once it has collapsed to 152px — and it collapses
 * on a scroll event, which is script. With scripting off the header stays at its
 * full 172px, so the heading landed 2.4px behind it: the exact reader this
 * degradation exists for was the one who could not see where they had arrived.
 *
 * 24px on top of whatever the theme reserves, rather than a second guess at the
 * header's height. It is enough to clear the 2px and enough to look deliberate
 * under the 152px header as well, and it does not go stale the next time the
 * masthead changes size.
 */
.jmns-penerbitan__group {
	scroll-margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
}

/*
 * The type and how many of it there are, on one line.
 *
 * The count belongs beside the heading and not only at the top of the page: once
 * a reader has narrowed to Poster, "187 penerbitan" up in the controls is
 * answering a question they have stopped asking.
 */
.jmns-penerbitan__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	/* A tight row gap, which only has an effect once the count wraps. It stops
	   the head opening up on a narrow screen where a long type name takes the
	   whole row and pushes the pill onto a second line. */
	gap: 0.25rem 1rem;
	/*
	 * 40px above the first type, 24 below the rule: the rule belongs to the
	 * heading, and the grid needs to start clear of both. The 64px that belongs
	 * between one type and the next is set by the sibling rule below, which is
	 * the only place it does any work — at the top of the page it would put the
	 * count and the first heading, which are one thought, on separate screens.
	 */
	margin-block: var(--wp--preset--spacing--70, 2.5rem) var(--wp--preset--spacing--50, 1.5rem);
	padding-block-end: var(--wp--preset--spacing--30, 0.75rem);
	border-block-end: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
}

/*
 * 64px between one type and the next. At 32 they ran together and the page read
 * as one long list rather than as six sections with headings.
 *
 * Keyed to a preceding *visible* section rather than to `:first-of-type`,
 * because the chips hide sections with the `hidden` attribute rather than
 * removing them. Under `:first-of-type` a reader who narrowed to Poster would
 * get the 64px gap back above the only section on screen — the exact gap this
 * rule exists to place, reappearing whenever the page is in use.
 */
.jmns-penerbitan__group:not([hidden]) ~ .jmns-penerbitan__group .jmns-penerbitan__group-head {
	margin-block-start: var(--wp--preset--spacing--90, 4rem);
}

.jmns-penerbitan__group-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	/* 24-28px: these head a gallery of covers, and at 20px the type read as a
	   caption above the artwork rather than as its heading. */
	font-size: var(--wp--preset--font-size--title-md, 1.5rem);
	line-height: 1.25;
	/*
	 * The heading gives way, so the count never has to.
	 *
	 * Both are flex items under `space-between`, and a heading that will not
	 * shrink takes the whole row on a phone — dropping the count onto a line of
	 * its own and leaving the rule far below the heading it belongs to.
	 *
	 * The basis has to be `0`, and this is the part that is easy to get wrong.
	 * `flex: 1 1 auto` with `min-inline-size: 0` looks like it should do it and
	 * changes nothing: flex collects items into lines using their *hypothetical*
	 * main size, which under a basis of `auto` is the heading's max-content
	 * width, and it does that before any shrinking is allowed to run — so the
	 * line break is decided before `min-inline-size` has anything to say. A basis
	 * of `0` makes the hypothetical size zero, both items always collect onto one
	 * line, and `grow` hands the heading whatever the count does not need.
	 *
	 * Do not add `min-inline-size: 0` alongside this. It is not merely redundant,
	 * it is harmful: a flex item's automatic minimum size is min-content, and
	 * that is what stops "Garis Panduan" being squeezed narrower than its own
	 * longest word at 320px.
	 */
	flex: 1 1 0%;
}

/*
 * A badge, not a grey afterthought.
 *
 * As plain 13px secondary text at the far end of a 1,200px rule it reads as
 * something left over rather than as the section's own count. A pill gives it an
 * edge to sit in without letting it outrank the heading beside it.
 */
.jmns-penerbitan__group-count {
	margin: 0;
	/* Never squeezed, and never wrapped to "52\npenerbitan". */
	flex: none;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/*
 * The date under a title in the untyped list.
 *
 * Only that group carries one — see Render::card(). Sized and coloured as the
 * secondary line the theme uses everywhere else for a date, so a tender's year
 * is legible without competing with the title above it.
 */
.jmns-penerbitan__date {
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-variant-numeric: tabular-nums;
}