/*
 * JUGL homepage event box — cassiopeia_jugl.
 *
 * The JEM feature module ("Next JUGL meeting Highlights", embedded in the main article via Modules Anywhere)
 * emits JEM-native markup — confirmed present under cassiopeia too:
 *   .jemModuleFeature > .eventWrap
 *       > h2.event-title.text-center
 *       > .detailsWrap.g-grid > .eventDetails.left | .centre | .right   (.centre holds .dateWrap > .month/.day)
 *       > a.btn-primary.centre  "More information"
 * Cassiopeia doesn't style these; this reproduces live's look. Spec = live's computed styles.
 * Colours consume the tokens in global/colors.css.
 */

/* green title bar (live: #448B0F, white, centred) */
.jemModuleFeature .event-title {
    margin: 0;
    padding: 0.7rem 1rem;
    background: var(--jugl-green);
    color: var(--jugl-white);
    text-align: center;
    font-size: 1.375rem;
    line-height: 1.625rem;
}

/* pale-green body box, three even columns (live: .detailsWrap #DBEED0, flex row wrap, 33.33%) */
.jemModuleFeature .detailsWrap {
    display: flex;
    flex-wrap: wrap;
    position: relative;            /* anchor for the straddling "More information" pill (snag 8) */
    padding-bottom: 1.5rem;
    background: var(--jugl-green-pale);
}
.jemModuleFeature .eventDetails {
    flex: 1 1 33.333%;
    min-width: 220px;
    padding: 1rem 1.5rem;
    color: var(--jugl-navy);
}
.jemModuleFeature .eventDetails ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.jemModuleFeature .eventDetails p {
    margin: 0 0 0.75rem;
}

/* centre calendar card — navy-framed white face, black month / red day
   (live: .month #000 ~2.8rem, .day #f00 ~4.5rem) */
.jemModuleFeature .eventDetails.centre {
    display: flex;
    align-items: center;
    justify-content: center;
}
.jemModuleFeature .dateWrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 1.5rem;
    background: var(--jugl-white);
    border: 4px solid var(--jugl-navy);
    border-radius: 12px;
    line-height: 1;
}
.jemModuleFeature .dateWrap .month {
    color: #000;
    font-size: 2.8rem;
    font-weight: 700;
}
.jemModuleFeature .dateWrap .day {
    color: #f00;   /* live: pure red */
    font-size: 4.5rem;
    font-weight: 700;
}

/* "More information" navy pill (live: #2D304E, white, radius 56px) */
.jemModuleFeature a.btn-primary {
    position: absolute;                     /* (8) straddle the box's bottom edge — half on / half off */
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    margin: 0;
    padding: 0.469rem 1.25rem;
    background: var(--jugl-navy);
    color: var(--jugl-white);
    border-radius: 56px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* TODO (finesse-later): live's calendar has a tabbed top + a rule under the month (a bg-image/pseudo detail).
   This is a clean navy-framed card approximation — refine tabs/divider to pixel-match if wanted. */
/* (9) "More information" scroll-out reveal — .descriptionWrap animates max-height; the override's hideShow()
   sets the target from the panel's own scrollHeight (capped to viewport; overflow auto only when capped).
   WHITE panel so the reveal reads distinct from the green box; hidden by default (CSS + inline in the override). */
.jemModuleFeature .descriptionWrap {
    max-height: 0;
    overflow: hidden;
    padding-inline: 1.5rem;
    background: var(--jugl-white);
    transition: max-height 0.45s ease;
}
.jemModuleFeature .descriptionWrap.is-open {
    padding-block: 3rem 1.25rem;   /* extra top room — let the h2 breathe clear of the straddling pill */
}
.jemModuleFeature .description-title {
    margin: 0 0 1rem;
    color: var(--jugl-navy);
}