/* ═══════════════════════════════════════════════════════════
   InsideGaming Mediathek
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.igmed-wrap, .igmed-player-wrap {
    --yt:   #ff0000;
    --tw:   #9147ff;
    --bg:   #0e0e10;
    --s1:   #18181b;
    --s2:   #1f1f23;
    --s3:   #26262c;
    --bd:   #3a3a3d;
    --t1:   #efeff1;
    --t2:   #adadb8;
    --t3:   #737379;
    --r:    6px;
    --f:    'Inter',-apple-system,sans-serif;

    font-family: var(--f);
    background: var(--bg);
    color: var(--t1);
    -webkit-font-smoothing: antialiased;
}
.igmed-wrap *, .igmed-player-wrap *,
.igmed-wrap *::before, .igmed-wrap *::after { box-sizing: border-box; }
.igmed-wrap a { text-decoration: none; color: inherit; }

/* ── Skeleton ─────────────────────────────────────────────── */
.igmed-skel {
    background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 50%, var(--s2) 75%);
    background-size: 200% 100%;
    animation: igmed-shimmer 1.4s infinite;
    border-radius: 4px; display: block;
}
@keyframes igmed-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.igmed-skel--title { height: 14px; width: 85%; margin-bottom: 8px; }
.igmed-skel--meta  { height: 11px; width: 55%; }

/* ── Header ───────────────────────────────────────────────── */
.igmed-header {
    background: var(--s1);
    border-bottom: 1px solid var(--bd);
    padding: 0 20px;
}
.igmed-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    max-width: 1500px; margin: 0 auto;
    padding: 16px 0;
}
.igmed-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 22px; font-weight: 700; color: var(--t1); margin: 0;
}
.igmed-title svg { width: 22px; height: 22px; fill: var(--yt); }

.igmed-search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--s2); border: 1.5px solid var(--bd);
    border-radius: var(--r); padding: 8px 14px;
    min-width: 240px; max-width: 360px; flex: 1;
    transition: border-color .15s;
}
.igmed-search-wrap:focus-within { border-color: var(--yt); }
.igmed-search-wrap svg { width: 16px; height: 16px; fill: var(--t3); flex-shrink: 0; }
.igmed-search-wrap input {
    background: none; border: none; outline: none;
    color: var(--t1); font-size: 14px; font-family: var(--f); width: 100%;
}
.igmed-search-wrap input::placeholder { color: var(--t3); }

/* ── Tabs ─────────────────────────────────────────────────── */
.igmed-tabs {
    display: flex; align-items: center;
    background: var(--s1); border-bottom: 1px solid var(--bd);
    padding: 0 20px; gap: 0; overflow-x: auto;
    scrollbar-width: none;
}
.igmed-tabs::-webkit-scrollbar { display: none; }

.igmed-tab {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; border-bottom: 3px solid transparent;
    color: var(--t2); font-size: 14px; font-weight: 600; font-family: var(--f);
    padding: 14px 18px; cursor: pointer; white-space: nowrap;
    transition: color .15s, border-color .15s;
    position: relative;
}
.igmed-tab svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.igmed-tab:hover { color: var(--t1); }
.igmed-tab.is-active {
    color: var(--t1);
    border-bottom-color: var(--yt);
}
.igmed-tab[data-tab="clips"].is-active { border-bottom-color: var(--tw); }

