/**
 * Fully responsive styles that work with any theme
 * Optimized for mobile-first design
 */

.wp-block-telex-block-one-more-bite {
	/* Use theme's content width and spacing */
	max-width: none;
	margin: 2rem 0;

	.recipe-card {
		/* Clean container - no styling, just structure */
		padding: 1rem;
		margin: 0;

		/* Mobile first approach */
		@media (min-width: 768px) {
			padding: 1.5rem;
		}

		.recipe-header {
			margin-bottom: 1.5rem;

			@media (min-width: 768px) {
				margin-bottom: 2rem;
			}

			.recipe-image {
				width: 100%;
				height: auto;
				max-height: 250px;
				object-fit: cover;
				border-radius: 4px;
				margin-bottom: 1rem;

				@media (min-width: 768px) {
					max-height: 400px;
				}
			}

			.recipe-title {
				/* Let theme handle heading styles */
				margin: 0 0 0.75rem 0;
				color: #000;
				font-size: 1.5rem;
				line-height: 1.3;

				@media (min-width: 768px) {
					font-size: 2rem;
					margin-bottom: 1rem;
				}
			}

			.recipe-description {
				margin-bottom: 1rem;
				line-height: 1.6;
				color: #000;
				font-size: 0.95rem;

				@media (min-width: 768px) {
					font-size: 1rem;
				}
			}
		}

		.recipe-meta {
			/* Mobile: 2 columns, tablet+: flexible grid */
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 0.75rem;
			margin-bottom: 1.5rem;
			padding: 1rem;
			border-radius: 4px;
			background: #f5f5f5;

			@media (min-width: 480px) {
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;
			}

			@media (min-width: 768px) {
				grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
				margin-bottom: 2rem;
			}

			.meta-item {
				text-align: center;
				padding: 0.5rem 0.25rem;
				
				.meta-value {
					display: block;
					font-weight: 600;
					font-size: 0.85rem; /* Smaller font size */
					color: #000;
					line-height: 1.2;

					@media (min-width: 768px) {
						font-size: 0.95rem; /* Slightly smaller than before */
					}
				}

				.meta-label {
					display: block;
					font-size: 0.65rem; /* Smaller font size */
					color: #666;
					text-transform: uppercase;
					letter-spacing: 0.5px;
					margin-top: 0.25rem;
					line-height: 1.2;

					@media (min-width: 768px) {
						font-size: 0.75rem; /* Slightly smaller than before */
					}
				}
			}
		}

		.recipe-actions {
			/* Stack vertically on mobile */
			display: flex;
			flex-direction: column;
			gap: 1rem;
			margin-bottom: 1.5rem;
			padding: 1rem;
			border-radius: 4px;
			background: #f5f5f5;

			@media (min-width: 768px) {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 2rem;
			}

			.recipe-scaling {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				color: #000;
				font-size: 0.9rem;
				justify-content: center;

				@media (min-width: 768px) {
					justify-content: flex-start;
				}

				select {
					padding: 0.25rem 0.5rem;
					border: 1px solid #000;
					border-radius: 4px;
					background: white;
					color: #000;
					font-size: 0.85rem;
					min-width: 60px;
				}
			}

			.recipe-tools {
				display: flex;
				gap: 0.5rem;
				flex-wrap: wrap;
				justify-content: center;

				@media (min-width: 768px) {
					justify-content: flex-end;
				}

				button {
					/* Compact mobile-friendly buttons */
					padding: 0.4rem 0.75rem;
					border: 1px solid #000;
					background: white;
					color: #000;
					border-radius: 3px;
					cursor: pointer;
					font-size: 0.8rem;
					white-space: nowrap;
					touch-action: manipulation;
					min-height: 36px; /* Better touch targets */

					@media (min-width: 768px) {
						padding: 0.25rem 0.5rem;
						font-size: 0.75rem;
						min-height: auto;
					}

					&:hover {
						background: #f0f0f0;
					}

					&:active {
						transform: translateY(1px);
					}
				}
			}
		}

		.recipe-content {
			/* Single column on mobile */
			display: grid;
			gap: 2rem;
			margin-bottom: 2rem;

			/* Two columns on larger screens */
			@media (min-width: 768px) {
				grid-template-columns: 1fr 1fr;
				align-items: start;
			}

			.ingredients-section,
			.instructions-section {
				h3 {
					/* Theme-friendly headings */
					margin: 0 0 1rem 0;
					padding-bottom: 0.5rem;
					border-bottom: 2px solid #000;
					color: #000;
					font-size: 1.3rem;
					line-height: 1.3;

					@media (min-width: 768px) {
						font-size: 1.5rem;
					}
				}
			}

			.ingredients-list {
				list-style: none;
				padding: 0;
				margin: 0;

				.ingredient-item {
					display: flex;
					align-items: flex-start;
					padding: 0.75rem 0;
					border-bottom: 1px solid #ddd;
					min-height: 2.5rem;

					&:last-child {
						border-bottom: none;
					}

					.ingredient-text {
						flex: 1;
						line-height: 1.5;
						color: #000;
						display: flex;
						align-items: baseline;
						gap: 0.25rem;
						flex-wrap: wrap;
						font-size: 0.95rem;

						@media (min-width: 768px) {
							font-size: 1rem;
						}

						.ingredient-amount {
							font-weight: 600;
							color: #000;
							flex-shrink: 0;
						}

						.ingredient-unit {
							color: #000;
							flex-shrink: 0;
						}

						.ingredient-name {
							color: #000;
							flex: 1;
						}

						.ingredient-notes {
							font-style: italic;
							color: #666;
							font-size: 0.85em;
							flex-basis: 100%;
						}
					}
				}
			}

			.instructions-list {
				list-style-type: decimal;
				list-style-position: outside;
				padding-left: 1.5rem;
				margin: 0;

				@media (min-width: 768px) {
					padding-left: 2rem;
				}

				.instruction-item {
					list-style-type: decimal;
					margin-bottom: 1rem;
					padding-left: 0.5rem;

					&:last-child {
						margin-bottom: 0;
					}

					.instruction-content {
						.instruction-text {
							line-height: 1.6;
							margin: 0;
							color: #000;
							font-size: 0.95rem;

							@media (min-width: 768px) {
								font-size: 1rem;
							}
							
							p {
								margin: 0 0 0.5rem 0;
								
								&:last-child {
									margin-bottom: 0;
								}
							}
						}

						.instruction-image {
							width: 100%;
							max-width: 200px;
							height: auto;
							border-radius: 4px;
							margin-top: 0.5rem;

							@media (min-width: 768px) {
								max-width: 300px;
							}
						}
					}
				}
			}
		}

		.nutrition-info {
			margin-bottom: 2rem;
			padding: 1rem;
			border-radius: 4px;
			background: #f5f5f5;

			h3 {
				margin-bottom: 1rem;
				color: #000;
				font-size: 1.2rem;
				line-height: 1.3;

				@media (min-width: 768px) {
					font-size: 1.3rem;
				}
			}

			.nutrition-grid {
				/* Mobile: 2 columns, tablet+: flexible */
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 0.75rem;

				@media (min-width: 480px) {
					grid-template-columns: repeat(3, 1fr);
					gap: 1rem;
				}

				@media (min-width: 768px) {
					grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
				}

				.nutrition-item {
					text-align: center;
					padding: 0.75rem 0.5rem;
					background: white;
					border-radius: 4px;

					.nutrition-value {
						display: block;
						font-weight: 600;
						font-size: 0.95rem; /* Smaller font size */
						color: #000;
						line-height: 1.2;

						@media (min-width: 768px) {
							font-size: 1rem; /* Slightly smaller than before */
						}
					}

					.nutrition-label {
						display: block;
						font-size: 0.65rem; /* Smaller font size */
						color: #666;
						text-transform: uppercase;
						letter-spacing: 0.5px;
						margin-top: 0.25rem;
						line-height: 1.2;

						@media (min-width: 768px) {
							font-size: 0.7rem; /* Slightly smaller than before */
						}
					}
				}
			}
		}

		.recipe-footer {
			padding-top: 1rem;
			
			/* Only show border if footer has content */
			&:not(:empty) {
				border-top: 2px solid #000;
			}

			.dietary-restrictions,
			.recipe-tags {
				display: flex;
				gap: 0.5rem;
				flex-wrap: wrap;
				margin-bottom: 1rem;
				justify-content: flex-start;

				/* Center on mobile for better balance */
				@media (max-width: 767px) {
					justify-content: center;
				}

				.diet-tag,
				.recipe-tag {
					padding: 0.4rem 0.75rem;
					border: 1px solid #000;
					background: white;
					color: #000;
					border-radius: 15px;
					font-size: 0.8rem;
					text-transform: uppercase;
					letter-spacing: 0.5px;
					white-space: nowrap;

					@media (min-width: 768px) {
						padding: 0.25rem 0.75rem;
					}
				}
			}

			.recipe-rating {
				display: flex;
				align-items: center;
				gap: 1rem;
				margin-bottom: 1rem;
				flex-wrap: wrap;
				justify-content: center;

				@media (min-width: 768px) {
					justify-content: flex-start;
					flex-wrap: nowrap;
				}

				.stars {
					display: flex;
					gap: 0.25rem;

					.star {
						font-size: 1.2em;
						color: #000;
						
						&.filled {
							color: #ffa500;
						}
						
						&.empty {
							color: #ccc;
						}
					}
				}

				.rating-text {
					font-size: 0.9em;
					color: #000;
					text-align: center;

					@media (min-width: 768px) {
						text-align: left;
					}
				}
			}
		}
	}

	/* Modal styles - mobile-optimized */
	.cooking-timer {
		position: fixed;
		top: 15px;
		right: 15px;
		left: 15px;
		background: white;
		border: 2px solid #000;
		border-radius: 8px;
		padding: 1rem;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		z-index: 1000;
		max-width: 300px;
		margin: 0 auto;

		@media (min-width: 768px) {
			top: 20px;
			right: 20px;
			left: auto;
			min-width: 200px;
		}

		.timer-display {
			font-size: 1.5rem;
			font-weight: 600;
			text-align: center;
			margin-bottom: 0.75rem;
			color: #000;

			@media (min-width: 768px) {
				margin-bottom: 0.5rem;
			}
		}

		.timer-controls,
		.timer-options {
			display: flex;
			gap: 0.5rem;
			flex-wrap: wrap;
			justify-content: center;

			button {
				padding: 0.5rem 0.75rem;
				border: 1px solid #000;
				background: white;
				color: #000;
				border-radius: 3px;
				cursor: pointer;
				font-size: 0.85rem;
				min-height: 36px;
				touch-action: manipulation;

				@media (min-width: 768px) {
					padding: 0.25rem 0.5rem;
					font-size: 0.75rem;
					min-height: auto;
				}

				&:hover {
					background: #f0f0f0;
				}
			}
		}
	}

	/* Print styles - clean and minimal */
	@media print {
		.recipe-actions,
		.cooking-timer {
			display: none !important;
		}

		.recipe-card {
			border: 1px solid #000;
			box-shadow: none;
			padding: 1rem;
		}

		.recipe-content {
			grid-template-columns: 1fr !important;
		}

		.instruction-image {
			max-width: 150px !important;
			height: auto !important;
		}

		.recipe-meta {
			grid-template-columns: repeat(3, 1fr) !important;
		}

		.nutrition-grid {
			grid-template-columns: repeat(4, 1fr) !important;
		}
	}
}