/* Pro user sticky bar */

.sticky-bar {
    display: none;
    width: 100%;
    max-width: calc(100% - 70%);
    position: fixed;
    bottom: 30px;
    padding: 12px 20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    overflow: hidden;
    /* The fill used to be rgba(255, 255, 255, 0) - frosted glass with the
       frost left out. Over the page's white it was invisible and looked
       fine; over a photo, which is most of where it floats, the blur was
       the only thing painting, so the bar read as a smudge on the image
       with the studio name ghosted into it. An alpha fill is what makes
       backdrop-filter look like glass rather than a smear, and it is also
       what gives the dark label something to sit on. */
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1);
}

.sticky-bar-grid {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: space-between;
    column-gap: 11px;
    row-gap: 5px;
}

.sticky-bar-logo {
    display: block;
    width: 66px;
    height: 66px;
    grid-column: 1;
    grid-row: 1 / 3;
}

.sticky-bar-logo img {
    width: 66px;
    height: 66px;
    object-fit: cover;
    border-radius: 10px;
}

.sticky-bar-logo img.logoImage {
    max-width: 66px;
    max-height: 66px;
}

.sticky-bar-meta,
.sticky-bar-actions {
    display: contents;
}

.sticky-bar-meta .title {
    font-size: 22px;
    line-height: 1.2;
    grid-column: 2 / 4;
    grid-row: 1;
}

/* City and country read as one line ("Torino, Italy"), the way the design shows
   it. min-width:0 lets the 1fr track shrink so an unusually long pair ellipsises
   instead of wrapping the bar onto a second row. */
.sticky-bar-meta .location {
    font-size: 0.778rem;
    line-height: 1.3;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    grid-column: 3;
    grid-row: 2;
}

.sticky-bar-grid:not(:has(.tag)) .sticky-bar-meta .location {
    grid-column: 2 / 4;
}


.sticky-bar-actions .tag {
    padding: 3px 12px;
    border-radius: 100px;
    background: #e6ff9d;
    font-size: 0.778rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
}

.sticky-bar a.hire {
    /* Height tracks the logo (~0.68x) the way the original design does — the
       old 28px pill read as a thin sliver next to the 66px avatar. */
    min-width: 117px;
    height: 45px;
    padding: 0 22px;
    background: #000;
    border-radius: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    color: #fff;
    position: relative;
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
}

@media (max-width: 1024px) {
    .sticky-bar {
        max-width: calc(100% - 45%);
    }
}

/* Mobile keeps the desktop placement — Available sits beside the location on row
   two, and the Profile pill spans both rows — and only scales the pieces down.
   The old mobile grid moved the tag up to row one and dropped the pill into row
   two, which stretched that row to the pill's height and left a dead gap between
   the name and the location that the 48px avatar did not match. */
@media (max-width: 768px) {
    .sticky-bar {
        padding: 8px 10px;
        max-width: calc(100% - 40%);
        bottom: 16px;
    }

    .sticky-bar-grid {
        column-gap: 8px;
    }

    .sticky-bar-logo,
    .sticky-bar-logo img {
        width: 48px;
        height: 48px;
    }

    .sticky-bar-logo img.logoImage {
        max-width: 48px;
        max-height: 48px;
    }

    .sticky-bar-meta .title {
        font-size: 16px;
    }

    .sticky-bar-actions .tag {
        font-size: 0.7rem;
        padding: 3px 9px;
        gap: 0.35rem;
    }

    .sticky-bar a.hire {
        min-width: 88px;
        height: 40px;
        padding: 0 16px;
        font-size: 15px;
    }
}


@media (max-width: 668px) {
    /* A fixed 12px gutter rather than 20% of the viewport — on a phone the
       percentage left only ~52px for the location, which ellipsised it away. */
    .sticky-bar {
        padding: 8px 10px;
        max-width: calc(100% - 24px);
        bottom: 16px;
    }
}