/* ==========================================================
   PUBLIC COMPANY PLATFORM -- Phase 2 app-contributed capability pages
   (/c/{slug}/{page_slug} when the page is capability-backed, not
   native). Owns Company::public.capability_page's own chrome.

   The .cp-service-* classes are the shared "content block inside the
   public site shell" pattern -- Service POS's services_listing.php
   fragment uses them, and any future app-contributed capability page
   should reuse this same pattern (card/list/price) rather than each app
   inventing its own. The DATA stays app-owned; this shell/presentation
   layer is Public Company Platform's own concern.
========================================================== */

.cp-capability-header {
    padding: 28px 0 18px;
}

.cp-capability-back {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cp-primary, #137A5A);
    text-decoration: none;
    margin-bottom: 10px;
}

.cp-capability-back:hover { text-decoration: underline; }

.cp-capability-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--cp-heading);
}

.cp-service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.cp-service-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cp-service-card__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--cp-radius-md);
    object-fit: cover;
    flex: 0 0 64px;
}

.cp-service-card__body { min-width: 0; flex: 1; }

.cp-service-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.cp-service-card__row strong {
    font-size: 15.5px;
    color: var(--cp-heading);
}

.cp-service-card__price {
    font-weight: 800;
    color: var(--cp-primary, #137A5A);
    white-space: nowrap;
}

.cp-service-card__body p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--cp-text-muted);
}