/*-----------------------------------------------------------------------------------

    Public profile — floating identity dock

    The page keeps its original stacked layout: hero banner, biography, course
    grid. Scrolling to the courses used to leave the visitor with no idea whose
    courses they were reading, so a dock rises from the bottom edge once the
    biography has passed — avatar, name, stats, rating, socials and a one-line
    bio. Invisible until then, and it drops back out on the way up.

    Why the bottom edge and not the top, left or right:
      - Top is taken. The theme pins its own translucent header there on scroll
        (.tp-header-sticky, position:fixed, z-index:99), so a second glass bar
        directly under it reads as a double header.
      - Left/right would overlap the content. The layout container caps at
        1140px, which leaves roughly 113px of gutter on a 1366px screen — far
        less than this card needs.
      - The bottom edge carries nothing but the 44px back-to-top button, and
        movement arriving from an otherwise empty edge is what gets noticed.

    Template: tutor/public-profile.php
    Behaviour: assets/js/instructor-profile.js
    Loaded by: acadia_profile_styles() in inc/common/acadia-scripts.php

-----------------------------------------------------------------------------------*/

/*----------------------------------------
    1. Tokens + scroll marker
----------------------------------------*/
.acadia-profile-sticky {
    --acadia-pf-accent: #5169F1;
    --acadia-pf-accent-deep: #3B52D6;
    --acadia-pf-tint: rgba(81, 105, 241, 0.09);
    --acadia-pf-border: rgba(22, 22, 19, 0.08);
    --acadia-pf-text: var(--tp-heading-primary, #161613);
    --acadia-pf-muted: var(--tp-text-body, #57595F);
}

.acadia-profile-sentinel {
    height: 1px;
    margin-top: -1px;
    pointer-events: none;
}

/*----------------------------------------
    2. The dock
----------------------------------------*/
.acadia-profile-sticky {
    position: fixed;
    z-index: 98; /* under the theme header (99) and the back-to-top button */
    bottom: 26px;
    left: 50%;
    width: min(1140px, calc(100% - 40px));
    transform: translateX(-50%);
    padding: 12px 26px;
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(22, 22, 19, 0.16), 0 2px 8px rgba(22, 22, 19, 0.06);

    /* Parked below the fold until the sentinel scrolls past */
    opacity: 0;
    visibility: hidden;
    transition: bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease,
                visibility 0s linear 0.45s;
}

/* Hidden state pushes it clear of the viewport bottom */
.acadia-profile-sticky:not(.is-visible) {
    bottom: -140px;
}

.acadia-profile-sticky.is-visible {
    opacity: 1;
    visibility: visible;
    transition: bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .acadia-profile-sticky,
    .acadia-profile-sticky.is-visible {
        bottom: 26px;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    .acadia-profile-sticky.is-visible {
        transition: opacity 0.2s ease, visibility 0s;
    }
}

/* The back-to-top button lives at right:20px / bottom:50px and would sit on
   top of the dock, so it steps up while the dock is out. */
body.acadia-profile-docked .back-to-top-wrapper.back-to-top-btn-show {
    bottom: 120px;
}

/* Reading progress hairline, tucked along the dock's top edge */
.acadia-profile-sticky-progress {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    background-color: rgba(81, 105, 241, 0.12);
}

.acadia-profile-sticky-progress::after {
    position: absolute;
    content: "";
    inset: 0;
    background-image: linear-gradient(90deg, var(--acadia-pf-accent), var(--acadia-pf-accent-deep));
    transform: scaleX(var(--acadia-pf-progress, 0));
    transform-origin: left center;
    transition: transform 0.1s linear;
}

/*----------------------------------------
    3. Layout
    The dock is already width-capped, so the .container it wraps must not
    apply its own max-width and gutters on top.
----------------------------------------*/
.acadia-profile-sticky > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.acadia-profile-sticky-inner {
    display: flex;
    align-items: center;
    gap: 22px;
}

/*----------------------------------------
    4. Identity block
----------------------------------------*/
.acadia-profile-sticky-id {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Gradient ring around the avatar */
.acadia-profile-sticky-avatar {
    display: block;
    flex: 0 0 auto;
    padding: 2px;
    background-image: linear-gradient(135deg, var(--acadia-pf-accent), var(--acadia-pf-accent-deep));
    border-radius: 50%;
}

.acadia-profile-sticky-avatar img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    background-color: var(--tp-common-white, #ffffff);
    border: 2px solid var(--tp-common-white, #ffffff);
    border-radius: 50%;
}

.acadia-profile-sticky-text {
    display: block;
    min-width: 0;
}

.acadia-profile-sticky-name {
    display: block;
    font-family: var(--tp-ff-heading, 'Outfit', sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--acadia-pf-text);
}

.acadia-profile-sticky-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 1px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--acadia-pf-muted);
}

/* Dot separator between the stats */
.acadia-profile-sticky-meta span {
    position: relative;
}

.acadia-profile-sticky-meta span + span::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -9px;
    width: 4px;
    height: 4px;
    background-color: var(--acadia-pf-accent);
    border-radius: 50%;
    transform: translateY(-50%);
}

/*----------------------------------------
    5. One-line bio
----------------------------------------*/
.acadia-profile-sticky-bio {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0 22px;
    font-family: var(--tp-ff-body, 'Outfit', sans-serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--acadia-pf-muted);
    border-left: 1px solid var(--acadia-pf-border);
    border-right: 1px solid var(--acadia-pf-border);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*----------------------------------------
    6. Rating + socials
----------------------------------------*/
.acadia-profile-sticky-aside {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.acadia-profile-sticky-rating .ratings {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--acadia-pf-text);
}

.acadia-profile-sticky-rating .tutor-ratings-stars {
    display: inline-flex;
    gap: 2px;
}

.acadia-profile-sticky-rating .rating-digits {
    font-weight: 600;
}

.acadia-profile-sticky-rating .rating-total-meta {
    color: var(--acadia-pf-muted);
}

/* .tp-profile-social paints these white for the banner — unreadable here */
.acadia-profile-sticky-social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.acadia-profile-sticky-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--acadia-pf-accent);
    background-color: var(--acadia-pf-tint);
    border: 0;
    border-radius: 50%;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.acadia-profile-sticky-social a:hover {
    color: var(--tp-common-white, #ffffff);
    background-color: var(--acadia-pf-accent);
    transform: translateY(-2px);
}

/*----------------------------------------
    7. Responsive
----------------------------------------*/
@media (max-width: 1199px) {
    .acadia-profile-sticky-bio {
        -webkit-line-clamp: 1;
        padding: 0 18px;
    }
}

@media (max-width: 991px) {
    .acadia-profile-sticky-bio {
        display: none;
    }

    .acadia-profile-sticky-aside {
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .acadia-profile-sticky {
        bottom: 16px;
        width: calc(100% - 24px);
        padding: 10px 16px;
        border-radius: 18px;
    }

    .acadia-profile-sticky:not(.is-visible) {
        bottom: -140px;
    }

    .acadia-profile-sticky-inner {
        gap: 12px;
    }

    .acadia-profile-sticky-avatar img {
        width: 38px;
        height: 38px;
    }

    .acadia-profile-sticky-name {
        font-size: 15px;
    }

    .acadia-profile-sticky-meta {
        font-size: 12px;
        gap: 12px;
    }

    .acadia-profile-sticky-social {
        display: none;
    }
}

@media (max-width: 479px) {
    .acadia-profile-sticky-rating .rating-total-meta,
    .acadia-profile-sticky-rating .tutor-ratings-stars {
        display: none;
    }
}

/*----------------------------------------
    8. RTL
----------------------------------------*/
.rtl .acadia-profile-sticky-progress {
    transform-origin: right center;
}

.rtl .acadia-profile-sticky-meta span + span::before {
    left: auto;
    right: -9px;
}

.rtl .acadia-profile-sticky-aside {
    margin-left: 0;
    margin-right: auto;
}


/*===================================================================
    PART B — HERO BANNER + BIOGRAPHY

    Both blocks are restyled from here rather than in acadia-core.css,
    because this stylesheet only loads on the public profile page — the
    Tutor dashboard reuses the same class names and must stay untouched.
===================================================================*/

/*----------------------------------------
    9. Hero banner
----------------------------------------*/
.tutor-lms-instructor-profile {
    --acadia-pf-accent: #5169F1;
    --acadia-pf-accent-deep: #3B52D6;
    --acadia-pf-accent-soft: #7C8CF8;
}

/*
 * acadia-core.css hangs the avatar out of the panel by pushing the whole
 * .tp-instructor-wrap down 46px, which also drags the stats and the social row
 * onto the page background — where translucent white pills are invisible.
 *
 * The transform is dropped and the banner gets a real floor instead; only the
 * avatar is pulled below the edge, by its own negative margin further down.
 */
.tutor-lms-instructor-profile .tp-dashboard-banner-bg {
    padding-top: 150px;
    padding-bottom: 42px;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(10, 12, 20, 0.18);
}

/*
 * acadia-customss.css already lays a readability scrim over the cover photo.
 * Rather than stacking a second one, its gradient is deepened and its corner
 * radius re-matched to the 28px above — a 14px scrim inside a 28px panel
 * leaves four visible slivers.
 */
.tutor-lms-instructor-profile .tp-dashboard-banner-bg::before {
    border-radius: 28px;
    background-image: linear-gradient(
        to top,
        rgba(9, 11, 22, 0.92) 0%,
        rgba(9, 11, 22, 0.6) 34%,
        rgba(9, 11, 22, 0.14) 64%,
        rgba(9, 11, 22, 0) 100%
    );
}

/* Accent sheen across the top-left, above the scrim so it keeps its colour */
.tutor-lms-instructor-profile .tp-dashboard-banner-bg::after {
    position: absolute;
    z-index: 1;
    content: "";
    inset: 0;
    border-radius: 28px;
    background-image: linear-gradient(118deg, rgba(81, 105, 241, 0.3), transparent 44%);
    pointer-events: none;
}

.tutor-lms-instructor-profile .tp-instructor-wrap {
    align-items: flex-end;
    gap: 24px;
    padding: 0 44px;
    transform: none;
}

.tutor-lms-instructor-profile .tp-instructor-info {
    align-items: flex-end;
    gap: 26px;
}

/*----------------------------------------
    10. Avatar — gradient ring
----------------------------------------*/
.tutor-lms-instructor-profile .tp-instructor-avatar {
    position: relative;
    /* The only thing that breaks the panel edge */
    margin-right: 0;
    margin-bottom: -74px;
}

.tutor-lms-instructor-profile .tp-instructor-avatar::before {
    position: absolute;
    content: "";
    inset: -5px;
    border-radius: 50%;
    background-image: linear-gradient(
        140deg,
        var(--acadia-pf-accent-soft),
        var(--acadia-pf-accent) 52%,
        var(--acadia-pf-accent-deep)
    );
}

.tutor-lms-instructor-profile .tp-instructor-avatar img {
    position: relative;
    width: 148px;
    height: 148px;
    padding: 5px;
    background-color: var(--tp-common-white, #ffffff);
    box-shadow: 0 20px 44px rgba(9, 11, 22, 0.42);
}

/*----------------------------------------
    11. Name + stat pills
----------------------------------------*/
.tutor-lms-instructor-profile .tp-instructor-content {
    margin-top: 0;
}

.tutor-lms-instructor-profile .tp-instructor-title {
    margin-bottom: 12px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(9, 11, 22, 0.45);
}

.tutor-lms-instructor-profile .tp-instructor-rate {
    flex-wrap: wrap;
    gap: 8px;
}

/* Plain text becomes a frosted pill */
.tutor-lms-instructor-profile .tp-instructor-rate .profile {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    background-color: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.tutor-lms-instructor-profile .tp-instructor-rate .profile:hover {
    background-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-2px);
}

/* The theme separates the stats with a dot; the pills already do that job */
.tutor-lms-instructor-profile .tp-instructor-rate .profile:not(:last-child)::after {
    display: none;
}

/*----------------------------------------
    12. Rating + socials
----------------------------------------*/
.tutor-lms-instructor-profile .tp-instructor-profile-right-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    text-align: right;
}

.tutor-lms-instructor-profile .tutor-rating-container .ratings {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
}

.tutor-lms-instructor-profile .tutor-rating-container .tutor-ratings-stars {
    display: inline-flex;
    gap: 2px;
}

.tutor-lms-instructor-profile .tp-profile-social {
    display: flex;
    gap: 8px;
    margin-top: 0;
}

.tutor-lms-instructor-profile .tp-profile-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 0;
    line-height: 1;
    color: var(--tp-common-white, #ffffff);
    background-color: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    transition: color 0.25s ease, background-color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease;
}

.tutor-lms-instructor-profile .tp-profile-social a:hover {
    color: var(--acadia-pf-accent-deep);
    background-color: var(--tp-common-white, #ffffff);
    border-color: var(--tp-common-white, #ffffff);
    transform: translateY(-3px);
}

/*----------------------------------------
    13. Biography card
----------------------------------------*/
.tp-profile-arae .tp-profile-box.my-profile {
    position: relative;
    overflow: hidden;
    padding: 44px 48px;
    border: 1px solid rgba(22, 22, 19, 0.06);
    border-radius: 28px;
    box-shadow: 0 12px 40px rgba(10, 12, 20, 0.06);
}

/* Faint wash in the top-left so the card is not a plain rectangle */
.tp-profile-arae .tp-profile-box.my-profile::before {
    position: absolute;
    content: "";
    top: -120px;
    left: -80px;
    width: 320px;
    height: 320px;
    background-image: radial-gradient(circle, rgba(81, 105, 241, 0.1), transparent 68%);
    pointer-events: none;
}

/* Oversized quote mark watermark */
.tp-profile-arae .tp-profile-box.my-profile::after {
    position: absolute;
    content: "\201C";
    top: -46px;
    right: 24px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 200px;
    line-height: 1;
    color: rgba(81, 105, 241, 0.07);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/*
 * Editorial two-column split: the heading holds a narrow label column on the
 * left, the copy runs down a measured column on the right. Stacked, the text
 * ran out halfway across and left the right half of the card empty.
 *
 * Grid rather than flex because the bio arrives as an unknown number of
 * siblings — Tutor wraps it in .tp-course-details-2-instructor-text when a bio
 * exists, and prints a bare text node when it does not. Everything except the
 * heading is sent to column 2, so both shapes land correctly.
 */
.tp-profile-arae .tp-profile-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
}

.tp-profile-arae .tp-profile-content > * {
    grid-column: 2;
    min-width: 0;
}

/* Heading gets a gradient rule instead of sitting on its own */
.tp-profile-arae .tp-profile-title {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-bottom: 16px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--tp-heading-primary, #161613);
}

.tp-profile-arae .tp-profile-title::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 54px;
    height: 4px;
    background-image: linear-gradient(90deg, var(--acadia-pf-accent, #5169F1), var(--acadia-pf-accent-deep, #3B52D6));
    border-radius: 4px;
}

.tp-profile-arae .tp-profile-content p {
    margin-bottom: 18px;
    font-family: var(--tp-ff-body, 'Outfit', sans-serif);
    font-size: 17px;
    line-height: 1.85;
    color: var(--tp-text-body, #57595F);
}

.tp-profile-arae .tp-profile-content p:last-child {
    margin-bottom: 0;
}

/* Vertical hairline marking the split */
.tp-profile-arae .tp-profile-title::before {
    position: absolute;
    content: "";
    top: 4px;
    bottom: -8px;
    right: -28px;
    width: 1px;
    background-image: linear-gradient(to bottom, rgba(81, 105, 241, 0.28), transparent);
}

/*----------------------------------------
    14. Hero + biography responsive
----------------------------------------*/
@media (max-width: 1199px) {
    .tutor-lms-instructor-profile .tp-instructor-title {
        font-size: 32px;
    }

    .tutor-lms-instructor-profile .tp-instructor-avatar img {
        width: 128px;
        height: 128px;
    }
}

@media (max-width: 991px) {
    .tutor-lms-instructor-profile .tp-dashboard-banner-bg {
        padding-top: 130px;
        padding-bottom: 32px;
        border-radius: 22px;
    }

    .tutor-lms-instructor-profile .tp-dashboard-banner-bg::before,
    .tutor-lms-instructor-profile .tp-dashboard-banner-bg::after {
        border-radius: 22px;
    }

    .tutor-lms-instructor-profile .tp-instructor-wrap {
        padding: 0 28px;
    }

    .tutor-lms-instructor-profile .tp-instructor-avatar {
        margin-bottom: -56px;
    }

    .tutor-lms-instructor-profile .tp-instructor-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .tutor-lms-instructor-profile .tp-instructor-profile-right-info {
        align-items: flex-start;
        text-align: left;
    }

    .tp-profile-arae .tp-profile-box.my-profile {
        padding: 36px 32px;
        border-radius: 22px;
    }

    /* Not enough width left for a label column — back to stacked */
    .tp-profile-arae .tp-profile-content {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .tp-profile-arae .tp-profile-title {
        margin-bottom: 24px;
    }

    .tp-profile-arae .tp-profile-title::before {
        display: none;
    }

    .tp-profile-arae .tp-profile-content > * {
        grid-column: 1;
    }
}

@media (max-width: 767px) {
    .tutor-lms-instructor-profile .tp-dashboard-banner-bg {
        padding-top: 110px;
        padding-bottom: 26px;
    }

    .tutor-lms-instructor-profile .tp-instructor-wrap {
        padding: 0 20px;
    }

    /* Stacked here, so a negative margin would pull the name over the avatar */
    .tutor-lms-instructor-profile .tp-instructor-avatar {
        margin-bottom: 0;
    }

    .tutor-lms-instructor-profile .tp-instructor-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .tutor-lms-instructor-profile .tp-instructor-avatar img {
        width: 104px;
        height: 104px;
    }

    .tutor-lms-instructor-profile .tp-instructor-title {
        font-size: 26px;
    }

    .tutor-lms-instructor-profile .tp-instructor-rate .profile {
        padding: 7px 14px;
        font-size: 13px;
    }

    .tp-profile-arae .tp-profile-box.my-profile {
        padding: 30px 24px;
    }

    .tp-profile-arae .tp-profile-box.my-profile::after {
        font-size: 150px;
        right: 12px;
    }

    .tp-profile-arae .tp-profile-title {
        font-size: 23px;
    }

    .tp-profile-arae .tp-profile-content p {
        font-size: 16px;
        line-height: 1.8;
    }
}

/*----------------------------------------
    15. Hero + biography RTL
----------------------------------------*/
.rtl .tutor-lms-instructor-profile .tp-instructor-profile-right-info {
    align-items: flex-start;
    text-align: left;
}

.rtl .tp-profile-arae .tp-profile-box.my-profile::before {
    left: auto;
    right: -80px;
}

.rtl .tp-profile-arae .tp-profile-box.my-profile::after {
    right: auto;
    left: 24px;
}

.rtl .tp-profile-arae .tp-profile-title::after {
    left: auto;
    right: 0;
}