/*
 * Dari Meja Mufti.
 *
 * The page was a 24-byte stub — one heading — with the main menu pointing at
 * it. The collection behind it is square social graphics that carry their own
 * text, so the image is the content and the layout is a gallery rather than a
 * list of articles.
 *
 * Every custom property carries a fallback. The plugin owns this page's markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

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

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

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

.jmns-meja-card {
	block-size: 100%;
}

/*
 * The whole card is the link — image and title inside one anchor, so the
 * target is the card rather than four words under it, and there is one stop in
 * the tab order per item instead of two pointing at the same post.
 */
.jmns-meja-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	block-size: 100%;
	color: inherit;
	text-decoration: none;
}

.jmns-meja-card__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/*
	 * The graphics are 1080x1080. Reserved here so a lazy grid of them does not
	 * shift the page as each one arrives, and squared so a stray non-square
	 * upload cannot break the row it lands in.
	 */
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-meja-card__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;
	/* The titles all begin "Dari Meja Mufti :" and run long; they must break
	   rather than widen the track they sit in. */
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/*
 * Hover and focus land on the image, not the text: the image is what the
 * visitor is aiming at, and underlining a heading that is already bold moves
 * very little.
 */
.jmns-meja-card__link:hover .jmns-meja-card__image,
.jmns-meja-card__link:focus-visible .jmns-meja-card__image {
	border-color: var(--wp--preset--color--border-strong, #6F8D7A);
}

.jmns-meja-card__link:hover .jmns-meja-card__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 would trace only the text box on some engines.
 */
.jmns-meja-card__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 3px;
	border-radius: var(--r-card, 16px);
}

/*
 * The one entry with no poster.
 *
 * Same square as its neighbours so the row stays a row, and labelled — a blank
 * tile among fifty-three hadith graphics reads as a failed image rather than as
 * content the department has not sent.
 */
.jmns-meja-card__missing {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: var(--wp--preset--spacing--40, 1rem);
	border: 1px dashed var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-align: center;
	text-wrap: balance;
}