/* =========================================================
   ShaibaPRO: global hockey club card

   Один компонент используется на:
   - главной странице;
   - /teams/;
   - /teams/{league}/;
   - /leagues/{league}/;
   - страницах турниров.

   Сетки и количество карточек остаются ответственностью
   конкретной страницы. Внешний вид карточки меняется здесь.
   ========================================================= */

.sp-team-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 86px;
    padding: 11px;
    overflow: hidden;
    border: 1px solid var(--sp-card-border);
    border-radius: var(--sp-radius-md);
    background: var(--sp-gradient-team-card);
    color: var(--sp-text);
    text-decoration: none;
    box-shadow: var(--sp-shadow-soft);
    transition:
        transform var(--sp-transition-fast),
        border-color var(--sp-transition-fast),
        background var(--sp-transition-fast);
}

.sp-team-card:hover,
.sp-team-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--sp-card-border-hover);
    background: var(--sp-gradient-team-card-hover);
}

.sp-team-card:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
}

.sp-team-card--static {
    cursor: default;
}

.sp-team-card--static:hover,
.sp-team-card--static:focus-visible {
    transform: none;
}

.sp-team-card__logo-wrap {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--sp-card-border);
    border-radius: var(--sp-radius-cookie);
    background: var(--sp-white-055);
}

.sp-team-card__logo {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.sp-team-card__logo.sp-team-card__logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sp-radius-card-small);
    background: var(--sp-gradient-accent);
    color: var(--sp-accent-contrast);
    font-size: var(--sp-fs-sm);
    font-weight: var(--sp-fw-black);
}

.sp-team-card__body {
    display: block;
    min-width: 0;
}

.sp-team-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--sp-text);
    font-size: var(--sp-fs-md);
    font-weight: var(--sp-fw-medium);
    line-height: 1.1;
    letter-spacing: -.035em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sp-team-card__meta,
.sp-team-card__arena {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-team-card__meta {
    margin-top: 5px;
    color: var(--sp-muted);
    font-size: var(--sp-fs-xs);
    font-weight: var(--sp-fw-medium);
    line-height: 1.15;
}

.sp-team-card__arena {
    margin-top: 3px;
    color: var(--sp-muted-2);
    font-size: var(--sp-fs-xxs, 11px);
    line-height: 1.15;
}

.sp-team-card__arrow {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sp-card-border);
    border-radius: var(--sp-radius-pill);
    background: var(--sp-white-04);
    color: var(--sp-accent);
    font-size: var(--sp-fs-xs);
    font-weight: var(--sp-fw-black);
    transition:
        transform var(--sp-transition-fast),
        border-color var(--sp-transition-fast),
        background var(--sp-transition-fast);
}

.sp-team-card:hover .sp-team-card__arrow,
.sp-team-card:focus-visible .sp-team-card__arrow {
    transform: translateX(2px);
    border-color: var(--sp-card-border-hover);
    background: var(--sp-accent-alpha-08);
}

/*
 * Мобильные устройства.
 * По запросу карточка сразу получает тот же цвет внешней
 * границы, который на desktop появляется при hover.
 * Меняется только border-color, не фон карточки.
 */
@media (max-width: 767px) {
    .sp-team-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 11px;
        min-height: var(--sp-team-card-mobile-min-height);
        padding: 14px;
        border-color: var(--sp-card-border-hover);
        border-radius: var(--sp-radius-mobile);
    }

    .sp-team-card__logo-wrap {
        width: 52px;
        height: 52px;
        border-radius: var(--sp-radius-map-popup);
    }

    .sp-team-card__logo {
        width: 42px;
        height: 42px;
    }

    .sp-team-card__title {
        font-size: var(--sp-fs-team-card-title);
    }

    .sp-team-card__arrow {
        display: none;
    }
}

/* На touch-устройствах не оставляем hover-сдвиг после tap. */
@media (hover: none), (pointer: coarse) {
    .sp-team-card:hover,
    .sp-team-card:focus-visible {
        transform: none;
    }

    .sp-team-card:hover .sp-team-card__arrow,
    .sp-team-card:focus-visible .sp-team-card__arrow {
        transform: none;
    }
}