/**
 * Content Protection — Media Only (Images & Videos)
 * ==========================================================================
 * Blocks casual save/download of images and videos by human visitors.
 * Text remains fully selectable and accessible to crawlers / LLMs for SEO.
 *
 * Layers of defense:
 *   1. Transparent overlay via ::after on media containers
 *   2. Disable native drag on img/video
 *   3. Suppress iOS long-press "Save Image" callout
 *   4. Prevent pointer-events on the raw <img>/<video> element
 *   5. user-select: none on media so highlight-copy doesn't grab src
 *
 * What is NOT blocked (by design):
 *   - Text selection, copy, highlight  → SEO + accessibility preserved
 *   - Crawler access to <img src> / alt text / structured data
 *   - Right-click on non-media elements (text paragraphs, links, etc.)
 * ==========================================================================
 */

/* ── 1. Prevent drag-to-desktop on all images & videos ── */
img,
video,
picture img,
figure img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* ── 2. iOS long-press "Save Image" / "Copy" callout ── */
img,
video {
    -webkit-touch-callout: none;
}

/* ── 3. Transparent overlay on common media containers ──
 *   The ::after pseudo-element sits on top of the image, intercepting
 *   right-click, drag, and long-press. We apply this to <figure>,
 *   common card/wrapper classes, and any element with [data-protect].
 */
figure,
.blog-image,
.hero-image,
.featured-image,
.profile-image,
.card-img-container,
.blog-card-image,
.post-featured-image,
.pj-media,
.project-detail-media,
[data-protect] {
    position: relative;
}

figure::after,
.blog-image::after,
.hero-image::after,
.featured-image::after,
.profile-image::after,
.card-img-container::after,
.blog-card-image::after,
.post-featured-image::after,
.pj-media::after,
.project-detail-media::after,
[data-protect]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    pointer-events: auto;
}

/* ── 4. Re-enable pointer-events on interactive children ──
 *   Links, buttons, and text inside protected containers must still work.
 */
figure a,
figure button,
.blog-card a,
.blog-card button,
.project-card a,
.project-card button,
[data-protect] a,
[data-protect] button {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

/* ── 5. Video-specific: hide native download button (Chromium) ── */
video::-internal-media-controls-download-button {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* push download button off-screen */
}

/* ── 6. Print protection: hide images when printing ── */
@media print {
    img,
    video,
    picture {
        visibility: hidden !important;
    }

    /* Show a placeholder message instead */
    figure::after,
    .blog-image::after,
    [data-protect]::after {
        content: '[Image protected — visit brlikhon.engineer]';
        visibility: visible;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #888;
        background: #f0f0f0;
    }
}