/**
 * School Events Plugin - Frontend Styles
 * 
 * Styles for event cards, activity grids, and modals.
 * Includes Avada theme defensive CSS hardening.
 * 
 * @package SchoolEvents
 * @version 2.8.0
 * @since 1.0.0
 */

/* ==Main Container - Avada Theme Hardening== */

/* Specificity boost: body prefix overrides Avada's #main selectors */
body .school-events-container {
    width: 100% !important;
    max-width: none !important;  /* Override Avada's 1200px constraint */
    margin: 0 auto !important;
    padding: 20px !important;
    clear: both !important;       /* Prevent float collapse */
    overflow: hidden !important;  /* Contain floats */
}

.events-section-header {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 40px 0 24px 0 !important;
    color: #1d2327 !important;
    /* Centered with Lines on Both Sides */
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
}

.events-section-header::before,
.events-section-header::after {
    content: '' !important;
    flex: 1 !important;
    border-bottom: 1px solid #2271b1 !important;
}

.events-section-header::before {
    margin-right: 20px !important;
}

.events-section-header::after {
    margin-left: 20px !important;
}

/* Activities Header - Additional spacing */
.events-section-header.activities-header {
    margin: 60px 0 40px 0 !important;
}

.events-section-header:first-child {
    margin-top: 0 !important;
}

/* Season and Frequency Group Headers */
.se-season-header,
.se-frequency-header {
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 32px 0 20px 0 !important;
    color: #2c3338 !important;
    border-left: 4px solid #2271b1 !important;
    padding-left: 16px !important;
}

.se-season-header:first-of-type,
.se-frequency-header:first-of-type {
    margin-top: 20px !important;
}

/* ==Annual Event Cards== */

.event-card {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin-bottom: 32px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.event-header {
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f0f0f0 !important;
    padding-bottom: 12px !important;
}

.event-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #2271b1 !important;
}

.event-content-wrapper {
    display: flex !important;
    gap: clamp(20px, 4vw, 40px) !important;  /* Fluid responsive gaps */
    margin-bottom: 20px !important;
}

.event-info-section {
    flex: 1 !important;
}

.event-info-section h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 16px 0 !important;
    color: #1d2327 !important;
}

