/* ============================================
   Social Feed Widget — Frontend Styles
   ============================================ */

.sfw-feed {
    --sfw-columns: 3;
    --sfw-gap: 12px;
    --sfw-radius: 12px;
    --sfw-thumb-aspect: 1 / 1;
    --sfw-accent: #e1306c;
    width: 100%;
    position: relative;
}

/* ---- Error / empty ---- */
.sfw-error {
    background: #fef2f2; border: 1px solid #fecaca;
    color: #991b1b; padding: 14px 18px; border-radius: 10px;
    font-size: 14px;
}
.sfw-error a { color: #dc2626; }
.sfw-empty { color: #9ca3af; font-size: 14px; text-align: center; padding: 32px; }

/* ---- Item base ---- */
.sfw-item { position: relative; overflow: hidden; }
.sfw-item-link { display: block; text-decoration: none; color: inherit; }

.sfw-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--sfw-thumb-aspect);
    background: #f3f4f6;
}

.sfw-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}

.sfw-has-hover .sfw-item:hover .sfw-thumb img { transform: scale(1.06); }

/* Rounded */
.sfw-rounded .sfw-thumb { border-radius: var(--sfw-radius); }

/* Video play icon */
.sfw-video-icon {
    position: absolute; top: 8px; left: 8px;
    background: rgba(0,0,0,.55);
    color: #fff; border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.sfw-video-icon svg { width: 14px; height: 14px; }

/* Platform badge */
.sfw-platform-badge {
    position: absolute; bottom: 8px; right: 8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: .8;
}
.sfw-platform-badge svg { width: 12px; height: 12px; }
.sfw-badge-instagram { background: #e1306c; color: #fff; }
.sfw-badge-youtube   { background: #ff0000; color: #fff; }
.sfw-badge-tiktok    { background: #000;    color: #fff; }

/* Caption */
.sfw-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    padding: 28px 12px 10px;
    color: #fff;
    transition: opacity .3s;
}
.sfw-caption-hover { opacity: 0; }
.sfw-has-hover .sfw-item:hover .sfw-caption-hover { opacity: 1; }
.sfw-caption-always { opacity: 1; }
.sfw-caption-text {
    margin: 0 0 4px;
    font-size: 12px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sfw-caption-date { font-size: 11px; opacity: .7; }

/* ============================================
   LAYOUT: GRID
   ============================================ */
.sfw-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--sfw-columns), 1fr);
    gap: var(--sfw-gap);
}

/* ============================================
   LAYOUT: MASONRY
   ============================================ */
.sfw-layout-masonry {
    columns: var(--sfw-columns);
    column-gap: var(--sfw-gap);
}
.sfw-layout-masonry .sfw-item {
    break-inside: avoid;
    margin-bottom: var(--sfw-gap);
}
.sfw-layout-masonry .sfw-thumb {
    aspect-ratio: unset;
}
.sfw-layout-masonry .sfw-thumb img {
    height: auto;
}

/* ============================================
   LAYOUT: SCROLL (horizontal)
   ============================================ */
.sfw-layout-scroll {
    position: relative;
    overflow: hidden;
}
.sfw-scroll-track {
    display: flex;
    gap: var(--sfw-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.sfw-scroll-track::-webkit-scrollbar { display: none; }
.sfw-layout-scroll .sfw-item {
    flex: 0 0 calc(100% / var(--sfw-columns));
    min-width: 180px;
    max-width: 320px;
}

.sfw-scroll-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.9);
    border: 1px solid #e5e7eb;
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    z-index: 2; transition: background .2s, opacity .2s;
    opacity: .8;
}
.sfw-scroll-btn:hover { background: #fff; opacity: 1; }
.sfw-scroll-prev { left: 6px; }
.sfw-scroll-next { right: 6px; }

/* ============================================
   LAYOUT: WALL (social wall — mixed sizes)
   ============================================ */
.sfw-layout-wall {
    display: grid;
    grid-template-columns: repeat(var(--sfw-columns), 1fr);
    grid-auto-rows: 160px;
    gap: var(--sfw-gap);
}

/* First item is big */
.sfw-layout-wall .sfw-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}
/* Every 7th item is wide */
.sfw-layout-wall .sfw-item:nth-child(7n) {
    grid-column: span 2;
}
/* Every 5th item is tall */
.sfw-layout-wall .sfw-item:nth-child(5n+4) {
    grid-row: span 2;
}

.sfw-layout-wall .sfw-thumb {
    aspect-ratio: unset;
    height: 100%;
}

/* ============================================
   Platform-specific accent colors
   ============================================ */
.sfw-platform-instagram { --sfw-accent: #e1306c; }
.sfw-platform-youtube   { --sfw-accent: #ff0000; }
.sfw-platform-tiktok    { --sfw-accent: #010101; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .sfw-layout-grid,
    .sfw-layout-wall {
        --sfw-columns: 2 !important;
    }
    .sfw-layout-masonry {
        columns: 2 !important;
    }
    .sfw-layout-scroll .sfw-item {
        flex: 0 0 70vw;
    }
}
@media (max-width: 480px) {
    .sfw-layout-grid { --sfw-columns: 2 !important; }
    .sfw-layout-wall { --sfw-columns: 2 !important; grid-auto-rows: 120px; }
    .sfw-layout-masonry { columns: 2 !important; }
    .sfw-layout-scroll .sfw-item { flex: 0 0 80vw; }
}

/* ============================================
   Animations — fade-in on load
   ============================================ */
@keyframes sfw-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sfw-item {
    animation: sfw-fadein .4s ease both;
}
.sfw-item:nth-child(1)  { animation-delay: .05s; }
.sfw-item:nth-child(2)  { animation-delay: .10s; }
.sfw-item:nth-child(3)  { animation-delay: .15s; }
.sfw-item:nth-child(4)  { animation-delay: .20s; }
.sfw-item:nth-child(5)  { animation-delay: .25s; }
.sfw-item:nth-child(6)  { animation-delay: .30s; }
.sfw-item:nth-child(7)  { animation-delay: .35s; }
.sfw-item:nth-child(8)  { animation-delay: .40s; }
.sfw-item:nth-child(9)  { animation-delay: .45s; }
.sfw-item:nth-child(10) { animation-delay: .50s; }
.sfw-item:nth-child(11) { animation-delay: .55s; }
.sfw-item:nth-child(12) { animation-delay: .60s; }