/*
 * Team photos and placeholders, shared by the public Team page and the Team Manager so a
 * crop looks the same in both.
 *
 * An image inside .tp-photo is positioned by team-photo.js from its data-* attributes. It is
 * hidden until that has happened, so a photo never flashes at its natural size first.
 */
.tp-photo {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e9ecf3;
    container-type: size;
}
.tp-photo > img {
    position: absolute;
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    visibility: hidden;
    user-select: none;
    -webkit-user-drag: none;
}
.tp-photo > img.tp-ready {
    visibility: visible;
}

/*
 * Placeholder for a member with no photo: a clean head-and-shoulders silhouette on the same
 * navy gradient as the page hero, with a fine inner ring. Drawn entirely in CSS so no markup
 * is needed beyond the .tp-placeholder class.
 */
.tp-placeholder {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='37' r='16' fill='%23dbe3f1'/%3E%3Cpath d='M16 100c0-21 15-35 34-35s34 14 34 35z' fill='%23dbe3f1'/%3E%3C/svg%3E")
            center / 100% 100% no-repeat,
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.tp-placeholder::after {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    pointer-events: none;
}

.tp-size-sm { width: 64px;  height: 64px; }
.tp-size-lg { width: 280px; height: 280px; }

/* The public page's large photo frame */
.member-photo-circle {
    width: 290px;
    height: 290px;
    border: 6px solid #0f3460;
    box-shadow: 0 20px 50px rgba(15, 52, 96, 0.22);
}

@media (max-width: 767px) {
    .member-photo-circle { width: 220px; height: 220px; margin-bottom: 2rem; }
}