/* Plik: assets/css/channel-ranking.css, Wersja 2.2 - Finalne poprawki UX (klikalność, strzałki) */

/* Kontrolki sortowania */
.channel-ranking-controls { margin-bottom: 2.5rem; border-bottom: 1px solid #e9ecef; padding-bottom: 1.5rem; }
.channel-sorting-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.channel-sorting-nav span { font-weight: 600; color: #495057; margin-right: 0.5rem; }

.channel-sorting-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none !important;
    padding: 6px 14px;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    color: #495057;
    background-color: #f8f9fa;
    transition: all 0.2s ease-in-out;
}
.channel-sorting-nav a:hover { background-color: #e9ecef; border-color: #adb5bd; }
.channel-sorting-nav a.is-active { background-color: var(--ast-global-color-0, #007bff); color: #fff !important; border-color: var(--ast-global-color-0, #007bff); }

.channel-sorting-nav .sort-direction { font-size: 0.9em; line-height: 1; }
/* NOWA REGUŁA: Zmiana koloru strzałki na aktywnej zakładce */
.channel-sorting-nav a.is-active .sort-direction { color: #fff; }

/* Siatka */
.channel-ranking-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.channel-grid-item { display: flex; flex-direction: column; }

/* Karta */
.channel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    color: inherit;
    transition: all 0.2s ease;
}
.channel-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.07); border-color: #ced4da; }

.channel-card__main-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.channel-card__header, .channel-card__body, .channel-card__footer { position: relative; z-index: 1; }

/* --- POPRAWKA KLIKALNOŚCI (Z-INDEX) --- */
.channel-card__youtube-link {
    position: relative;
    z-index: 3; /* Upewnij się, że ten link jest na najwyższej warstwie */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ced4da;
    transition: color 0.2s ease;
}
.channel-card__youtube-link:hover { color: #ff0000; }
.channel-card__youtube-link svg { width: 20px; height: 20px; }

/* Nagłówek karty */
.channel-card__header { padding: 1.5rem 1.5rem 0; display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.channel-card__logo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.channel-card__logo-placeholder { width: 50px; height: 50px; border-radius: 50%; background-color: #f1f3f5; flex-shrink: 0; }
.channel-card__title-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.channel-card__title { font-size: 1.15em; font-weight: 700; margin: 0; color: #212529; }
.channel-card:hover .channel-card__title { color: var(--ast-global-color-0, #007bff); }

/* Treść karty i statystyki */
.channel-card__body { padding: 0 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.channel-card__stats-grid { display: flex; justify-content: space-around; text-align: center; padding: 1rem 0; margin-bottom: 1rem; border-top: 1px solid #f1f3f5; border-bottom: 1px solid #f1f3f5; }
.stat-item { display: flex; flex-direction: column; }
.stat-item__value { font-size: 1.1em; font-weight: 600; line-height: 1.2; color: #212529; }
.stat-item__label { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; }
.channel-card__description { font-size: 0.9em; line-height: 1.6; color: #6c757d; margin-bottom: 1rem; }
.channel-card__footer { margin-top: auto; padding: 1rem 1.5rem 1.5rem; text-align: right; font-weight: 600; font-size: 0.9em; color: #adb5bd; transition: color 0.2s ease; }
.channel-card:hover .channel-card__footer { color: var(--ast-global-color-0, #007bff); }

/* Paginacja */
.channel-ranking-pagination { margin-top: 3rem; }
.ast-pagination { display: flex; justify-content: center; gap: 0.5rem; }
.ast-pagination .page-numbers { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; line-height: 1.2; background-color: #fff !important; border: 1px solid #ddd !important; color: #333 !important; padding: 8px 14px !important; border-radius: 6px !important; cursor: pointer; font-weight: 600; transition: all .2s ease; }
.ast-pagination a.page-numbers:hover { background-color: #e9e9e9 !important; border-color: #ccc !important; }
.ast-pagination .page-numbers.current { background-color: var(--ast-global-color-0, #007bff) !important; color: #fff !important; border-color: var(--ast-global-color-0, #007bff) !important; cursor: default; }
.ast-pagination .page-numbers.dots { padding: 8px 0 !important; font-weight: 600; color: #aaa; border: none !important; background-color: transparent !important; }

/* Responsywność */
@media (max-width: 991px) { .channel-ranking-list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }