/* ============================================
   VIDEOS PAGE (branch/videos.html, js/reels/videos-page.js)
   The drawer (css/shared/filter-sidebar.css) as the page's navigation, the
   find-tutors sort bar (css/find-tutors/sort-bar.css), and one list of the
   tutors' videos and Astegni's own. Colours are theme variables.
   ============================================ */

/* The drawer hangs under this page's navbar, which is not find-tutors' 64px
   (the height is measured into --videos-nav-height). */
.videos-body .sidebar-container {
    top: var(--videos-nav-height, 4.5rem);
    height: calc(100vh - var(--videos-nav-height, 4.5rem));
}

.videos-body .sidebar-toggle {
    display: flex;
    align-items: center;
}

.videos-body .sidebar-header .clear-filters-btn {
    padding: .4rem .6rem;
    background: transparent;
    color: var(--text-muted, #6b7280);
    box-shadow: none;
}

.videos-body .sidebar-header .clear-filters-btn:hover {
    transform: none;
    color: var(--button-bg);
    box-shadow: none;
}

/* ---- sidebar entries ---- */
.vp-side-section { padding: 0 .75rem .75rem; }
.vp-side-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    margin: 1rem .5rem .4rem;
}

.vp-nav-btn,
.vp-person {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.vp-nav-btn:hover,
.vp-person:hover { background: rgba(var(--button-bg-rgb, 245, 158, 11), .08); }

.vp-nav-btn.is-active,
.vp-person.is-active {
    background: rgba(var(--button-bg-rgb, 245, 158, 11), .15);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--button-bg);
}

.vp-nav-btn:focus-visible,
.vp-person:focus-visible { outline: 3px solid var(--button-bg); outline-offset: 1px; }

.vp-nav-icon { width: 1.25rem; text-align: center; flex: 0 0 auto; }
.vp-nav-text { flex: 1; min-width: 0; }

.vp-nav-count {
    font-size: .75rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: rgba(var(--button-bg-rgb, 245, 158, 11), .12);
    color: var(--text-muted, #6b7280);
}

.vp-nav-count:empty { display: none; }

.vp-person-text { display: flex; flex-direction: column; min-width: 0; }
.vp-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-person-count { font-size: .75rem; color: var(--text-muted, #6b7280); font-weight: 400; }

.vp-side-note {
    margin: .25rem .5rem;
    font-size: .82rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.4;
}

.vp-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--button-bg-rgb, 245, 158, 11), .18);
    color: var(--heading, #b45309);
    font-size: .75rem;
    font-weight: 800;
}

.vp-avatar-astegni { background: var(--button-bg); color: var(--button-text, #fff); }

/* ---- the view's header ---- */
.vp-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 .75rem;
}

.vp-view-head h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--heading);
    overflow-wrap: anywhere;
}

.vp-view-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.vp-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg);
    color: var(--text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vp-link-btn:hover { border-color: var(--button-bg); }
.vp-link-btn[hidden] { display: none; }

.videos-body .sort-bar .sort-results { font-size: .85rem; color: var(--text-muted, #6b7280); }

/* ---- the list ---- */
.videos-body #reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 0;
}

.vp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.vp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .12); }

.vp-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #111827;
    overflow: hidden;
}

.vp-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-card-thumb:focus-visible { outline: 3px solid var(--button-bg); outline-offset: -3px; }

.vp-card-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
}

.vp-card:hover .vp-card-play { opacity: 1; }

.vp-card-duration {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .1rem .45rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .75rem;
}

.vp-card-flag {
    position: absolute;
    left: .5rem;
    top: .5rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-text, #fff);
    font-size: .7rem;
    font-weight: 700;
}

.vp-card-body { padding: .8rem .9rem .9rem; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }

.vp-card-title {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.vp-card-title a { color: var(--text); text-decoration: none; }
.vp-card-title a:hover { text-decoration: underline; }

.vp-card-meta { margin: 0; font-size: .8rem; color: var(--text-muted, #6b7280); }

.vp-card-who {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

.vp-card-who-link:hover .vp-card-name { text-decoration: underline; }
.vp-card-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vp-badge-featured {
    margin-left: auto;
    padding: .08rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    background: rgba(var(--button-bg-rgb, 245, 158, 11), .15);
    color: var(--heading);
}

.vp-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .8rem;
    font-size: .75rem;
    color: var(--text-muted, #6b7280);
}

.vp-card-engaged { font-size: .75rem; color: var(--heading); font-weight: 600; }

/* ---- states and the pager ---- */
.vp-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #6b7280);
}

.vp-state h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 .35rem; }
.vp-state p { margin: 0; }
.vp-error p { color: var(--error, #ef4444); margin-bottom: .75rem; }

.vp-retry,
.vp-load-more {
    padding: .6rem 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--button-bg);
    background: var(--card-bg);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.vp-retry:hover,
.vp-load-more:hover { background: rgba(var(--button-bg-rgb, 245, 158, 11), .12); }
.vp-load-more[hidden] { display: none; }
.vp-load-more:disabled { opacity: .6; cursor: wait; }
.vp-load-more-wrap { display: flex; justify-content: center; margin: 1.75rem 0 .5rem; }

.vp-spinner {
    width: 2rem;
    height: 2rem;
    margin: 0 auto .6rem;
    border-radius: 50%;
    border: 3px solid rgba(var(--button-bg-rgb, 245, 158, 11), .25);
    border-top-color: var(--button-bg);
    animation: vp-spin .8s linear infinite;
}

@keyframes vp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .vp-spinner { animation: none; }
    .vp-card, .vp-card:hover { transition: none; transform: none; }
}

/* ---- phones: nothing scrolls sideways at 320px ---- */
@media (max-width: 640px) {
    .videos-body #reels-grid { grid-template-columns: 1fr; gap: 1rem; }
    .vp-view-head h1 { font-size: 1.25rem; }
    .videos-body .sort-bar-content { padding: .75rem; }
    .videos-body .sort-quick-actions { width: 100%; }
    .videos-body .sort-btn { flex: 1 1 auto; justify-content: center; padding: .45rem .6rem; font-size: .8rem; }
    .videos-body .sort-advanced,
    .videos-body .sort-dropdown { width: 100%; }
}