/* ============================================================
   styles.css  —  Videos page theme
   Loaded AFTER core-styles.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=MedievalSharp:wght@400&display=swap');

:root {
    /* Dark cinematic palette — deep black with film-amber accents */
    --color-bg:              #0d0d0d;
    --color-bg-card:         #1a1a1a;
    --color-bg-card-deep:    #111111;
    --color-bg-card-hover:   #252525;
    --color-border:          #2a2a2a;
    --color-border-strong:   #3a3a3a;
    --color-border-active:   #b8762a;
    --color-text:            #e8e0d0;
    --color-text-muted:      #8a7f72;
    --color-text-subtle:     #555555;
    --color-accent:          #b8762a;   /* Amber — ties to site nav */
    --color-accent-light:    #d4a060;
    --color-accent-glow:     #b8762a;
    --color-runtime:         #b8762a;
    --color-arcane-idle:     #1a1a1a;
    --color-arcane-hover:    #b8762a;
    --shadow-active-glow:    0 0 16px rgba(184, 118, 42, 0.5);

    --font-display:  'MedievalSharp', cursive;
    --font-primary:  'Crimson Text', Georgia, serif;
}

/* ============================================================
   VIDEO PLAYER
   ============================================================ */
#video-player {
    background-color: var(--color-bg-card);
    border-radius:    8px;
    padding:          0;
    max-width:        720px;
    margin:           0 auto 48px;
    box-shadow:       0 8px 32px rgba(0, 0, 0, 0.8);
    border:           1px solid var(--color-border-strong);
    overflow:         hidden;
}

#video-screen-wrap {
    position:   relative;
    width:      100%;
    max-width:  100%;
    background: #000;
    aspect-ratio: 16 / 9;
    overflow:   hidden;
}

#video-screen {
    width:      100%;
    height:     100%;
    max-width:  100%;
    max-height: 100%;
    display:    block;
    outline:    none;
    background: #000;
    object-fit: contain;
}

/* Info strip below the video */
#video-info {
    padding: 16px 20px 20px;
}

/* ----------------------
   Custom controls
---------------------- */
#video-controls {
    padding:    10px 16px;
    background: #000;
}

#video-time-display {
    display:         flex;
    justify-content: space-between;
    font-family:     var(--font-primary);
    font-size:       0.8em;
    color:           var(--color-text-muted);
    margin-bottom:   4px;
    padding:         0 2px;
}

#video-seek {
    width:              100%;
    height:             6px;
    -webkit-appearance: none;
    appearance:         none;
    background:         var(--color-border);
    border-radius:      3px;
    outline:            none;
    cursor:             pointer;
    margin-bottom:      10px;
    box-sizing:         border-box;
}

#video-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              14px;
    height:             14px;
    border-radius:      50%;
    background:         var(--color-accent);
    cursor:             pointer;
    box-shadow:         0 0 4px rgba(0, 0, 0, 0.5);
}

#video-seek::-moz-range-thumb {
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    var(--color-accent);
    cursor:        pointer;
    border:        none;
    box-shadow:    0 0 4px rgba(0, 0, 0, 0.5);
}

#video-buttons {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             15px;
    padding:         5px 10px;
    position:        relative;
}

#video-buttons button {
    padding:          0;
    line-height:      0;
    overflow:         hidden;
    border:           none;
    background-color: transparent;
    cursor:           pointer;
    display:          block;
}

#video-buttons button img {
    width:      100%;
    height:     100%;
    object-fit: fill;
    display:    block;
}

#video-buttons button:not(#video-fullscreen-btn):hover {
    opacity:   0.8;
    transform: scale(1.1);
}

#video-prev-btn,
#video-next-btn {
    width:         50px;
    height:        50px;
    border-radius: 20%;
}

#video-play-pause-btn {
    width:         70px;
    height:        70px;
    border-radius: 20%;
}

#video-fullscreen-btn {
    position:        absolute;
    right:           10px;
    top:             50%;
    transform:       translateY(-50%);
    width:           36px;
    height:          36px;
    border-radius:   20%;
    font-size:       1.4em;
    color:           var(--color-accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    overflow:        visible;
}

#video-fullscreen-btn:hover {
    opacity:   0.8;
    transform: translateY(-50%) scale(1.1);
}
#video-screen-wrap:fullscreen {
    width:      100vw;
    height:     100vh;
    background: #000;
}

