/* Marketplace listing card, design „Marketplace karty“ v3 (8. 10. 2026) with
   the v4 meta grey. Markup: parts/archive/card-marketplace.php. */

/* BTB draws the ellipsis (U+2026) as a single dot, so a clamped title ended in
   "World ." This face lends only that character from a system font. */
@font-face {
    font-family: 'VB Ellipsis';
    src: local('Helvetica Neue'), local('HelveticaNeue'), local('Arial'), local('ArialMT'),
        local('Segoe UI'), local('Roboto'), local('Noto Sans'), local('DejaVu Sans'), local('Liberation Sans');
    unicode-range: U+2026;
}

.vb-mc {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    overflow: hidden;
    border-radius: 1.2rem;
    background: #ececef;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    color: #141414;
    font-family: 'VB Ellipsis', 'BTB', -apple-system, 'Segoe UI', sans-serif;
    text-decoration: none;
}

/* A single photo behind the whole card, so the frame and the window show one
   continuous picture and the shared hover zoom (.vb-zoom) moves both. */
.vb-mc__image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No fill of its own: the white is the window's shadow, cut to the card's corners. */
.vb-mc__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1rem 1.2rem;
    overflow: hidden;
    border-radius: 1rem;
}

.vb-mc__photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: .8rem;
    box-shadow: 0 0 0 100vmax #fff;
}

/* A cross-year range may wrap, but only at the dash (see archive-card-event.php). */
.vb-mc__badge {
    position: absolute;
    top: 0;
    right: 0;
    max-width: calc(100% - 2rem);
    padding: .4rem .4rem .6rem 1rem;
    border-bottom-left-radius: 1rem;
    background: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
}

/* Positioned after the window, so it paints over the window's white shadow. Its own
   white is for contrast checkers, which do not count a box-shadow as a background. */
.vb-mc__text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
    padding: 0 .2rem .2rem;
    background: #fff;
}

/* Two lines reserved even for a short title, so the cards in a row line up.
   The global h3 rule sets BTB-Bold without the ellipsis face, hence the explicit family. A word wider
   than a phone card ("BRAINTEASELAVA" at 320 px) breaks instead of being
   clipped mid-letter. No hyphens: auto, it would split everyday words too. */
.vb-mc__title {
    display: -webkit-box;
    min-height: 2.6em;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.vb-mc__meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    margin: 0;
    color: #535252;
    font-size: 1.4rem;
    line-height: 1.45;
}

.vb-mc__meta svg {
    flex: none;
}

.vb-mc__meta span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Only the outer span: the dates inside it stay nowrap, so it breaks at the dash. */
.vb-mc__meta--wrap > span {
    white-space: normal;
}

/* Forced colours drop box shadows, and the title would end up on the photo. */
@media (forced-colors: active) {
    .vb-mc__photo {
        forced-color-adjust: none;
        box-shadow: 0 0 0 100vmax Canvas;
    }
}

/* Two cards per row on phones: thinner frame and smaller type (design block 2). */
@media (max-width: 639.98px) {
    .vb-mc {
        padding: .6rem;
        border-radius: 1rem;
    }

    .vb-mc__card {
        gap: .8rem;
        padding: .6rem .6rem .8rem;
        border-radius: .8rem;
    }

    .vb-mc__photo {
        border-radius: .6rem;
    }

    .vb-mc__badge {
        padding: .3rem .3rem .4rem .7rem;
        border-bottom-left-radius: .8rem;
        font-size: 1.1rem;
    }

    .vb-mc__title {
        font-size: 1.4rem;
    }

    .vb-mc__meta {
        font-size: 1.2rem;
    }
}