/* ==========================================================================
   Engine (Job / Event / Candidate / Professional) — Editorial template
   --------------------------------------------------------------------------
   2026-09 — same visual direction approved for Listing (engine-templates-
   redesign-mockup.html): white background, Fraunces + IBM Plex Sans, one
   shared brand-green accent across all four kinds on purpose (see
   EngineController's own comment on $engineEditorialTheme — this page is
   meant to read as the same site as the listing page, not four
   differently-branded ones).

   Full rewrite, not a color patch: the old .es-hero/.es-content-card/
   .es-sec/.es-who-x/.pf-avatar-x/.pf-identity-strip/.pf-portfolio-x/
   .pf-affil-x vocabulary has been renamed throughout views/public/
   engine-single.php, _engine-hero.php and _engine-contact-card.php — none
   of it exists in those files any more. status-mini-card.php and
   badge-ring-row.php now emit the SAME unprefixed classes
   (.status-card/.badges-row/.badge-ring/etc.) that Listing's own
   assets/css/listing-editorial.css defines, since both pages render that
   piece identically — see this file's own rules for those below, which
   intentionally match listing-editorial.css's rules line for line.

   Scoped under .es-editorial (the wrapper engine-single.php prints — see
   EngineController's $engineEditorialTheme flag and views/layout.php's
   conditional <link>), so this can never leak onto listing.php or
   profile.php.
   ========================================================================== */

.es-editorial {
  --ee-ink:      #1B1D18;
  --ee-soft:     #5A594C;
  --ee-mute:     #8D8879;
  --ee-bg:       #FFFFFF;
  --ee-surface:  #FFFFFF;
  --ee-surface-2:#F7F7F5;
  --ee-surface-3:#EFEEE9;
  --ee-border:   #E6E4DC;
  --ee-brand:      #1E4B3D;
  --ee-brand-dark: #163A2F;
  --ee-brand-tint: #E3F1E9;
  --ee-brand-ink:  #1F7A4D;
  --ee-signal:     #B5740E;
  --ee-signal-tint:#FBF0DA;
  --ee-verified:      #1568A8;
  --ee-verified-tint: #E8F1FA;
  --ee-danger:     #B3261E;
  --ee-danger-tint:#FBECEB;
  --ee-shadow: 0 1px 2px rgba(20,22,17,.04), 0 18px 40px -22px rgba(20,22,17,.22);
  --ee-r-sm: 12px; --ee-r-md: 16px; --ee-r-lg: 20px;
  --ee-font-h: 'Fraunces', Georgia, serif;
  --ee-font-b: 'IBM Plex Sans', system-ui, sans-serif;

  background: var(--ee-bg);
  color: var(--ee-ink);
  font-family: var(--ee-font-b);
  font-size: 15px;
  line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .es-editorial {
    --ee-ink:      #EDEDE6; --ee-soft: #C2C0B2; --ee-mute: #8F8C7C;
    --ee-bg:       #14161A; --ee-surface: #191C1F; --ee-surface-2:#20242A; --ee-surface-3:#262B31;
    --ee-border:   #2C3138;
    --ee-brand:      #4FAE83; --ee-brand-dark: #6FC49B; --ee-brand-tint: #163227; --ee-brand-ink: #6FC49B;
    --ee-signal:     #E0A548; --ee-signal-tint:#332811;
    --ee-verified:      #6BB4EA; --ee-verified-tint: #17293A;
    --ee-danger:     #E28880; --ee-danger-tint:#33201E;
  }
}
:root[data-theme="dark"] .es-editorial {
  --ee-ink:      #EDEDE6; --ee-soft: #C2C0B2; --ee-mute: #8F8C7C;
  --ee-bg:       #14161A; --ee-surface: #191C1F; --ee-surface-2:#20242A; --ee-surface-3:#262B31;
  --ee-border:   #2C3138;
  --ee-brand:      #4FAE83; --ee-brand-dark: #6FC49B; --ee-brand-tint: #163227; --ee-brand-ink: #6FC49B;
  --ee-signal:     #E0A548; --ee-signal-tint:#332811;
  --ee-verified:      #6BB4EA; --ee-verified-tint: #17293A;
  --ee-danger:     #E28880; --ee-danger-tint:#33201E;
}

.es-editorial h1, .es-editorial h2, .es-editorial h3 { font-family: var(--ee-font-h); color: var(--ee-ink); letter-spacing: -.01em; }