#video-screen-wrap:fullscreen #video-screen {
    width:      100%;
    height:     100%;
    object-fit: contain;
}

#video-info h3 {
    font-family:   var(--font-display);
    font-size:     1.4em;
    color:         var(--color-accent);
    margin:        0 0 6px;
}

#video-meta {
    display:     flex;
    gap:         16px;
    font-family: var(--font-primary);
    font-size:   0.9em;
    color:       var(--color-text-muted);
    margin-bottom: 8px;
    font-style:  italic;
}

#video-description {
    font-family: var(--font-primary);
    font-size:   1em;
    color:       var(--color-text-muted);
    margin:      0;
    line-height: 1.6;
}

/* ============================================================
   TAG FILTER — grouped layout
   ============================================================ */
#video-tag-filter {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             16px;
    align-items:     flex-start;
}

.tag-group {
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
    border-radius:    8px;
    padding:          12px 16px;
    min-width:        120px;
}

.tag-group-label {
    font-family:   var(--font-display);
    font-size:     0.8em;
    color:         var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.tag-group-checks {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.tag-group-checks label {
    background:  none;
    border:      none;
    padding:     0;
    font-family: var(--font-primary);
    font-size:   0.9em;
    color:       var(--color-text);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    gap:         6px;
    min-width:   unset;
    max-width:   unset;
    text-align:  left;
    transition:  color 0.2s;
}

.tag-group-checks label:hover {
    color:     var(--color-accent-light);
    transform: none;
}

.tag-group-checks input[type="checkbox"] {
    accent-color: var(--color-accent);
    cursor:       pointer;
}

.tag-category {
    color:       var(--color-accent);
    font-style:  italic;
    font-size:   0.85em;
}

.video-empty {
    color:      var(--color-text-muted);
    width:      100%;
    text-align: center;
}

/* ============================================================
   VIDEO LIST  (mirrors .song-list / .song-item pattern)
   ============================================================ */
.video-list {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             20px;
    max-width:       1200px;
    margin:          0 auto 60px;
}

.video-item {
    background-color: var(--color-bg-card);
    border-radius:    8px;
    padding:          0;
    width:            280px;
    text-align:       left;
    box-shadow:       0 4px 12px rgba(0, 0, 0, 0.6);
    position:         relative;
    z-index:          1;
    border:           1px solid var(--color-border);
    cursor:           pointer;
    overflow:         hidden;
    transition:       border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.video-item:hover {
    border-color: var(--color-accent);
    box-shadow:   var(--shadow-active-glow);
    transform:    translateY(-2px);
}

.video-item.active {
    border-color: var(--color-border-active);
    box-shadow:   var(--shadow-active-glow);
}

/* Thumbnail with play icon overlay */
.video-thumb-wrap {
    position:    relative;
    width:       100%;
    max-width:	 100%;
    aspect-ratio: 1 / 1;
    overflow:    hidden;
    background:  #000;
}

.video-thumb-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: opacity 0.3s ease;
}

.video-item:hover .video-thumb-wrap img {
    opacity: 0.7;
}

.video-play-icon {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    width:       44px;
    height:      44px;
    background:  rgba(184, 118, 42, 0.85);
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    opacity:     0;
    transition:  opacity 0.2s ease;
}

.video-play-icon::after {
    content:      '';
    display:      block;
    width:        0;
    height:       0;
    border-style: solid;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left:  3px;
}

.video-item:hover .video-play-icon {
    opacity: 1;
}

/* Card text */
.video-item-body {
    padding: 12px 14px 14px;
}

.video-item h3 {
    font-family:   var(--font-display);
    font-size:     1em;
    color:         var(--color-accent-light);
    margin:        0 0 4px;
    line-height:   1.3;
}

.video-item .video-item-meta {
    font-family: var(--font-primary);
    font-size:   0.85em;
    color:       var(--color-text-muted);
    font-style:  italic;
    margin-bottom: 4px;
}
.video-item .tags {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:	     0.8em;
    color:           var(--color-accent);
    margin-top:      4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    #video-player {
        max-width: 100%;
        border-radius: 0;
        border-left:  none;
        border-right: none;
    }

    .video-item {
        width: calc(100% - 0px);
        flex:  0 0 100%;
    }
}