/* ============================================================
   Tabo Stream Summary — sekcja główna (HUB) v1.0
   Karty twórców + kalendarz każdego + box GamePulse + Discord, na stronie
   głównej eltabo.pl. Korzysta z tych samych zmiennych CSS co reszta motywu
   (--bg-card, --aura, --border-aura, itd. z assets/css/main.css), żeby
   automatycznie dopasować się do wybranej "aury" kolorystycznej.
   ============================================================ */

/* ---------- Nakładka na hero ----------
   #page dostaje position:relative (bezpieczne - nie miał go wcześniej), a nakładka
   position:absolute top:0, żeby "leżeć" na grafice hero zamiast spychać ją w dół.
   Wewnątrz .tabo-hero-overlay treść (widżet live + hub) rośnie normalnym flow -
   dzięki temu przy starcie streama hub sam zjeżdża niżej W OBRĘBIE nakładki. */
#page {
    position: relative;
}

.tabo-hero-overlay {
    position: absolute;
    /* top:0 liczyłby się od górnej krawędzi #page (czyli spod stałego paska nawigacji,
       bo #page ma padding-top:var(--nav-h) - to padding, nie przesunięcie samego
       elementu). var(--nav-h) ustawia nakładkę dokładnie tam, gdzie realnie zaczyna
       się widoczna treść hero, pod nawigacją - dodatkowy odstęp (+32px, tyle samo co
       motyw sam używa gdzie indziej, np. .admin-bar .site-main), żeby karty nie
       stykały się na styk z paskiem menu.
       Jeśli mimo to po odświeżeniu na chwilę widać poprawny odstęp, a potem "wraca"
       na styk z menu - to najpewniej cache strony (wtyczka cache'ująca albo cache po
       stronie hostingu serwuje starą, sprzed aktualizacji, wersję HTML) - warto wyczyścić
       cache strony (nie tylko przeglądarki) po każdej aktualizacji tej wtyczki. */
    top: calc(var(--nav-h, 64px) + 32px);
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none; /* przepuszczaj kliknięcia poza kartami/przyciskami do hero pod spodem */
}

.tabo-hero-overlay > * {
    pointer-events: auto; /* ale same karty/widżet/przyciski mają być klikalne */
}

