/* ============================================================
   fApps Folio — Frontend Portfolio Styles  v1.0.3
   fApps IT Solutions | f-apps.co.ke | info@f-apps.co.ke
   ============================================================ */

/* ── Scoped reset ─────────────────────────────────────────── */
.ff-portfolio-wrap,
.ff-portfolio-wrap *,
.ff-portfolio-wrap *::before,
.ff-portfolio-wrap *::after {
    box-sizing: border-box !important;
}

.ff-portfolio-wrap {
    --ff-accent:  #99121A;
    --ff-accent-soft: rgba(153,18,26,0.08);
    --ff-accent-glow: rgba(153,18,26,0.22);
    --ff-radius:  14px;
    --ff-radius-sm: 8px;
    --ff-shadow:  0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.07);
    --ff-hover:   0 8px 40px rgba(0,0,0,0.13);
    --ff-text:    #0f0f1a;
    --ff-text-2:  #5a5a72;
    --ff-border:  #ebebf0;
    --ff-surface: #ffffff;
    --ff-bg:      #f9f9fb;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif !important;
    color: var(--ff-text) !important;
    width: 100% !important;
    line-height: 1.5 !important;
}

/* ── Filter Bar ─────────────────────────────────────────── */
.ff-portfolio-wrap .ff-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 0 32px !important;
    padding: 6px !important;
    background: var(--ff-bg) !important;
    border-radius: 50px !important;
    border: 1px solid var(--ff-border) !important;
    width: fit-content !important;
    max-width: 100% !important;
}

.ff-portfolio-wrap .ff-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 18px !important;
    border-radius: 50px !important;
    background: transparent !important;
    color: var(--ff-text-2) !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
}
.ff-portfolio-wrap .ff-filter-btn em {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background: rgba(0,0,0,0.06) !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: var(--ff-text-2) !important;
}
.ff-portfolio-wrap .ff-filter-btn:hover {
    color: var(--ff-text) !important;
    background: rgba(0,0,0,0.05) !important;
}
.ff-portfolio-wrap .ff-filter-btn.ff-active {
    background: var(--ff-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px var(--ff-accent-glow) !important;
}
.ff-portfolio-wrap .ff-filter-btn.ff-active em {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

/* ── Grid ───────────────────────────────────────────────── */
.ff-portfolio-wrap .ff-grid {
    display: grid !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: start !important;
}
.ff-portfolio-wrap .ff-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.ff-portfolio-wrap .ff-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.ff-portfolio-wrap .ff-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.ff-portfolio-wrap .ff-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.ff-portfolio-wrap .ff-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }

@media (max-width: 1200px) { .ff-portfolio-wrap .ff-cols-5 { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 1024px) { .ff-portfolio-wrap .ff-cols-4, .ff-portfolio-wrap .ff-cols-5 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 820px)  { .ff-portfolio-wrap .ff-cols-3, .ff-portfolio-wrap .ff-cols-4, .ff-portfolio-wrap .ff-cols-5 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px)  { .ff-portfolio-wrap .ff-grid { grid-template-columns: 1fr !important; gap: 16px !important; } }

/* ── Card ───────────────────────────────────────────────── */
.ff-portfolio-wrap .ff-card {
    background: var(--ff-surface) !important;
    border-radius: var(--ff-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--ff-shadow) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.25s cubic-bezier(.22,.68,0,1.2), box-shadow 0.25s ease !important;
    border: 1px solid var(--ff-border) !important;
    min-width: 0 !important;
    width: 100% !important;
}
.ff-portfolio-wrap .ff-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--ff-hover) !important;
}
.ff-portfolio-wrap .ff-card.ff-featured {
    border: 1.5px solid rgba(153,18,26,0.25) !important;
    box-shadow: 0 0 0 3px rgba(153,18,26,0.06), var(--ff-shadow) !important;
}
.ff-portfolio-wrap .ff-card.ff-hide { display: none !important; }

/* ── Card Image ─────────────────────────────────────────── */
.ff-portfolio-wrap .ff-card-media {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f0eff5 0%, #e8e0e1 100%) !important;
    flex-shrink: 0 !important;
    padding-top: 60% !important;
    height: 0 !important;
}
.ff-portfolio-wrap .ff-card-media img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(.22,.68,0,1.1) !important;
    max-width: none !important;
    margin: 0 !important; border-radius: 0 !important;
}
.ff-portfolio-wrap .ff-card:hover .ff-card-media img { transform: scale(1.07) !important; }

.ff-portfolio-wrap .ff-card-placeholder {
    position: absolute !important; inset: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 8px !important; color: #c0bfc8 !important; font-size: 12px !important;
}
.ff-portfolio-wrap .ff-card-placeholder svg { width: 36px !important; height: 36px !important; }

/* Overlay on hover */
.ff-portfolio-wrap .ff-card-overlay {
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(10,5,20,0.72) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.28s ease !important;
    z-index: 3 !important;
    pointer-events: none !important;
}
.ff-portfolio-wrap .ff-card:hover .ff-card-overlay { opacity: 1 !important; }

/* Featured badge */
.ff-portfolio-wrap .ff-badge-featured {
    position: absolute !important; top: 10px !important; right: 10px !important;
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: #fff !important; font-size: 10px !important; font-weight: 800 !important;
    padding: 4px 9px !important; border-radius: 20px !important;
    display: flex !important; align-items: center !important; gap: 3px !important;
    z-index: 5 !important; box-shadow: 0 2px 10px rgba(249,115,22,0.4) !important;
    letter-spacing: 0.02em !important; text-transform: uppercase !important;
}
.ff-portfolio-wrap .ff-badge-featured svg { width: 9px !important; height: 9px !important; }

