.elementor-2562 .elementor-element.elementor-element-8c0f3ea{--display:flex;--min-height:500px;}.elementor-2562 .elementor-element.elementor-element-8c0f3ea:not(.elementor-motion-effects-element-type-background), .elementor-2562 .elementor-element.elementor-element-8c0f3ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jec.org.uk/wp-content/uploads/2025/02/JEG-news-page-hero.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2562 .elementor-element.elementor-element-0c408e6{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2562 .elementor-element.elementor-element-23a2740{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-e49ec54 */<style>
    .sheepcrm-event-detail-custom-layout {
        /* Base styles for the whole container if needed */
    }
    .sheepcrm-event-main-columns {
        display: flex;
        flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
        gap: 30px; /* Space between column 1 and column 2 */
        margin-bottom: 30px; /* Space before additional images */
    }

    /* Column 1 Styling */
    .sheepcrm-event-column-1 {
        flex: 1; /* Column 1 takes up roughly 2/3 of the space */
        min-width: 300px; /* Ensures column has a minimum width before wrapping */
        display: flex;
        flex-direction: column;
    }
    .sheepcrm-event-image-container {
        position: relative; /* For positioning the date overlay */
        margin-bottom: 20px;
        line-height: 0; /* Prevent extra space below image if it's an inline element */
    }
    .sheepcrm-main-event-image {
        max-width: 100%;
        height: auto;
        display: block; /* Removes any extra space below the image */
        border-radius: 4px; /* Optional: slightly rounded corners */
    }
    .sheepcrm-event-date-overlay {
        position: absolute;
        bottom: 10px; 
        left: 10px;
        background-color: #9E1B33;
        color: white;
        padding: 5px 8px;
        text-align: center;
        border-radius: 4px;
        line-height: 1.2;
        z-index: 10;
    }
    .sheepcrm-event-date-overlay .overlay-month {
        font-size: 0.85em; /* JUL */
        font-weight: bold;
        display: block;
    }
    .sheepcrm-event-date-overlay .overlay-day {
        font-size: 1.5em; /* 22 */
        font-weight: bold;
        display: block;
        line-height: 1.1;
    }
    .sheepcrm-event-title-col1 {
        font-size: 2em; /* Adjust as needed */
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
    }
    .event-date-location {
        margin-bottom: 20px;
        font-size: 1em;
        color: #555;
    }
    .event-date-location p {
        margin: 5px 0;
    }
    .event-description {
        margin-bottom: 25px;
        line-height: 1.6;
        flex-grow: 1; /* Allows description to take available space if button is not present */
    }
    .sheepcrm-ticket-button-container {
        margin-top: auto; /* Pushes button to the bottom if column has extra space */
    }
    .sheepcrm-ticket-button-container a{
        text-decoration: uppercase;
        font-family:"Oswald";
    }
    .sheepcrm-ticket-button {
        display: inline-block;
        padding: 12px 25px;
        background-color: #9E1B33; /* Or your theme's primary action color */
        color: white !important; /* Ensure text is white */
        text-decoration: uppercase;
        font-size: 1.1em;
        font-weight: normal;
        text-align: center;
    }
    .sheepcrm-ticket-button:hover {
        background-color: #218838; /* Darker shade on hover */
    }

    /* Column 2 Styling */
    .sheepcrm-event-column-2 {
        flex: 1; /* Column 2 takes up roughly 1/3 of the space */
        min-width: 280px; /* Ensures column has a minimum width before wrapping */
        border: 1px solid #9E1B33;
        padding: 20px;
        box-sizing: border-box; /* Ensures padding is included in the width/height */
        max-height: 600px;
    }
    .sheepcrm-map-container {
        margin-bottom: 20px;
    }
    .sheepcrm-map-container iframe {
        max-width: 100%;
        height: 300px; /* Adjust as needed */
    }
    .sheepcrm-event-title-col2 {
        font-size: 1.6em;
        margin-top: 0; /* If map is not present, no top margin */
        margin-bottom: 10px;
        color: #333;
    }
    .sheepcrm-event-column-2 p {
        font-size: 0.95em;
        margin-bottom: 10px;
        color: #444;
    }

    /* Additional Images Gallery Styling */
    .sheepcrm-event-additional-images-gallery-container {
        margin-top: 30px;
        clear: both; /* Ensure it's below floated or flexed columns if any other global styles interfere */
    }
    .sheepcrm-additional-images-title {
        font-size: 1.4em;
        margin-bottom: 15px;
        color: #333;
    }
    .sheepcrm-event-additional-images-gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 15px; /* Space between images */
    }
    .sheepcrm-gallery-image-item {
        flex: 1 1 calc(50% - 8px); /* (100% / 2 columns) - half of the gap */
        box-sizing: border-box;
        border-radius: 4px;
        overflow: hidden; /* Helps if using object-fit */
        /* Forcing a specific aspect ratio for equal height appearance */
        /* aspect-ratio: 4/3; /* Example: 4:3 aspect ratio, uncomment and adjust if desired */
    }
    .sheepcrm-gallery-image-item img {
        width: 100%;
        height: 100%; /* When aspect-ratio is set on parent, this makes img fill */
        object-fit: cover; /* Ensures image covers the area, might crop */
        display: block;
        border: 1px solid #ddd; /* Optional border around each image */
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 768px) {
        .sheepcrm-event-main-columns {
            flex-direction: column; /* Stack columns vertically */
            gap: 20px;
        }
        .sheepcrm-event-column-1,
        .sheepcrm-event-column-2 {
            flex: 1 1 100%; /* Each column takes full width */
            min-width: auto;
        }
        .sheepcrm-gallery-image-item {
            /* flex: 1 1 100%; /* Optional: Single column for gallery images on very small screens */
            /* Or keep two columns if preferred, they will already shrink due to parent */
        }
    }
    @media (max-width: 480px) {
        .sheepcrm-gallery-image-item {
            flex: 1 1 100%; /* Single column for gallery images on very small screens */
        }
        .sheepcrm-event-title-col1 {
            font-size: 1.6em;
        }
         .sheepcrm-event-title-col2 {
            font-size: 1.3em;
        }
    }
</style>/* End custom CSS */