/* ==========================================================================
   POSTORIE EXPLORE MASTER STYLESHEET
   Clean MNC Specificity Hierarchy (Zero Layout Shift / CDN Cacheable)
   ========================================================================== */

/* Clean Scoped GeneratePress Container Reset for Explore */
:is(body.separate-containers, body.one-container) :is(.inside-article, .site-content, .entry-content):has(.pex-wrap) {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* ─────────────────────────────────────────────────────────────
   SELF-CONTAINED FALLBACKS
   Everything below uses :where() (0 specificity) so if the real
   postorie-global.css IS loaded, its rules always win untouched.
   If that stylesheet fails to load on a given page for any reason
   (caching, wrong path, page-builder stripping <head> assets, a
   new page not yet cache-busted, etc.), Explore still renders a
   correct, on-brand layout instead of collapsing to plain text.
───────────────────────────────────────────────────────────── */
:where(.pex-wrap.ph-wrap){max-width:1240px;margin:0 auto;padding:0 20px;box-sizing:border-box}
:where(.pex-wrap) :where(*){box-sizing:border-box}
:where(.pex-wrap .ph-container){max-width:1200px;margin:0 auto}
:where(.pex-wrap .ph-section){padding:24px 0}
:where(.pex-wrap .ph-eyebrow){display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent,#b8863b)}
:where(.pex-wrap .ph-h2){font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(24px,4vw,34px);line-height:1.2;color:var(--c-ink,#16243e);margin:0;letter-spacing:-0.02em}
:where(.pex-wrap .ph-tabs){display:inline-flex;gap:4px;background:var(--c-mist,#f4f5f7);padding:4px;border-radius:999px}
:where(.pex-wrap .ph-tab-btn){border:0;background:transparent;padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--c-muted,#64748b);cursor:pointer;white-space:nowrap}
:where(.pex-wrap .ph-tab-btn.is-active){background:var(--c-ink,#16243e);color:#fff}
:where(.pex-wrap .ph-card){background:#fff;border:1px solid var(--c-line,#e6e8ec);border-radius:var(--radius-xl,16px);box-shadow:var(--shadow-xs,0 1px 2px rgba(16,24,40,.05))}
:where(.pex-wrap .ph-btn){display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;border-radius:var(--radius-pill,999px);font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none}
:where(.pex-wrap .ph-btn-ghost){background:#fff;border-color:var(--c-line,#e6e8ec);color:var(--c-ink,#16243e)}
:where(.pex-wrap .ph-btn-ghost:hover){background:var(--c-mist,#f4f5f7)}
:where(.pex-wrap .ph-btn-sm){padding:8px 16px;font-size:12.5px}

/* ─────────────────────────────────────────────────────────────
   EXPLORE-SPECIFIC STYLES
───────────────────────────────────────────────────────────── */
.pex-head{margin-top:20px;margin-bottom:24px}
.pex-sub{color:var(--c-muted,#64748b);font-size:14.5px;margin-top:8px;max-width:60ch}
/* ---- BRAND NAVY BLUE & GOLD TAB BUTTONS ---- */
.pex-controls { display:flex; justify-content:center; align-items:center; width:100%; margin-bottom:32px; }
.pex-controls .ph-tabs {
    display: inline-flex;
    gap: 8px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    padding: 6px;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(15,27,61,0.06);
}

.pex-controls .ph-tab-btn {
    border: 1.5px solid transparent;
    background: #F8FAFC;
    color: #475569;
    padding: 10px 26px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    box-shadow: none;
}

.pex-controls .ph-tab-btn:hover {
    background: #F1F5F9;
    color: #0F1B3D;
    border-color: #C5A059; /* Gold Accent Hover */
}

.pex-controls .ph-tab-btn.is-active,
.pex-controls .ph-tab-btn.is-active:hover {
    background: #0F1B3D; /* Navy Blue */
    color: #FFFFFF;
    border-color: #C5A059; /* Gold Accent Border */
    box-shadow: 0 6px 20px rgba(15,27,61,0.22);
    transform: translateY(-1px);
}

.pex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pex-card{padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:260px;box-sizing:border-box;position:relative;overflow:visible;}
.pex-card-top{position:relative;margin:0 auto 16px;display:flex;justify-content:center;align-items:center;width:100%;}
.pex-avatar{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--ff-display,inherit);font-weight:700;font-size:22px;flex-shrink:0;margin:0 auto;overflow:hidden;box-shadow:0 4px 14px rgba(15,27,61,0.08);}
.pex-avatar-bg-1{background:#0f1b3d}.pex-avatar-bg-2{background:#1e3a8a}.pex-avatar-bg-3{background:#334155}.pex-avatar-bg-4{background:#155e75}.pex-avatar-bg-5{background:#365314}.pex-avatar-bg-6{background:#7c2d12}
.pex-avatar.is-company{border-radius:16px}
.pex-avatar img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;border-radius:inherit;margin:0 auto;}
.pex-avatar-logo{background:transparent;overflow:hidden}
.pex-avatar-logo img{width:100%;height:100%;object-fit:cover;object-position:center center;}
.pex-verified{position:absolute;bottom:-2px;right:calc(50% - 38px);background:#fff;border-radius:50%;padding:3px;color:var(--c-gold,#b8863b);box-shadow:0 2px 6px rgba(0,0,0,0.12);}
.pex-card-info{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;}
.pex-name{font-weight:700;color:var(--c-ink,#16243e);font-size:15px;font-family:var(--ff-display,inherit);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:center;}
.pex-name:hover{color:var(--c-accent,#b8863b)}
.pex-role{font-size:12.5px;color:var(--c-faint,#94a3b8);margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:32px;word-break:break-word;text-align:center;}
.pex-stats{display:flex;gap:14px;margin-top:10px;font-size:11.5px;color:var(--c-faint,#94a3b8);flex-wrap:wrap;justify-content:center;text-align:center;}
.pex-stats strong{color:var(--c-ink,#16243e);font-weight:700}
.pex-card-foot{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap;}
.pex-card-foot .pf-follow-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 18px;border-radius:999px;font-size:12.5px;font-weight:600;background:#0F1B3D;color:#FFFFFF;border:none;cursor:pointer;white-space:nowrap;}
.pex-card-foot .pf-follow-btn[data-following="1"]{background:#F1F5F9;color:#0F1B3D;border:1px solid #CBD5E1;}
.pex-card-foot .pf-follow-count{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#475569;background:#F1F5F9;padding:4px 9px;border-radius:999px;border:1px solid #E2E8F0;white-space:nowrap;}

.pex-loadmore-wrap{text-align:center;margin-top:32px}
.pex-empty-note{color:var(--c-faint,#94a3b8);font-size:13px;margin-top:8px}
.pex-empty-state{grid-column:1/-1;padding:48px 24px;text-align:center;border-style:dashed}
.pex-empty-state h3{font-family:var(--ff-display,inherit);color:var(--c-ink,#16243e);margin:0 0 8px}
.pex-empty-state p{color:var(--c-muted,#64748b);font-size:14px;margin:0}

/* ─────────────────────────────────────────────────────────────
   MOBILE — real breakpoints, tested widths, no overflow
───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .pex-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
}
@media (max-width:600px){
  :where(.pex-wrap.ph-wrap){padding:0 14px}
  :where(.pex-wrap .ph-section){padding:18px 0}
  .pex-head{margin-bottom:18px}
  .pex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pex-card{padding:14px}
  .pex-avatar{width:52px;height:52px;font-size:16px}
  .pex-name{font-size:13.5px}
  .pex-role{font-size:11.5px;min-height:28px}
  .pex-controls{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}
  .pex-search-wrap{max-width:none;width:100%}
  :where(.pex-wrap .ph-tabs){width:100%}
  :where(.pex-wrap .ph-tab-btn){flex:1;text-align:center}
}
@media (max-width:360px){
  .pex-grid{grid-template-columns:1fr;gap:10px}
  .pex-card{flex-direction:row;text-align:left;align-items:center;gap:12px;padding:12px}
  .pex-card-top{margin-bottom:0}
  .pex-name,.pex-role,.pex-stats{text-align:left}
  .pex-stats{justify-content:flex-start}
  .pex-card-foot{width:auto;margin-top:0;margin-left:auto}
}

/* Explore Hero Banner Tokens */
.pex-hero-banner { background: linear-gradient(135deg, #0F1B3D 0%, #162447 50%, #1A2B56 100%); color: #FFFFFF; border-radius: 20px; padding: 40px 32px 36px; margin-bottom: 32px; box-shadow: 0 10px 35px rgba(15, 27, 61, 0.12); text-align: center; position: relative; overflow: hidden; box-sizing: border-box; }
.pex-hero-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; }
.pex-badge-verified { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; font-size: 11.5px; color: #C5A059; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.pex-dot-active { width: 6px; height: 6px; border-radius: 50%; background: #10B981; display: inline-block; }
.pex-hero-title { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; color: #FFFFFF; margin: 0 0 10px; line-height: 1.2; letter-spacing: -0.02em; }
.pex-hero-gold { color: #C5A059; }
.pex-hero-desc { color: #94A3B8; font-size: clamp(13.5px, 1.4vw, 15.5px); margin: 0 auto 24px; line-height: 1.5; max-width: 640px; }
.pex-search-container { max-width: 620px; margin: 0 auto; }
.pex-search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none; }
.pex-search-input { width: 100%; padding: 12px 18px 12px 46px; border: 1.5px solid #CBD5E1; border-radius: 999px; font-size: 14px; background: #FFFFFF; color: #0F1B3D; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); box-sizing: border-box; outline: none; font-weight: 500; }
.pex-avatar-canvas { overflow: hidden; border-radius: 50%; margin: 0 auto; background: var(--av-bg, #0F1B3D); }
.pex-avatar-canvas.is-company { border-radius: 14px; }