/*
 * "What I offer" on the public profile — M13.2, 1 Oct 2026.
 *
 * A sheet of its own, loaded after the profile's own sheets, because those are
 * extracted verbatim from the Blade and are never hand-edited.
 *
 * Every colour comes from the profile theme's tokens — `--ink`, `--muted`,
 * `--brand`, `--border`, `--card` — which all sixty themes define. Nothing is a
 * literal: a hard-coded grey is invisible on several of them, and the glossy
 * twins change the surface underneath.
 *
 * The `m13-` prefix follows the convention the plan screens use for new
 * elements, so it is obvious at a glance which markup is not the Blade's.
 */

.m13-services {
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}

.m13-service {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .85rem .9rem;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 70%, transparent);
}

.m13-service__body {
    flex: 1 1 auto;
    min-width: 0;
}

.m13-service__link { display: flex; align-items: flex-start; gap: .8rem; width: 100%; min-width: 0; text-decoration: none; color: inherit; border-radius: .35rem; }
.m13-service__link:focus-visible { outline: 3px solid var(--brand); outline-offset: .3rem; }
.m13-service:has(.m13-service__link:hover) { border-color: var(--brand); }
.m13-service__book { display: block; margin-top: .4rem; font-size: .7rem; font-weight: 600; }

.m13-service__name {
    display: block;
    font-weight: 750;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--ink);
}

.m13-service__desc {
    display: block;
    margin-top: .2rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--muted);
}

.m13-service__meta {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}

/*
 * The price is the reason the row exists, so it is the one thing allowed to
 * take the brand colour. `white-space: nowrap` because "from ₱4,500.00" wrapping
 * mid-figure reads as two numbers.
 */
.m13-service__price {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 800;
    font-size: .95rem;
    white-space: nowrap;
    color: var(--brand);
}

.m13-services__note {
    margin: .85rem 0 0;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--muted);
}

/*
 * At the desk width the rows get room to breathe but the price stays pinned
 * right, so a visitor scanning a column of figures reads one column.
 */
@media (min-width: 1100px) {
    .m13-service {
        padding: 1rem 1.1rem;
    }

    .m13-service__name {
        font-size: 1rem;
    }

    .m13-service__price {
        font-size: 1.05rem;
    }
}

/*
 * The pointer under the About fee line (M13.3).
 *
 * A quiet sentence, not a control: it tells a reader the itemised list exists
 * so the fee row and the Services block read as one thing described twice.
 * Muted and small, because the fee above it is the answer they came for.
 */
.m13-fee__pointer {
    margin: .3rem 0 0;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--muted);
}