/* WYNE — public video feed + shared share-button styles. */

/* Share buttons (used in feed, spotlight, and the Studio Final Cut) */
.share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.share-btn {
    background: #fff;
    border: 1.5px solid #000;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.share-btn:hover { background: #000 !important; color: #fff !important; }

/* Feed controls */
.feed-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 1000px;
    margin: 0 auto 1.25rem;
}
.feed-controls select {
    padding: 0.45rem 0.7rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font: inherit;
}

/* Feed grid */
.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    max-width: 1000px;
    margin: 0 auto;
}
.feed-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.feed-media { background: #000; aspect-ratio: 16 / 9; }
.feed-media video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.feed-body { padding: 1rem; }
.feed-body h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.feed-byline { font-size: 0.8rem; margin-bottom: 0.75rem; }
.feed-actions { display: flex; align-items: center; gap: 0.6rem; }
.feed-like {
    background: #fff;
    border: 1.5px solid #ff0040;
    color: #ff0040;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.feed-like:hover, .feed-like.liked { background: #ff0040; color: #fff; }
.feed-share { font-size: 0.82rem; padding: 0.35rem 0.9rem; }

/* Spotlight (deep-linked single video) */
.spotlight-card { max-width: 760px; }
.spotlight-card video { width: 100%; border-radius: 10px; background: #000; }
.spotlight-meta { margin-top: 1rem; }
.spotlight-meta h2 { margin-bottom: 0.2rem; }
.back-to-feed { display: inline-block; margin-top: 1rem; }

/* Share modal */
.share-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 1rem;
}
.share-modal-inner {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    max-width: 420px;
    width: 100%;
    position: relative;
}
.share-modal-inner h3 { margin-bottom: 0.5rem; padding-right: 1.5rem; }
.share-close {
    position: absolute; top: 0.75rem; right: 0.9rem;
    background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #888;
}

@media (max-width: 600px) {
    .feed-grid { grid-template-columns: 1fr; }
}