/*event archive*/
.event-archive-row {
    align-items: stretch;
}

.event-archive-row figure,
.event-archive-row img {
    min-height: 245px;
}

.event-archive-row h2 a {
    transition: all 0.2s ease;
}

.event-archive-row h2 a:hover {
    color: var(--primary-md);

    transition: all 0.2s ease;
}

/* View Event is a read-more block dressed as a bmg-secondary button; hover to
   match (primary-dk -> primary-md, white text stays). !important fights the
   core preset background class, which core itself emits with !important */
.event-archive-row a.wp-block-read-more {
    transition: all 0.25s ease;
}

.event-archive-row a.wp-block-read-more:hover {
    background-color: var(--primary-md) !important;
}

/* time on the archive row: strip the block's standalone gray-card look (it was
   gray-on-gray anyway) and render one bold purple-dk clock + time line */
.event-archive-row .bmg-event-date-time.wp-block-ymca-event-date-time {
    width: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;

    display: flex;
    align-items: center;
}

@media (min-width: 993px) {
    .event-archive-row .bmg-event-date-time.wp-block-ymca-event-date-time {
        max-width: 25%;
        flex: 0 0 25%;
    }
}

.event-archive-row .bmg-event-date-time__line {
    gap: 10px;
    align-items: flex-start;
}

.event-archive-row span.bmg-event-date-time__icon {
    flex: 0 0 22px;
    height: 22px;
    margin-top: 3px;
}

.event-archive-row span.bmg-event-date-time__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.event-archive-row span.bmg-event-date-time__icon svg path {
    fill: var(--primary-dk);
}

.event-archive-row span.bmg-event-date-time__text {
    flex-grow: 1;
    font-size: inherit;
    white-space: normal;
}

/*single events — Option B split hero: purple-sweep panel (eyebrow, white H1,
  pin meta, clock line, add-to-calendar) beside the full-bleed featured image.
  The white month/day date badge overlays the image top-right and the faint
  staggered chevron pair from the event cards decorates the panel's right edge.
  Markup: templates/single-event.html*/

/* isolation makes the hero a stacking context so the z-index:-1 chevrons sit
   above the gradient but below every normal-flow child (no per-child z-index) */
.bmg-event-single__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bmg-event-single__row {
    align-items: stretch;
}

.bmg-event-single__panel {
    justify-content: center;
    min-height: 480px;
}

/* faint chevron watermark (event-card recipe, scaled up). Anchored to the
   hero and offset from the 50% panel/image seam so it stays on the panel */
.bmg-event-single__hero::after {
    content: "";
    position: absolute;
    top: -8%;
    height: 116%;
    width: 220px;
    z-index: -1;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.08);
    -webkit-mask: var(--bmg-chevron-mask) no-repeat center / contain;
    mask: var(--bmg-chevron-mask) no-repeat center / contain;
    right: calc(50% + 24px);
}

/* location row with the CSS pin glyph (same recipe as .bmg-event-card__meta) */
.bmg-event-single__meta {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: -0.01em;
}

.bmg-event-single__meta::before {
    content: "";
    flex: none;
    width: 14px;
    height: 19px;
    background-color: var(--white);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="black" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="black" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* date/time block on the purple panel: strip its standalone gray-card look
   (block base stylesheet) — extra ancestor class outranks it, no !important */
.bmg-event-single__panel .bmg-event-single__datetime.bmg-event-date-time {
    margin: 4px 0 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.bmg-event-single__panel .bmg-event-date-time__line {
    gap: 10px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bmg-event-single__panel span.bmg-event-date-time__icon {
    flex: 0 0 20px;
    height: 20px;
}

.bmg-event-single__panel span.bmg-event-date-time__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.bmg-event-single__panel span.bmg-event-date-time__icon svg path {
    fill: var(--white);
}

.bmg-event-single__panel span.bmg-event-date-time__text {
    flex-grow: 0;
    font-size: inherit;
}

.bmg-event-single__panel .bmg-event-date-time__cal {
    padding: 18px 0 0;
}

/* white button on the purple panel (base block style is blue) */
.bmg-event-single__panel a.bmg-event-date-time__cal-link {
    background: var(--white);
    color: var(--primary-dk);
    transition: filter 0.2s ease;
}

.bmg-event-single__panel a.bmg-event-date-time__cal-link svg path {
    fill: var(--primary-dk);
}

.bmg-event-single__panel a.bmg-event-date-time__cal-link:hover {
    filter: brightness(0.92);
}

/* white month/day badge over the featured image (revealed here; hidden by
   default in defaults.css). Anchors to the hero — top-right of the image half */
.bmg-event-single__hero .bmg-event-date-time__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 1;
    width: 105px;
    height: 105px;
    background: var(--white);
    border-radius: 12px;
    line-height: 1;
    box-shadow: 0 10px 30px rgba(35, 31, 32, 0.25);
}

/* featured image fills its half edge-to-edge */
.bmg-event-single__media {
    overflow: hidden;
}

.bmg-event-single__media figure,
.bmg-event-single__media img {
    width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

@media (max-width: 992px) {
    /*archive*/
    .event-archive-row .wp-block-group {
        flex-direction: column;
        align-items: start;
    }

    .event-archive-row h2 {
        font-size: 35px;
    }

    .event-archive-row .bmg-event-date-time.wp-block-ymca-event-date-time {
        margin-top: 12px;
    }

    /*single: stack panel over image; badge drops into the panel flow as a
      smaller inline date card; chevron (seam-relative) comes off*/
    .bmg-event-single__row {
        flex-direction: column;
    }

    .bmg-event-single__panel {
        min-height: 0;
    }

    .bmg-event-single__panel h1 {
        font-size: 40px;
    }

    .bmg-event-single__hero::after {
        display: none;
    }

    .bmg-event-single__hero .bmg-event-date-time__badge {
        position: static;
        width: 84px;
        height: 84px;
        margin: 4px 0 8px;
        box-shadow: none;
    }

    .bmg-event-single__hero .bmg-event-date-time__badge-month {
        font-size: 18px;
    }

    .bmg-event-single__hero .bmg-event-date-time__badge-day {
        font-size: 40px;
    }

    .bmg-event-single__media figure,
    .bmg-event-single__media img {
        min-height: 240px;
        max-height: 360px;
    }
}

@media (max-width: 768px) {
    /*archive: stack the image over the content (blog.css hides ITS card images
      at this width; event rows keep theirs). !important fights the featured
      image block's inline left-corner radius — top corners round instead. */
    .wp-block-group.event-archive-row {
        flex-direction: column;
    }

    .event-archive-row figure,
    .event-archive-row img {
        width: 100%;
        border-radius: 12px 12px 0 0 !important;
    }
}