/* ==========================================================
   MEALS & RECIPES
   ========================================================== */

/* Style for the Block Pattern Recipe Card */
.recipe-card {
  
	/*
	background: radial-gradient(circle, #FFD5A1 0%, #FFF4D1 70%); */

			background: var(--light-mist);
	
    border: 2px solid var(--pine);
    border-radius: 8px;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05)!important;
    margin-bottom: 20px!important;
    transition: transform 0.2s ease;
	
}

.recipe-card:hover {
   
    border-color: var(--river-blue);
background: #ffffff!important;
	    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; /* Deepens shadow */
  

	
}

.recipe-card h3, .recipe-card h2 {
    color: var(--pine) !important;
    margin-top: 0 !important;
	
    border-bottom: 2px solid var(--light-mist);
    padding-bottom: 10px;
	text-align: center!important;
}

.recipe-card:hover h3, .recipe-card:hover h2 {
	 color: var(--river-blue) !important;
}


.recipe-card img {
     
     border-radius: 4px;
    max-width: 100%;
    height: auto;

}

/* Recipe Card Gallery: 2-Column Grid (Square Block) */
.recipe-card .recipe-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Exactly 2 side-by-side */
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.recipe-card .recipe-gallery figure {
    margin: 0 !important;
    width: 100% !important;
}

.recipe-card .recipe-gallery img {
    border-radius: 4px;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* Forces images to be perfect squares */
    height: auto !important;
    width: 100% !important;
    display: block;
}

/* If there is only 1 image, let it take the full width */
.recipe-card .recipe-gallery figure:only-child {
    grid-column: span 2;
}
.recipe-card .recipe-gallery figure:only-child img {
    aspect-ratio: 4 / 3 /* Makes a single image a nice landscape rectangle */
}

/* Center and narrow the lumch box */
.narrow-white-box {
   max-width: 90% !important; /* Adjust this number to your preferred width */
    margin-left: auto !important;
    margin-right: auto !important;
   background-color: var(--light-mist);
    border-left: 10px solid var(--canoe-red);
    padding: 20px;
    font-style: italic;
    margin: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Optional subtle shadow */
    border-radius: 4px;
}

/* Ensure it takes full width on small mobile screens */
@media (max-width: 600px) {
    .narrow-white-box {
        max-width: 90% !important;
    }
}

/* ==========================================================
   GEAR PAGE
   ========================================================== */

/* MOBILE FIX: Stack the image and text on phones */
@media (max-width: 768px) {
    .gear-item {
        flex-direction: column; /* Stack top-to-bottom */
        text-align: center;
        padding: 20px;
    }

    .gear-image {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%; /* Image fills mobile width */
    }
    
    .gear-content h3 {
        font-size: 24px !important;
    }
}

/* 1. INCREASE SPECIFICITY TO OVERRIDE INLINE BLOCK STYLES */
body .gear-item {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    transform: translateZ(0); /* Hardware acceleration fix */
}

/* 2. THE HOVER TRIGGER (Force it with the 'body' tag) */
body .gear-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    border-color: var(--river-blue) !important;
    background-color: #ffffff !important;
    z-index: 10 !important;
}

/* 3. ENSURE THE TITLE RESPONDS */
body .gear-item:hover h2 {
    color: var(--river-blue) !important;
}