.event-details-list {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

.event-details-list dt {
    display: inline !important;
    font-weight: 600 !important;
    color: #1d2327 !important;
    margin: 0 !important;
}

.event-details-list dt::after {
    content: " " !important;
}

.event-details-list dd {
    display: inline !important;
    margin: 0 0 0 4px !important;
    color: #50575e !important;
}

.event-details-list dd::after {
    content: "\a" !important;
    white-space: pre !important;
}

.event-links {
    margin-top: 16px !important;
}

.event-link-button {
    display: inline-block !important;
    padding: 10px 18px !important;
    margin: 4px 8px 4px 0 !important;
    background: #2271b1 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.2s ease !important;
    /* Avada button resets */
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.event-link-button:hover {
    background: #135e96 !important;
    color: #fff !important;
}

.links-separator {
    border: none !important;
    border-top: 1px solid #ddd !important;
    margin: 16px 0 !important;
}

.event-image-section {
    flex: 0 0 350px !important;
    aspect-ratio: 16 / 9 !important;  /* Force 16:9 widescreen ratio */
}

.event-image-section img {
    width: 100% !important;
    height: 100% !important;  /* Fill container height */
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    object-fit: cover !important;  /* Crop, don't stretch */
    display: block !important;      /* Remove inline spacing */
}

.event-description-full {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 2px solid #f0f0f0 !important;
    line-height: 1.6 !important;
    color: #1d2327 !important;
}

.event-description-full p {
    margin: 0 0 16px 0 !important;
}

/* ==Activity Grid== */

/* UPDATED: Use Flexbox to force centering of uneven items */
body .se-activities-grid.flat-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 20px auto 0 auto !important;
    padding: 30px 0 !important;
    max-width: 1400px !important;
}

/* UPDATED: Ensure consistent card width */
body .se-activities-grid.flat-layout .activity-grid-item {
    flex: 0 1 220px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 180px !important;
    gap: 8px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Remove the margin-right on the last item so it centers perfectly */
body .se-activities-grid.flat-layout .activity-grid-item:last-child {
    border-right: 1px solid #e5e5e5 !important;
    margin-right: 0 !important;
}

body .se-activities-grid.flat-layout .activity-grid-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;
}

.activity-grid-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.clickable-card {
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.clickable-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
    border-color: transparent !important;
}

.btn-learn-more {
    margin-top: auto !important;
    display: inline-block !important;
    padding: 6px 16px !important;
    border: 1px solid #2271b1 !important;
    border-radius: 20px !important;
    color: #2271b1 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
}

.clickable-card:hover .btn-learn-more {
    background-color: #2271b1 !important;
    color: white !important;
}

.activity-icon {
    margin-bottom: 8px !important; /* Reduced from 15px */
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.activity-icon i {
    font-size: 45px !important;
    color: #1a2b4a !important; /* Dark Navy Blue */
    display: inline-block !important;
}

/* Legacy Image Fallback */
.activity-icon img {
    height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

.activity-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    color: #1d2327 !important;
}

/* Flat Layout Title Override */
body .se-activities-grid.flat-layout .activity-title {
    font-family: "Manrope", sans-serif !important;
    font-size: 18px !important;
    color: #1a2b4a !important;
    font-weight: 700 !important; /* Bold */
    margin: 0 !important; /* Removed bottom margin - using gap instead */
    line-height: 1.2 !important;
}

/* Activity Meta Label (e.g. "September") - Gold Pill with Red Text */
body .activity-meta {
    font-family: "Manrope", sans-serif !important;
    font-size: 14px !important;
    color: #665428 !important; /* Dark brown text */
    background-color: #f7edcd !important; /* Light cream background */
    padding: 4px 14px !important;
    border-radius: 12px !important; /* Pill shape */
    display: inline-block !important;
    margin: 0 !important; /* Removed bottom margin - using gap instead */
    font-weight: 500 !important;
}

.se-modal-trigger {
    background: #2271b1 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.2s ease !important;
    /* Avada button resets */
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.se-modal-trigger:hover {
    background: #135e96 !important;
}

/* Flat Layout "Learn More" Link Override */
body .se-activities-grid.flat-layout .se-modal-trigger {
    background: transparent !important;
    color: #4a72fa !important; /* Bright Blue Link */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: none !important; /* Changed from uppercase to normal case */
    margin-top: 4px !important; /* Reduced gap above link - was using auto */
}

body .se-activities-grid.flat-layout .se-modal-trigger:hover {
    background: transparent !important;
    text-decoration: underline !important;
    color: #135e96 !important;
}

/* ==Modal Styles== */

.se-modal {
    border: none !important;
    border-radius: 8px !important;
    padding: 0 !important;
    max-width: 700px !important;
    width: 90% !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
    z-index: 999999 !important;  /* Above Avada sticky header */
}

.se-modal::backdrop {
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 999998 !important;  /* Below modal, above Avada header */
}

.se-modal-inner {
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;
}

.se-modal-header {
    padding: 20px 30px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Modal Icon in Header */
.se-modal-icon {
    font-size: 32px !important;
    color: #1a2b4a !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important; /* Use flexbox for icon */
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    height: 32px !important; /* Match font-size for proper centering */
}

.se-modal-icon-img {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.se-modal-icon-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.se-modal-title {
    margin: 0 !important; /* Removes the margin causing the offset */
    font-size: 24px !important;
    font-weight: 700 !important; /* Consolidated font-weight */
    color: #1d2327 !important;
    flex: 1 !important;
    line-height: 1.2 !important; /* Tighter line-height for alignment */
    display: flex !important;    /* Keeps text vertically centered */
    align-items: center !important;
    padding-right: 40px !important; /* Keeps the padding from the deleted block */
}

/* Ghost Button Close - Override all browser and Avada defaults */
button.se-modal-close,
.se-modal-close {
    background: transparent !important; /* Remove blue box */
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important; /* Remove any shadows */
    font-size: 28px !important;
    cursor: pointer !important;
    color: #999 !important; /* Subtle grey */
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    transition: color 0.2s ease !important;
    flex-shrink: 0 !important;
    outline: none !important; /* Remove focus outline (rely on color change) */
    text-shadow: none !important;
    font-weight: normal !important;
}

button.se-modal-close:hover,
button.se-modal-close:focus,
.se-modal-close:hover,
.se-modal-close:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: #2271b1 !important; /* Brand blue on hover */
    border: none !important;
    box-shadow: none !important;
}

/* Ensure the X symbol inside the button inherits the color */
.se-modal-close span {
    color: inherit !important;
}

.se-modal-scroll-area {
    flex: 1 !important;
    overflow-y: auto !important;
}

/* Participation Pill - Activity Modals */
.se-participation-pill {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 15px 30px 10px 30px !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25) !important;
}

.se-participation-pill i {
    font-size: 1rem !important;
}

.se-modal-meta-bar {
    background-color: #f6f7f7 !important;
    padding: 15px 30px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    font-size: 0.95rem !important;
}

.meta-item strong {
    color: #2c3e50 !important;
    margin-right: 5px !important;
}

.se-readable-text {
    padding: 25px 30px !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #333 !important;
    max-width: 70ch !important;
}

.se-modal-actions {
    padding: 20px 30px !important;
    background-color: #fcfcfc !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.se-modal-body {
    max-height: 60vh !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
}

.se-modal-description {
    margin-top: 15px !important;
    line-height: 1.6 !important;
    color: #1d2327 !important;
}

.se-modal-description p {
    margin: 0 0 12px 0 !important;
}

/* Prevent body scroll when modal is open */
body.se-modal-open {
    overflow: hidden !important;
}

/* ==Hide Scraper Elements== */

script[type="application/ld+json"] {
    display: none !important;
}

.scraper-data,
script[type="application/json"] {
    display: none !important;
}

/* ==Responsive Breakpoints - Avada Fusion Builder Compatible== */

/* Standard Media Queries (95% browser support) */
@media (max-width: 900px) {
    .event-content-wrapper {
        flex-direction: column !important;
        gap: clamp(16px, 3vw, 24px) !important;
    }
    
    .event-image-section {
        flex: 1 !important;
        max-width: 100% !important;
    }
    
    .se-activities-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: clamp(15px, 2.5vw, 20px) !important;
    }
    
    /* Flat Layout Mobile Override - Use Flexbox */
    body .se-activities-grid.flat-layout {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        border-top: none !important;
    }
    
    body .se-activities-grid.flat-layout .activity-grid-item {
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 20px !important;
    }
    
    body .se-activities-grid.flat-layout .activity-grid-item:last-child {
        border-bottom: none !important;
    }
}

@media (max-width: 480px) {
    .school-events-container,
    body .school-events-container {
        padding: 15px !important;
    }
    
    .events-section-header {
        font-size: 22px !important;
    }
    
    .event-card {
        padding: 16px !important;
    }
    
    .event-title {
        font-size: 20px !important;
    }
    
    .se-activities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Flat Layout Small Mobile Override - Use Flexbox */
    body .se-activities-grid.flat-layout {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .se-modal {
        width: 95% !important;
    }
    
    .se-modal-content {
        padding: 20px !important;
    }
    
    .se-modal-title {
        font-size: 20px !important;
    }
}

/* Container Queries (Progressive Enhancement for Fusion Builder) */
@supports (container-type: inline-size) {
    .school-events-container {
        container-type: inline-size !important;
        container-name: school-events !important;
    }
    
    /* Handle narrow Fusion Builder columns */
    @container school-events (max-width: 600px) {
        .event-content-wrapper {
            flex-direction: column !important;
        }
        
        .event-image-section {
            flex: 1 !important;
            max-width: 100% !important;
        }
        
        .se-activities-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
    
    @container school-events (max-width: 400px) {
        .se-activities-grid {
            grid-template-columns: 1fr !important;
        }
    }
}
/* ==Modern Card Layout== */

/* Modern Card Container */
body .event-card.modern-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;  /* Remove padding, use internal spacing */
    border-radius: 12px !important;
    overflow: hidden !important;  /* Contain image */
    box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
    transition: box-shadow 0.3s ease !important;
}

body .event-card.modern-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Left: Card Image (35%) - Absolute Fill Technique */
body .card-image {
    flex: 0 0 320px !important;
    max-width: 40% !important;
    min-width: 250px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

body .card-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

body .event-card.modern-card:hover .card-image img {
    transform: scale(1.05) !important;
}

/* Placeholder Image */
body .placeholder-image {
    background: #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .placeholder-image svg {
    max-width: 200px !important;
    opacity: 0.4 !important;
}

/* Right: Card Content (65%) - Tighter Padding & Gap */
body .card-content {
    flex: 1 !important;
    /* Reduced padding to lift content and align with image top */
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    /* Tighter gap between Title / Meta / Description */
    gap: 10px !important;
}

/* Card Title - Lifted & Tighter Leading */
body .card-title {
    font-size: clamp(20px, 3vw, 26px) !important;
    font-weight: 700 !important;
    /* Negative margin pulls title up to align optically with image top */
    margin: -4px 0 0 0 !important;
    color: #1d2327 !important;
    /* Tighter line-height for multi-line titles */
    line-height: 1.2 !important;
}

/* Meta Info with Icons - Compressed Vertical Rhythm */
body .meta-info {
    display: flex !important;
    flex-direction: column !important;
    /* Brings Date, Time, Location rows closer together */
    gap: 6px !important;
    margin: 0 !important;
}

body .meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #50575e !important;
    font-size: 20px !important;
}

body .meta-icon {
    font-size: 24px !important;
    min-width: 28px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

body .meta-text {
    flex: 1 !important;
}

/* Event Description - Balanced Divider Line */
body .event-description-full {
    /* Reduced space ABOVE line (8px) to pull it closer to Location */
    margin-top: 8px !important;
    /* Space BELOW line (12px) for balance */
    padding-top: 12px !important;
    border-top: 1px solid #e5e5e5 !important; /* Subtle divider color */
    line-height: 1.6 !important;
    color: #1d2327 !important;
}

body .se-inline-read-more {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: #2271b1 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-left: 5px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    min-height: auto !important;
}

body .se-inline-read-more:hover {
    background: transparent !important;
    color: #135e96 !important;
    text-decoration: underline !important;
}

/* Event Description (Inline Flow) */
body .event-description-full p {
    font-size: 18px !important;
    display: inline !important;
    line-height: 1.6 !important;
}

/* Description Box with Clamping */
body .description-box {
    margin: 8px 0 !important;
}

body .clamped-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.6 !important;
    color: #1d2327 !important;
    margin-bottom: 12px !important;
}

/* Read More Trigger */
body .read-more-trigger {
    background: none !important;
    border: none !important;
    color: #2271b1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.2s ease !important;
    /* Avada button resets */
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    min-height: auto !important;
}

body .read-more-trigger:hover,
body .read-more-trigger:focus {
    color: #135e96 !important;
    text-decoration: underline !important;
}

/* Action Row */
body .action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: auto !important;  /* Push to bottom */
}

/* Button Styles */
body .action-row .event-link-button {
    padding: 10px 20px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    /* Avada button resets */
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    min-height: auto !important;
}

body .event-link-button.primary {
    background: #2271b1 !important;
    color: #fff !important;
    border: 2px solid #2271b1 !important;
}

body .event-link-button.primary:hover,
body .event-link-button.primary:focus {
    background: #135e96 !important;
    border-color: #135e96 !important;
    color: #fff !important;
}

body .event-link-button.secondary {
    background: #fff !important;
    color: #2271b1 !important;
    border: 2px solid #2271b1 !important;
}

body .event-link-button.secondary:hover,
body .event-link-button.secondary:focus {
    background: #f0f6fc !important;
    color: #135e96 !important;
    border-color: #135e96 !important;
}

body .event-link-button.link {
    background: transparent !important;
    color: #2271b1 !important;
    border: none !important;
    text-decoration: underline !important;
}

body .event-link-button.link:hover,
body .event-link-button.link:focus {
    color: #135e96 !important;
}

/* Modal Styles for Annual Events */
body .modal-event-details {
    background: #f9f9f9 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin: 0 0 24px 0 !important;
}

body .modal-meta-row {
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    gap: 16px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

body .modal-meta-row:last-child {
    border-bottom: none !important;
}

body .modal-meta-row dt {
    font-weight: 600 !important;
    color: #1d2327 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body .modal-meta-row dd {
    color: #50575e !important;
    margin: 0 !important;
}

body .modal-description {
    line-height: 1.7 !important;
    color: #1d2327 !important;
    padding: 0 20px !important;
}

body .modal-description p {
    margin: 0 0 16px 0 !important;
}

body .modal-description p:last-child {
    margin-bottom: 0 !important;
}

/* ==Responsive Breakpoints for Modern Cards== */

/* Tablet - 900px */
@media (max-width: 900px) {
    /* Stack to column layout when image becomes full width */
    body .event-card.modern-card {
        flex-direction: column !important;
    }
    
    /* Stack image on top with fixed height for banner look */
    body .card-image {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 200px !important;
        margin-bottom: 15px !important;
    }
    
    body .card-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    body .card-content {
        padding: 24px !important;
    }
    
    body .card-title {
        font-size: 22px !important;
    }
    
    body .action-row .event-link-button {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

/* Mobile Stack - 768px */
@media (max-width: 768px) {
    /* Column layout already set at 900px, just refine spacing */
    body .card-content {
        padding: 24px !important;
    }
    
    body .modal-meta-row {
        grid-template-columns: 120px 1fr !important;
        gap: 12px !important;
    }
}

/* Small Mobile - 480px */
@media (max-width: 480px) {
    body .card-content {
        padding: 20px !important;
        gap: 12px !important;
    }
    
    body .card-title {
        font-size: 18px !important;
    }
    
    body .meta-row {
        font-size: 16px !important;
    }
    
    body .meta-icon {
        font-size: 20px !important;
        min-width: 24px !important;
    }
    
    body .action-row {
        flex-direction: column !important;
    }
    
    body .action-row .event-link-button {
        width: 100% !important;
        text-align: center !important;
    }
    
    body .modal-meta-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    body .modal-meta-row dt {
        font-size: 14px !important;
    }
}

/* Container Queries for Modern Cards */
@supports (container-type: inline-size) {
    @container school-events (max-width: 768px) {
        body .event-card.modern-card {
            flex-direction: column !important;
        }
        
        body .card-image {
            flex: 0 0 auto !important;
            max-width: 100% !important;
            min-height: 250px !important;
        }
    }
    
    @container school-events (max-width: 480px) {
        body .action-row {
            flex-direction: column !important;
        }
        
        body .action-row .event-link-button {
            width: 100% !important;
        }
    }
}

/* ==v2.7.0: [event_meta] Shortcode - Meta Tiles (Detail Page) Updated styling to include icons and Google Maps link== */

.se-single-meta-bar {
    display: flex !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
    max-width: 1200px !important;
    margin: 0 auto 30px !important;
    padding: 30px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.se-meta-tile {
    flex: 1 !important;
    min-width: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 25px !important;
    border-right: 2px dotted #d1d5db !important;
}

.se-meta-tile:first-child {
    padding-left: 0 !important;
}

.se-meta-tile:last-child {
    border-right: none !important;
    padding-right: 0 !important;
}

.se-tile-label {
    margin: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #2271b1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.se-tile-label i {
    font-size: 1rem !important;
    color: #2271b1 !important;
}

.se-tile-value {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #1f2937 !important;
    font-weight: 400 !important;
    text-align: left !important;
}

.se-venue-name {
    font-weight: 600 !important;
    display: block !important;
    color: #1f2937 !important;
}

.se-postal-address {
    display: block !important;
    margin-top: 4px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
}

/* Location tile clickable link */
.se-location-link {
    text-decoration: none !important;
    color: inherit !important;
    transition: opacity 0.2s ease !important;
}

.se-location-link:hover {
    opacity: 0.7 !important;
}

.se-location-link:hover .se-venue-name {
    text-decoration: underline !important;
}

/* Schedule list - NO bullets, left-aligned */
.se-schedule-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.se-schedule-list li {
    margin-bottom: 6px !important;
    padding-left: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #1f2937 !important;
    text-align: left !important;
}

.se-schedule-list li:last-child {
    margin-bottom: 0 !important;
}

.se-schedule-list li strong {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* ==v2.7.0: Card View Schedule List== */

.se-card-schedule-list {
    margin: 0 !important;
    padding-left: 18px !important;
    list-style: disc !important;
    font-size: 14px !important;
}

.se-card-schedule-list li {
    margin-bottom: 2px !important;
}

.se-card-schedule-list li strong {
    font-weight: 600 !important;
}

/* Card View Location Block */
.meta-text.location-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.meta-text.location-block .venue-name {
    font-weight: 600 !important;
}

.meta-text.location-block .venue-address {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* Schedule list row alignment */
.meta-row.schedule-list-row {
    align-items: flex-start !important;
}

.meta-row.schedule-list-row .meta-icon {
    margin-top: 2px !important;
}

/* ==v2.7.0: Meta Tiles Responsive (Mobile)== */

@media (max-width: 768px) {
    .se-single-meta-bar {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 25px 20px !important;
    }
    
    .se-meta-tile {
        padding: 0 0 20px 0 !important;
        border-right: none !important;
        border-bottom: 2px dotted #d1d5db !important;
        margin-bottom: 20px !important;
    }
    
    .se-meta-tile:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}