/*
 * Crescent observation records.
 *
 * Two three-column tables, one per year, with a `Bil` column counting to twelve
 * and twenty-five links all reading "Lihat / Muat Turun". The month is the
 * record, so the month is the link, and the sheet is shown rather than
 * described.
 *
 * 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-hilal {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

.jmns-hilal__year + .jmns-hilal__year {
	margin-block-start: var(--wp--preset--spacing--70, 3rem);
}

/*
 * The year alone. The department's own heading read "DATA CERAPAN HILAL 2026",
 * which repeats the page title before reaching the only part that tells one
 * section from the next.
 */
.jmns-hilal__heading {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	padding-block-end: var(--wp--preset--spacing--10, 0.25rem);
	border-block-end: 2px solid var(--wp--preset--color--interactive, #245746);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--title-sm, 1.25rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * `min(100%, 9rem)` so the track can never be wider than its container — a bare
 * `minmax(9rem, 1fr)` overflows the page below 9rem. Twelve months land as six
 * across at 1200px and three on a phone, which keeps a year on one screen.
 */
.jmns-hilal__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-hilal__item {
	margin: 0;
}

/*
 * The whole tile is the link — sheet and month inside one anchor — so the
 * target is the tile rather than a line of text, and there is one stop in the
 * tab order per record instead of two pointing at the same file.
 */
.jmns-hilal__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	block-size: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * 9/16, which is what these are: the Falak division photographs the sighting
 * sheet on a phone. `contain`, not `cover` — a record cropped to fit is a
 * record with its readings cut off — on the department's tint so a portrait
 * sheet and the one landscape summary sit in frames of the same size.
 */
.jmns-hilal__sheet {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 9 / 16;
	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);
}

.jmns-hilal__sheet--none {
	inline-size: 100%;
	block-size: auto;
}

.jmns-hilal__label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	line-height: 1.35;
	/* "Jumadal Akhirah 1448H" must break rather than widen its track. */
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/*
 * The year summary is not a month: it is the whole year on one landscape sheet.
 * Given the full row so its proportions are not forced into a portrait frame.
 */
.jmns-hilal__item--summary {
	grid-column: 1 / -1;
}

.jmns-hilal__item--summary .jmns-hilal__link {
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 1rem);
	padding-block-start: var(--wp--preset--spacing--30, 1rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

.jmns-hilal__item--summary .jmns-hilal__sheet {
	flex: 0 0 auto;
	inline-size: 12rem;
	aspect-ratio: 16 / 9;
}

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

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

/*
 * The ring goes on the link so it surrounds the whole tile. 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-hilal__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 3px;
	border-radius: var(--r-card, 16px);
}

@media (max-width: 30rem) {
	/*
	 * Two columns, stated rather than derived.
	 *
	 * A 9rem floor does not fit twice inside 272px, so at 320 the grid fell to
	 * one column and the page became 15,136px — eighteen screens to reach last
	 * year's Rajab. Two narrow sheets are still legible; one per screen is not
	 * a listing.
	 */
	.jmns-hilal__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The summary stacks; a 12rem sheet beside text leaves too little for the
	   label at 342px. */
	.jmns-hilal__item--summary .jmns-hilal__link {
		flex-direction: column;
		align-items: stretch;
	}

	.jmns-hilal__item--summary .jmns-hilal__sheet {
		inline-size: 100%;
	}
}