/* Kinkgram ProfileUiAsset — pack + forceCopy (do not put this in theme SCSS).
 *
 * Desktop: Clean as-is + centred counters + name shadow on cover.
 * Mobile: cover fills like desktop; avatar + name inside cover; no hang gap.
 */

.panel-profile .statistics .entry,
.panel.profile .statistics .entry {
    text-align: center;
}

@media (min-width: 992px) {
    .panel-profile .panel-profile-header .img-profile-data,
    .panel-profile .panel-profile-header .img-profile-data h1,
    .panel-profile .panel-profile-header .img-profile-data h2,
    .panel-profile .panel-profile-header .img-profile-data h1 a,
    .panel-profile .panel-profile-header .img-profile-data h2 a {
        text-shadow:
            0 1px 1px rgba(0, 0, 0, 0.85),
            0 0 1px rgba(0, 0, 0, 0.9) !important;
    }
}

@media (max-width: 991.98px) {
    #layout-content .panel-profile {
        overflow: visible !important;
    }

    #layout-content .panel-profile .panel-profile-header {
        --kg-banner-h: 132px;
        --kg-avatar: 56px;
        --kg-in-pad: 10px;

        position: relative !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* --- Cover: fixed box, image absolutely fills (beats letterbox / min-height fights) --- */
    #layout-content .panel-profile .panel-profile-header .profile-banner-image-container {
        position: relative !important;
        width: 100% !important;
        height: var(--kg-banner-h) !important;
        min-height: var(--kg-banner-h) !important;
        max-height: var(--kg-banner-h) !important;
        overflow: hidden !important;
        background: #111 !important;
    }

    #layout-content .panel-profile .panel-profile-header
        .profile-banner-image-container > img.img-profile-header-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Name/nick inside cover, left of avatar */
    #layout-content .panel-profile .panel-profile-header .img-profile-data {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: calc(var(--kg-avatar) + var(--kg-in-pad) * 2) !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 20px 12px var(--kg-in-pad) calc(var(--kg-avatar) + 18px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0.75) 100%
        ) !important;
        z-index: 2;
        /* Let cover upload/crop/delete buttons receive taps (they sit under this overlay) */
        pointer-events: none !important;
    }

    #layout-content .panel-profile .panel-profile-header .img-profile-data a {
        pointer-events: auto !important;
    }

    /* Cover edit buttons must sit above name overlay (z-index:2) */
    #layout-content .panel-profile .panel-profile-header .profile-banner-image-container .image-upload-buttons {
        z-index: 30 !important;
        pointer-events: auto !important;
    }

    #layout-content .panel-profile .panel-profile-header .profile-banner-image-container .image-upload-buttons .btn,
    #layout-content .panel-profile .panel-profile-header .profile-banner-image-container .image-upload-buttons a,
    #layout-content .panel-profile .panel-profile-header .profile-banner-image-container .image-upload-buttons label {
        pointer-events: auto !important;
        position: relative;
        z-index: 31;
    }

    #layout-content .panel-profile .panel-profile-header .img-profile-data,
    #layout-content .panel-profile .panel-profile-header .img-profile-data h1,
    #layout-content .panel-profile .panel-profile-header .img-profile-data h2,
    #layout-content .panel-profile .panel-profile-header .img-profile-data h1 a,
    #layout-content .panel-profile .panel-profile-header .img-profile-data h2 a {
        color: #fff !important;
        text-shadow:
            0 1px 1px rgba(0, 0, 0, 0.9),
            0 0 2px rgba(0, 0, 0, 0.85) !important;
    }

    #layout-content .panel-profile .panel-profile-header .img-profile-data h1,
    #layout-content .panel-profile .panel-profile-header .img-profile-data h1 a {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #layout-content .panel-profile .panel-profile-header .img-profile-data h2 {
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
        margin: 2px 0 0 !important;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * Avatar: square circle (same W/H). Beat core mobile 100×100 + inline style.
     * Sibling of banner so overflow:hidden on banner cannot clip it.
     */
    #layout-content .panel-profile .panel-profile-header .profile-user-photo-container,
    #layout-content .panel-profile .panel-profile-header #profilefileupload {
        width: var(--kg-avatar) !important;
        height: var(--kg-avatar) !important;
        min-width: var(--kg-avatar) !important;
        min-height: var(--kg-avatar) !important;
        max-width: var(--kg-avatar) !important;
        max-height: var(--kg-avatar) !important;
        aspect-ratio: 1 / 1 !important;
        top: auto !important;
        bottom: var(--kg-in-pad) !important;
        left: 10px !important;
        z-index: 5;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #layout-content .panel-profile .panel-profile-header .profile-user-photo-container .profile-user-photo,
    #layout-content .panel-profile .panel-profile-header .profile-user-photo-container img.profile-user-photo {
        width: var(--kg-avatar) !important;
        height: var(--kg-avatar) !important;
        min-width: var(--kg-avatar) !important;
        min-height: var(--kg-avatar) !important;
        max-width: var(--kg-avatar) !important;
        max-height: var(--kg-avatar) !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    /*
     * Kill hang reservation: core uses padding-left ~100px + body min-height
     * for the avatar that used to hang below the cover.
     */
    #layout-content .panel-profile > .panel-body {
        padding-top: 0 !important;
        padding-bottom: 8px !important;
        margin-top: 0 !important;
        min-height: 0 !important;
    }

    #layout-content .panel-profile .panel-profile-controls {
        padding: 8px 8px 4px !important;
        margin: 0 !important;
    }

    #layout-content .panel-profile .panel-profile-controls > .container,
    #layout-content .panel-profile .panel-profile-controls .row,
    #layout-content .panel-profile .panel-profile-controls .col-lg-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #layout-content .panel-profile .panel-profile-controls .statistics {
        float: none !important;
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0 6px;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #layout-content .panel-profile .panel-profile-controls .statistics > a {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        text-decoration: none;
        text-align: center;
    }

    #layout-content .panel-profile .panel-profile-controls .statistics .entry {
        float: none !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0 !important;
        width: 100%;
        margin: 0 !important;
        padding: 0;
        text-align: center;
        line-height: 1 !important;
    }

    #layout-content .panel-profile .panel-profile-controls .statistics .entry br {
        display: none !important;
    }

    #layout-content .panel-profile .panel-profile-controls .statistics .entry .count {
        display: block;
        font-size: 15px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #layout-content .panel-profile .panel-profile-controls .statistics .entry .title {
        display: block;
        font-size: 10px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #layout-content .panel-profile .panel-profile-controls .controls.controls-header {
        float: none !important;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        margin-top: 8px;
    }
}