/* ==========================================================================
   volunteer-near.css — the live "what's happening near you" block on /volunteer/.
   Mobile-first. Inherits the site tokens from style.css (:root + [data-theme]),
   so it follows the warm light theme and the dark one without a second palette.
   ========================================================================== */

.vn-live {
    --vn-ember: #e0662f;
    --vn-radius: 14px;
    background: var(--bg-primary);
    padding: 22px 0 8px;
}

/* --- hero eyebrow --------------------------------------------------------- */
.vn-eyebrow {
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 10px;
}
.seo-hero.city-hero .vn-eyebrow { color: rgba(255, 255, 255, .88); }

/* --- location control ----------------------------------------------------- */
.vn-geo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 0 0 12px;
}
.vn-geo__btn {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.vn-geo__btn:hover,
.vn-geo__btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}
.vn-geo__status {
    font-size: 16px;
    color: var(--text-muted);
    flex: 1 1 200px;
    min-width: 0;
}
.vn-geo__status.is-precise { color: var(--accent); }

/* --- pulse line ----------------------------------------------------------- */
/* One quiet row of live numbers that doubles as a table of contents. No box,
   no border, no card: it must never push the opportunity cards down the page. */
.vn-pulse {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}
.vn-pulse__stat {
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
}
a.vn-pulse__stat:hover,
a.vn-pulse__stat:focus-visible {
    color: var(--text-primary);
    border-bottom-color: var(--border);
}
.vn-pulse__stat b {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
}
.vn-pulse__stat--live b { color: var(--accent); }
.vn-pulse__stat--past { color: var(--text-muted); }
.vn-pulse__stat--past b { color: var(--text-secondary); }
.vn-pulse__sep { color: var(--text-muted); opacity: .6; }
.vn-pulse__where {
    color: var(--text-muted);
    white-space: nowrap;
}
.vn-pulse__where::before { content: "\2014\00a0"; opacity: .6; }

.vn-pulse__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: baseline;
    animation: vn-pulse-dot 2s ease-in-out infinite;
}
@keyframes vn-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-dim); opacity: 1; }
    50%      { box-shadow: 0 0 0 5px transparent; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    .vn-pulse__dot { animation: none; }
}

/* --- fall-through / empty notices ----------------------------------------- */
.vn-notice {
    font-size: 17px;
    color: var(--text-secondary);
    background: var(--accent-dim);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 18px;
}

/* --- section headings ----------------------------------------------------- */
.vn-block { margin: 0 0 26px; scroll-margin-top: 72px; }
.vn-block__title {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 3.4vw, 1.4rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.vn-block__sub {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0 0 14px;
}

/* --- card grid ------------------------------------------------------------ */
.vn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 560px) {
    .vn-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
}

/* Both shapes are an <article> with the opportunity link stretched over it: each of a
   grouped opportunity's other dates is its own real link, and a link inside a link is
   not valid HTML. The click target is unchanged. */
.vn-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--vn-radius);
    overflow: hidden;
    min-width: 0;
    transition: border-color .15s, transform .15s;
}
.vn-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
/* focus-within, not focus-visible: the focusable element is the link inside the card. */
.vn-card:focus-within { border-color: var(--accent); }

.vn-card__link { color: inherit; text-decoration: none; }
.vn-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
@media (min-width: 560px) {
    .vn-card { display: block; }
}

/* media */
.vn-card__media {
    position: relative;
    flex: 0 0 104px;
    width: 104px;
    background: var(--bg-primary);
    overflow: hidden;
}
@media (min-width: 560px) {
    .vn-card__media { width: 100%; flex: none; aspect-ratio: 3 / 2; }
}
.vn-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Neutral slate backdrop, not white. We do not control these logos: some are
   dark-on-transparent, some are white-on-transparent, and a white panel makes
   the second kind vanish. A mid slate clears ~4.4:1 against black lettering and
   ~4.8:1 against white, so either reads. Same value as .event-hero--logo in the
   app. Deliberately NOT a theme token — it must not follow light/dark. */
