/**
 * Shared portfolio UI components
 * -----------------------------
 * Reusable across project pages (websites case studies, computer builds, etc.).
 * Prefer these over page-specific copies of the same patterns.
 *
 * Components
 *   .fp-section / .fp-section-title / .fp-section-lead / .fp-divider
 *   .fp-role-banner          Navy gradient callout (was sc-role-banner / builds-role-banner)
 *   .fp-pill                 Soft pill / chip (was sc-pill / builds-chip)
 *   .fp-role-banner .fp-pill Light pills for use on the navy banner
 *
 * Pair with site palette in /css/failproof.css (#003C5E, etc.).
 */

:root {
    --fp-navy: #003C5E;
    --fp-blue: #2196f3;
    --fp-lblue: #64b5f6;
    --fp-orange: #ff9800;
    --fp-orange-soft: #ffab40;
    --fp-muted: #5f6b7a;
    --fp-border: rgba(0, 60, 94, 0.12);
    --fp-surface: #ffffff;
}

.fp-section {
    padding: 2.75rem 0;
}

.fp-section-title {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.65rem;
    color: var(--fp-navy);
}

.fp-section-lead {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2rem;
    color: var(--fp-muted);
}

.fp-divider {
    margin: 0 auto 1.75rem;
    width: 40px;
    border-color: rgba(0, 0, 0, 0.22);
    opacity: 1;
}

.fp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(0, 60, 94, 0.08);
    color: var(--fp-navy);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0.25rem;
}

.fp-pill i {
    color: var(--fp-orange-soft);
}

.fp-role-banner {
    background: linear-gradient(135deg, #003C5E 0%, #0a557f 55%, #145a8a 100%);
    color: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 8px 20px rgba(0, 60, 94, 0.25);
}

.fp-role-banner h5 {
    color: #fff;
    text-align: left;
    text-transform: none;
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.fp-role-banner p {
    margin: 0;
    opacity: 0.92;
}

.fp-role-banner .fp-pill {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.fp-role-banner .fp-pill i {
    color: var(--fp-orange-soft);
}