/* ═══════════════════════════════════════════════════════════
   Ambjent Malta — Smash Balloon Facebook Feed Custom Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Hide page header (cover photo, logo, bio, follower count) ── */
.cff-header,
.cff-visual-header,
#cff .cff-header,
#cff .cff-visual-header,
.cff-header-hero,
.cff-header-inner-wrap,
.cff-likes-box,
.cff-bio,
.cff-poweredby,
.cff-credit,
.cff-follow-btn,
.cff-load-btn,
.sb-link { display: none !important; }

/* ── Force 3-column grid on the posts container ── */
#cff .cff-posts-wrap,
#cff .cff-masonry-posts,
.am-fb-feed-container #cff .cff-posts-wrap,
.am-fb-feed-container #cff .cff-masonry-posts {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    #cff .cff-posts-wrap,
    #cff .cff-masonry-posts {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    #cff .cff-posts-wrap,
    #cff .cff-masonry-posts {
        grid-template-columns: 1fr !important;
    }
}

/* ── Post card styling ── */
#cff .cff-item {
    background: #fff !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.25s, transform 0.25s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
}

#cff .cff-item:hover {
    box-shadow: 0 8px 25px rgba(45,106,45,.15) !important;
    transform: translateY(-3px) !important;
}

/* ── Post image — fixed aspect ratio ── */
#cff .cff-item .cff-post-image-container,
#cff .cff-item .cff-image-link,
#cff .cff-item img.cff-post-img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    max-height: 180px !important;
    overflow: hidden !important;
}

#cff .cff-item .cff-post-image-container img,
#cff .cff-item .cff-image-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ── Post content area ── */
#cff .cff-item .cff-post-content,
#cff .cff-item .cff-item-inner {
    padding: 0.9rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 0.4rem !important;
}

/* ── Post author / page name ── */
#cff .cff-item .cff-author-box,
#cff .cff-item .cff-author-link {
    display: none !important;
}

/* ── Post text ── */
#cff .cff-item .cff-post-text,
#cff .cff-item p.cff-post-text {
    font-family: 'Manrope', 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    color: #374151 !important;
    line-height: 1.55 !important;
    margin: 0 0 0.5rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
}

/* ── Post date ── */
#cff .cff-item .cff-date,
#cff .cff-item .cff-time {
    font-size: 0.72rem !important;
    color: #9ca3af !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
}

/* ── "View on Facebook" link — styled as button ── */
#cff .cff-item .cff-view-on-facebook,
#cff .cff-item .cff-shared-link a,
#cff .cff-item a.cff-view-on-fb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    color: #2d6a2d !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 2px solid #2d6a2d !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 0.4rem !important;
    margin-top: auto !important;
    width: fit-content !important;
    transition: background 0.2s, color 0.2s !important;
    background: transparent !important;
}

#cff .cff-item .cff-view-on-facebook:hover,
#cff .cff-item a.cff-view-on-fb:hover {
    background: #2d6a2d !important;
    color: #fff !important;
}

/* ── Social row (share, like links) — compact ── */
#cff .cff-item .cff-post-links,
#cff .cff-item .cff-social-icon-link {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    padding: 0 1rem 0.75rem !important;
}

/* ── Hide Smash Balloon branding ── */
.cff-poweredby,
.cff-credit,
#cff .cff-credit,
.cff-header .cff-btn,
.cff-fb-follow { display: none !important; }

/* ── Container width ── */
.am-fb-feed-container #cff,
.am-fb-feed-container .cff-wrapper {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Load more button ── */
#cff .cff-load-btn-container {
    text-align: center !important;
    margin-top: 1.5rem !important;
    display: none !important;
}