.vn-card__img--logo {
    object-fit: contain;
    padding: 12px;
    background: #6b737d;
}
.vn-card__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 104px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(150deg, var(--vn-tile, #0ea371) 0%, rgba(0, 0, 0, .35) 140%);
}
.vn-card__pulse {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
    animation: vn-pulse-dot 2s ease-in-out infinite;
}

/* body */
.vn-card__body {
    padding: 10px 12px 12px 0;
    min-width: 0;
    flex: 1 1 auto;
}
@media (min-width: 560px) {
    .vn-card__body { padding: 12px 14px 14px; }
}
.vn-card__when {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 4px;
}
.vn-card__when--now  { color: var(--accent); }
.vn-card__when--soon { color: var(--vn-ember); }
.vn-card__title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--text-primary);
    margin: 0 0 3px;
    /* two lines max, then ellipsis — long aggregated names must not blow the card up */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* The opportunity's own title, under the organization headline. Only rendered when it
   says something the organization's name does not. */
.vn-card__task {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vn-card__where {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    min-width: 0;
}
.vn-card__dist {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-secondary);
}
/* Type label. Reads straight from resource_category, so it says whatever the vertical
   is called — no hardcoded list, no pantry assumption. */
.vn-card__type {
    color: var(--text-secondary);
    white-space: nowrap;
}
.vn-card__type::after {
    content: "\00b7";
    margin-left: 8px;
    opacity: .55;
}
.vn-card__place { min-width: 0; overflow-wrap: anywhere; }

/* --- the other dates of a grouped opportunity ------------------------------
   One card per opportunity, its dates alongside: a human picks the organization
   first, then a date. Each chip links to THAT date's own event. ------------- */
.vn-card__dates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    min-width: 0;
}
.vn-card__date {
    /* above the stretched card link, so a chip goes to its own date */
    position: relative;
    z-index: 2;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 9px;
}
a.vn-card__date:hover,
a.vn-card__date:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}
.vn-card__date--more {
    color: var(--text-muted);
    font-weight: 500;
    background: transparent;
    border-color: transparent;
    padding-left: 2px;
}

/* live cards get a whisper of emphasis, not a klaxon */
.vn-card--live { border-color: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-dim); }

/* --- the rich card, for organizations we actually know ---------------------
   Mirrors the .org-card treatment on /nonprofit/ (banner, logo, name, snippet,
   location, activity count). It is not louder than the lean cards — it is fuller.
   That contrast is the point: we have this org's own words and picture, and we
   have nothing but a listing for the ones beside it. ------------------------ */
.vn-card--promo {
    position: relative;
    display: block;
    background: var(--bg-secondary);
}
.vn-card--promo .vn-card__media {
    width: 100%;
    flex: none;
    aspect-ratio: 16 / 9;
}
.vn-card--promo .vn-card__body { padding: 12px 14px 14px; }

/* org logo, resting on the banner the way a masthead sits */
.vn-promo__logo {
    position: absolute;
    left: 10px;
    bottom: 10px;
    /* Wordmark logos are wide and short; a rigid square squashes them to a sliver. */
    width: auto;
    min-width: 42px;
    max-width: 55%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* see .vn-card__img--logo: neutral so white- and black-lettered logos both read */
    background: #6b737d;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
    overflow: hidden;
}
.vn-promo__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px 6px;
}
.vn-card--promo:hover { border-color: var(--accent); }

.vn-card__task--promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    white-space: normal;
    overflow: visible;
}
.vn-card__taskname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Earned, not loud: a quiet outline chip, no colour shouting, no urgency. */
.vn-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 8px 3px 6px;
    white-space: nowrap;
    cursor: help;
}
.vn-promo__badge svg { width: 13px; height: 13px; color: var(--accent); }

.vn-promo__desc {
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.vn-promo__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 15px;
}
.vn-promo__count { color: var(--accent); font-weight: 600; }
/* A normal internal link to the org's bio. It sits above the stretched card link. */
.vn-promo__more {
    position: relative;
    z-index: 2;
    margin-left: auto;
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.vn-promo__more:hover,
.vn-promo__more:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* --- show more / infinite scroll ------------------------------------------ */
.vn-more { text-align: center; margin: 4px 0 24px; }
.vn-more__btn {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 11px 22px;
    cursor: pointer;
}
.vn-more__btn:hover { border-color: var(--accent); color: var(--accent); }
.vn-more__btn[disabled] { opacity: .55; cursor: default; }
#vn-sentinel { height: 1px; }

/* --- directory heading below --------------------------------------------- */
.vn-dirhead {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 3.4vw, 1.4rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.vn-dirsub {
    font-size: 16px;
    color: var(--text-muted);
    margin: 0 0 16px;
}