/*
|--------------------------------------------------------------------------
| Segment Card (includes/partials/card-segment.php, 'grid' variant)
|--------------------------------------------------------------------------
|
| Was previously physically defined inside templates/award.php's own
| <style> block, scoped `.yo-award .yo-segment-card...`, even though it
| styles card-segment.php — a shared partial, not award.php-specific
| markup. Moved here (its actual owner) and re-scoped to the bare
| `.yo-segment-card*` class names, dropping the `.yo-award` ancestor
| requirement — the 'grid' variant these rules style is only ever
| rendered from award.php today (via segment-cards.php), so this is a
| no-op for current behavior, but it means the styling now travels with
| the component instead of being tied to one specific page.
|
| Loaded on both award.php and segment.php (see $pageStylesMap in
| includes/layouts/header.php) since either page can render this
| partial's 'grid' variant.
|--------------------------------------------------------------------------
*/

.yo-segment-card {
    border-color: var(--yo-border-subtle) !important;
    transition: box-shadow .2s, border-color .2s;
}

.yo-segment-card:hover {
    border-color: var(--yo-gold) !important;
    box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .2);
}

.yo-segment-card-media {
    width: 110px;
}

.yo-segment-card-body {
    padding: .75rem 2rem .625rem .875rem;
}

.yo-segment-card-overview {
    font-size: .78rem;
    line-height: 1.4;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--yo-border-subtle);
}

.yo-segment-card-stats i {
    color: var(--yo-gold);
}

.yo-segment-card-arrow {
    position: absolute;
    right: .625rem;
    bottom: .5rem;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--yo-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .2s;
}

.yo-segment-card-arrow:hover {
    background: transparent;
    color: var(--yo-gold);
}