/* ---- Banner hero (job/event) ------------------------------------------- */
.es-editorial .banner-hero{border-radius:var(--ee-r-lg);overflow:hidden;position:relative;margin-bottom:18px}
.es-editorial .banner-img{width:100%;height:220px;object-fit:cover;display:block}
.es-editorial .banner-noimg{width:100%;min-height:170px;position:relative;display:flex;align-items:flex-end;padding:22px}
.es-editorial .banner-noimg::before{content:"";position:absolute;inset:0;background:var(--ni-grad)}
.es-editorial .banner-noimg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 60%)}
.es-editorial .banner-noimg-inner{position:relative;z-index:2;color:#fff}
.es-editorial .banner-noimg-inner h1{color:#fff;font-size:24px;font-weight:660;margin:6px 0 2px}
.es-editorial .date-badge{position:absolute;top:16px;left:16px;background:var(--ee-surface);border-radius:12px;padding:8px 12px;text-align:center;box-shadow:var(--ee-shadow);z-index:3}
.es-editorial .date-badge .mon{font-size:10px;font-weight:700;color:var(--ee-signal);text-transform:uppercase;letter-spacing:.04em}
.es-editorial .date-badge .day{font-family:var(--ee-font-h);font-size:19px;font-weight:660;color:var(--ee-ink);line-height:1.1}

/* ---- Person hero (candidate / professional) ----------------------------- */
.es-editorial .avatar-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.es-editorial .avatar-row img,.es-editorial .avatar-row .noimg.round{width:74px;height:74px;border-radius:50%;object-fit:cover;flex-shrink:0}
.es-editorial .avatar-row .noimg.round .noimg-mark{font-size:22px;font-weight:700}

.es-editorial .person-cover{border-radius:var(--ee-r-lg);overflow:hidden;position:relative;margin-bottom:0}
.es-editorial .avatar-wrap{margin-top:-46px;margin-left:4px;flex-shrink:0;position:relative}
.es-editorial .avatar{width:104px;height:104px;border-radius:50%;border:5px solid var(--ee-surface);box-shadow:var(--ee-shadow);overflow:hidden;background:var(--ee-brand)}
.es-editorial .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.es-editorial .avatar-fallback{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:38px;font-family:var(--ee-font-h)}

.es-editorial .id-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:2px}
.es-editorial .id-item{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ee-soft)}
.es-editorial .id-item i{font-size:12px;color:var(--ee-mute)}
.es-editorial .id-rate{font-weight:650;color:var(--ee-brand-ink)}
.es-editorial .id-rate i{color:var(--ee-brand-ink)}
.es-editorial .id-cta{font-weight:650;color:var(--ee-brand-ink);text-decoration:none;padding:3px 10px;border:1.3px solid var(--ee-brand-ink);border-radius:20px}
.es-editorial .id-cta:hover{background:var(--ee-brand-tint)}
@media(max-width:575px){.es-editorial .id-strip{gap:6px 10px}.es-editorial .id-item{font-size:12px}}

/* ---- Main content card --------------------------------------------------- */
.es-editorial .content-card{background:var(--ee-surface);border:1px solid var(--ee-border);border-radius:var(--ee-r-md);padding:1.5rem;box-shadow:none}
@media(max-width:768px){.es-editorial .content-card{padding:1.1rem;border-radius:var(--ee-r-sm)}}
.es-editorial .content-sec{margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid var(--ee-border)}
.es-editorial .content-card > .content-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.es-editorial .content-sec > h2{font-family:var(--ee-font-b);font-size:13.5px;font-weight:700;letter-spacing:.005em;margin-bottom:.7rem;color:var(--ee-ink)}
@media(max-width:768px){.es-editorial .content-sec{margin-top:1.35rem;padding-top:1.1rem}}
.es-editorial dt.text-mute{color:var(--ee-mute)}

/* ---- Who posted this / offerings / portfolio / worked-with -------------- */
.es-editorial .who-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--ee-border);border-radius:var(--ee-r-sm);text-decoration:none;color:inherit}
.es-editorial .who-avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0}
.es-editorial .who-avatar-fallback{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.es-editorial .who-name{font-size:14px;font-weight:650}
.es-editorial .who-sub{font-size:11.5px;color:var(--ee-mute)}
.es-editorial .who-arrow{margin-left:auto;color:var(--ee-mute)}

.es-editorial .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:575px){.es-editorial .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:6px}}
.es-editorial .portfolio-tile{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background-size:cover;background-position:center}
.es-editorial .portfolio-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55));z-index:1}
.es-editorial .portfolio-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92);font-size:30px;z-index:0}
.es-editorial .portfolio-badge{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;z-index:2}
.es-editorial .portfolio-cap{position:absolute;left:8px;right:8px;bottom:6px;color:#fff;font-size:11px;font-weight:650;z-index:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.es-editorial .affil-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:20px;font-size:12.4px;font-weight:600;text-decoration:none;border:1px solid transparent}
.es-editorial .affil-chip img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#fff}
.es-editorial .affil-accepted{background:var(--ee-brand-tint);color:var(--ee-brand-ink);border-color:var(--ee-brand-tint)}
.es-editorial .affil-accepted:hover{border-color:var(--ee-brand)}
.es-editorial .affil-pending{background:var(--ee-surface-2);color:var(--ee-mute);border:1.3px dashed var(--ee-border);cursor:default;opacity:.9}
.es-editorial .rate-contact{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--ee-brand-ink);text-decoration:none;padding:2px 8px;border-radius:20px}
.es-editorial .rate-contact:hover{background:var(--ee-brand-tint)}

