/*
 * سرِ صفحه‌های خصوصی وب اپ (home/templates/home/app_base.html). اول گوشی، بعد lg.
 * روی گوشی کارت‌ها لبه‌به‌لبه‌اند و سرِ صفحه مثل نوار بالای اپ برگشت و عنوان دارد؛ از lg به بعد
 * مسیر صفحه جای دکمه‌ی برگشت را می‌گیرد.
 */

.app-page.container {
    padding-inline: 0;
    /* هدر ثابت ۱۸ پیکسل روی main می‌افتد (site-nav.css)؛ بدون این، مسیر و عنوان زیر هدر می‌روند */
    padding-top: var(--site-header-overlap);
}

.app-head {
    padding: .25rem .5rem .75rem;
}

.app-crumbs {
    display: none;
}

.app-titlebar {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.app-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #212529;
    font-size: 1.35rem;
    text-decoration: none;
}

.app-back:hover {
    background: rgba(0, 0, 0, .05);
    color: #000;
}

.app-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.app-actions {
    display: flex;
    flex-shrink: 0;
    gap: .5rem;
}

.app-messages {
    padding-inline: .75rem;
}

@media (min-width: 992px) {
    .app-page.container {
        padding-inline: calc(var(--bs-gutter-x) * .5);
    }

    .app-head {
        padding: .5rem 0 1.25rem;
    }

    .app-crumbs {
        display: flex;
        gap: .5rem;
        margin-bottom: .5rem;
        font-size: .85rem;
        color: #6c757d;
    }

    .app-back {
        display: none;
    }

    .app-title {
        font-size: 1.75rem;
        font-weight: 800;
    }

    .app-messages {
        padding-inline: 0;
    }
}