/**
 * 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;
}

:root {
    --se-surface: #ffffff;
    --se-surface-alt: #f7fafc;
    --se-surface-accent: #eef6fc;
    --se-border: #d7dee5;
    --se-border-soft: #e8edf2;
    --se-text: #1d2327;
    --se-text-muted: #50575e;
    --se-accent: #2271b1;
    --se-accent-deep: #135e96;
    --se-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --se-shadow-md: 0 12px 28px rgba(15, 23, 42, 0.12);
}

/* ==Annual Month Accordion== */

body .se-annual-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin-top: 24px !important;
}

body .se-accordion-item {
    border: 1px solid var(--se-border) !important;
    border-radius: 8px !important;
    background: var(--se-surface) !important;
    box-shadow: var(--se-shadow-sm) !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body .se-accordion-item:hover {
    border-color: #c7d5e1 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

body .se-accordion-heading {
    margin: 0 !important;
}

body .se-accordion-trigger {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border: none !important;
    color: var(--se-text) !important;
    cursor: pointer !important;
    padding: 22px 24px !important;
    text-align: left !important;
    font-size: clamp(20px, 2.6vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    position: relative !important;
}

body .se-accordion-trigger:hover,
body .se-accordion-trigger:focus-visible {
    background: linear-gradient(180deg, #f9fcff 0%, #f3f8fc 100%) !important;
    color: var(--se-accent-deep) !important;
    outline: none !important;
}

body .se-accordion-item.is-expanded .se-accordion-trigger {
    background: linear-gradient(180deg, #f8fbff 0%, #eef6fc 100%) !important;
    border-bottom: 1px solid var(--se-border-soft) !important;
}

body .se-accordion-trigger::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: transparent !important;
    transition: background-color 0.2s ease !important;
}

body .se-accordion-item.is-expanded .se-accordion-trigger::before,
body .se-accordion-trigger:hover::before,
body .se-accordion-trigger:focus-visible::before {
    background: var(--se-accent) !important;
}

body .se-accordion-trigger-label {
    flex: 1 !important;
}

body .se-accordion-chevron {
    width: 14px !important;
    height: 14px !important;
    border-right: 2px solid var(--se-accent) !important;
    border-bottom: 2px solid var(--se-accent) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
}

body .se-accordion-item.is-expanded .se-accordion-chevron {
    transform: rotate(-135deg) !important;
    margin-top: 6px !important;
}

body .se-accordion-panel {
    padding: 0 24px 24px !important;
    background: linear-gradient(180deg, rgba(247, 250, 252, 0.72) 0%, #ffffff 18%) !important;
}

body .se-accordion-panel-header {
    font-size: clamp(18px, 2.2vw, 22px) !important;
    font-weight: 700 !important;
    color: var(--se-text) !important;
    padding: 18px 0 14px !important;
    border-bottom: 1px solid var(--se-border-soft) !important;
}

body .se-accordion-empty-state {
    margin: 0 !important;
    padding: 20px 0 0 !important;
    color: #50575e !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

body .se-event-summary-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding-top: 18px !important;
}

body .se-annual-event-row {
    border: 1px solid var(--se-border-soft) !important;
    border-radius: 8px !important;
    background: var(--se-surface) !important;
    padding: 16px 18px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

body .se-annual-event-row:hover {
    border-color: #d4dde6 !important;
    box-shadow: var(--se-shadow-sm) !important;
    background: #fcfdff !important;
}

body .se-annual-event-row-clickable {
    cursor: pointer !important;
}

body .se-annual-event-row-clickable:hover {
    transform: none !important;
    border-color: #c9d7e4 !important;
    box-shadow: var(--se-shadow-md) !important;
}

body .se-annual-event-row-clickable:focus-visible {
    outline: 2px solid var(--se-accent) !important;
    outline-offset: 3px !important;
}

body .se-annual-event-row-clickable:hover .se-event-summary-title-static,
body .se-annual-event-row-clickable:focus-visible .se-event-summary-title-static {
    color: var(--se-accent-deep) !important;
}

body .se-annual-event-row:last-child {
    margin-bottom: 0 !important;
}

body .se-annual-event-row-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body .se-annual-event-row-layout {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

body .se-annual-event-row-thumb {
    flex: 0 0 92px !important;
    width: 92px !important;
    height: 64px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #eef3f7 !important;
    border: 1px solid #dde6ee !important;
    box-shadow: var(--se-shadow-sm) !important;
}

body .se-annual-event-row-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body .se-annual-event-row-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    color: var(--se-text-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body .se-annual-event-row-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: var(--se-surface-alt) !important;
    border: 1px solid #e4ebf1 !important;
}

body .se-annual-event-row-meta-item:not(:last-child)::after {
    content: none !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;
}

/* Preserve the existing grid while exposing group wrappers for scrapers. */
.se-group-activity {
    display: contents !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: 760px !important;
    width: min(92vw, 760px) !important;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.28) !important;
    z-index: 999999 !important;  /* Above Avada sticky header */
    background: var(--se-surface) !important;
}

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

.se-modal-inner {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(88vh, 920px) !important;
}

.se-modal-header {
    padding: 22px 30px !important;
    border-bottom: 1px solid var(--se-border-soft) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 15px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !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: clamp(24px, 2.5vw, 30px) !important;
    font-weight: 700 !important; /* Consolidated font-weight */
    color: var(--se-text) !important;
    flex: 1 !important;
    line-height: 1.2 !important; /* Tighter line-height for alignment */
    display: flex !important;    /* Keeps text vertically centered */
    align-items: flex-start !important;
    padding-right: 24px !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: #7b8794 !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;
    background: var(--se-surface) !important;
}

.se-modal-media {
    padding: 24px 30px 0 !important;
}

.se-modal-media img {
    width: 100% !important;
    max-height: 320px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
    box-shadow: var(--se-shadow-sm) !important;
}

.se-modal-meta-bar {
    background-color: var(--se-surface-alt) !important;
    padding: 18px 30px !important;
    border-top: 1px solid var(--se-border-soft) !important;
    border-bottom: 1px solid var(--se-border-soft) !important;
    display: grid !important;
    grid-template-columns: minmax(160px, 0.9fr) minmax(220px, 1.1fr) minmax(260px, 1.5fr) !important;
    gap: 18px !important;
    font-size: 0.95rem !important;
    align-items: start !important;
}

.meta-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.se-modal-meta-bar .meta-icon {
    font-size: 28px !important;
    min-width: 32px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
}

.meta-item-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.meta-item strong {
    color: #2c3e50 !important;
    margin-right: 0 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.meta-item span {
    color: var(--se-text) !important;
    line-height: 1.5 !important;
}

.meta-item-content > span {
    display: block !important;
}

.meta-value {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.meta-value-date {
    max-width: 15ch !important;
}

.meta-value-time,
.meta-item-content .location-value {
    white-space: normal !important;
}

.se-modal-summary {
    padding-bottom: 0 !important;
}

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

.se-modal-summary p {
    margin: 0 !important;
    font-size: 1.08rem !important;
    color: #334155 !important;
}

.se-modal-section {
    padding: 24px 30px 0 !important;
}

.se-modal-section-title {
    margin: 0 0 12px 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1d2327 !important;
}

.se-modal-session-list {
    margin: 0 !important;
    padding-left: 20px !important;
    color: var(--se-text) !important;
}

.se-modal-session-item + .se-modal-session-item {
    margin-top: 8px !important;
}

.se-modal-actions {
    padding: 20px 30px !important;
    background-color: #fcfdff !important;
    border-top: 1px solid var(--se-border-soft) !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: 10px !important;
    line-height: 1.7 !important;
    color: var(--se-text) !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"],
.se-events-export,
[data-se-export="events-page"] {
    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: min(94vw, 760px) !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;
}

body .event-card.modern-card.se-annual-event-summary {
    border-radius: 8px !important;
    box-shadow: none !important;
    border: 1px solid #e3e8ee !important;
}

body .event-card.modern-card.se-annual-event-summary:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !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 .se-summary-image {
    flex: 0 0 148px !important;
    max-width: 148px !important;
    min-width: 148px !important;
    min-height: 148px !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;
}

body .se-summary-content {
    padding: 18px 20px !important;
    gap: 8px !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;
}

body .se-event-summary-title,
body .se-event-summary-title-static {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(18px, 2vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--se-text) !important;
    text-align: left !important;
}

body .se-event-summary-title {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

body .se-event-summary-title:hover,
body .se-event-summary-title:focus-visible {
    color: var(--se-accent-deep) !important;
    text-decoration: underline !important;
    outline: none !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 .se-summary-meta {
    gap: 4px !important;
}

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

body .se-annual-event-summary .meta-row {
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 16px !important;
}

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

body .se-annual-event-summary .meta-icon {
    font-size: 18px !important;
    min-width: 20px !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-summary-description {
    margin-top: 6px !important;
    padding-top: 10px !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;
}

body .se-summary-description p {
    font-size: 16px !important;
    display: block !important;
    margin: 0 !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;
}
/* ==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;
    }
    
}

/* 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;
    }
    
    .se-modal-header {
        padding: 18px 20px !important;
    }

    .se-modal-media,
    .se-modal-meta-bar,
    .se-readable-text,
    .se-modal-section,
    .se-modal-actions {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .se-modal-meta-bar {
        grid-template-columns: 1fr !important;
        gap: 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;
    }
}

@media (max-width: 900px) {
    body .se-summary-image {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 180px !important;
        height: 180px !important;
    }
}

@media (max-width: 768px) {
    body .se-accordion-trigger {
        padding: 18px 20px !important;
        font-size: 21px !important;
    }

    body .se-accordion-panel {
        padding: 0 20px 20px !important;
    }

    body .se-accordion-panel-header {
        font-size: 22px !important;
        padding: 16px 0 14px !important;
    }

    body .se-annual-event-row {
        padding: 14px 16px !important;
    }

    body .se-annual-event-row-layout {
        gap: 14px !important;
    }

    body .se-annual-event-row-thumb {
        flex-basis: 78px !important;
        width: 78px !important;
        height: 58px !important;
    }

    body .se-annual-event-row-meta {
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    body .se-accordion-trigger {
        padding: 16px 18px !important;
        font-size: 19px !important;
    }

    body .se-summary-content {
        padding: 16px !important;
    }

    body .se-event-summary-title,
    body .se-event-summary-title-static {
        font-size: 18px !important;
    }

    body .se-annual-event-row {
        padding: 14px !important;
    }

    body .se-annual-event-row-layout {
        align-items: flex-start !important;
        gap: 12px !important;
    }

    body .se-annual-event-row-thumb {
        flex-basis: 72px !important;
        width: 72px !important;
        height: 54px !important;
    }

    body .se-annual-event-row-meta-item {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .se-modal-header {
        padding: 18px 20px !important;
        gap: 12px !important;
    }

    .se-modal-title {
        font-size: 22px !important;
        padding-right: 12px !important;
    }

    .se-modal-media,
    .se-modal-meta-bar,
    .se-readable-text,
    .se-modal-section,
    .se-modal-actions {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .se-modal-meta-bar {
        grid-template-columns: 1fr !important;
    }

    .se-modal-actions {
        flex-direction: column !important;
    }

    .se-modal-actions .event-link-button {
        width: 100% !important;
        text-align: center !important;
    }
}