/* Event announcement strip (ViewComponents/EventBanner), shared by the home page and
   every page using _LandingNav. Moved out of landing.css so the home page, which no
   longer loads landing.css, gets it too. */
/* ─── Event announcement banner ─────────────────────────────────────────────
   Rendered above the nav by the EventBanner view component when an admin has
   switched an event's banner on in the Events Manager. Scrolls away under the
   sticky nav, so it announces without permanently eating vertical space.

   Deliberately NOT a flat colour strip: a solid teal bar reads as a system
   alert, which is the wrong register for a private executive roundtable. The
   base is the same deep navy the event pages use, lit by two soft radial
   blooms, so it reads as an extension of the brand rather than a notification.
   It works unchanged in dark mode because it is already dark. */
.event-banner {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(105deg, #070b20 0%, #0b1330 44%, #122150 100%);
    border-bottom: 1px solid rgba(0, 179, 201, 0.22);
}

/* Teal bloom, right of centre - the primary light source. */
.event-banner::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 10%;
    width: 520px;
    height: 520px;
    transform: translateY(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 179, 201, 0.30) 0%, rgba(0, 179, 201, 0.10) 38%, transparent 66%);
}

/* Cooler indigo bloom on the left, so the strip has depth instead of one wash. */
.event-banner::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 4%;
    width: 380px;
    height: 380px;
    transform: translateY(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(88, 110, 240, 0.20) 0%, transparent 62%);
}

.event-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.35;
}

/* Micro-badge carrying the event type, so the message line does not have to. */
.event-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(0, 212, 230, 0.38);
    background: rgba(0, 179, 201, 0.12);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #7ae8f4;
    white-space: nowrap;
}

.event-banner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background: #00d4e6;
    animation: eventBannerPulse 2.6s ease-out infinite;
}

@keyframes eventBannerPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 212, 230, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(0, 212, 230, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 212, 230, 0); }
}

.event-banner-text {
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.93);
}

.event-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.event-banner-cta .material-icons {
    font-size: 16px;
    transition: transform .18s ease;
}

/* The whole strip is the link, so it is the strip that owns the hover state. */
.event-banner:hover .event-banner-cta {
    background: var(--primary, #00b3c9);
    border-color: var(--primary, #00b3c9);
    color: #04121c;
}

.event-banner:hover .event-banner-cta .material-icons { transform: translateX(3px); }

.event-banner:focus-visible {
    outline: 2px solid #00d4e6;
    outline-offset: -3px;
}

@media (max-width: 860px) {
    .event-banner::before, .event-banner::after { width: 300px; height: 300px; }
    .event-banner-inner { gap: 10px; padding: 10px 16px; font-size: 13px; }
    .event-banner-text { text-align: center; }
}

@media (max-width: 700px) {
    /* The badge is ornament, not information - the message line already says
       what this is. Drop it while the message and CTA still share one row,
       rather than letting it push them apart. */
    .event-banner-badge { display: none; }
}

@media (max-width: 640px) {
    /* Below this the message and CTA genuinely cannot share a row, so the strip
       becomes two lines. Tighten it so two lines still read as a bar and not as
       a block of page. */
    .event-banner-inner { gap: 7px; padding: 9px 14px; font-size: 12.5px; }
    .event-banner-cta { padding: 5px 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .event-banner-dot { animation: none; }
    .event-banner-cta, .event-banner-cta .material-icons { transition: none; }
}