/* =========================================================================
   Events Manager — single location page (/locations/:slug/)
   =========================================================================
   Scoped to body.osb-em-location (see osb_is_em_location()).

   Kept separate from em-events.css: that file styles EM's events archive and
   single event; this is a different EM template (post type `location`) with a
   different problem to solve. EM's own location template renders no page
   title at all, an empty map section, an empty description section, and the
   venue's next event twice — once in the header meta and again as a bare
   <ul>. The PHP side prints a hero + an events card grid; this file styles
   those and collapses the EM blocks they replace.

   Colours track The7's button custom properties (--the7-btn-*) the same way
   em-events.css does, so the CTAs follow Theme Options if the brand colour
   changes. Fallbacks are the current live values:
     accent #13cc96 · hover #119fd3 · text #fff · radius 3px · weight 800
   ====================================================================== */

/* Declared on the body, not on .osb-loc: the hero and the events grid are
   siblings, so a token defined on the hero would not reach the cards. */
.osb-em-location {
    --osb-loc-accent: var(--the7-btn-bg-color, #13cc96);
    --osb-loc-accent-hover: var(--the7-btn-hover-bg-color, #119fd3);
    --osb-loc-on-accent: var(--the7-btn-color, #fff);
    --osb-loc-radius: 14px;
    --osb-loc-btn-radius: var(--the7-btn-m-border-radius, 3px);
    --osb-loc-ink: #16202a;
    --osb-loc-muted: #5b6b7a;
    --osb-loc-line: #e3e8ee;
    --osb-loc-surface: #fff;
    --osb-loc-surface-alt: #f6f8fa;
}

.osb-em-location .osb-loc {
    box-sizing: border-box;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    color: var(--osb-loc-ink);
}

.osb-em-location .osb-loc *,
.osb-em-location .osb-loc *::before,
.osb-em-location .osb-loc *::after {
    box-sizing: border-box;
}


/* -------------------------------------------------------------------------
   Breadcrumb — the page had no route context of any kind, so a visitor
   arriving from a search result had no way back to the events listing.
   ---------------------------------------------------------------------- */
.osb-em-location .osb-loc__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--osb-loc-muted);
}

.osb-em-location .osb-loc__crumbs a {
    color: var(--osb-loc-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.osb-em-location .osb-loc__crumbs a:hover,
.osb-em-location .osb-loc__crumbs a:focus-visible {
    color: var(--osb-loc-accent);
    border-bottom-color: currentColor;
}

.osb-em-location .osb-loc__crumbs-sep {
    opacity: .5;
}

.osb-em-location .osb-loc__crumbs [aria-current="page"] {
    color: var(--osb-loc-ink);
    font-weight: 600;
}


/* -------------------------------------------------------------------------
   Hero — venue name (the page's only <h1>), address, and the two actions.
   Two columns once there is room for the map card beside the copy; the map
   is only printed when EM has geocoded coordinates, so the single-column
   case is the normal one and must not look like something is missing.
   ---------------------------------------------------------------------- */
.osb-em-location .osb-loc__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    padding: 0 0 32px;
    border-bottom: 1px solid var(--osb-loc-line);
}

.osb-em-location .osb-loc__hero--map {
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .osb-em-location .osb-loc__hero--map {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        gap: 40px;
    }
}

.osb-em-location .osb-loc__eyebrow {
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--osb-loc-accent);
}

.osb-em-location .osb-loc__title {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--osb-loc-ink);
}

.osb-em-location .osb-loc__address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--osb-loc-muted);
}

.osb-em-location .osb-loc__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    color: var(--osb-loc-accent);
}


/* -------------------------------------------------------------------------
   Actions — "Get directions" is primary because it is the one thing a venue
   page is actually for; the jump link is secondary and is omitted entirely
   when the venue has no upcoming events (nothing to jump to).
   ---------------------------------------------------------------------- */
.osb-em-location .osb-loc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0;
}

.osb-em-location .osb-loc__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: var(--osb-loc-btn-radius);
    font-size: var(--the7-btn-m-font-size, 16px);
    font-weight: var(--the7-btn-m-font-weight, 800);
    line-height: 1.2;
    text-decoration: none;
    text-transform: var(--the7-btn-m-text-transform, none);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.osb-em-location .osb-loc__btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.osb-em-location .osb-loc__btn--primary {
    background: var(--osb-loc-accent);
    border-color: var(--osb-loc-accent);
    color: var(--osb-loc-on-accent);
}