.igmed-tab-count {
    background: var(--s3); color: var(--t2);
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px; min-width: 20px;
    text-align: center;
}
.igmed-tab.is-active .igmed-tab-count { background: var(--yt); color: #fff; }
.igmed-tab[data-tab="clips"].is-active .igmed-tab-count { background: var(--tw); }

/* ── Panels ───────────────────────────────────────────────── */
.igmed-panels { padding: 0; }
.igmed-panel { display: none; }
.igmed-panel.is-active { display: block; }

/* ── Grid ─────────────────────────────────────────────────── */
.igmed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    max-width: 1500px; margin: 0 auto;
}
.igmed-grid--wide { grid-template-columns: repeat(3, 1fr); }
.igmed-grid--shorts {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media(max-width:1200px){ .igmed-grid { grid-template-columns: repeat(3,1fr); } .igmed-grid--shorts { grid-template-columns: repeat(4,1fr); } }
@media(max-width:860px) { .igmed-grid { grid-template-columns: repeat(2,1fr); } .igmed-grid--shorts { grid-template-columns: repeat(3,1fr); } .igmed-grid--wide { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px) { .igmed-grid,.igmed-grid--wide { grid-template-columns: 1fr; } .igmed-grid--shorts { grid-template-columns: repeat(2,1fr); } padding: 12px; }

/* ── Card ─────────────────────────────────────────────────── */
.igmed-card {
    background: var(--s1);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    cursor: pointer;
}
.igmed-card:hover {
    transform: translateY(-3px);
    border-color: var(--yt);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.igmed-card--short { border-radius: 8px; }
.igmed-card--short .igmed-card__thumb { aspect-ratio: 9/16; }

.igmed-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #111;
    overflow: hidden;
    flex-shrink: 0;
}
.igmed-card__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s;
}
.igmed-card:hover .igmed-card__thumb img { transform: scale(1.04); }
.igmed-card__thumb-ph { width:100%;height:100%;background:var(--s3); }

.igmed-card__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.4); opacity: 0; transition: opacity .18s;
}
.igmed-card:hover .igmed-card__play { opacity: 1; }
.igmed-card__play svg { width: 48px; height: 48px; fill: rgba(255,255,255,.92); filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }

.igmed-card__dur {
    position: absolute; bottom: 7px; right: 8px;
    background: rgba(0,0,0,.82); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
}

/* Source badges */
.igmed-badge {
    position: absolute; top: 7px; left: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
}
.igmed-badge svg { width: 10px; height: 10px; fill: #fff; }
.igmed-badge--yt     { background: var(--yt); color: #fff; }
.igmed-badge--twitch { background: var(--tw); color: #fff; }

.igmed-card__body { padding: 11px 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.igmed-card__title {
    font-size: 13px; font-weight: 600; color: var(--t1);
    margin: 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.igmed-card--short .igmed-card__title { -webkit-line-clamp: 3; font-size: 12px; }
.igmed-card__meta {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; font-size: 11px; color: var(--t3);
}
.igmed-card__views { display: flex; align-items: center; gap: 3px; }
.igmed-card__views svg { width: 11px; height: 11px; fill: currentColor; }
.igmed-card__game { color: var(--tw); font-weight: 600; }

/* Skeleton card */
.igmed-card--skeleton { pointer-events: none; }
.igmed-card--skeleton .igmed-card__thumb { aspect-ratio:16/9; background:var(--s2); }

/* ── Empty / error states ─────────────────────────────────── */
.igmed-empty {
    grid-column: 1/-1;
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 60px 20px; text-align: center; color: var(--t3);
}
.igmed-empty svg { width: 40px; height: 40px; fill: currentColor; }
.igmed-empty p   { margin: 0; font-size: 15px; line-height: 1.6; }
.igmed-empty--warn { color: #f39c12; }
.igmed-empty--warn svg { fill: currentColor; }

/* ── Load more ────────────────────────────────────────────── */
.igmed-load-more-wrap { text-align: center; padding: 4px 20px 28px; }
.igmed-load-more-btn {
    background: var(--s2); border: 1.5px solid var(--bd);
    border-radius: var(--r); color: var(--t2);
    font-size: 14px; font-weight: 600; font-family: var(--f);
    padding: 11px 32px; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.igmed-load-more-btn:hover { border-color: var(--yt); color: var(--t1); }
.igmed-load-more-btn:disabled { opacity: .5; cursor: not-allowed; }