/* =========================================================
   SehVarta Premium Theme — Phase 2: Layout grid + rails + cards
   Fixes: missing desktop 3-column grid (app.css had none outside
   the mobile media query), broken story-ring pseudo-element,
   plain left/right rail links, plain post card header/actions.
   ========================================================= */

/* ---------- 1. THREE-COLUMN GRID (desktop) ---------- */
@media (min-width: 981px) {
    .social-page-shell,
    .fb-dashboard {
        display: grid !important;
        grid-template-columns: var(--sv-rail-w, 240px) minmax(0, 1fr) 300px !important;
        gap: 20px !important;
        align-items: start !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 20px 20px 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .fb-left-rail, .social-left-rail,
    .fb-right-rail, .social-right-rail {
        position: sticky !important;
        top: 92px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
    .fb-feed {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 640px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
}

/* Tablet: 2-column (rails collapse to just left, or stack) */
@media (min-width: 761px) and (max-width: 980px) {
    .social-page-shell,
    .fb-dashboard {
        display: grid !important;
        grid-template-columns: var(--sv-rail-w, 210px) minmax(0, 1fr) !important;
        gap: 16px !important;
        max-width: 900px !important;
        margin: 0 auto !important;
        padding: 16px 16px 60px !important;
    }
    .fb-right-rail, .social-right-rail {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        position: static !important;
    }
    .fb-right-rail > *, .social-right-rail > * {
        flex: 1 1 220px;
    }
    .fb-feed {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        max-width: 100% !important;
    }
}

/* ---------- 2. Left rail: icon + label rows ---------- */
.fb-left-rail, .social-left-rail {
    padding: 16px 12px;
}
.fb-left-rail a, .social-left-rail a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 12px !important;
    border-radius: var(--r-sm, 12px) !important;
    color: var(--ink, #14162b) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.fb-left-rail a:hover, .social-left-rail a:hover {
    background: rgba(124, 58, 237, .08) !important;
    color: var(--sv-purple-dark, #6d28d9) !important;
}
.fb-left-rail a span, .social-left-rail a span,
.sv-rail-profile span {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    background-size: cover;
    background-position: center;
}
.sv-rail-profile {
    margin-bottom: 8px;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--line, rgba(37,99,235,.12));
}
.sv-rail-profile span { width: 44px; height: 44px; font-size: 15px; }

/* ---------- 3. Right rail: section cards ---------- */
.fb-right-rail section, .social-right-rail section {
    padding: 16px;
}
.fb-right-rail h3, .social-right-rail h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink, #14162b);
}
.fb-right-rail section > a,
.social-right-rail section > a {
    display: block;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: var(--r-sm, 12px);
    color: var(--ink, #14162b);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
}
.fb-right-rail section > a:hover,
.social-right-rail section > a:hover {
    background: rgba(37, 99, 235, .08);
    color: var(--sv-blue-dark, #1d4ed8);
}
.fb-reward-panel div, .fb-support-panel div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}
.fb-reward-panel div span, .fb-support-panel div span { color: var(--muted, #6b7280); }
.fb-reward-panel div strong { color: var(--sv-purple-dark, #6d28d9); }
.fb-sponsored img {
    width: 100%;
    border-radius: var(--r-sm, 12px);
    display: block;
    margin-bottom: 10px;
}

/* ---------- 4. Story ring: fix (no mask, border-image based) ---------- */
.instagram-story-strip .story-card::before,
.instagram-story-strip .story-preview-card::before {
    content: none !important; /* remove the earlier mask-based pseudo that hid images */
}
.instagram-story-strip .story-card,
.instagram-story-strip .story-preview-card,
.visible-story-strip .story-card {
    border: 3px solid transparent !important;
    border-radius: var(--r-md, 18px) !important;
    background:
        linear-gradient(#000, #000) padding-box,
        linear-gradient(135deg, var(--sv-purple, #7c3aed), var(--sv-blue, #2563eb), #ec4899) border-box !important;
    overflow: hidden !important;
}
.instagram-story-strip .story-card img,
.instagram-story-strip .story-card video,
.instagram-story-strip .story-preview-card img,
.instagram-story-strip .story-preview-card video {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: calc(var(--r-md, 18px) - 3px);
}
.instagram-story-strip .story-card strong,
.instagram-story-strip .story-preview-card strong {
    position: absolute;
    z-index: 2;
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 5. Post card header + follow button + reactions ---------- */
.fb-post-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}
.fb-post-head > div { flex: 1 1 auto; min-width: 0; }
.fb-post-head strong { display: block; font-size: 14.5px; }
.fb-post-head small { color: var(--muted, #6b7280); font-size: 12px; }
.fb-post-card > p { padding: 0 16px 10px; margin: 0; }

.feed-follow-btn {
    padding: 7px 16px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed));
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}
.feed-follow-btn.is-active {
    background: rgba(107, 114, 128, .14);
    color: var(--muted, #6b7280);
}

.post-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--muted, #6b7280);
}
.fb-post-actions.share-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 4px 8px;
}