.osb-em-location .osb-loc__btn--primary:hover,
.osb-em-location .osb-loc__btn--primary:focus-visible {
    background: var(--osb-loc-accent-hover);
    border-color: var(--osb-loc-accent-hover);
    color: var(--the7-btn-hover-color, #fff);
}

.osb-em-location .osb-loc__btn--ghost {
    background: transparent;
    border-color: var(--osb-loc-accent);
    color: var(--osb-loc-accent);
}

.osb-em-location .osb-loc__btn--ghost:hover,
.osb-em-location .osb-loc__btn--ghost:focus-visible {
    background: var(--osb-loc-accent);
    color: var(--osb-loc-on-accent);
}

.osb-em-location .osb-loc__btn:focus-visible {
    outline: 2px solid var(--osb-loc-accent);
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   Map card. Printed only when the location has coordinates — the embed is
   key-free OpenStreetMap, since the site has no Google Maps API key wired up
   (which is why EM's own map section renders empty).
   ---------------------------------------------------------------------- */
.osb-em-location .osb-loc__map {
    margin: 0;
    border: 1px solid var(--osb-loc-line);
    border-radius: var(--osb-loc-radius);
    overflow: hidden;
    background: var(--osb-loc-surface-alt);
}

.osb-em-location .osb-loc__map iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 240px;
    border: 0;
}

/* Stacked under the copy on narrow screens, a 4:3 map eats most of a phone
   screen before the events are reachable — shorter there. */
@media (max-width: 899px) {
    .osb-em-location .osb-loc__map iframe {
        aspect-ratio: 16 / 10;
    }
}

.osb-em-location .osb-loc__map-caption {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--osb-loc-line);
    background: var(--osb-loc-surface);
    font-size: 13px;
}

.osb-em-location .osb-loc__map-caption a {
    color: var(--osb-loc-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.osb-em-location .osb-loc__map-caption a:hover,
.osb-em-location .osb-loc__map-caption a:focus-visible {
    color: var(--osb-loc-accent);
    border-bottom-color: currentColor;
}


/* -------------------------------------------------------------------------
   Upcoming events — replaces EM's bare <ul> of
   "<a>Title</a> - October 1, 2026 - 8:30 am - 7:00 pm".
   ---------------------------------------------------------------------- */
.osb-em-location .osb-loc-events {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 16px 8px;
}

.osb-em-location .osb-loc-events__heading {
    margin: 0 0 24px;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--osb-loc-ink, #16202a);
}

.osb-em-location .osb-loc-events__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.osb-em-location .osb-loc-events__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.osb-em-location .osb-loc-events__list > li::before,
.osb-em-location .osb-loc-events__list > li::marker {
    content: none;
}

.osb-em-location .osb-loc-event {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--osb-loc-line, #e3e8ee);
    border-radius: var(--osb-loc-radius, 14px);
    background: var(--osb-loc-surface, #fff);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.osb-em-location .osb-loc-event:hover,
.osb-em-location .osb-loc-event:focus-within {
    border-color: var(--osb-loc-accent, #13cc96);
    box-shadow: 0 8px 24px rgba(22, 32, 42, .08);
    transform: translateY(-2px);
}

/* Date badge — the date was previously loose text in the middle of a
   sentence; as a block it becomes the card's scanning anchor. */
.osb-em-location .osb-loc-event__date {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 78px;
    padding: 12px 8px;
    border-radius: 10px;
    /* Flat tint first so the badge is never transparent if color-mix() is
       unsupported; the mix then re-tints it from the live brand colour. */
    background: #f0f7f5;
    background: color-mix(in srgb, var(--osb-loc-accent, #13cc96) 12%, #fff);
    color: var(--osb-loc-ink, #16202a);
    text-align: center;
    line-height: 1.1;
}

.osb-em-location .osb-loc-event__month {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--osb-loc-accent, #13cc96);
}

.osb-em-location .osb-loc-event__day {
    font-size: 28px;
    font-weight: 800;
    margin: 2px 0;
}

.osb-em-location .osb-loc-event__year {
    font-size: 12px;
    font-weight: 600;
    color: var(--osb-loc-muted, #5b6b7a);
}

.osb-em-location .osb-loc-event__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.osb-em-location .osb-loc-event__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.osb-em-location .osb-loc-event__title a {
    color: var(--osb-loc-ink, #16202a);
    text-decoration: none;
    transition: color .2s ease;
}

.osb-em-location .osb-loc-event:hover .osb-loc-event__title a,
.osb-em-location .osb-loc-event__title a:focus-visible {
    color: var(--osb-loc-accent, #13cc96);
}

/* Stretched link: the whole card is clickable, but there is still exactly
   one link in the accessibility tree per event. */
.osb-em-location .osb-loc-event__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.osb-em-location .osb-loc-event__title a:focus-visible {
    outline: 2px solid var(--osb-loc-accent, #13cc96);
    outline-offset: 3px;
}

.osb-em-location .osb-loc-event__when {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--osb-loc-muted, #5b6b7a);
}

.osb-em-location .osb-loc-event__excerpt {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--osb-loc-muted, #5b6b7a);
}

.osb-em-location .osb-loc-event__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--osb-loc-accent, #13cc96);
}

.osb-em-location .osb-loc-event__cta svg {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.osb-em-location .osb-loc-event:hover .osb-loc-event__cta svg {
    transform: translateX(3px);
}

@media (max-width: 599px) {
    .osb-em-location .osb-loc-event {
        flex-direction: column;
        gap: 14px;
    }

    .osb-em-location .osb-loc-event__date {
        flex-direction: row;
        gap: 8px;
        width: auto;
        align-self: flex-start;
        padding: 8px 14px;
    }

    .osb-em-location .osb-loc-event__day {
        margin: 0;
        font-size: 20px;
    }

    .osb-em-location .osb-loc-event__month,
    .osb-em-location .osb-loc-event__year {
        font-size: 13px;
        line-height: 1.6;
    }
}


/* Empty state — a venue with nothing scheduled previously rendered an
   "Upcoming Events" heading above an empty list. */
.osb-em-location .osb-loc-events__empty {
    margin: 0;
    padding: 28px 24px;
    border: 1px dashed var(--osb-loc-line, #e3e8ee);
    border-radius: var(--osb-loc-radius, 14px);
    background: var(--osb-loc-surface-alt, #f6f8fa);
    font-size: 16px;
    line-height: 1.6;
    color: var(--osb-loc-muted, #5b6b7a);
    text-align: center;
}

.osb-em-location .osb-loc-events__empty a {
    color: var(--osb-loc-accent, #13cc96);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}

.osb-em-location .osb-loc-events__empty a:hover,
.osb-em-location .osb-loc-events__empty a:focus-visible {
    border-bottom-color: currentColor;
}


/* -------------------------------------------------------------------------
   EM's own blocks.

   `osb-em-location-enhanced` is only added once the PHP side has actually
   resolved the location and printed its replacements (see
   osb_em_location_data()) — so if EM's API is ever unavailable, none of
   these hides apply and EM's original output stays fully visible rather
   than the page going blank.
   ---------------------------------------------------------------------- */

/* Header meta: address is now in the hero, and "Next Event" duplicated the
   first row of the upcoming-events list verbatim. */
.osb-em-location-enhanced .em-location-single > .em-item-header {
    display: none;
}

/* The bare <ul> list, replaced by the card grid above. Matched on `section.`
   because `em-location-events` is ALSO the class on the header's next-event
   meta line — a bare class match would be ambiguous. */
.osb-em-location-enhanced .em-location-single section.em-location-events {
    display: none;
}

/* Maps are not configured on this site and the location description is
   optional, so EM emits these two as whitespace-only sections that still
   take vertical space. :has() collapses them only when they really are
   empty, so a description added later still renders. */
.osb-em-location .em-location-section-map:not(:has(*)),
.osb-em-location .em-location-content:not(:has(*)) {
    display: none;
}

/* Belt and braces for browsers without :has() — no visible box either way. */
.osb-em-location .em-location-section-map,
.osb-em-location .em-location-content {
    margin: 0;
    padding: 0;
    border: 0;
}

/* When a description IS present it becomes the body copy between the hero
   and the events grid, so it needs real measure and rhythm. */
.osb-em-location .em-location-content:has(*) {
    max-width: 760px;
    margin: 36px auto 0;
    padding: 0 16px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--osb-loc-ink, #16202a);
}

.osb-em-location .em-location-content:has(*) > *:first-child {
    margin-top: 0;
}


@media (prefers-reduced-motion: reduce) {
    .osb-em-location .osb-loc-event,
    .osb-em-location .osb-loc-event__cta svg,
    .osb-em-location .osb-loc__btn {
        transition: none;
    }

    .osb-em-location .osb-loc-event:hover {
        transform: none;
    }

    .osb-em-location .osb-loc-event:hover .osb-loc-event__cta svg {
        transform: none;
    }
}