/* ==================== #jc-column.noodles/@vars.css ==================== */

#jc-column.noodles {

	--color-category1: #5898c7;
	--color-category2: #e06060;
	--color-category3: #bf7ab5;
	--color-category4: #c9a718;

	--bg-color-category1: rgba(88,152,199,0.15);
	--bg-color-category2: rgba(224,96,96,0.15);
	--bg-color-category3: rgba(191,122,181,0.15);
	--bg-color-category4: rgba(201,167,24,0.15);

	--border-color-category1: rgba(88,152,199,0.25);
	--border-color-category2: rgba(224,96,96,0.25);
	--border-color-category3: rgba(191,122,181,0.25);
	--border-color-category4: rgba(201,167,24,0.25);

	--border-category1: linear-gradient(to right, rgba(88,152,199,0.25) 50%, white 50%) repeat-x left top / 0.4em 0.1em;
	--border-category2: linear-gradient(to right, rgba(224,96,96,0.25) 50%, white 50%) repeat-x left top / 0.4em 0.1em;
	--border-category3: linear-gradient(to right, rgba(191,122,181,0.25) 50%, white 50%) repeat-x left top / 0.4em 0.1em;
	--border-category4: linear-gradient(to right, rgba(201,167,24,0.25) 50%, white 50%) repeat-x left top / 0.4em 0.1em;

}



/* ==================== #jc-column.noodles/#distribution/@.css ==================== */

#jc-column.noodles #distribution {
	display: grid;
	grid-gap: 2em;
}



/* ==================== #jc-column.noodles/#distribution/category/@.css ==================== */

#jc-column.noodles #distribution .category {
	display: grid;
	grid-gap: 1.5em;
}

#jc-column.noodles #distribution .category h3 img {
	object-fit: cover;

}


#jc-column.noodles #distribution .category ul {
	display: grid;
	grid-gap: 1.5em;
	padding: 0;
	list-style-type: none;
	display: grid;
}


@media (max-width: 640px) {

	#jc-column.noodles #distribution .category h3 img {
		height: 6.5em;
	}

}



@media (min-width: 641px) {

	#jc-column.noodles #distribution .category h3 img {
		height: 6.4em;
	}

}



/* ==================== #jc-column.noodles/#distribution/category/item.css ==================== */

#jc-column.noodles #distribution .category .item {
	display: grid;
}

#jc-column.noodles #distribution .category .item:nth-of-type(n+2) {
	padding-top: 1.5em;
}

#jc-column.noodles #distribution .category.category_1 .item:nth-of-type(n+2) { background: var(--border-category1); }
#jc-column.noodles #distribution .category.category_2 .item:nth-of-type(n+2) { background: var(--border-category2); }
#jc-column.noodles #distribution .category.category_3 .item:nth-of-type(n+2) { background: var(--border-category3); }
#jc-column.noodles #distribution .category.category_4 .item:nth-of-type(n+2) { background: var(--border-category4); }

#jc-column.noodles #distribution .category .item h4 {
	display: grid;
	justify-items: center;
}

#jc-column.noodles #distribution .category.category_1 .item h4 { color: var(--color-category1); }
#jc-column.noodles #distribution .category.category_2 .item h4 { color: var(--color-category2); }
#jc-column.noodles #distribution .category.category_3 .item h4 { color: var(--color-category3); }
#jc-column.noodles #distribution .category.category_4 .item h4 { color: var(--color-category4); }

#jc-column.noodles #distribution .category .item h4 small {
	font-size: 83%;
	font-weight: normal;
}

#jc-column.noodles #distribution .category .item dl {
	display: grid;
	grid-gap: 1em 0.75em;
	grid-template-columns: max-content 1fr;
}


#jc-column.noodles #distribution .category .item dt {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2em;
	border-radius: 1em;
	padding: 0 1em;
	transform: translateY(0.25em);
	color: white;
	font-size: 95%;
}

#jc-column.noodles #distribution .category .item dt:nth-of-type(1) {
	letter-spacing: 0.5em;
	text-indent: 0.5em;
}

#jc-column.noodles #distribution .category.category_1 .item dt { background: var(--color-category1); }
#jc-column.noodles #distribution .category.category_2 .item dt { background: var(--color-category2); }
#jc-column.noodles #distribution .category.category_3 .item dt { background: var(--color-category3); }
#jc-column.noodles #distribution .category.category_4 .item dt { background: var(--color-category4); }


@media (max-width: 640px) {

	#jc-column.noodles #distribution .category .item {
		grid-gap: 1em;
		justify-items: center;
	}

	#jc-column.noodles #distribution .category .item h4 {
		font-size: 120%;
	}

	#jc-column.noodles #distribution .category .item figure {
		width: 18em;
	}

}


@media (min-width: 641px) {

	#jc-column.noodles #distribution .category .item {
		grid-template-columns: 12.8em 1fr;
		grid-template-areas:
		'h4 dl'
		'figure dl'
		'blank recipe';
		grid-gap: 0.5em 1.5em;
		align-items: center;
	}

	#jc-column.noodles #distribution .category .item h4 { grid-area: h4; }
	#jc-column.noodles #distribution .category .item figure { grid-area: figure; }
	#jc-column.noodles #distribution .category .item dl { grid-area: dl; }
	#jc-column.noodles #distribution .category .item .recipe { grid-area: recipe; }

	#jc-column.noodles #distribution .category .item h4 {
		font-size: 90%;
	}

	#jc-column.noodles #distribution .category .item figure {
		/* width: 12.8em; */
	}

}



