/* =============================================================================
   OSTEO — THE EVENT PREVIEW CARD

   The card that opens above a pin when somebody clicks an event on a map, plus
   the three primitives it is built from (.pe-btn, .pe-badge, .pe-sr).

   WHY IT IS ITS OWN FILE
   The card is one Razor partial — Views/Home/_PublicEventPreview.cshtml — used by
   the public Find Events page AND by every map inside the signed-in application
   (Event/MapPreview renders the same partial for a viewer who is allowed to see
   the event). Those two sit on different layouts, _PublicLayout and _Layout2, so
   the styles had to leave public-home.css or the card would have arrived
   unstyled on one of them. Copying them into a second stylesheet would have been
   the same card defined twice.

   Both layouts load this file. public-home.css keeps everything that is genuinely
   the public page.

   Tokens are --oa-* (css/osteo-brand.css), which both layouts already load.
   ============================================================================= */

/* ---- buttons ---------------------------------------------------------- */

.pe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pe-btn--primary { background: var(--oa-green); color: var(--brand-on-primary, #fff); box-shadow: 0 8px 20px rgba(11, 178, 123, .24); }
.pe-btn--primary:hover { background: var(--oa-green-dark); color: var(--brand-on-primary, #fff); }
.pe-btn--ghost { background: var(--oa-white); border-color: var(--oa-border); color: var(--oa-ink); }
.pe-btn--ghost:hover { border-color: var(--oa-mint-300); background: var(--oa-mint-50); color: var(--oa-green-ink); }
.pe-btn--sm { min-height: 38px; padding: 0 14px; font-size: 13px; }
.pe-btn:focus-visible { outline: 2px solid var(--oa-green); outline-offset: 2px; }
.pe-btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ---- badges ----------------------------------------------------------- */

/* Badges and chips. The word is always present — colour is the second signal,
   never the only one. */
.pe-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pe-badge--public { background: var(--oa-mint-100); color: var(--oa-green-ink); }
.pe-badge--private { background: var(--state-info-soft, #eaf1fd); color: var(--state-info, #2f6fd6); }
.pe-badge--distance { background: var(--bg-surface-hover, #f2f5fc); color: var(--oa-ink-soft); }

/* ---- the card --------------------------------------------------------- */

/* The overlay's positioned wrapper. `left`/`top` are set by draw() to the pin's
   pixel position; the transform lifts the card clear of the 44px marker and
   centres it, so the tail lands on the point of the pin. */
.pe-pop {
    position: absolute;
    transform: translate(-50%, calc(-100% - 50px));
    z-index: 30;
}

.pe-preview {
    position: relative;
    width: 292px;
    padding: 17px 18px 18px;
    border-radius: 18px;
    background: var(--oa-white);
    border: 1px solid var(--oa-border);
    box-shadow: 0 16px 38px rgba(17, 36, 90, .18), 0 2px 6px rgba(17, 36, 90, .06);
    font-family: var(--oa-font);
    color: var(--oa-ink);
    animation: pe-pop-in .14s ease-out;
}

@keyframes pe-pop-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pe-preview { animation: none; }
}

/* The tail. Two triangles — the outer one carries the border colour, the inner one
   covers it with the card's own white — so the point has a hairline edge exactly
   like the rest of the card. */
.pe-preview::before,
.pe-preview::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.pe-preview::before {
    bottom: -9px;
    margin-left: -9px;
    border-top: 9px solid var(--oa-border);
}

.pe-preview::after {
    bottom: -7.5px;
    margin-left: -9px;
    border-top: 9px solid var(--oa-white);
}

.pe-preview__close {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--oa-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.pe-preview__close:hover { background: var(--oa-mint-50); color: var(--oa-ink); }
.pe-preview__close:focus-visible { outline: 2px solid var(--oa-green); outline-offset: 1px; }

/* Room for the close button, so a long badge never runs under it. */
.pe-preview__head {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding-right: 28px;
    margin-bottom: 11px;
}

/* Small enough that the visibility badge and the distance badge sit on one line at
   276px. Stacked, they took two rows and made a compact card look like a form. */
.pe-preview__head .pe-badge { padding: 3px 8px; font-size: 10.5px; gap: 5px; }
.pe-preview__head .pe-badge i { font-size: 9.5px; }

.pe-preview__title {
    margin: 0 0 13px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--oa-ink-900);
}

/* A definition list, not a stack of spans: each row is an icon and its value, and
   the icon column is fixed so the values line up. */
.pe-preview__meta { margin: 0 0 16px; display: grid; gap: 8px; }
.pe-preview__meta > div { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: baseline; }
.pe-preview__meta dt { margin: 0; color: var(--oa-muted-2); font-size: 12px; text-align: center; }
.pe-preview__meta dd { margin: 0; font-size: 12.5px; color: var(--oa-ink-soft); line-height: 1.45; }
.pe-preview__dot { color: var(--oa-border-strong); margin: 0 3px; }
.pe-preview__spots { color: var(--oa-green-ink); font-weight: 700; }
.pe-preview__full { color: var(--oa-muted); font-weight: 700; }

/* Equal halves, and the buttons reach the card's edges — the old bubble's did not,
   because InfoWindow's padding was outside our control. */
.pe-preview__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pe-preview__actions > * { width: 100%; min-height: 38px; padding: 0 10px; font-size: 13px; }
/* The primary button's 20px green glow is sized for the page, where it lifts the button
   off a wide surface. Fifteen pixels from the card's own edge it just tints the white
   around it, and next to the flat ghost button it reads as a rendering artefact. */
.pe-preview__actions .pe-btn--primary { box-shadow: none; }

/* ---- visually-hidden label -------------------------------------------- */

.pe-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}