/**
 * @file: home-streams.css
 * @description: Карточная лента «Последние стримы» на главной.
 * @dependencies: variables.css, design-system.css
 * @created: 2026-09-04
 */

@layer components {
  .home-streams-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  @media (min-width: 768px) {
    .home-streams-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .home-stream-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    border-color: var(--border-color, var(--bs-border-color));
    background-color: var(--surface-1, var(--bs-body-bg));
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--home-stream-accent, var(--info));
  }

  .home-stream-card--twitch {
    --home-stream-accent: #9146ff;
  }

  .home-stream-card--youtube {
    --home-stream-accent: #ff0000;
  }

  .home-stream-card--vk,
  .home-stream-card--vkplay {
    --home-stream-accent: #0077ff;
  }

  .home-stream-card--rutube {
    --home-stream-accent: #ff6b00;
  }

  .home-stream-card--kick {
    --home-stream-accent: #53fc18;
  }

  .home-stream-card--trovo {
    --home-stream-accent: #1d976c;
  }

  .home-stream-card--goodgame {
    --home-stream-accent: #8a8a8a;
  }

  .home-stream-card--boosty {
    --home-stream-accent: #f15f2c;
  }

  .home-stream-card--other {
    --home-stream-accent: var(--info);
  }

  .home-stream-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
  }

  .home-stream-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
  }

  .home-stream-card__platform {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary, var(--bs-body-color));
    background: var(--surface-2, var(--bs-secondary-bg));
    border: 1px solid var(--border-color, var(--bs-border-color));
  }

  .home-stream-card__platform-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--home-stream-accent, var(--info));
  }

  .home-stream-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
  }

  .home-stream-card__subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted, var(--bs-secondary-color));
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
  }

  .home-stream-card__meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted, var(--bs-secondary-color));
    line-height: 1.4;
  }

  .home-stream-card__meta-sep {
    margin: 0 0.25rem;
    opacity: 0.7;
  }

  .home-stream-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.35rem;
  }

  .home-stream-card__watch {
    flex: 0 0 auto;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .home-stream-card__delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted, var(--bs-secondary-color));
    border-radius: var(--radius-sm, 0.25rem);
    line-height: 1;
  }

  .home-stream-card__delete:hover,
  .home-stream-card__delete:focus-visible {
    color: var(--danger, var(--bs-danger));
    background: color-mix(in srgb, var(--danger, #dc3545) 12%, transparent);
  }

  .streams-pagination .pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .streams-pagination .page-link {
    min-width: 2.25rem;
    text-align: center;
  }

  @media (max-width: 575.98px) {
    .streams-pagination .page-link {
      padding: 0.35rem 0.55rem;
      font-size: 0.85rem;
    }

    .streams-pagination .page-link-label {
      display: none;
    }
  }
}