/* ========================================
   Recipe ingredients — mobile first
   ======================================== */

.tom-recipe {
	width: 100%;
}

.tom-recipe-image img {
	display: block;
	width: 100%;
	height: auto;
}

.tom-recipe-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.tom-recipe-meta li {
	margin: 0;
}

.tom-recipe-meta-label {
	font-weight: 600;
}

.tom-recipe-section {
	margin-top: 2rem;
}

.tom-recipe-archive {
	width: min(100% - 2rem, 75rem);
	margin-inline: auto;
}

.tom-recipe-single {
	width: min(100% - 2rem, 75rem);
	margin-inline: auto;
}

.tom-recipe-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 2rem;
}

.tom-recipe-card-image img {
	display: block;
	width: 100%;
	height: auto;
}

.tom-recipe-card-link {
	color: inherit;
	text-decoration: none;
}

.tom-recipe-nutrition-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tom-recipe-nutrition-label {
	font-weight: 600;
}

.tom-recipe-ingredients ul {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.tom-recipe-ingredients ul li {margin: 0; padding: .25em; line-height: 115%}

.tom-recipe-ingredients {
	width: 100%;
	margin-bottom: 2em;
}

.tom-recipe-ingredient-section-name {
	display: block;
	margin-bottom: .25rem;
	padding: .55rem .25rem;

	font-size: 1.05em;
	font-weight: 700;
	line-height: 115%;

	border-bottom: 1px solid currentColor;
}

/* Pojedynczy składnik */
.tom-recipe-ingredient {
	display: grid;
	grid-template-columns: minmax(4rem, auto) minmax(0, 1fr);
	gap: .75rem;
	align-items: baseline;

	padding: .5rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* Ilość */
.tom-recipe-ingredient-amount {
	display: flex;
	justify-content: flex-end;
	gap: .25rem;
	min-width: 0;
	white-space: nowrap;
}

.tom-recipe-ingredient-quantity {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
}

/* Jednostka */
.tom-recipe-ingredient-unit {
	white-space: nowrap;
	opacity: .7;
}

/* Nazwa */
.tom-recipe-ingredient-name {
	min-width: 0;
	line-height: 1.4;
}

.tom-recipe-ingredient-quantity-text {
	white-space: normal;
}

.tom-recipe-ingredient-list--name-first .tom-recipe-ingredient {
	grid-template-columns: minmax(0, 1fr) auto;
}

.tom-recipe-ingredient-list--name-first .tom-recipe-ingredient-name {
	grid-column: 1;
	grid-row: 1;
}

.tom-recipe-ingredient-list--name-first .tom-recipe-ingredient-amount {
	grid-column: 2;
	grid-row: 1;
	justify-content: flex-end;
}

.tom-recipe-ingredient-list--name-first
	.tom-recipe-ingredient-amount > span:first-child {
	display: none;
}

.tom-recipe-serving-scale {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	align-items: center;
	margin-top: 1rem;
}

.tom-recipe-serving-scale-label {
	font-weight: 600;
}

.tom-recipe-serving-scale-options {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.tom-recipe-serving-scale button {
	min-width: 2.25rem;
	padding: .35rem .55rem;
	cursor: pointer;
}

.tom-recipe-serving-scale button.is-active {
	font-weight: 700;
	box-shadow: inset 0 0 0 2px currentColor;
}


/*
 * Nutrition list as grid
 *
 */

.tom-recipe-nutrition-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tom-recipe-nutrition-list li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: .5em;
	background: #eee;
	border: 1px solid #ddd;
	border-radius: .5em;
	text-align: center;
}

.tom-recipe-nutrition-value {
	order: -1;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: .25em;
	padding: .5em

}

.tom-recipe-nutrition-label {
	margin: .5em 0;
	font-size: 0.87rem;
	font-weight: 400;
}

.tom-recipe-nutrition-label > span {
	display: none;
}


/*
 *  Responsive filters layout
 *
*/
.tom-recipe-filter-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: .5em;
	align-items: center;
}

.tom-recipe-filter-actions > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25em;
	min-height: 2.25em;
	font-size: 1.25em;
	line-height: 1;
	text-decoration: none;
}

.tom-recipe-filter-fields label {
	display: grid

}
@media (max-width: 640px) {

.tom-recipe-filter-fields label {
  grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: .5em
}
	
}

@media (min-width: 640px) and (max-width: 900px) {
.tom-recipe-filter-fields {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em; 
}

}

@media (min-width: 901px)
{
	.tom-recipe-filter-fields {
display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1em; 
}
}


@media (min-width: 1101px) {

	.tom-recipe-filters {
	display: grid;
	grid-template-columns: 1fr 200px;align-items: center;
	gap: 1em
}
	
}

/*  END: Responsive filters layout */