/* ---- Shared with Listing: status card / badges / hours / buttons -------
   Deliberately identical selectors and near-identical rules to
   listing-editorial.css's own — both pages render status-mini-card.php /
   badge-ring-row.php with the same unprefixed classes now. */
.es-editorial .side-card{background:var(--ee-surface);border:1px solid var(--ee-border);border-radius:var(--ee-r-md);padding:20px 22px;position:sticky;top:76px}
@media(max-width:991px){.es-editorial .side-card{padding:18px;position:static}}
.es-editorial .status-card{border:none;background:var(--ee-surface-2);border-radius:var(--ee-r-sm);padding:.9rem 1rem}
.es-editorial .status-card.is-open{background:var(--ee-brand-tint)}
.es-editorial .status-head{color:var(--ee-mute);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
.es-editorial .status-msg{margin-top:.4rem;font-size:14px}
.es-editorial .status-card.is-open .status-msg strong{color:var(--ee-brand-ink)}
.es-editorial .status-closed-text{color:var(--ee-mute)}
.es-editorial .badges-card{border:none;padding:0}
.es-editorial .badges-row{display:flex;gap:14px;flex-wrap:wrap}
.es-editorial .badge-ring-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:60px;text-align:center}
.es-editorial .badge-ring{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto}
.es-editorial .badge-ring-item span:last-child{font-size:10px;font-weight:650;color:var(--ee-soft);line-height:1.2}

.es-editorial .btn-ink{background:var(--ee-ink);border-color:var(--ee-ink);color:var(--ee-surface);font-family:var(--ee-font-b);font-weight:650;border-radius:var(--ee-r-sm)}
.es-editorial .btn-ink:hover{background:var(--ee-brand-dark);border-color:var(--ee-brand-dark);color:#fff}
.es-editorial .btn-accent{background:var(--ee-brand);border-color:var(--ee-brand);color:#fff;font-family:var(--ee-font-b);font-weight:650;border-radius:var(--ee-r-sm)}
.es-editorial .btn-accent:hover{background:var(--ee-brand-dark);border-color:var(--ee-brand-dark)}
.es-editorial .btn-quiet{background:var(--ee-surface);border:1px solid var(--ee-border);color:var(--ee-ink);font-family:var(--ee-font-b);font-weight:650;border-radius:var(--ee-r-sm)}
.es-editorial .btn-quiet:hover{border-color:var(--ee-mute);background:var(--ee-surface-2)}
.es-editorial .panel{background:var(--ee-surface);border:1px solid var(--ee-border);border-radius:var(--ee-r-md)}
.es-editorial .kit-strip{background:linear-gradient(135deg,var(--ee-brand),var(--ee-brand-dark));color:#fff;border-radius:var(--ee-r-sm);padding:14px 18px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.es-editorial .kit-strip.kit-strip--warm{background:linear-gradient(135deg,var(--ee-signal),#8f5a09)}
.es-editorial .kit-strip-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.85;width:100%}
.es-editorial .kit-strip-v{font-family:var(--ee-font-h);font-size:20px;font-weight:600}
.es-editorial .kit-strip-s{font-size:12px;opacity:.85}
.es-editorial .kit-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:20px}
.es-editorial .kit-pill--info{background:var(--ee-brand-tint);color:var(--ee-brand-ink)}
.es-editorial .kit-pill--mute{background:var(--ee-surface-2);color:var(--ee-soft);border:1px solid var(--ee-border)}
.es-editorial .kit-alert{display:flex;gap:9px;padding:11px 13px;border-radius:10px;font-size:12.5px}
.es-editorial .kit-alert--warn{background:var(--ee-signal-tint);color:#6B4A0C}
.es-editorial .kit-alert--info{background:var(--ee-verified-tint);color:#0F3F63}