/* Category badge */
.ff-portfolio-wrap .ff-card-cat-badge {
    position: absolute !important; bottom: 10px !important; left: 10px !important;
    background: var(--cat-color, var(--ff-accent)) !important;
    color: #fff !important; font-size: 10px !important; font-weight: 700 !important;
    padding: 4px 10px !important; border-radius: 20px !important;
    z-index: 5 !important; display: flex !important; align-items: center !important; gap: 5px !important;
    max-width: calc(100% - 20px) !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
.ff-portfolio-wrap .ff-card-cat-badge i { font-size: 10px !important; }

/* ── Card Body ──────────────────────────────────────────── */
.ff-portfolio-wrap .ff-card-body {
    padding: 16px 18px 12px !important;
    display: flex !important; flex-direction: column !important;
    gap: 8px !important; flex: 1 !important; min-width: 0 !important;
}

.ff-portfolio-wrap .ff-card-title {
    margin: 0 !important;
    font-size: 15px !important; font-weight: 700 !important;
    color: var(--ff-text) !important; line-height: 1.35 !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
}
.ff-portfolio-wrap .ff-card-title a {
    color: inherit !important; text-decoration: none !important;
}
.ff-portfolio-wrap .ff-card-title a:hover { color: var(--ff-accent) !important; }

.ff-portfolio-wrap .ff-card-excerpt {
    margin: 0 !important; font-size: 12.5px !important;
    color: var(--ff-text-2) !important; line-height: 1.65 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
}

/* Tags */
.ff-portfolio-wrap .ff-card-tags { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
.ff-portfolio-wrap .ff-tag {
    padding: 3px 8px !important; background: var(--ff-bg) !important;
    border-radius: 4px !important; font-size: 10px !important;
    color: var(--ff-text-2) !important; font-weight: 600 !important;
    border: 1px solid var(--ff-border) !important;
}

/* Meta chips */
.ff-portfolio-wrap .ff-card-meta { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
.ff-portfolio-wrap .ff-meta-chip {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    padding: 3px 8px !important; border-radius: 6px !important;
    font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important;
}
.ff-portfolio-wrap .ff-meta-chip svg { width: 11px !important; height: 11px !important; flex-shrink: 0 !important; }
.ff-portfolio-wrap .ff-chip-price    { background: rgba(16,185,129,0.09) !important; color: #065f46 !important; }
.ff-portfolio-wrap .ff-chip-duration { background: var(--ff-accent-soft) !important; color: var(--ff-accent) !important; }

/* Client */
.ff-portfolio-wrap .ff-card-client {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px 0 0 !important; border-top: 1px solid var(--ff-border) !important;
    margin-top: 2px !important; min-width: 0 !important;
}
.ff-portfolio-wrap .ff-client-logo { flex-shrink: 0 !important; }
.ff-portfolio-wrap .ff-client-logo img {
    width: 28px !important; height: 28px !important;
    object-fit: contain !important; border-radius: 6px !important;
    border: 1px solid var(--ff-border) !important;
    display: block !important; max-width: none !important; margin: 0 !important;
}
.ff-portfolio-wrap .ff-client-text { display: flex !important; flex-direction: column !important; min-width: 0 !important; overflow: hidden !important; }
.ff-portfolio-wrap .ff-client-label { font-size: 9px !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; color: #aaa !important; font-weight: 700 !important; }
.ff-portfolio-wrap .ff-client-name  { font-size: 12px !important; font-weight: 700 !important; color: #333 !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.ff-portfolio-wrap a.ff-client-name:hover { color: var(--ff-accent) !important; }

/* ── Card Footer — View Project Button ─────────────────── */
.ff-portfolio-wrap .ff-card-footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px 14px !important;
    margin-top: auto !important;
}

.ff-portfolio-wrap .ff-view-project-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 14px !important;
    background: var(--ff-accent) !important;
    color: #fff !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    cursor: pointer !important;
}
.ff-portfolio-wrap .ff-view-project-btn:hover {
    background: #7a0e15 !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px var(--ff-accent-glow) !important;
}

.ff-portfolio-wrap .ff-live-site-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 9px 12px !important;
    background: var(--ff-bg) !important;
    color: var(--ff-text-2) !important;
    border: 1px solid var(--ff-border) !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
}
.ff-portfolio-wrap .ff-live-site-btn:hover {
    border-color: var(--ff-accent) !important;
    color: var(--ff-accent) !important;
    background: var(--ff-accent-soft) !important;
    text-decoration: none !important;
}

/* ── Overlay Buttons (hover) — kept for backwards compat ── */
.ff-portfolio-wrap .ff-card-overlay-actions {
    display: none !important;
}

/* No projects */
.ff-portfolio-wrap .ff-no-projects { text-align: center !important; padding: 48px 20px !important; color: #bbb !important; font-size: 15px !important; }

/* Credit */
.ff-portfolio-wrap .ff-credit { text-align: center !important; margin-top: 32px !important; font-size: 11px !important; color: #ccc !important; }
.ff-portfolio-wrap .ff-credit a { color: #bbb !important; text-decoration: none !important; }
.ff-portfolio-wrap .ff-credit a:hover { color: var(--ff-accent) !important; }

/* ── Entrance Animations ─────────────────────────────────── */
@keyframes ff-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ff-portfolio-wrap .ff-card {
    animation: ff-fade-up 0.45s ease both !important;
}
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(1)  { animation-delay: 0ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(2)  { animation-delay: 55ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(3)  { animation-delay: 110ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(4)  { animation-delay: 165ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(5)  { animation-delay: 220ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(6)  { animation-delay: 275ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(7)  { animation-delay: 330ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(8)  { animation-delay: 385ms !important; }
.ff-portfolio-wrap .ff-grid .ff-card:nth-child(n+9){ animation-delay: 440ms !important; }