/* SavvyGreat Profile Snapic unified media — 20260815-profile-snapic-media-1
   Scoped to the CommonVisitors profile surface. Reuses the canonical Snapic
   manifest data while leaving the profile shell, comments and AJAX flow intact. */

.sgprofile-m3 [data-sgprofile-snapic-media] {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #111 !important;
}

.sgprofile-m3 [data-sgprofile-snapic-media] > img[data-sgsnapic-media-image] {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sgprofile-m3 [data-sgprofile-snapic-media] video[data-sgsnapic-reel-tile-video] {
    border-radius: inherit;
}

.sgprofile-m3 [data-sgprofile-snapic-media] .sgsnapic-reel-badge {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: rgba(18,18,18,.72);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.sgprofile-m3 [data-sgprofile-snapic-media] .sgsnapic-reel-badge > span {
    font-size: 12px;
}

.sgprofile-m3 [data-sgprofile-snapic-media] .sgsnapic-reel-badge small {
    color: rgba(255,255,255,.82);
    font-size: 10px;
    font-weight: 700;
}

/* Instagram/Facebook-style visual affordance: a Reel is unmistakably playable
   before the user opens it, but the overlay never steals the tile click. */
.sgprofile-m3 [data-sgprofile-snapic-media].sgsnapic-is-reel::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.50);
    border-radius: 50%;
    background: rgba(0,0,0,.46);
    box-shadow: 0 5px 20px rgba(0,0,0,.30);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    pointer-events: none;
}

.sgprofile-m3 [data-sgprofile-snapic-media].sgsnapic-is-reel::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin-left: 2px;
    transform: translate(-50%, -50%);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
    pointer-events: none;
}

/* Keep the play affordance visible on posted-photo tiles even when generic button
   styles define their own pseudo-elements. The overlay is decorative and never
   intercepts the existing image-click action. */
.sgprofile-m3 .sgprofile-photos-m3-tile[data-sgprofile-snapic-media="photos"].sgsnapic-is-reel::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 30 !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.58) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,.36) !important;
    pointer-events: none !important;
}

.sgprofile-m3 .sgprofile-photos-m3-tile[data-sgprofile-snapic-media="photos"].sgsnapic-is-reel::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 31 !important;
    left: 50% !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 3px !important;
    transform: translate(-50%, -50%) !important;
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-left: 14px solid #fff !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)) !important;
    pointer-events: none !important;
}

/* Compact photo rail: keep the media type visible without covering the subject. */
.sgprofile-m3 .sgprofile-m3-photo-tile[data-sgprofile-snapic-media="sidebar"] .sgsnapic-reel-badge {
    top: 5px;
    right: 5px;
    min-width: 27px;
    width: 27px;
    height: 27px;
    min-height: 27px;
    justify-content: center;
    padding: 0;
}

.sgprofile-m3 .sgprofile-m3-photo-tile[data-sgprofile-snapic-media="sidebar"] .sgsnapic-reel-badge b,
.sgprofile-m3 .sgprofile-m3-photo-tile[data-sgprofile-snapic-media="sidebar"] .sgsnapic-reel-badge small {
    display: none;
}

.sgprofile-m3 .sgprofile-m3-photo-tile[data-sgprofile-snapic-media="sidebar"].sgsnapic-is-reel::before {
    width: 34px;
    height: 34px;
}

.sgprofile-m3 .sgprofile-m3-photo-tile[data-sgprofile-snapic-media="sidebar"].sgsnapic-is-reel::after {
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 10px;
}

/* Existing image-detail dialog becomes a single-item Reel viewer when the
   selected Snapic manifest says Reel. No gallery/group navigation is introduced. */
#imageModal[data-sgprofile-media-kind="reel"] .sgprofile-m3-snapic-dialog-body > figure {
    display: grid;
    place-items: center;
    min-height: min(70vh, 620px);
    background: #050505;
}

#imageModal .sgprofile-m3-snapic-modal-reel {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: min(76dvh, 780px);
    margin: auto;
    object-fit: contain;
    object-position: center;
    background: #000;
    border-radius: inherit;
}

#imageModal .sgprofile-m3-snapic-modal-reel[hidden] {
    display: none !important;
}

#imageModal[data-sgprofile-media-kind="reel"] #modalImage {
    display: none !important;
}

@media (max-width: 650px) {
    .sgprofile-m3 [data-sgprofile-snapic-media] .sgsnapic-reel-badge {
        top: 7px;
        right: 7px;
        min-height: 28px;
        padding: 0 8px;
    }

    .sgprofile-m3 [data-sgprofile-snapic-media].sgsnapic-is-reel::before {
        width: 44px;
        height: 44px;
    }

    #imageModal[data-sgprofile-media-kind="reel"] .sgprofile-m3-snapic-dialog-body > figure {
        min-height: 42vh;
    }

    #imageModal .sgprofile-m3-snapic-modal-reel {
        max-height: 68dvh;
    }
}

/* Photos page: one compact centered play control only. Hide the separate
   Reel pill/badge so it cannot look like a second circle. */
.sgprofile-m3 .sgprofile-photos-m3-tile[data-sgprofile-snapic-media="photos"].sgsnapic-is-reel .sgsnapic-reel-badge {
    display: none !important;
}

.sgprofile-m3 .sgprofile-photos-m3-tile[data-sgprofile-snapic-media="photos"].sgsnapic-is-reel::before {
    width: 30px !important;
    height: 30px !important;
    border-width: 1px !important;
    background: rgba(0, 0, 0, .62) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sgprofile-m3 .sgprofile-photos-m3-tile[data-sgprofile-snapic-media="photos"].sgsnapic-is-reel::after {
    border-top-width: 6px !important;
    border-bottom-width: 6px !important;
    border-left-width: 10px !important;
    margin-left: 2px !important;
}

/* Timeline Reel control uses real child elements rather than pseudo-elements.
   This prevents the timeline card's own ::after styling from hiding the triangle. */
.sgprofile-m3 [data-sgsnapic-media-entry="profile-timeline"].sgsnapic-is-reel > .sgsnapic-play-overlay,
.sgprofile-m3 [data-sgprofile-snapic-media="timeline"].sgsnapic-is-reel > .sgsnapic-play-overlay {
    position: absolute !important;
    z-index: 40 !important;
    left: 50% !important;
    top: 50% !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    border: 2px solid rgba(255,255,255,.95) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.58) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
    pointer-events: none !important;
    line-height: 0 !important;
}

.sgprofile-m3 [data-sgsnapic-media-entry="profile-timeline"].sgsnapic-is-reel > .sgsnapic-play-overlay > .sgsnapic-play-overlay-triangle,
.sgprofile-m3 [data-sgprofile-snapic-media="timeline"].sgsnapic-is-reel > .sgsnapic-play-overlay > .sgsnapic-play-overlay-triangle {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 4px !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 12px solid #fff !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-m3 [data-sgprofile-snapic-media] .sgsnapic-reel-badge,
    .sgprofile-m3 [data-sgprofile-snapic-media].sgsnapic-is-reel::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}