/* Prevent FOUC: hide until JS marks ready */
.ctsfw-no-fouc {
    visibility: hidden;
}

.ctsfw-no-fouc.ctsfw-ready {
    visibility: visible;
}

/* Grid of cards */
.ctsfw-events {
    display: grid;
    gap: 1.25rem;
}

/* Card shell + CSS row sizing knobs */
.ctsfw-event {
    --title-lines: 2;
    --desc-lines: 3;
    --title-line-height: 1.2;
    --desc-line-height: 1.45;

    background: #001846;
    color: #f6f4ee;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    /* whole card feels clickable */
    outline: 0;
}

/* Optional: keyboard focus cue */
.ctsfw-event:focus-within {
    outline: 2px solid #a3c4f6;
    outline-offset: 2px;
}

/* Announcement banner (top row) */
.ctsfw-event__banner {
    background: #7b1824;
    color: #ffffff;
    text-align: center;
    padding: .5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Row holds image + body; column on mobile, row on desktop */
.ctsfw-event__row {
    display: flex;
    flex-direction: column;
}

@media (min-width:1024px) {
    .ctsfw-event__row {
        flex-direction: row;
        align-items: stretch;
        /* equal height columns */
    }
}

/* Image column */
.ctsfw-event__image {
    overflow: hidden;
    background: #001846;
}

@media (min-width:1024px) {
    .ctsfw-event__image {
        width: 32%;
        flex: 0 0 auto;
        align-self: stretch;
        /* stretch to the row height */
        display: flex;
        /* let img fill */
    }

    .ctsfw-event__image img {
        height: 100%;
        /* fill column height */
        width: 100%;
        object-fit: cover;
        display: block;
    }
}

/* Subtle grow on card hover */
.ctsfw-event__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    display: block;
}

.ctsfw-event:hover .ctsfw-event__image img {
    transform: scale(1.03);
}

/* Body is a column of rows */
.ctsfw-event__body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

/* Livestream icon badge (top-right of content area, below banner) */
.ctsfw-event__livebadge {
    position: absolute;
    top: 2rem;
    right: 1.5rem;
    line-height: 0;
    fill: #ffffff;
}

/* ROW: meta (DATE – DATE | TIME TZ) */
.ctsfw-event__meta--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
}

.ctsfw-event__meta-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}

.ctsfw-event__meta-left span {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.125rem;
}

.ctsfw-event__date {
    font-weight: 400;
}

.ctsfw-event__sep {
    padding: 0 .5rem;
    opacity: .9;
}

/* ROW: title with room for exactly N lines */
.ctsfw-event__row-title {
    min-height: calc(var(--title-lines) * 1em * var(--title-line-height));
    display: flex;
    align-items: flex-start;
}

.ctsfw-event__title {
    margin: .25rem 0 .5rem;
    font-size: 2rem;
    line-height: var(--title-line-height);
    color: #a3c4f6;
    font-weight: 400;
    display: block;
    overflow: hidden;
}

/* underline anim hugs the text, not full row */
.ctsfw-event__title-text {
    display: -webkit-box;
    -webkit-line-clamp: var(--title-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0 1px;
    /* start hidden */
    background-position: 0 100%;
    transition: background-size .25s ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-top: 0;
    padding-bottom: 0;
}

.ctsfw-event:hover .ctsfw-event__title-text {
    background-size: 100% 1px;
}

/* ROW: description with room for exactly M lines */
.ctsfw-event__row-desc {
    min-height: calc(var(--desc-lines) * 1em * var(--desc-line-height));
    display: flex;
    align-items: flex-start;
}

.ctsfw-event__desc {
    margin: 0;
    font-size: 1.125rem;
    line-height: var(--desc-line-height);
}

.ctsfw-event__desc .ctsfw-event__more {
    color: #a3c4f6;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size .25s ease;
}

.ctsfw-event__desc .ctsfw-event__more:hover {
    background-size: 100% 1px;
}

/* ROW: footer (reserved) */
.ctsfw-event__row-footer {
    min-height: 0.5rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ctsfw-event__image img {
        transition: none;
    }

    .ctsfw-event__title-text,
    .ctsfw-event__desc .ctsfw-event__more {
        transition: none;
    }
}

/* ===========================
   LIGHT THEME OVERRIDES
   =========================== */
.ctsfw-theme-light .ctsfw-event {
    background: #f6f4ee;
    color: #001846;
}

.ctsfw-theme-light .ctsfw-event__meta-left span,
.ctsfw-theme-light .ctsfw-event__sep,
.ctsfw-theme-light .ctsfw-event__livebadge {
    color: #7b1824;
    fill: #7b1824;
}

.ctsfw-theme-light .ctsfw-event__title {
    color: #001846;
}

.ctsfw-theme-light .ctsfw-event__desc {
    color: #001846;
}

.ctsfw-theme-light .ctsfw-event__desc .ctsfw-event__more {
    color: #7b1824;
}

.ctsfw-theme-light .ctsfw-event:hover .ctsfw-event__title-text,
.ctsfw-theme-light .ctsfw-event__desc .ctsfw-event__more {
    background-image: linear-gradient(currentColor, currentColor);
}

/* ===== Two-column compact mode ========================================= */
.ctsfw-events.ctsfw-cols-2 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ctsfw-events.ctsfw-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Compact card tweaks */
.ctsfw-event--compact .ctsfw-event__body {
    padding: 0.875rem 1rem;
    gap: 0.4rem;
}

/* Ensure no banner space sneaks in (banner not rendered, but just in case) */
.ctsfw-event--compact .ctsfw-event__banner {
    display: none !important;
}

@media (min-width: 768px) {
    .ctsfw-event--compact .ctsfw-event__title {
        font-size: 1.4rem;
    }
}

/* Hidden items for incremental reveal */
.is-hidden[hidden] {
    display: none !important;
}

/* Hide incrementally-hidden cards regardless of marker used */
#event-list [hidden],
#event-list .is-hidden {
    display: none !important;
}

/* Make the LOAD MORE wrapper (also .event-item) span full width */
#event-list .event-loadmore-wrap.event-item {
    display: block;
    grid-column: 1 / -1;
    /* works for 1 or 2 column grids */
}

/* Your helper classes — now correctly targeted (with dots) */
.ctsfw-title-pad {
    line-height: 0;
}

.title-buffer {
    flex-direction: column;
}

@media (min-width:768px) {
    .ctsfw-event--compact {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
}

.title-buffer-2col {
    /* reserved hook for row-level two-column adjustments */
}

/* Optional: quash subpixel hairlines during transforms on some GPUs */
.ctsfw-event__image {
    backface-visibility: hidden;
    transform: translateZ(0);
}