/* ============================================================
   CSDI Events Platform — design system
   Scoped entirely to #events-wrapper so it never leaks into the
   main site, Academy, OpenResearch, Membership or the admin shell.
   Identity: Midnight ink + Horizon teal, with Coral reserved for
   live / urgency states. CSDI green kept only for success + logo tie.
   ============================================================ */

#events-wrapper {
    /* --- Brand palette --- */
    --evt-ink:            #0F1B2D;   /* midnight — hero, dark bands, footer */
    --evt-ink-2:          #16273D;   /* raised surfaces on ink */
    --evt-teal:           #0E8A8A;   /* primary interactive */
    --evt-teal-deep:      #0A6E6E;   /* hover/pressed */
    --evt-teal-soft:      #E4F3F3;   /* teal tint surface */
    --evt-coral:          #E4572E;   /* live / countdown / urgency ONLY */
    --evt-coral-soft:     #FCEAE4;
    --evt-green:          #0B6B2D;   /* success + CSDI brand tie */

    /* --- Neutrals --- */
    --evt-paper:          #FBFCFD;   /* page background */
    --evt-surface:        #FFFFFF;   /* cards */
    --evt-surface-tint:   #F3F6F8;   /* alt sections */
    --evt-border:         #E4EAF0;
    --evt-text:           #0F1B2D;
    --evt-text-muted:     #566577;
    --evt-text-subtle:    #8A97A6;
    --evt-on-ink:         #E9EEF4;
    --evt-on-ink-muted:   #9DB0C4;

    /* --- Type --- */
    --evt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --evt-font-display: 'Manrope', var(--evt-font-body);

    /* --- Shape & rhythm --- */
    --evt-radius-sm: 8px;
    --evt-radius:    14px;
    --evt-radius-lg: 22px;
    --evt-section-y: clamp(3.25rem, 6vw, 6rem);
    --evt-shadow-sm: 0 2px 8px rgba(15, 27, 45, .05);
    --evt-shadow:    0 14px 40px rgba(15, 27, 45, .10);
    --evt-shadow-lg: 0 30px 70px rgba(15, 27, 45, .16);

    color: var(--evt-text);
    background: var(--evt-paper);
    font-family: var(--evt-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- Base elements ---- */
#events-wrapper h1,
#events-wrapper h2,
#events-wrapper h3,
#events-wrapper h4 {
    font-family: var(--evt-font-display);
    color: var(--evt-text);
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 .5em;
    font-weight: 700;
}
#events-wrapper h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
#events-wrapper h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
#events-wrapper h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
#events-wrapper p  { margin: 0 0 1rem; max-width: 68ch; }
#events-wrapper a  { color: var(--evt-teal-deep); text-decoration: none; }
#events-wrapper a:hover { color: var(--evt-teal); }
#events-wrapper img { max-width: 100%; height: auto; }

#events-wrapper .evt-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

#events-wrapper .evt-section { padding-block: var(--evt-section-y); }
#events-wrapper .evt-section--tint { background: var(--evt-surface-tint); }
#events-wrapper .evt-section--ink {
    background: var(--evt-ink);
    color: var(--evt-on-ink);
}
#events-wrapper .evt-section--ink h1,
#events-wrapper .evt-section--ink h2,
#events-wrapper .evt-section--ink h3 { color: #fff; }
#events-wrapper .evt-section--ink p { color: var(--evt-on-ink-muted); }

/* ---- Section heading: a teal keyline + eyebrow, not an all-caps label ---- */
#events-wrapper .evt-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--evt-font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--evt-teal-deep);
    margin-bottom: .75rem;
}
#events-wrapper .evt-section--ink .evt-eyebrow { color: var(--evt-teal); }

/* ---- Buttons ---- */
#events-wrapper .evt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--evt-font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    padding: .85rem 1.6rem;
    border-radius: var(--evt-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
#events-wrapper .evt-btn:active { transform: translateY(1px); }
#events-wrapper .evt-btn--primary { background: var(--evt-teal); color: #fff; }
#events-wrapper .evt-btn--primary:hover { background: var(--evt-teal-deep); color: #fff; }
#events-wrapper .evt-btn--coral { background: var(--evt-coral); color: #fff; }
#events-wrapper .evt-btn--coral:hover { background: #c9461f; color: #fff; }
#events-wrapper .evt-btn--ghost {
    background: transparent;
    border-color: var(--evt-border);
    color: var(--evt-text);
}
#events-wrapper .evt-btn--ghost:hover { border-color: var(--evt-teal); color: var(--evt-teal-deep); }
#events-wrapper .evt-btn--on-ink {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
#events-wrapper .evt-btn--on-ink:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---- Cards ---- */
#events-wrapper .evt-card {
    background: var(--evt-surface);
    border: 1px solid var(--evt-border);
    border-radius: var(--evt-radius);
    box-shadow: var(--evt-shadow-sm);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
#events-wrapper .evt-card--interactive:hover {
    box-shadow: var(--evt-shadow);
    transform: translateY(-3px);
}
#events-wrapper .evt-card__media {
    aspect-ratio: 16 / 9;
    background: var(--evt-surface-tint);
    object-fit: cover;
    width: 100%;
    display: block;
}
#events-wrapper .evt-card__body { padding: 1.25rem 1.35rem 1.5rem; }

