/* ═══════════════════════════════════════════════════════════════════
   Socialify — refreshed desktop feed (/home/, 3 columns: blog/base.html .sf-3col)
   Active when <html> has .sf-newlook (on for everyone; ?newlook=0 brings back the old look, ?newlook=1 undoes that) and only from
   tablet width up. Same centred layout, column widths and member-card design as before; only the finish
   changes - one visual language for all three columns: the rounded white cards, soft shadows and Nunito of the
   stories bar and composer. Background colours are never forced (no !important), so the music
   player's Light/Dim switch, which sets inline backgrounds, keeps working.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {   /* desktops and tablets (tablets get the desktop page in one column); phones have their own feed */

html.sf-newlook body { background: #eef1f7; }
html.sf-newlook .sf-3col {
    --nl-card: #ffffff;
    --nl-ink: #1c1f2b;
    --nl-soft: #667085;
    --nl-line: #e9edf4;
    --nl-radius: 18px;
    --nl-shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 8px 24px rgba(20, 30, 60, .06);
    --nl-shadow-hover: 0 2px 4px rgba(20, 30, 60, .06), 0 14px 32px rgba(20, 30, 60, .10);
    --nl-accent: #2f6bff;
    padding-top: 12px !important;
    font-family: var(--sf-font, 'Nunito', system-ui, sans-serif);
    color: var(--nl-ink);
}

/* ── shared card look ── */
html.sf-newlook .sf-3col .content-section,
html.sf-newlook .sf-3col .list-group,
html.sf-newlook .sf-3col .player-size,
html.sf-newlook .sf-3col .infinite-container .card,
html.sf-newlook .sf-3col .calendar-widget {
    background: var(--nl-card);
    border: 0 !important;
    border-radius: var(--nl-radius) !important;
    box-shadow: var(--nl-shadow);
}
html.sf-newlook .sf-3col .content-section { padding: 16px !important; margin-bottom: 16px !important; }
html.sf-newlook .sf-3col h2, html.sf-newlook .sf-3col h3, html.sf-newlook .sf-3col h4 { font-family: inherit; letter-spacing: -.01em; }

/* welcome / greeting boxes */
/* (search box: the site's own design from app.css, with its magnifier button) */
html.sf-newlook .sf-3col .content-section > h2 { font: 800 21px/1.3 var(--sf-font, sans-serif) !important; color: var(--nl-ink); margin: 10px 0 2px; text-align: center; }
html.sf-newlook .sf-3col .content-section form:not(.example) p { font-size: 13px; color: var(--nl-soft); margin: 8px 0 0; }

/* right column: radio list doesn't push everything down */
html.sf-newlook .sf-3col aside.sidebar { padding: 0 !important; }
html.sf-newlook .sf-3col aside.sidebar > h4 { font-size: 15px !important; margin: 12px 0 8px !important; }
html.sf-newlook .sf-3col #radioSelector {
    width: 100%; height: 40px; border: 0; border-radius: 12px; padding: 0 12px; background: #f0f2f6; font: 600 13px var(--sf-font, sans-serif); color: var(--nl-ink);
}
html.sf-newlook .sf-3col .player-size { padding: 12px; overflow: hidden; margin-bottom: 16px; }

