/**
* profile-editorial.css — Member's public profile.php, 2026-09 editorial
* reskin (matches profile-product-redesign-mockup.html, approved). Loaded
* only when ProfileController::show() sets $profileEditorialTheme = true
* (see views/layout.php's conditional /.col-lg-4 column prints ONE .pf-side
* card with internal .content-sec dividers (stats, bio, contact rows,
* socials, friends) — never a second sibling position:sticky card. That
* is the direct fix for the overlap bug found live on an Event page's
* sidebar (two sticky siblings in the same scroll container painting
* over each other) and already fixed the same way in engine-single.php;
* see this file's own .pf-side rule and profile.php's sidebar comment.
*
* Shared atoms deliberately NOT touched/renamed here (same precedent as
* the listing/engine passes): .btn-ink/.btn-accent/.btn-quiet, .panel,
* .kit-pill, and the .row/.col-lg-* Bootstrap grid around the CTA row,
* wall composer/posts, and the Businesses/"Jobs, events & more" grids —
* those reuse shared, reskinned-elsewhere components (listing-card.php,
* engine-card.php) and the sitewide .panel box, so they keep their
* existing look rather than getting page-specific classes that would
* only duplicate what .panel already does.
*/
.pf-editorial {
--pe-ink: #1B1D18;
--pe-soft: #5A594C;
--pe-mute: #8D8879;
--pe-bg: #FFFFFF;
--pe-surface: #FFFFFF;
--pe-surface-2:#F7F7F5;
--pe-surface-3:#EFEEE9;
--pe-border: #E6E4DC;
--pe-brand: #1E4B3D;
--pe-brand-dark: #163A2F;
--pe-brand-tint: #E3F1E9;
--pe-brand-ink: #1F7A4D;
--pe-signal: #B5740E;
--pe-signal-tint:#FBF0DA;
--pe-verified: #1568A8;
--pe-verified-tint: #E8F1FA;
--pe-danger: #B3261E;
--pe-danger-tint:#FBECEB;
--pe-shadow: 0 1px 2px rgba(20,22,17,.04), 0 18px 40px -22px rgba(20,22,17,.22);
--pe-r-sm: 12px; --pe-r-md: 16px; --pe-r-lg: 20px;
--pe-font-h: 'Fraunces', Georgia, serif;
--pe-font-b: 'IBM Plex Sans', system-ui, sans-serif;
--pe-font-m: 'IBM Plex Mono', ui-monospace, monospace;
background: var(--pe-bg);
color: var(--pe-ink);
font-family: var(--pe-font-b);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .pf-editorial {
--pe-ink: #EDEDE6; --pe-soft: #C2C0B2; --pe-mute: #8F8C7C;
--pe-bg: #14161A; --pe-surface: #191C1F; --pe-surface-2:#20242A; --pe-surface-3:#262B31;
--pe-border: #2C3138;
--pe-brand: #4FAE83; --pe-brand-dark: #6FC49B; --pe-brand-tint: #163227; --pe-brand-ink: #6FC49B;
--pe-signal: #E0A548; --pe-signal-tint:#332811;
--pe-verified: #6BB4EA; --pe-verified-tint: #17293A;
--pe-danger: #E28880; --pe-danger-tint:#33201E;
}
}
:root[data-theme="dark"] .pf-editorial {
--pe-ink: #EDEDE6; --pe-soft: #C2C0B2; --pe-mute: #8F8C7C;
--pe-bg: #14161A; --pe-surface: #191C1F; --pe-surface-2:#20242A; --pe-surface-3:#262B31;
--pe-border: #2C3138;
--pe-brand: #4FAE83; --pe-brand-dark: #6FC49B; --pe-brand-tint: #163227; --pe-brand-ink: #6FC49B;
--pe-signal: #E0A548; --pe-signal-tint:#332811;
--pe-verified: #6BB4EA; --pe-verified-tint: #17293A;
--pe-danger: #E28880; --pe-danger-tint:#33201E;
}
.pf-editorial h1, .pf-editorial h2, .pf-editorial h3 { font-family: var(--pe-font-h); color: var(--pe-ink); letter-spacing: -.01em; }
/* Cover photo */
/* 2026-09 — fixed aspect-ratio instead of a raw px height, same fix and
same reasoning as listing.php's cover (m_0528): scales cleanly at any
width instead of cropping/letterboxing depending on the source photo's
own proportions.
2026-09 follow-up — direct feedback against the live page: 16/5 read as
visibly shorter than the cover this page used to show before the
aspect-ratio conversion (the old raw px heights this replaced ran
roughly 260-320px tall at a typical container width, which 16/5 undercuts
at anything above ~1040px wide). 16/4.5 restores that taller feel while
staying a real, responsive ratio instead of a fixed px height again;
changed the same way in listing-editorial.css's .cover-hero and
engine-editorial.css's .banner-hero and blog-public.css's
.pf-cover-wrap, so every engine's cover stays the same height relative
to its own width ("same look alike to listing" applies to size, not
just treatment). */
.pf-editorial .pf-cover{aspect-ratio:16/4.5;border-radius:var(--pe-r-lg);overflow:hidden;position:relative;background:linear-gradient(135deg,var(--pe-brand-tint),var(--pe-surface-3));margin-bottom:0}
@media(max-width:767px){.pf-editorial .pf-cover{aspect-ratio:4/3;border-radius:var(--pe-r-md)}}
.pf-editorial .pf-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pf-editorial .pf-cover-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--pe-brand-tint),var(--pe-surface-3))}
/* 2026-09 — no-cover fallback now also shows the member's name, same
gradient+overlay treatment as listing.php/engine-single.php's
banner-noimg (see profile.php's docblock at the cover markup). */
/* 2026-09 follow-up: title moved from bottom-left to top-left. Bottom-left
is where the avatar overlaps the cover (.pf-avatar-overlap's negative
margin, formerly .pf-identity before the Phase 5 split) —
live-verified on a no-cover-photo profile that the fallback title text
and the avatar collided there. Top-left keeps the title clear of the
avatar/name box entirely, giving the name/title the dedicated space it
was missing. Same reasoning applied to listing-editorial.css's and
engine-editorial.css's own .banner-noimg (their logo/avatar overlaps sit
in the same bottom-left corner). */
.pf-editorial .banner-noimg{position:relative;display:flex;align-items:flex-start;padding:22px}
.pf-editorial .banner-noimg::before{content:"";position:absolute;inset:0;background:var(--ni-grad)}
.pf-editorial .banner-noimg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 60%)}
.pf-editorial .banner-noimg-inner{position:relative;z-index:2;color:#fff}
.pf-editorial .banner-noimg-inner h1{color:#fff;font-size:24px;font-weight:660;margin:0}
.pf-editorial .pf-cover-edit-btn{position:absolute;top:14px;right:14px;bottom:auto;left:auto;background:rgba(20,22,17,.55);color:#fff;border:0;border-radius:20px;padding:7px 13px;font-size:12px;font-weight:650;display:flex;align-items:center;gap:6px;cursor:pointer}
.pf-editorial .pf-cover-edit-btn:hover{background:rgba(20,22,17,.72)}
/* Avatar overlap — byte-identical shape to listing-editorial.css's own
.logo-overlap (see that file), just circular and a touch larger since a
person's face reads better bigger than a square logo mark. 2026-09
(Phase 5, "match Listing 100%"): this used to be a flex row that also
carried the name/handle in the same block, overlapping the cover with
both — now it's ONLY the avatar, exactly like Listing's logo, and the
name/handle moved to .pf-namebox below as fully independent page
content (see profile.php's own comment at both spots). */
.pf-editorial .pf-avatar-overlap{margin-top:-52px;margin-bottom:.75rem;margin-left:20px;position:relative;z-index:2}
.pf-editorial .pf-avatar-wrap{margin-top:0}
.pf-editorial .pf-avatar{width:104px;height:104px;border-width:5px;border-color:var(--pe-surface);box-shadow:var(--pe-shadow);background:var(--pe-brand)}
.pf-editorial .pf-avatar-fallback{font-family:var(--pe-font-h)}
@media(max-width:575px){.pf-editorial .pf-avatar{width:80px;height:80px;border-width:4px}.pf-editorial .pf-avatar-overlap{margin-top:-36px;margin-left:14px}}
/* Title row — byte-identical shape to listing-editorial.css's own
.hero-name/.hero-handle, just under the .pf-namebox class name this
page already used for its heading block. Ordinary page content now,
inside .col-lg-8 like Listing's own title row — no overlap, no shared
row with the avatar, no negative margin. */
.pf-editorial .pf-namebox h1{font-weight:660;font-size:28px;text-wrap:balance;margin-bottom:0}
.pf-editorial .pf-handle{color:var(--pe-mute);font-size:13.5px}
/* 2026-09 (Phase 5, "double-check against listing") — Profile's title row
was missing the two pieces Listing's own _listing-hero-identity.php
always had: a kicker chip above the name (Listing's .sector-chip) and a
meta-strip of stat pills under the handle line (Listing's real
views/rating/followers stat-pills). Byte-identical class names/values to
listing-editorial.css's own .sector-chip/.stat-pill, just re-scoped to
--pe-* tokens — same mirroring pattern already used for every other
shared shape on this page (.pf-avatar-overlap/.pf-namebox above). Real
data only: the kicker reads $user['display_role'] (falls back to the
literal word "Member", not an invented field) and the meta-strip pills
read the same real reward-tier/badge counts this page's sidebar was
already computing — nothing new queried, nothing fabricated. */
.pf-editorial .sector-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--pe-brand-tint);color:var(--pe-brand-ink);font-weight:600;font-size:12.3px;padding:.3rem .7rem;border-radius:999px;text-decoration:none;margin-bottom:.6rem}
.pf-editorial .stat-pill{background:var(--pe-surface-2);border:1px solid var(--pe-border);color:var(--pe-soft);font-size:12.5px;font-weight:650;padding:.3rem .65rem;border-radius:999px;display:inline-flex;align-items:center;gap:.3rem}
/* Section headings above the Businesses / postings grids */
.pf-editorial .pf-section-heading{font-family:var(--pe-font-h);font-weight:600;font-size:18px;color:var(--pe-ink);margin:0 0 1rem}
/* Sidebar — ONE sticky card, .content-sec divides it internally. Same
pattern/values as .es-editorial .side-card and .es-editorial .content-sec
in engine-editorial.css, renamed to this page's own vocabulary. */
.pf-editorial .pf-side{background:var(--pe-surface);border:1px solid var(--pe-border);border-radius:var(--pe-r-md);padding:20px 22px;position:sticky;top:76px}
@media(max-width:991px){.pf-editorial .pf-side{padding:18px;position:static}}
.pf-editorial .content-sec{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--pe-border)}
.pf-editorial .pf-side > .content-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.pf-editorial .pf-stats{display:flex;justify-content:space-around;text-align:center;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--pe-border)}
.pf-editorial .pf-stats .n{font-weight:700;font-size:17px;font-family:var(--pe-font-m);color:var(--pe-ink)}
.pf-editorial .pf-stats .l{font-size:11px;color:var(--pe-mute);margin-top:2px}
.pf-editorial .pf-bio{font-size:13.3px;line-height:1.65;color:var(--pe-soft);margin-bottom:.8rem}
.pf-editorial .pf-contact-row{display:flex;align-items:center;gap:8px;font-size:12.6px;color:var(--pe-soft);text-decoration:none;padding:.3rem 0}
.pf-editorial .pf-contact-row i{color:var(--pe-brand-ink);width:16px;text-align:center;flex-shrink:0}
.pf-editorial .pf-contact-row:hover{color:var(--pe-ink)}
.pf-editorial .pf-friend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:.8rem}
.pf-editorial .pf-friend{text-align:center;text-decoration:none;color:inherit}
.pf-editorial .pf-friend .av{width:48px;height:48px;border-radius:50%;background:var(--pe-brand);color:#fff;display:grid;place-items:center;font-weight:700;margin:0 auto 4px;overflow:hidden}
.pf-editorial .pf-friend .av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-editorial .pf-friend .nm{font-size:10.8px;font-weight:600;color:var(--pe-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* kit-pill (role badge) sits inside the sidebar — keep its spacing sane
against the surrounding editorial rhythm without touching the shared
.kit-pill atom itself. */
.pf-editorial .kit-pill{font-family:var(--pe-font-b)}
/* ===================================================================
2026-09 profile rebuild — "work exactly like the listing page": the
tab bar below reuses the SAME .section-nav-wrap/.section-nav/.nav-link/
.cnt markup as listing.php's own tab bar, and the badges card below
reuses the exact same badge-ring-row component/classes listing.php and
engine-single.php already render — these are the shared, generic,
prefix='' class names documented in that component's own docblock, just
given their own scoped values here the same way .lp-editorial and
.es-editorial each already do. Nothing here is a new/separate template
system.
2026-09 (later same round) — tabs are real click-to-switch now, not
scroll-spy: every panel still renders server-side regardless of which
is active, but only the active one is visible (see the [data-nav-panel]
rule below and profile.php's own script). Matches listing.php's tab bar
fix — see migrations/m_0528_listing_gallery_tab_v589.php's docblock for
the full reasoning and the live-verified DOM-race bug that fix caught.
=================================================================== */
/* Follower/following line under the handle, and the verified checkmark
inline with the name (identical treatment to listing.php's hero-name). */
.pf-editorial .pf-namebox h1 .bi-patch-check-fill{color:var(--pe-brand-ink)}
.pf-editorial .pf-follow-counts{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13.5px;color:var(--pe-mute);margin-top:2px}
.pf-editorial .pf-follow-counts a{color:var(--pe-ink);font-weight:650;text-decoration:none}
.pf-editorial .pf-follow-counts a:hover{color:var(--pe-brand-ink)}
.pf-editorial .pf-follow-counts b{font-family:var(--pe-font-m)}
/* Action row — Follow/Friends/Message, more prominent than the plain
.btn-quiet/.btn-ink sizing elsewhere. Deliberately NOT a new button
component: .pf-cta-btn is a styling hook layered onto the SAME shared
follow-button.php component and the SAME .btn-ink/.btn-quiet color
classes the rest of the site already uses (see this file's own top
docblock on shared atoms) — only the shape/weight changes here, into a
bigger pill matching the rest of this page's editorial language. */
.pf-editorial .pf-cta-btn{border-radius:999px !important;padding:.68rem 1.3rem !important;font-weight:650 !important;font-size:14px !important;display:inline-flex;align-items:center;gap:8px}
.pf-editorial .pf-cta-btn.btn-ink{background:var(--pe-brand);border-color:var(--pe-brand)}
.pf-editorial .pf-cta-btn.btn-ink:hover{background:var(--pe-brand-dark);border-color:var(--pe-brand-dark)}
.pf-editorial .pf-cta-btn.btn-quiet{background:var(--pe-brand-tint);color:var(--pe-brand-ink);border-color:var(--pe-brand-tint)}
.pf-editorial .pf-cta-btn.btn-quiet:hover{background:var(--pe-danger-tint);color:var(--pe-danger);border-color:var(--pe-danger-tint)}
.pf-editorial .pf-cta-btn-ghost{border-radius:999px !important;padding:.68rem 1.3rem !important;font-weight:600 !important;font-size:14px !important;background:transparent;border-color:var(--pe-border) !important;color:var(--pe-soft)}
.pf-editorial .pf-cta-btn-ghost:hover{background:var(--pe-surface-2);color:var(--pe-ink)}
/* 2026-09 — click-to-switch tabs (same fix as .lp-editorial's own, see
m_0528's docblock): only the active panel shows, every panel still
renders server-side regardless. */
.pf-editorial [data-nav-panel]{display:none}
.pf-editorial [data-nav-panel].active{display:block}
/* Section nav — byte-identical rule set to .lp-editorial's own (see that
file's own comment for the full rationale), just re-scoped to this
page's wrapper and token names. */
.pf-editorial .section-nav-wrap{border-bottom:1px solid var(--pe-border);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:1.5rem}
.pf-editorial .section-nav-wrap::-webkit-scrollbar{display:none}
.pf-editorial .section-nav-wrap.nav-sticky{position:sticky;top:59px;z-index:900;background:var(--pe-bg)}
.pf-editorial .section-nav-wrap.nav-sticky.nav-stuck{box-shadow:0 6px 16px rgba(20,22,17,.08)}
.pf-editorial .section-nav{display:flex;gap:0}
.pf-editorial .nav-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--pe-font-b);font-weight:650;font-size:13.3px;color:var(--pe-mute);padding:14px 4px;margin-right:26px;border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap}
.pf-editorial .nav-link:hover{color:var(--pe-ink)}
.pf-editorial .nav-link.active{color:var(--pe-ink);border-bottom-color:var(--pe-brand)}
.pf-editorial .cnt{background:var(--pe-surface-2);color:var(--pe-soft);border-radius:999px;font-size:11px;font-weight:700;padding:.05rem .5rem;font-family:var(--pe-font-m)}
.pf-editorial .nav-link.active .cnt{background:var(--pe-brand-tint);color:var(--pe-brand-ink)}
.pf-editorial .sec-title{font-weight:600;font-size:19px;margin:1.6rem 0 1rem}
.pf-editorial .sec-block:first-of-type .sec-title{margin-top:0}
/* Articles tab */
.pf-editorial .pf-article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:560px){.pf-editorial .pf-article-grid{grid-template-columns:1fr}}
.pf-editorial .pf-article-card{background:var(--pe-surface);border:1px solid var(--pe-border);border-radius:var(--pe-r-md);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.pf-editorial .pf-article-card .cov{height:120px;background:var(--pe-surface-3);position:relative}
.pf-editorial .pf-article-card .cov img{width:100%;height:100%;object-fit:cover;display:block}
.pf-editorial .pf-article-card .abadge{position:absolute;top:9px;left:9px;background:var(--pe-surface);color:var(--pe-brand-ink);font-size:10px;font-weight:700;padding:.18rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.pf-editorial .pf-article-card .abody{padding:12px 13px;flex:1;display:flex;flex-direction:column}
.pf-editorial .pf-article-card .atitle{font-family:var(--pe-font-h);font-weight:650;font-size:14.8px;line-height:1.32;margin-bottom:5px;text-wrap:balance}
.pf-editorial .pf-article-card .aexc{font-size:12.3px;color:var(--pe-soft);line-height:1.5;margin-bottom:auto}
.pf-editorial .pf-article-card .ameta{font-size:11px;color:var(--pe-mute);margin-top:9px;padding-top:7px;border-top:1px solid var(--pe-border)}
/* Following/Followers tabs — one row per person or business, and the
privacy-blocked state for a visitor who doesn't qualify. */
.pf-editorial .pf-people-list{display:flex;flex-direction:column}
.pf-editorial .pf-people-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--pe-border)}
.pf-editorial .pf-people-row:last-child{border-bottom:0}
.pf-editorial .pf-people-row .av{width:42px;height:42px;border-radius:50%;background:var(--pe-brand);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0;overflow:hidden}
.pf-editorial .pf-people-row .av.sq{border-radius:9px;background:var(--pe-surface-3);color:var(--pe-mute)}
.pf-editorial .pf-people-row .av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-editorial .pf-people-row .meta{flex:1;min-width:0}
.pf-editorial .pf-people-row .nm{font-weight:650;font-size:13.6px;color:var(--pe-ink)}
.pf-editorial .pf-people-row .tp{font-size:11.3px;color:var(--pe-mute)}
.pf-editorial .pf-privacy-note{background:var(--pe-surface-2);border:1px dashed var(--pe-border);border-radius:var(--pe-r-md);padding:2rem;text-align:center;color:var(--pe-mute);font-size:13.3px}
.pf-editorial .pf-privacy-note i{font-size:22px;display:block;margin-bottom:8px}
/* Badges card — same shared component/classes as listing.php's sidebar
(see badge-ring-row.php's own docblock: prefix='' is this exact
vocabulary, shared across Listing/Engine/Profile now). */
.pf-editorial .badges-card{border:none;padding:0}
.pf-editorial .badges-row{display:flex;gap:14px;flex-wrap:wrap}
.pf-editorial .badge-ring-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:56px;text-align:center}
.pf-editorial .badge-ring{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;margin:0 auto}
.pf-editorial .badge-ring-item span:last-child{font-size:10px;font-weight:650;color:var(--pe-soft);line-height:1.2}
/* Rewards card — real tier/points from core/RewardPoints.php, shown on a
page for the first time. */
.pf-editorial .pf-reward-head{display:flex;align-items:center;gap:12px}
.pf-editorial .pf-reward-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.pf-editorial .pf-reward-name{font-weight:700;font-size:14.5px;color:var(--pe-ink)}
.pf-editorial .pf-reward-points{font-size:11.3px;color:var(--pe-mute);font-family:var(--pe-font-m)}
.pf-editorial .pf-reward-bar-track{height:6px;border-radius:99px;background:var(--pe-surface-3);margin-top:11px;overflow:hidden}
.pf-editorial .pf-reward-bar-fill{height:100%;border-radius:99px;background:var(--pe-brand)}
.pf-editorial .pf-reward-next{font-size:10.8px;color:var(--pe-mute);margin-top:6px}