/* =====================================================================
   Faraz skin — CMS pages (Views/Blog/PageDetail.cshtml): the service
   pages and the legal pages. The header (.fz-bhero) and the article
   text (.fz-prose) come from shared/layout.css.
   ===================================================================== */

.fz-sec.fz-page-body {
    padding-block: 48px 96px;
    background: var(--fz-surface);
}

.fz-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}

    .fz-page-layout .fz-prose {
        max-width: 780px;
    }

.fz-page-aside {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
}

.fz-page-links {
    display: grid;
    padding: 8px 0;
    border: 1px solid var(--fz-line);
    border-radius: 16px;
    background: var(--fz-bg);
}

    .fz-page-links b {
        padding: 10px 20px 6px;
        font-size: 13px;
        font-weight: 700;
        color: var(--fz-muted);
    }

    .fz-page-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 44px;
        padding: 0 20px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--fz-ink-3);
    }

        .fz-page-links a:hover {
            color: var(--fz-brand);
        }

        .fz-page-links a[aria-current="page"] {
            background: var(--fz-surface);
            color: var(--fz-brand);
            font-weight: 800;
            box-shadow: inset -3px 0 0 var(--fz-brand);
        }

        .fz-page-links a .fz-ico {
            width: 16px;
            height: 16px;
            opacity: .6;
        }

.fz-page-ask {
    display: grid;
    gap: 10px;
    padding: 24px 22px;
    border-radius: 18px;
    background: var(--fz-ink);
    color: var(--fz-on-ink-muted);
}

    .fz-page-ask b {
        font-size: 18px;
        font-weight: 800;
        color: #fff;
    }

    .fz-page-ask p {
        font-size: 14px;
        line-height: 1.9;
    }

    .fz-page-ask .fz-btn-ghost {
        background: transparent;
        border-color: var(--fz-ink-3);
        color: var(--fz-on-ink);
    }

        .fz-page-ask .fz-btn-ghost:hover {
            border-color: #fff;
            color: #fff;
        }

.fz-page-comments {
    max-width: 780px;
    margin-top: 56px;
}

@media (max-width: 991.98px) {
    .fz-page-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .fz-page-aside {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .fz-sec.fz-page-body {
        padding-block: 28px 64px;
    }
}