/*
 * Item Stats — public badge.
 *
 * Two rectangular counters joined into a single segmented strip (views then
 * downloads), pinned to the top right of the item page's content column so their
 * right edge lines up with the content — i.e. with the right edge of a
 * full-width media viewer.
 *
 * Colours default to the Granthappura brand orange but are taken from the
 * theme's Bootstrap primary when one is defined, so the badge adopts the host
 * theme automatically. Override any of the custom properties to restyle.
 */

.item-stats {
    /* Brand palette. --bs-primary wins when the theme provides it. */
    --item-stats-brand: var(--bs-primary, #d65600);
    --item-stats-brand-rgb: var(--bs-primary-rgb, 214, 86, 0);
    --item-stats-surface: #fff;
    --item-stats-text: var(--bs-primary-text-emphasis, #562200);
    /* Rectangular. Set to e.g. 999px for pills, or .25rem to soften the corners. */
    --item-stats-radius: 0;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* No gap: the two segments butt together as one strip. */
    gap: 0;

    /* Fallback for browsers without :has(): sit at the right of the flow. */
    float: right;
    margin: 0 0 1rem 1rem;

    font-size: .8125rem;
    line-height: 1;
}

/*
 * Lift the badge above the page title.
 *
 * Omeka renders the title before the view.show.before hook, so the badge starts
 * out after it in the DOM. Turning the badge's parent into a column flexbox lets
 * `order: -1` move it to the top without absolute positioning — which would
 * otherwise overlap long titles — and without any theme-specific selector.
 */
@supports selector(:has(*)) {
    *:has(> .item-stats) {
        display: flex;
        flex-direction: column;
    }

    .item-stats {
        float: none;
        order: -1;
        align-self: flex-end;
        margin: 0 0 .75rem 1rem;
    }
}

.item-stats-stat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(var(--item-stats-brand-rgb), .35);
    border-radius: var(--item-stats-radius);
    background: var(--item-stats-surface);
    color: var(--item-stats-text);
    white-space: nowrap;
}

/* Collapse the shared edge so the two segments read as one control rather
   than two boxes that happen to touch. */
.item-stats-stat + .item-stats-stat {
    margin-left: -1px;
}

/* Views carries the emphasis; downloads is the quieter sibling. */
.item-stats-views {
    background: var(--item-stats-brand);
    border-color: var(--item-stats-brand);
    color: #fff;
}

.item-stats-downloads {
    background: rgba(var(--item-stats-brand-rgb), .08);
}

.item-stats-icon {
    flex: 0 0 auto;
    color: currentColor;
    opacity: .95;
}

.item-stats-downloads .item-stats-icon {
    color: var(--item-stats-brand);
}

.item-stats-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.item-stats-label {
    font-weight: 500;
    opacity: .9;
}

/* Narrow screens: stay right-aligned exactly as on desktop, just a little
   tighter so the strip still fits a ~320px viewport. */
@media (max-width: 575.98px) {
    .item-stats {
        align-self: flex-end;
        justify-content: flex-end;
        max-width: 100%;
        margin-left: 0;
        font-size: .75rem;
    }

    .item-stats-stat {
        padding: .35rem .6rem;
        gap: .35rem;
    }
}

@media print {
    .item-stats {
        display: none;
    }
}