/*
    Nov26 - new grid system for front page
*/
/* Style each cell to look like the rounded, shadowed card against a #f5efe0 background */
.menu-grid-cell {
    position: relative;
    background: #ffffff !important; /* Pure white makes the cards stand out from the cream page */
    border-radius: 20px !important; /* Smooth, prominent rounded corners */
    /* Warm-tinted drop shadow that looks soft and natural on a cream background */
    box-shadow: 0 10px 24px rgba(40, 30, 10, 0.08), 0 3px 6px rgba(40, 30, 10, 0.04) !important; 
    padding: 25px !important; /* Generous breathing room inside the card */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers text and images horizontally */
    text-align: center;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover effect: lifts up slightly and deepens the shadow when moused over */
.menu-grid-cell:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 32px rgba(40, 30, 10, 0.12) !important;
}

/* Ensure the image container sits nicely inside the card padding */
.menu-grid-cell .wp-block-image {
    width: 100% !important;
    margin-bottom: 20px !important; /* Space between image and text */
}

/* Force every image to scale beautifully inside the card wrapper */
.menu-grid-cell .wp-block-image img {
    width: 100% !important;
    height: 220px !important; /* Adjust height to fit your graphics */
    object-fit: contain !important; /* Keeps logos/drawings from being cut off */
    background: #ffffff; /* White background behind the image */
}

/* Force the text link to expand invisibly over the entire card area */
.menu-grid-cell a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}