/**
 * Video styles - grid, cards, player, upload form
 */

/* Video Grid - YouTube's fluid column count, 16px gutters, taller row gap so
   each caption has room to breathe. */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    column-gap: 16px;
    row-gap: 40px;
}

/* YouTube cards are not boxes: no background, no border, no shadow. Only the
   thumbnail and the two-line caption. */
.video-card {
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
    text-decoration: none;
    color: inherit;
}

/* Wrapper that also holds the "Download MP3" button so the card itself can
   stay a single link (nested links/buttons are not valid HTML). */
.video-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-download {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.8);
    border: none;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.card-download:hover,
.card-download:focus-visible {
    background: var(--accent-red);
}

/* Lift the card only on devices that actually hover (avoids sticky hover). */
@media (hover: hover) {
    .video-card:hover {
        transform: none;
    }
}

.video-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--yt-thumb-bg);
    overflow: hidden;
    border-radius: 12px;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.thumbnail-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: var(--text-secondary);
    opacity: 0.4;
}

/* Sits against the left edge rather than dead centre: a circle in the middle
   of the frame covers the part of the image people actually look at. */
.play-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

/* Small screens have no room for a centred circle without hiding the frame. */
@media (max-width: 480px) {
    .play-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        left: 8px;
    }
}

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

/* Touch devices never fire hover, so leaving the overlay at opacity 1 made it
   sit permanently on top of the thumbnail and hide it. Hide it there instead:
   on a phone or tablet the whole card is already a single tap target. */
@media (hover: none) {
    .play-icon {
        display: none;
    }
}

/* Caption block: avatar on the left, two lines of text beside it - the shape
   of every YouTube grid tile. */
.video-info {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    padding: 0;
    align-items: start;
}

.video-card-avatar {
    grid-row: span 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-light) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.video-title {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 4px;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.video-meta-uploader {
    display: block;
    color: var(--text-secondary);
}

/* ------------------------------------------------------------------ */
/* Watch layout (YouTube-style): picture and details on the left, the  */
/* "Up next" list down the right.                                     */
/* ------------------------------------------------------------------ */

.watch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 402px);
    column-gap: 20px;
    row-gap: 16px;
    align-items: start;
}

.watch-main {
    min-width: 0;
}

.watch-aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.watch-aside-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.related-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

@media (hover: hover) {
    .related-card:hover .related-title {
        color: var(--text-secondary);
    }
}

.related-thumb {
    flex: none;
    width: 168px;
    aspect-ratio: 16 / 9;
    background: var(--yt-thumb-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.related-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/* Video Player Page                                                   */
/* ------------------------------------------------------------------ */

.video-player-container {
    width: 100%;
    margin: 0;
    /* The control bar is absolutely positioned against this box. Without this
       it resolves against some ancestor further up the page, which made the bar
       span the full window width and overlap the download buttons. */
    position: relative;
}

.video-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.video-player video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-details {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
}

.video-details h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.35;
}

.video-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.video-stats-left {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.video-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vote-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--yt-chip);
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background var(--transition-normal);
}

.vote-btn:hover {
    background: var(--yt-chip-hover);
}

.vote-btn.active {
    background: var(--accent-red);
    color: #fff;
}

.video-channel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.channel-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

.channel-name {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}

.channel-name:hover {
    color: var(--accent-red);
}

.video-description {
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Upload Form                                                         */
/* ------------------------------------------------------------------ */

.upload-container {
    max-width: 600px;
    margin: 40px auto;
}

.upload-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 40px;
    border: 1px solid var(--border-color);
}

.upload-card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 32px;
    text-align: center;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.file-input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
    color: var(--text-secondary);
}

.file-input-wrapper:hover {
    border-color: var(--accent-red);
}

.file-icon {
    font-size: 2.5rem;
}

.file-name {
    color: var(--accent-red);
    font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Empty State                                                         */
/* ------------------------------------------------------------------ */

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h2 {
    font-size: 1.25rem;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
}

/* Video owner actions */
.video-owner-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.delete-btn {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-normal);
    background: transparent;
    color: var(--error-red);
    border: 1px solid var(--error-red);
}

.delete-btn:hover {
    background: rgba(231, 76, 60, 0.15);
}

/* Channel page */
.channel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.channel-header-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.channel-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Edit form                                                           */
/* ------------------------------------------------------------------ */

.edit-current-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.edit-current-thumb img {
    max-width: 100%;
    max-height: 180px;
    border-radius: var(--radius-medium, 8px);
    background: #000;
}

.edit-current-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-check {
    margin: 4px 0 16px;
}

.form-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-help {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.edit-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

/* ------------------------------------------------------------------ */
/* Responsive (tablet and phones)                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 1000px) {
    .watch-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .video-grid {
        column-gap: 16px;
        row-gap: 28px;
    }

    .card-download {
        min-height: 40px;
        padding: 8px 12px;
    }

    .video-info {
        padding: 0;
    }

    .video-details {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    .video-details h1 {
        font-size: 1.15rem;
        margin-bottom: 12px;
    }

    .video-stats {
        gap: 12px;
    }

    .vote-btn {
        min-height: 44px;
    }

    .upload-container {
        margin: 16px auto;
    }

    .upload-card {
        padding: 24px 20px;
    }

    .upload-card h1 {
        font-size: 1.25rem;
        margin-bottom: 24px;
    }

    .file-input-wrapper {
        padding: 24px 16px;
    }

    .channel-header {
        padding: 16px;
        gap: 16px;
    }

    .channel-header-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .channel-header h1 {
        font-size: 1.25rem;
    }

    .empty-state {
        padding: 48px 16px;
    }
}

@media (max-width: 480px) {
    .video-details {
        padding: 14px;
    }

    .related-thumb {
        width: 120px;
    }

    .upload-card {
        padding: 20px 16px;
    }

    .file-input-wrapper {
        padding: 20px 12px;
    }

    .video-owner-actions {
        flex-wrap: wrap;
    }

    .channel-header {
        flex-direction: column;
        text-align: center;
    }
}