/* links list */
html.sf-newlook .sf-3col .list-group { overflow: hidden; padding: 6px; }
html.sf-newlook .sf-3col .list-group-item {
    border: 0 !important; border-radius: 12px !important; padding: 10px 12px; font-weight: 700; font-size: 14px; color: var(--nl-ink);
    background: transparent; transition: background .15s;
}
html.sf-newlook .sf-3col .list-group-item:hover { background: #f0f2f6; }

/* ── member cards: the original centred design (photo on top, then name, badge, intro, button), polished ── */
html.sf-newlook .sf-3col .column > .card {
    border: 0 !important; border-radius: 20px !important; box-shadow: var(--nl-shadow); overflow: hidden;
    padding: 20px 16px 18px !important; text-align: center; transition: transform .18s ease, box-shadow .18s ease;
}
html.sf-newlook .sf-3col .column > .card:hover { transform: translateY(-3px); box-shadow: var(--nl-shadow-hover); }
html.sf-newlook .sf-3col .column > .card > img.posteds-img,
html.sf-newlook .sf-3col .column > .card > [data-ini] {
    width: 96px !important; height: 96px !important; padding: 3px; box-sizing: border-box;
    background: var(--sf-rainbow, linear-gradient(90deg, #2f6bff, #12b886, #f4b400, #ff4f6d, #7b5cff));
    border-radius: 50% !important; object-fit: cover; box-shadow: 0 4px 14px rgba(20, 30, 60, .12); margin: 0 auto 4px !important;
}
html.sf-newlook .sf-3col .column .containers { padding: 6px 0 0 !important; text-align: center; }
html.sf-newlook .sf-3col .column .containers h3 {
    font: 800 18px/1.3 var(--sf-font, 'Nunito', sans-serif) !important; color: var(--nl-ink); margin: 6px 0 6px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.sf-newlook .sf-3col .column .containers h3 a { color: var(--nl-ink) !important; text-decoration: none; }
html.sf-newlook .sf-3col .column .containers h3 a:hover { color: var(--nl-accent) !important; }
html.sf-newlook .sf-3col .column .containers h3 i { font-size: 15px; margin-left: 2px; vertical-align: 1px; }
html.sf-newlook .sf-3col .column .containers .title {
    display: inline-block; margin: 0 0 10px !important; padding: 3px 12px; border-radius: 999px;
    background: #eef3ff; color: var(--nl-accent) !important; font: 700 12px/1.5 var(--sf-font, sans-serif) !important; letter-spacing: .01em;
}
html.sf-newlook .sf-3col .column .containers p:not(.title) {
    margin: 0 0 4px !important; font: 500 14px/1.5 var(--sf-font, sans-serif); color: #475467;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html.sf-newlook .sf-3col .column .containers p:empty { display: none !important; }
html.sf-newlook .sf-3col .column .containers > a { display: inline-block; margin-top: 10px; text-decoration: none; }
html.sf-newlook .sf-3col .column .containers > a > p { margin: 0 !important; display: block !important; overflow: visible !important; }
html.sf-newlook .sf-3col .column .containers .button {
    border: 0 !important; border-radius: 999px !important; padding: 9px 24px !important; width: auto !important;
    font: 800 14px var(--sf-font, sans-serif) !important; color: #fff !important; letter-spacing: .01em; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 116, 255, .28); transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
html.sf-newlook .sf-3col .column .containers .button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 116, 255, .34); filter: brightness(1.06); }

/* "People you may know" headings: bold, centred, with a small rainbow underline */
html.sf-newlook .sf-3col h4 { position: relative; }
html.sf-newlook .sf-3col > [class*="col-"] > h4, html.sf-newlook .sf-3col > [class*="col-"] > .content-section > h4 {
    font: 800 17px/1.3 var(--sf-font, sans-serif) !important; color: var(--nl-ink); text-align: center; margin: 22px 0 16px !important; padding-bottom: 10px;
}
html.sf-newlook .sf-3col > [class*="col-"] > h4::after, html.sf-newlook .sf-3col > [class*="col-"] > .content-section > h4::after {
    content: ''; position: absolute; left: 50%; bottom: 0; width: 44px; height: 3px; margin-left: -22px; border-radius: 3px;
    background: var(--sf-rainbow, linear-gradient(90deg, #2f6bff, #12b886, #f4b400, #ff4f6d));
}
/* member cards stack with even spacing */
html.sf-newlook .sf-3col [data-sf-cards] > .column { margin-bottom: 16px; }

/* ── posts (middle column) ── */
html.sf-newlook .sf-3col .infinite-container .infinite-item { margin-bottom: 16px; }
html.sf-newlook .sf-3col .infinite-container .card { overflow: hidden; margin-bottom: 0 !important; }
/* the gear menu must not be clipped by the card or hidden under the next post (plus.js marks the card .sf-menu-open) */
.infinite-container .card.sf-menu-open, .infinite-container .card:has(.dropdown-menu.show) { overflow: visible !important; }
.infinite-container .infinite-item.sf-menu-open, .infinite-container .infinite-item:has(.dropdown-menu.show) { position: relative; z-index: 30; }
html.sf-newlook .sf-3col .infinite-container .card-header { background: transparent; border-bottom: 0; padding: 14px 16px 6px; }
html.sf-newlook .sf-3col .infinite-container .card-header img, html.sf-newlook .sf-3col .infinite-container .card-header .mr-2 > .sf-ini { width: 44px !important; height: 44px !important; }
html.sf-newlook .sf-3col .infinite-container .card-header a { font-weight: 800; color: var(--nl-ink); text-decoration: none; }
html.sf-newlook .sf-3col .infinite-container .card-body { padding: 6px 16px 12px; }
html.sf-newlook .sf-3col .infinite-container .article-content { font-size: 16px; line-height: 1.55; color: var(--nl-ink); margin-bottom: 10px; }
html.sf-newlook .sf-3col .infinite-container .card-body img.my-imgs,
html.sf-newlook .sf-3col .infinite-container .card-body video {
    display: block; width: calc(100% + 32px) !important; max-width: none !important; margin: 4px -16px 10px; border-radius: 0;
}
html.sf-newlook .sf-3col .infinite-container .card-body small { font-size: 12px; color: var(--nl-soft); }
/* (Like / Dislike / Comment row: deliberately left exactly as in the original design) */

/* ── middle column extras ── */
html.sf-newlook .sf-3col .infinite-more-link { display: block; text-align: center; color: var(--nl-soft); font-weight: 700; }
}