/* ==================== #jc-column.noodles/#statistics/@.css ==================== */

#jc-column.noodles #statistics {
	display: grid;
	grid-gap: 1.5em;
	justify-items: center;
}

#jc-column.noodles #statistics h3 {
	color: var(--color-blue);
}

#jc-column.noodles #statistics > div {
	display: grid;
	border: 1px solid #dbe0bf;
}

#jc-column.noodles #statistics h4 {
	color: var(--color-blue);
	font-weight: normal;
}

#jc-column.noodles #statistics figure {
	display: grid;
	grid-gap: 0.5em;
	justify-items: center;
}

#jc-column.noodles #statistics figcaption {
	color: var(--color-gray);
	line-height: 1.3;
	text-indent: -1em;
	margin-left: 1em;
}


@media (max-width: 640px) {

	#jc-column.noodles #statistics > div {
		grid-gap: 1.25em;
		padding: 1.25em;
	}

	#jc-column.noodles #statistics h4 {
		font-size: 110%;
		text-align: center;
	}

	#jc-column.noodles #statistics figcaption {
		font-size: 70%;
	}

}


@media (min-width: 641px) {

	#jc-column.noodles #statistics > div {
		padding: 1.5em;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
		'h4 h4'
		'figure p';
		grid-gap: 1.5em;
		align-items: center;
	}

	#jc-column.noodles #statistics > div h4 { grid-area: h4; }
	#jc-column.noodles #statistics > div figure { grid-area: figure; }
	#jc-column.noodles #statistics > div p { grid-area: p; }

	#jc-column.noodles #statistics h4 {
		justify-self: center;
		font-size: 80%;
	}

	#jc-column.noodles #statistics figcaption {
		font-size: 55%;
	}

}



/* ==================== #jc-column.noodles/#unique/@.css ==================== */

#jc-column.noodles #unique {
	display: grid;
	grid-gap: 1.5em;
}



/* ==================== #jc-column.noodles/#unique/item.css ==================== */

#jc-column.noodles #unique .item {
	display: grid;
}

#jc-column.noodles #unique .item h3 {
	display: flex;
	align-items: center;
}

#jc-column.noodles #unique .item h3 small {
	border-radius: 1em;
	margin-right: 0.5em;
	padding: 0.5em 1em;
	color: white;
	font-size: 72%;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0.25em;
	text-indent: 0.25em;
}

#jc-column.noodles #unique .item.item_category1 h3 { color: var(--color-category1); }
#jc-column.noodles #unique .item.item_category2 h3 { color: var(--color-category2); }
#jc-column.noodles #unique .item.item_category3 h3 { color: var(--color-category3); }
#jc-column.noodles #unique .item.item_category4 h3 { color: var(--color-category4); }

#jc-column.noodles #unique .item.item_category1 h3 small { background: var(--color-category1); }
#jc-column.noodles #unique .item.item_category2 h3 small { background: var(--color-category2); }
#jc-column.noodles #unique .item.item_category3 h3 small { background: var(--color-category3); }
#jc-column.noodles #unique .item.item_category4 h3 small { background: var(--color-category4); }


@media (max-width: 640px) {

	#jc-column.noodles #unique .item {
		grid-gap: 1em;
		justify-items: center;
	}

	#jc-column.noodles #unique .item:nth-of-type(n+2) {
		padding-top: 1.5em;
	}

	#jc-column.noodles #unique .item:nth-of-type(n+2).item_category1 { background: var(--border-category1); }
	#jc-column.noodles #unique .item:nth-of-type(n+2).item_category2 { background: var(--border-category2); }
	#jc-column.noodles #unique .item:nth-of-type(n+2).item_category3 { background: var(--border-category3); }
	#jc-column.noodles #unique .item:nth-of-type(n+2).item_category4 { background: var(--border-category4); }


	#jc-column.noodles #unique .item figure {
		width: 18em;
	}

	#jc-column.noodles #unique .item h3 {
		font-size: 120%;
	}

	#jc-column.noodles #unique .item h4 {
		font-size: 110%;
		text-align: center;
	}
	#jc-column.noodles #unique .item h4 span {
		display: inline-block;
	}

}


@media (min-width: 641px) {

	#jc-column.noodles #unique .item {
		grid-template-columns: auto auto;
		grid-gap: 0 2em;
		width: calc(100% - 5em);
	}

	#jc-column.noodles #unique .item:nth-of-type(odd) {
		grid-template-areas:
		'figure blank1'
		'figure h3'
		'figure h4'
		'figure p'
		'figure blank2';
		justify-self: start;
	}
	#jc-column.noodles #unique .item:nth-of-type(even) {
		grid-template-areas:
		'blank1 figure'
		'h3 figure'
		'h4 figure'
		'p figure'
		'blank2 figure';
		justify-self: end;
	}

	#jc-column.noodles #unique .item h3 { grid-area: h3; }
	#jc-column.noodles #unique .item h4 { grid-area: h4; }
	#jc-column.noodles #unique .item figure { grid-area: figure; }
	#jc-column.noodles #unique .item p { grid-area: p; align-self: start; }

	#jc-column.noodles #unique .item figure {
		width: 14em;
	}

	#jc-column.noodles #unique .item h3 {
		font-size: 1.1em;
	}

	#jc-column.noodles #unique .item h4 {
		margin: 0.75em 0 0.25em;
		font-size: 80%;
	}
	
	#jc-column.noodles #unique .item .recipes {
		justify-self: center;
		margin-top: 1em;
		grid-column: span 2;
	}


}