/*
 * THE ROAD - MEC Shortcode Country & City
 * Works on MEC grid cards, slider shortcode cards, carousel shortcode cards, and AJAX paginated/load-more cards.
 */

/* Hide MEC default venue/address lines inside grid and slider shortcodes to avoid duplicates. */
.mec-wrap .mec-event-article .mec-grid-event-location,
.mec-wrap .mec-event-article .mec-event-loc-place,
.mec-wrap .mec-event-article .mec-event-address,
.mec-wrap .mec-event-article .mec-events-address,
.mec-wrap .mec-event-article .mec-address,
.mec-wrap .mec-event-article .mec-event-location,
.mec-wrap .mec-event-article .mec-carousel-event-location {
    display: none !important;
}

.mec-wrap .mec-event-article .trl-mec-shortcode-location,
.mec-wrap .mec-event-article .trl-mec-grid-location {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.95;
}

.mec-wrap .mec-event-article .mec-event-title + .trl-mec-shortcode-location::before,
.mec-wrap .mec-event-article .mec-event-title + .trl-mec-grid-location::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.55;
}

.mec-wrap .mec-event-article .trl-mec-grid-location-text {
    display: inline-block;
}

/* Slider layouts often use dark/image backgrounds. Keep the location readable without forcing theme colors too hard. */
.mec-wrap [class*="mec-slider-"] .trl-mec-shortcode-location,
.mec-wrap [class*="mec-slider-"] .trl-mec-grid-location {
    margin-top: 10px;
    margin-bottom: 8px;
}

.mec-wrap .mec-slider-t2-content .trl-mec-shortcode-location,
.mec-wrap .mec-slider-t2-content .trl-mec-grid-location {
    color: rgba(255, 255, 255, 0.86);
}


/* Carousel Type 2 / Carousel shortcode support. */
.mec-wrap [class*="mec-event-carousel-"] .trl-mec-shortcode-location,
.mec-wrap .mec-skin-carousel-container .trl-mec-shortcode-location,
.mec-wrap .mec-skin-carousel-container .trl-mec-grid-location {
    margin-top: 8px;
    margin-bottom: 10px;
}

.mec-wrap .mec-event-carousel-title + .trl-mec-shortcode-location::before,
.mec-wrap .mec-event-carousel-title + .trl-mec-grid-location::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.55;
}

/*
 * Mobile Classic Grid width fix.
 * Problem: MEC can keep desktop/tablet column widths on some articles after shortcode/AJAX rendering.
 * Scope: grid skins only; slider/carousel markup is intentionally not targeted.
 */
@media (max-width: 767px) {
    .mec-wrap .mec-skin-grid-container [class*="mec-event-grid-"],
    .mec-wrap [class*="mec-event-grid-"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mec-wrap .mec-skin-grid-container [class*="mec-event-grid-"] > [class*="mec-col-"],
    .mec-wrap .mec-skin-grid-container [class*="mec-event-grid-"] .mec-event-article,
    .mec-wrap [class*="mec-event-grid-"] > [class*="mec-col-"],
    .mec-wrap [class*="mec-event-grid-"] .mec-event-article,
    .mec-wrap .mec-event-grid-classic .mec-event-article,
    .mec-wrap .mec-event-grid-modern .mec-event-article,
    .mec-wrap .mec-event-grid-clean .mec-event-article,
    .mec-wrap .mec-event-grid-simple .mec-event-article,
    .mec-wrap .mec-event-grid-minimal .mec-event-article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
    }
}