/* Moved responsive media queries from lgbake.css */
@media (max-width: 768px) {
    .blog-section-wrapper {
        flex-direction: column;
    }

    #category-container {
        border-left: none;
        border-top: 1px solid #ddd;
        padding-left: 0;
        padding-top: 20px;
        order: 2; /* Ensures categories go to bottom */
    }

    .side-border {
    display: none;
    }
    
	.lgbake-banner-title {
    font-size: 30px;
    }
    
	h1 {
    font-size: 30px
    }
    
	h2 {
    font-size: 24px
    }
    
	h3 {
    font-size: 20px
    }

	.lgbake-modal-content {
		width: 500px
	}

	.lgbake-modal {
		padding-top: 50px
	}
	.lgbake-hide-mobile {
		display: none !important
	}   
}

@media (max-width: 1024px) {
  .recipe-split-view {
    grid-template-columns: 65% 35%; /* Adjust split for tablets */
  }
}

@media (max-width: 800px) {
  .recipe-split-view {
    grid-template-columns: 100%; /* Full width stack for mobile */
  }
  
  /* Reset grid assignments for mobile stack */
  .recipe-top, .recipe-left, .recipe-right, .ingredients-column {
    grid-column: 1;
    grid-row: auto;
    border-left: none;
  }

  .recipe-left {
    height: 300px; /* Give image a set height on mobile */
  }
}

@media (max-width:1205px) {
	.lgbake-auto {
		max-width: 95%
	}
}

@media (max-width:600px) {
	.lgbake-modal-content {
		margin: 0 10px;
		width: auto !important
	}

	.lgbake-modal {
		padding-top: 30px
	}

	.lgbake-dropdown-hover.lgbake-mobile .lgbake-dropdown-content,
	.lgbake-dropdown-click.lgbake-mobile .lgbake-dropdown-content {
		position: relative
	}

	.lgbake-hide-small {
		display: none !important
	}

	.lgbake-mobile {
		display: block;
		width: 100% !important
	}

	.lgbake-bar-item.lgbake-mobile,
	.lgbake-dropdown-hover.lgbake-mobile,
	.lgbake-dropdown-click.lgbake-mobile {
		text-align: center
	}

	.lgbake-dropdown-hover.lgbake-mobile,
	.lgbake-dropdown-hover.lgbake-mobile .lgbake-btn,
	.lgbake-dropdown-hover.lgbake-mobile .lgbake-button,
	.lgbake-dropdown-click.lgbake-mobile,
	.lgbake-dropdown-click.lgbake-mobile .lgbake-btn,
	.lgbake-dropdown-click.lgbake-mobile .lgbake-button {
		width: 100%
	}

	.img-recipe {
		display:none;
	}
}

@media (min-width:993px) {
	.lgbake-modal-content {
		width: 900px
	}

	.lgbake-hide-large {
		display: none !important
	}

	.lgbake-sidebar.lgbake-collapse {
		display: block !important
	}
}

@media (max-width:992px) and (min-width:601px) {
	.lgbake-hide-medium {
		display: none !important
	}
}

@media (max-width:992px) {
	.lgbake-sidebar.lgbake-collapse {
		display: none
	}

	.lgbake-main {
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.lgbake-auto {
		max-width: 100%
	}
}

/* --- PRINT STYLES --- */
@media print {
  .recipe-split-view {
    display: block; /* Stack them for printing so text is wider and easier to read */
    box-shadow: none;
  }
  
  .recipe-left img {
    height: 250px; /* Limit image height on paper to save ink */
    margin-bottom: 20px;
  }
  
  .ingredients-column {
		border-left: none;
    padding: 0;
    margin-bottom: 30px;
  }

   /* 4. Hide UI elements that aren't useful on paper */
  .back-btn, 
  .print-btn, 
  .loading,
  .lgbake-top,
  header, 
  footer {
    display: none !important;
  }
}