/* ==========================================================
   PUBLIC COMPANY PLATFORM -- generic page-shell/typography primitives
   shared across every public page (native pages, capability pages, the
   404 page): the content column, page titles, meta pill lists, the
   generic card/section wrapper, contact details, link chips, and the
   site footer. Owns nothing homepage-, header-, or hero-specific --
   those are 05/06/07_*.css.
========================================================== */

.cp-shell {
    max-width: var(--cp-content-width);
    margin: 0 auto;
    padding: 0 20px 48px;
}

/* Visually hidden, still readable by screen readers/search engines --
   used for the Home page's fallback <h1> (home.php) when an owner has
   hidden the hero section, which normally carries the page's only
   visible <h1> (home_sections/hero.php's .cp-hero__name) -- every
   company's page still needs exactly one real <h1>, just not always a
   second visible heading duplicating the hero. */
.cp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0, 0, 0, 0);
}

.cp-shell--home { padding-top: 0; }

/* MOBILE BREAKPOINT (≤560px) -- Home only (.cp-shell--home), not the
   shared plain .cp-shell native/capability/404 pages use -- the
   card-stack homepage is what "content must bleed edge to edge" is
   actually about; a plain text/contact page reads worse with zero
   inset. Side padding only -- vertical spacing (padding-bottom: 48px)
   is untouched, this only removes the 20px gutter pinning every card
   in from the screen edge. */
@media (max-width: 560px) {
    .cp-shell--home {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* Clears the fixed bottom nav (13_bottom_nav.css), signed-in mobile
       viewers only -- :has() means an anonymous visitor (no bottom nav
       in the DOM at all) never gets this extra space reserved for a bar
       that isn't there. Same technique Workspace's own 03_shell.css uses
       to hide its header bell only on pages that actually render its
       bottom nav. */
    body:has([data-cp-bottom-nav]) .cp-shell {
        padding-bottom: calc(48px + 60px + env(safe-area-inset-bottom, 0px));
    }
}

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

.cp-lede {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--cp-text);
}

.cp-empty {
    margin: 0;
    font-size: 14.5px;
    color: var(--cp-text-faint);
    font-style: italic;
}

.cp-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
}

.cp-meta li {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text);
}

.cp-section {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    padding: 20px 22px;
    margin-bottom: 16px;
}

.cp-section__title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cp-text-faint);
}

.cp-description {
    margin: 0;
    font-size: 15.5px;
    color: var(--cp-text);
    white-space: pre-line;
}

.cp-contact {
    margin: 0;
    display: grid;
    gap: 12px;
}

.cp-contact div { display: flex; flex-direction: column; gap: 2px; }
.cp-contact dt { font-size: 12px; font-weight: 700; color: var(--cp-text-faint); }
.cp-contact dd { margin: 0; font-size: 14.5px; color: var(--cp-text); }
.cp-contact a { color: var(--cp-primary, #137A5A); text-decoration: none; }
.cp-contact a:hover { text-decoration: underline; }

.cp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.cp-links a {
    display: inline-flex;
    align-items: center;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-pill);
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cp-primary, #137A5A);
    text-decoration: none;
    transition: border-color var(--cp-transition), transform var(--cp-transition);
}

.cp-links a:hover {
    border-color: var(--cp-primary, #137A5A);
    transform: translateY(-1px);
}

.cp-footer {
    text-align: center;
    padding-top: 16px;
    font-size: 12.5px;
    color: var(--cp-text-faint);
}

.cp-footer a { color: var(--cp-text-faint); }

.cp-shell--notfound {
    max-width: 480px;
    padding-top: 120px;
    text-align: center;
}

.cp-notfound h1 { font-size: 22px; margin: 0 0 10px; }
.cp-notfound p { color: var(--cp-text-muted); margin: 0 0 20px; }
.cp-notfound__home {
    display: inline-block;
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    text-decoration: none;
    padding: 9px 20px;
    border-radius: var(--cp-radius-sm);
    font-weight: 700;
    font-size: 14px;
}