/* ---- Badges (lifecycle) ---- */
#events-wrapper .evt-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--evt-font-display);
    font-weight: 600;
    font-size: .78rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    line-height: 1;
}
#events-wrapper .evt-badge--upcoming  { background: var(--evt-teal-soft);  color: var(--evt-teal-deep); }
#events-wrapper .evt-badge--past      { background: #EEF1F5;               color: var(--evt-text-muted); }
#events-wrapper .evt-badge--cancelled { background: #F3E7E7;               color: #9B2C2C; }
#events-wrapper .evt-badge--postponed { background: #F5EEDD;               color: #8A6D1C; }
#events-wrapper .evt-badge--draft     { background: #ECEFF3;               color: var(--evt-text-subtle); }
#events-wrapper .evt-badge--live {
    background: var(--evt-coral);
    color: #fff;
}
#events-wrapper .evt-badge--live::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: evt-pulse 1.4s ease-in-out infinite;
}
@keyframes evt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Chips / meta ---- */
#events-wrapper .evt-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--evt-text-muted);
}
#events-wrapper .evt-chip + .evt-chip { margin-left: 1rem; }

/* ---- Forms ---- */
#events-wrapper .evt-field {
    width: 100%;
    padding: .8rem 1rem;
    font: inherit;
    color: var(--evt-text);
    background: var(--evt-surface);
    border: 1.5px solid var(--evt-border);
    border-radius: var(--evt-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#events-wrapper .evt-field:focus {
    outline: none;
    border-color: var(--evt-teal);
    box-shadow: 0 0 0 4px var(--evt-teal-soft);
}

/* ---- Grid helpers ---- */
#events-wrapper .evt-grid { display: grid; gap: 1.5rem; }
#events-wrapper .evt-grid--3 { grid-template-columns: repeat(3, 1fr); }
#events-wrapper .evt-grid--4 { grid-template-columns: repeat(4, 1fr); }
#events-wrapper .evt-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Accessibility floor ---- */
#events-wrapper :focus-visible {
    outline: 3px solid var(--evt-teal);
    outline-offset: 2px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    #events-wrapper *,
    #events-wrapper *::before,
    #events-wrapper *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    #events-wrapper .evt-grid--4 { grid-template-columns: repeat(2, 1fr); }
    #events-wrapper .evt-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    #events-wrapper .evt-grid--4,
    #events-wrapper .evt-grid--3,
    #events-wrapper .evt-grid--2 { grid-template-columns: 1fr; }
}

/* ---- Accessibility (Phase 11) ---- */
#events-wrapper .evt-skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--evt-teal); color: #fff; padding: .75rem 1.25rem;
    border-radius: 0 0 var(--evt-radius-sm) 0; font-weight: 600;
}
#events-wrapper .evt-skip:focus { left: 0; }
#events-wrapper #evtMain:focus { outline: none; }
/* Ensure interactive elements meet a visible focus ring everywhere */
#events-wrapper a:focus-visible,
#events-wrapper button:focus-visible,
#events-wrapper input:focus-visible,
#events-wrapper select:focus-visible,
#events-wrapper textarea:focus-visible { outline: 3px solid var(--evt-teal); outline-offset: 2px; }

/* Print: hide chrome, keep content readable */
@media print {
    #events-wrapper .evt-header, #events-wrapper .evt-footer,
    #events-wrapper .evt-single-hero__actions, #events-wrapper .evt-skip { display: none !important; }
    #events-wrapper { background: #fff; }
    #events-wrapper .evt-section, #events-wrapper .evt-single-block { break-inside: avoid; }
}

/* =========================================================
   Mobile hardening (platform-wide)
   The single biggest fix: border-box so 100%-width inputs,
   selects and textareas include their padding+border and stop
   overflowing their container on narrow screens.
   ========================================================= */
#events-wrapper, #events-wrapper *, #events-wrapper *::before, #events-wrapper *::after { box-sizing: border-box; }

/* Media never forces horizontal scroll */
#events-wrapper img, #events-wrapper svg, #events-wrapper video, #events-wrapper iframe { max-width: 100%; height: auto; }

/* Any horizontally-wide block (tables, code, pre) scrolls inside itself */
#events-wrapper .evt-scroll-x, #events-wrapper table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Inputs & controls: comfortable tap size, 16px to stop iOS zoom-on-focus */
@media (max-width: 640px) {
    #events-wrapper .evt-field,
    #events-wrapper input, #events-wrapper select, #events-wrapper textarea { font-size: 16px; }
    #events-wrapper .evt-btn { min-height: 44px; }

    /* Hero search: stack the input and button so nothing is cut off */
    #events-wrapper .evt-hero__search { flex-direction: column; }
    #events-wrapper .evt-hero__search .evt-btn { width: 100%; }

    /* Action rows wrap instead of overflowing */
    #events-wrapper .evt-hero__actions,
    #events-wrapper .evt-single-hero__actions,
    #events-wrapper .evt-header__actions { flex-wrap: wrap; }
    #events-wrapper .evt-single-hero__actions .evt-btn { flex: 1 1 auto; }
}