/* =============================================
   FSF Social Feeds – Public Styles
   Version: 1.0.0
   ============================================= */

/* ── CSS Variables (overridable per instance) ── */
.fsf-sf-feed-wrap {
    --fsf-primary:    #006633;
    --fsf-secondary:  #FFFFFF;
    --fsf-accent:     #FF0000;
    --fsf-font-size:  14px;
    --fsf-radius:     8px;
    --fsf-cols:       3;
    --fsf-gap:        16px;
    --fsf-card-bg:    #ffffff;
    --fsf-card-border:#e8e8e8;
    --fsf-text:       #1a1a1a;
    --fsf-subtext:    #666666;
    --fsf-transition: 0.25s ease;

    font-size: var(--fsf-font-size);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
    width: 100%;
}

.fsf-sf-feed-wrap * { box-sizing: border-box; }

/* ── Dark Theme ──────────────────────────────── */
.fsf-sf-theme-dark {
    --fsf-card-bg:    #1a1a2e;
    --fsf-card-border:#2d2d4a;
    --fsf-text:       #f0f0f0;
    --fsf-subtext:    #aaaacc;
}

/* ── Title ───────────────────────────────────── */
.fsf-sf-feed-title {
    margin-bottom: 20px;
}
.fsf-sf-feed-title h3 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--fsf-primary);
    margin: 0 0 8px;
}
.fsf-sf-title-line {
    height: 3px;
    width: 60px;
    background: linear-gradient(90deg, var(--fsf-primary), var(--fsf-accent));
    border-radius: 2px;
}

/* ── Filter Buttons ──────────────────────────── */
.fsf-sf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.fsf-sf-filter-btn {
    padding: 6px 14px;
    border: 2px solid var(--fsf-card-border);
    background: var(--fsf-card-bg);
    color: var(--fsf-subtext);
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all var(--fsf-transition);
}
.fsf-sf-filter-btn:hover,
.fsf-sf-filter-btn.active {
    background: var(--fsf-primary);
    border-color: var(--fsf-primary);
    color: #fff;
}

/* ── Grid / Masonry Layout ───────────────────── */
.fsf-sf-posts-grid {
    display: grid;
    grid-template-columns: repeat(var(--fsf-cols), 1fr);
    gap: var(--fsf-gap);
}

.fsf-sf-layout-masonry .fsf-sf-posts-grid {
    grid-template-rows: masonry;
    align-items: start;
}

/* ── List Layout ─────────────────────────────── */
.fsf-sf-layout-list .fsf-sf-posts-grid {
    grid-template-columns: 1fr;
    --fsf-cols: 1;
}
.fsf-sf-layout-list .fsf-sf-post {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.fsf-sf-layout-list .fsf-sf-media {
    width: 120px;
    min-width: 120px;
    height: 90px;
}
.fsf-sf-layout-list .fsf-sf-post-body { flex: 1; }

/* ── Post Card ───────────────────────────────── */
.fsf-sf-post {
    background: var(--fsf-card-bg);
    border: 1px solid var(--fsf-card-border);
    border-radius: var(--fsf-radius);
    overflow: hidden;
    transition: transform var(--fsf-transition), box-shadow var(--fsf-transition);
    color: var(--fsf-text);
}
.fsf-sf-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Network Color Accents ───────────────────── */
.fsf-sf-post.fsf-sf-network-twitter   { border-top: 3px solid #000000; }
.fsf-sf-post.fsf-sf-network-facebook  { border-top: 3px solid #1877F2; }
.fsf-sf-post.fsf-sf-network-instagram { border-top: 3px solid #E1306C; }
.fsf-sf-post.fsf-sf-network-youtube   { border-top: 3px solid #FF0000; }

/* ── Media ───────────────────────────────────── */
.fsf-sf-media-link { display: block; text-decoration: none; }
.fsf-sf-media {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: #f0f0f0;
}
.fsf-sf-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fsf-transition);
}
.fsf-sf-post:hover .fsf-sf-media img {
    transform: scale(1.04);
}
.fsf-sf-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
}
.fsf-sf-play-btn span {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    font-size: 1.4em;
    color: #333;
    transition: transform var(--fsf-transition);
}
.fsf-sf-post:hover .fsf-sf-play-btn span {
    transform: scale(1.1);
}

/* ── Post Body ───────────────────────────────── */
.fsf-sf-post-body {
    padding: 12px 14px 14px;
}

/* Header */
.fsf-sf-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.fsf-sf-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--fsf-primary);
    flex-shrink: 0;
}
.fsf-sf-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fsf-primary), var(--fsf-accent));
    flex-shrink: 0;
}
.fsf-sf-post-meta {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.fsf-sf-author {
    font-weight: 700;
    font-size: 0.9em;
    color: var(--fsf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Network Badge */
.fsf-sf-network-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}
.fsf-sf-badge-twitter   { background: #000; }
.fsf-sf-badge-facebook  { background: #1877F2; }
.fsf-sf-badge-instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.fsf-sf-badge-youtube   { background: #FF0000; }

/* Date */
.fsf-sf-date {
    font-size: 0.78em;
    color: var(--fsf-subtext);
    margin-left: auto;
    white-space: nowrap;
}

/* Text */
.fsf-sf-text {
    font-size: 0.92em;
    line-height: 1.55;
    color: var(--fsf-text);
    margin: 0 0 10px;
    word-break: break-word;
}

/* Stats */
.fsf-sf-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--fsf-card-border);
    font-size: 0.82em;
}
.fsf-sf-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--fsf-subtext);
}
.fsf-sf-view-link {
    margin-left: auto;
    color: var(--fsf-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85em;
    transition: color var(--fsf-transition);
}
.fsf-sf-view-link:hover { color: var(--fsf-accent); }

/* ── Carousel Layout ─────────────────────────── */
.fsf-sf-layout-carousel .fsf-sf-carousel-wrap {
    position: relative;
    overflow: hidden;
}
.fsf-sf-carousel-track {
    display: flex;
    gap: var(--fsf-gap);
    transition: transform 0.4s ease;
    will-change: transform;
}
.fsf-sf-carousel-track .fsf-sf-post {
    min-width: calc((100% - var(--fsf-gap) * (var(--fsf-cols) - 1)) / var(--fsf-cols));
    flex-shrink: 0;
}
.fsf-sf-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--fsf-primary);
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.4em;
    cursor: pointer;
    transition: background var(--fsf-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fsf-sf-carousel-btn:hover { background: var(--fsf-accent); }
.fsf-sf-prev { left: 4px; }
.fsf-sf-next { right: 4px; }
.fsf-sf-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}
.fsf-sf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fsf-card-border);
    cursor: pointer;
    transition: background var(--fsf-transition);
}
.fsf-sf-dot.active { background: var(--fsf-primary); }

/* ── Empty State ─────────────────────────────── */
.fsf-sf-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--fsf-subtext);
    font-size: 0.95em;
    border: 2px dashed var(--fsf-card-border);
    border-radius: var(--fsf-radius);
}

/* ── Hidden posts (filter) ───────────────────── */
.fsf-sf-post.fsf-sf-hidden {
    display: none;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
    .fsf-sf-posts-grid[style*="--fsf-cols: 4"],
    .fsf-sf-posts-grid { --fsf-cols: 2 !important; }
}
@media (max-width: 640px) {
    .fsf-sf-posts-grid { --fsf-cols: 1 !important; }
    .fsf-sf-layout-list .fsf-sf-post { flex-direction: column; }
    .fsf-sf-layout-list .fsf-sf-media { width: 100%; height: auto; }
    .fsf-sf-carousel-track .fsf-sf-post { min-width: 85vw; }
}