.tabo-hub-wrap {
    max-width: 1100px;
    margin: 0 auto 2rem;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ---------- Karty twórców ---------- */

.tabo-hub-creators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.tabo-hub-card {
    background: var(--bg-card, #0d1525);
    border: 1px solid rgba(var(--aura-rgb, 34,197,94), 0.3);
    border-radius: var(--radius-lg, 14px);
    padding: 18px;
    box-sizing: border-box;
    /* Ta sama pulsująca "aura" co na innych ramkach w motywie (np. .taboretro-card) -
       animacja @keyframes aura-pulse jest zdefiniowana globalnie w assets/css/main.css,
       więc wystarczy się do niej odwołać po nazwie. */
    animation: aura-pulse 4s ease-in-out infinite;
}

.tabo-hub-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tabo-hub-avatar-wrap { flex-shrink: 0; }

.tabo-hub-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--aura, #22c55e);
}

.tabo-hub-avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aura-dim, rgba(34,197,94,0.15));
    color: var(--aura, #22c55e);
    font-family: var(--font-retro, monospace);
    font-size: 14px;
    border: 2px solid var(--aura, #22c55e);
}

.tabo-hub-card-info { min-width: 0; }

.tabo-hub-name {
    display: block;
    font-family: var(--font-retro, monospace);
    font-size: 13px;
    color: var(--text, #e8eaf0);
    text-decoration: none;
    margin-bottom: 4px;
}

a.tabo-hub-name:hover { color: var(--aura, #22c55e); }

.tabo-hub-bio {
    font-size: 12px;
    color: var(--text-muted, #7a8099);
    margin: 0;
    line-height: 1.5;
}

.tabo-hub-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.tabo-hub-social-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius, 8px);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    text-decoration: none;
    font-family: var(--font-mono, monospace);
}

.tabo-hub-social-pill:hover { border-color: var(--aura, #22c55e); }

.tabo-hub-social-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-muted, #7a8099);
}

.tabo-hub-social-icon svg { width: 100%; height: 100%; display: block; }

.tabo-hub-social-pill:hover .tabo-hub-social-icon { color: var(--aura, #22c55e); }

.tabo-hub-social-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tabo-hub-social-name {
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--text-muted, #7a8099);
    text-transform: uppercase;
}

.tabo-hub-social-count {
    font-size: 12px;
    color: var(--aura, #22c55e);
}

/* ---------- Kalendarz - własny kafelek, osobno dla każdego twórcy ---------- */

.tabo-hub-calendars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Gdy widoczny jest tylko jeden twórca: jego kalendarz i GamePulse stoją obok
   siebie w jednym rzędzie, zamiast każdy na pełną szerokość osobno. */
.tabo-hub-solo-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}

.tabo-hub-tile-title {
    font-family: var(--font-retro, monospace);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #7a8099);
    margin: 0 0 12px;
    text-transform: uppercase;
}

.tabo-hub-calendar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.tabo-hub-cal-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: var(--radius, 8px);
    padding: 8px 10px;
}

.tabo-hub-cal-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-muted, #7a8099);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.tabo-hub-cal-tags {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.tabo-hub-cal-date-num {
    color: var(--text-dim, #4a5068);
    font-weight: 400;
}

/* Kolorowy tag platformy (Twitch/YouTube/TikTok) - jak rozróżnienie YT/Kick na
   serfero.pl, tylko że kolor przychodzi z tabo_ss_hub_calendar_platform_meta(). */
.tabo-hub-cal-platform {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    padding: 2px 6px;
    border-radius: 20px;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

.tabo-hub-cal-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #000;
    background: var(--aura, #22c55e);
    padding: 2px 6px;
    border-radius: 20px;
    white-space: nowrap;
}

.tabo-hub-cal-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.tabo-hub-cal-time {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: var(--aura, #22c55e);
    font-weight: 600;
}

.tabo-hub-cal-title {
    font-size: 12px;
    color: var(--text, #e8eaf0);
}

.tabo-hub-cal-empty {
    font-size: 12px;
    color: var(--text-dim, #4a5068);
    margin: 0;
}

/* ---------- GamePulse + Discord ---------- */

.tabo-hub-partners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Discord jest jeden, wspólny dla obu twórców - wyśrodkowany, pełnej szerokości,
   pod boxami GamePulse (a nie obok nich w siatce). */
.tabo-hub-discord-row {
    display: flex;
    justify-content: center;
}

/* Szerokość boxu dopasowana do treści (nie rozciągnięta na sztywno) - box jest
   tak szeroki jak jego najdłuższa linijka opisu, do granicy max-width. */
.tabo-hub-discord-row .tabo-hub-partner-box {
    display: inline-block;
    width: auto;
    max-width: 420px;
    text-align: center;
}

.tabo-hub-discord-row .tabo-hub-partner-desc {
    margin-left: auto;
    margin-right: auto;
}

.tabo-hub-partner-box {
    position: relative;
    background: var(--bg-card, #0d1525);
    border: 1px solid rgba(var(--aura-rgb, 34,197,94), 0.3);
    border-radius: var(--radius-lg, 14px);
    padding: 18px;
    box-sizing: border-box;
    animation: aura-pulse 4s ease-in-out infinite;
}

.tabo-hub-partner-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--aura, #22c55e);
    background: var(--aura-dim, rgba(34,197,94,0.15));
    padding: 2px 8px;
    border-radius: 20px;
}

.tabo-hub-partner-title {
    font-family: var(--font-retro, monospace);
    font-size: 13px;
    color: var(--text, #e8eaf0);
    margin: 0 0 10px;
}

.tabo-hub-partner-desc {
    font-size: 13px;
    color: var(--text-muted, #7a8099);
    line-height: 1.6;
    margin: 0 0 12px;
}

.tabo-hub-today-game {
    font-size: 12px;
    color: var(--text, #e8eaf0);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: var(--radius, 8px);
    padding: 8px 10px;
    margin-bottom: 12px;
}

.tabo-hub-partner-btn,
.tabo-hub-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius, 8px);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-decoration: none;
    background: var(--aura, #22c55e);
    color: #000;
    box-shadow: 0 0 16px var(--aura-glow, rgba(34,197,94,0.4));
    transition: all 0.2s ease;
}

.tabo-hub-partner-btn:hover,
.tabo-hub-discord-btn:hover {
    background: var(--aura-dark, #15803d);
    color: #000;
    box-shadow: 0 0 28px var(--aura-glow, rgba(34,197,94,0.4));
    transform: translateY(-1px);
}

.tabo-hub-discord-box .tabo-hub-discord-btn {
    background: #5865f2;
    box-shadow: 0 0 16px rgba(88,101,242,0.4);
}

.tabo-hub-discord-box .tabo-hub-discord-btn:hover {
    background: #4752c4;
    box-shadow: 0 0 28px rgba(88,101,242,0.5);
}

@media (max-width: 640px) {
    .tabo-hub-card-head { flex-wrap: wrap; }
}