/* ============================================================================
 * [jm_spec_list] — the "Specifikacije" download cards.
 *
 * Markup from class-jma-spec-list.php. Registered in register_assets() and
 * enqueued by render(), so pages without the shortcode never load it.
 *
 * Own class names rather than the theme's `.card.file` inside
 * `.flex.space-around`. Those are site-wide utilities — `.flex` and `.no-style`
 * are shared with the linked-product card, the matica promo card and the loyalty
 * module, per the note at the top of catalog-maintenance/assets/
 * linked-product.css — so styling them here would reach all three.
 *
 * Specificity, not !important: the Elementor kit's list and link rules are
 * single-class or element selectors, which the two-class descendants below
 * clear. The base `.button` appearance is not touched — these are cards, not
 * buttons, and they borrow nothing from the theme.
 * ========================================================================== */

.jma-spec-list {
	--jma-spec-icon-size: 48px;
	--jma-spec-gap: 12px;

	margin: 10px 0 0;
}

.jma-spec-list .jma-spec-list__heading {
	margin: 0 0 var(--jma-spec-gap);
}

.jma-spec-list .jma-spec-list__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jma-spec-gap);

	/* Themes and the Elementor kit both put margin and padding on ul. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.jma-spec-list .jma-spec-list__item {
	/* Two cards side by side, one per row once the column gets narrow. The basis
	   is what makes them wrap together instead of one card stranding on its own
	   line at an awkward width. */
	flex: 1 1 180px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jma-spec-list .jma-spec-list__link {
	display: flex;
	align-items: center;
	gap: var(--jma-spec-gap);
	height: 100%;

	padding: 12px 14px;
	border: 1px solid rgba(20, 20, 20, 0.12);
	border-radius: 6px;

	color: inherit;
	text-decoration: none;

	transition: border-color 160ms ease, background-color 160ms ease;
}

.jma-spec-list .jma-spec-list__link:hover,
.jma-spec-list .jma-spec-list__link:focus-visible {
	border-color: rgba(20, 20, 20, 0.35);
	background-color: rgba(20, 20, 20, 0.03);
}

.jma-spec-list .jma-spec-list__icon {
	display: block;
	flex: 0 0 auto;

	width: var(--jma-spec-icon-size);
	height: auto;

	/* The kit's global img rules are the usual source of a stretched icon here. */
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.jma-spec-list .jma-spec-list__label {
	min-width: 0;
	line-height: 1.3;
}

@media (max-width: 768px) {
	.jma-spec-list {
		--jma-spec-icon-size: 40px;
		--jma-spec-gap: 10px;
	}

	/* One per row: at phone width two cards side by side wrap "Sigurnosno
	   tehnički list" onto three lines and the pair stops matching heights. */
	.jma-spec-list .jma-spec-list__item {
		flex: 1 1 100%;
	}
}