/*
 * NxtGen — archetype-category.css
 * Styles for page-archetype-category.php
 * Scoped to #nxac-page
 */

/* ═══════════════════════════════════════════════════════════════
   ROOT
═══════════════════════════════════════════════════════════════ */

#nxac-page {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  color: #111827;
  background: #ffffff;
  line-height: 1.6;
}

#nxac-page * { box-sizing: border-box; }

#nxac-page a {
  color: #6C63FF;
  text-decoration: none;
}
#nxac-page a:hover { text-decoration: underline; }

.nxac-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.nxac-error {
  padding: 80px 40px;
  text-align: center;
  color: #6B7280;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */

.nxac-header {
  background: linear-gradient(135deg, #1A1A2E 0%, #2D2D6B 100%);
  padding: 64px 0 56px;
  border-bottom: 3px solid #6C63FF;
}

.nxac-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.nxac-arch-badge {
  background: rgba(108,99,255,0.25);
  color: #a5b4fc;
  border: 1px solid rgba(108,99,255,0.4);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nxac-tool-count {
  color: #6B7280;
  font-size: 0.84rem;
}

.nxac-header__title {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px;
  line-height: 1.2;
}

.nxac-header__sub {
  font-size: 1.05rem;
  color: #9CA3AF;
  margin: 0 0 24px;
  max-width: 680px;
}

.nxac-header__ngs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: #9CA3AF;
}

.nxac-ngs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6C63FF;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RANKINGS TABLE
═══════════════════════════════════════════════════════════════ */

.nxac-rankings {
  padding: 48px 0 56px;
  background: #F9FAFB;
}

.nxac-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

/* Column header row */
.nxac-table-head {
  display: grid;
  grid-template-columns: 48px 1fr 120px 130px 110px 110px 200px;
  align-items: center;
  padding: 12px 20px;
  background: #1A1A2E;
  gap: 12px;
}

.nxac-table-head .nxac-col {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tool rows */
.nxac-table-row {
  border-top: 1px solid #E5E7EB;
  transition: background 0.15s;
}

.nxac-table-row:hover {
  background: #F9FAFB;
}

.nxac-table-row--top {
  border-top: none;
  border-left: 4px solid #6C63FF;
}

.nxac-top-banner {
  background: linear-gradient(90deg, #6C63FF15, transparent);
  padding: 6px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6C63FF;
}

.nxac-row-inner {
  display: grid;
  grid-template-columns: 48px 1fr 120px 130px 110px 110px 200px;
  align-items: center;
  padding: 16px 20px;
  gap: 12px;
}

.nxac-rank-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: #D1D5DB;
  font-family: 'Montserrat', sans-serif;
}

.nxac-table-row--top .nxac-rank-num {
  color: #6C63FF;
}

.nxac-tool-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}

.nxac-tool-name:hover {
  color: #6C63FF;
  text-decoration: none;
}

.nxac-tool-tagline {
  display: block;
  font-size: 0.78rem;
  color: #6B7280;
  line-height: 1.4;
}

/* Score pill */
.nxac-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--band-color, #6C63FF);
  font-size: 1rem;
  font-weight: 800;
  color: var(--band-color, #6C63FF);
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 3px;
}

.nxac-col--score {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nxac-band-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Persona tag */
.nxac-persona-tag {
  display: inline-block;
  background: #EFF6FF;
  color: #1D4ED8;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Pricing */
.nxac-col--pricing {
  font-size: 0.88rem;
  font-weight: 600;
  color: #374151;
}

/* Free tier */
.nxac-free-yes {
  color: #16A34A;
  font-weight: 700;
  font-size: 0.84rem;
}

.nxac-free-no {
  color: #9CA3AF;
  font-size: 0.84rem;
}

/* CTA buttons */
.nxac-col--cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nxac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.15s;
  text-decoration: none;
}

.nxac-btn--review {
  background: transparent;
  border: 1.5px solid #6C63FF;
  color: #6C63FF;
}

.nxac-btn--review:hover {
  background: #6C63FF;
  color: #ffffff;
  text-decoration: none;
}

.nxac-btn--try {
  background: #6C63FF;
  color: #ffffff;
  border: 1.5px solid #6C63FF;
}

.nxac-btn--try:hover {
  background: #5B52EE;
  border-color: #5B52EE;
  text-decoration: none;
}

/* ── Pillar sparkline bar ── */
.nxac-pillar-bar {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 10px 20px 14px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.nxac-pillar-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nxac-pillar-name {
  font-size: 0.65rem;
  color: #9CA3AF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nxac-pillar-track {
  height: 4px;
  background: #E5E7EB;
  border-radius: 999px;
  overflow: hidden;
}

.nxac-pillar-fill {
  height: 100%;
  background: #6C63FF;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.nxac-pillar-val {
  font-size: 0.7rem;
  font-weight: 700;
  color: #374151;
}

/* ═══════════════════════════════════════════════════════════════
   EXPLAINER
═══════════════════════════════════════════════════════════════ */

.nxac-explainer {
  padding: 56px 0;
  background: #ffffff;
  border-top: 1px solid #E5E7EB;
}

.nxac-explainer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.nxac-explainer__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 14px;
}

.nxac-explainer__text {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.7;
  margin: 0 0 16px;
}

.nxac-explainer__block--who {
  background: #F3F2FF;
  border-radius: 12px;
  padding: 28px;
  border-left: 4px solid #6C63FF;
}

.nxac-link-arrow {
  font-size: 0.88rem;
  font-weight: 700;
  color: #6C63FF;
}

/* ═══════════════════════════════════════════════════════════════
   METHODOLOGY
═══════════════════════════════════════════════════════════════ */

.nxac-methodology {
  padding: 56px 0;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
}

.nxac-methodology__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 14px;
}

.nxac-methodology__intro {
  font-size: 0.95rem;
  color: #374151;
  max-width: 720px;
  margin: 0 0 32px;
  line-height: 1.7;
}

.nxac-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.nxac-pillar-card {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 16px 18px;
}

.nxac-pillar-card__name {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6C63FF;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nxac-pillar-card__desc {
  display: block;
  font-size: 0.82rem;
  color: #6B7280;
  line-height: 1.5;
}

.nxac-methodology__link {
  font-size: 0.88rem;
}

.nxac-methodology__link a {
  font-weight: 700;
  color: #6C63FF;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .nxac-table-head,
  .nxac-row-inner {
    grid-template-columns: 40px 1fr 100px 110px 90px 90px 160px;
  }
  .nxac-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nxac-table-head { display: none; }

  .nxac-row-inner {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto;
  }

  .nxac-col--score    { grid-column: 1; grid-row: 2; }
  .nxac-col--tool     { grid-column: 2; grid-row: 1; }
  .nxac-col--persona  { grid-column: 2; grid-row: 2; }
  .nxac-col--pricing  { display: none; }
  .nxac-col--free     { display: none; }
  .nxac-col--cta      { grid-column: 1 / -1; grid-row: 3; }

  .nxac-pillar-bar {
    grid-template-columns: repeat(4, 1fr);
  }

  .nxac-explainer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .nxac-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .nxac-pillar-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   NXTGEN ARCHETYPE CATEGORY — FINAL LAYOUT FIXES
   Scoped only to #nxac-page
   ========================================================= */

html body #nxac-page{
  width:100%;
  max-width:none;
  margin:0 auto;
  overflow-x:hidden;
  background:#fff;
}

html body #nxac-page .nxac-container{
  width:min(1180px, calc(100% - 48px));
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}

html body #nxac-page .nxac-header{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:72px 0 66px;
  background:linear-gradient(135deg,#0E172A 0%,#1E1B4B 62%,#0E2A3A 100%);
  border-bottom:3px solid #009FE7;
}

html body #nxac-page .nxac-header__title{
  font-size:clamp(2.15rem, 4.8vw, 3.45rem);
  line-height:1.08;
  max-width:820px;
  letter-spacing:-0.025em;
}

html body #nxac-page .nxac-header__sub{
  font-size:1.02rem;
  line-height:1.65;
  max-width:760px;
}

html body #nxac-page .nxac-header__ngs-badge{
  max-width:100%;
  flex-wrap:wrap;
}

html body #nxac-page .nxac-rankings{
  padding:52px 0 58px;
  background:#F9FAFB;
}

html body #nxac-page .nxac-table-wrap{
  border-radius:18px;
  box-shadow:0 18px 46px rgba(15,23,42,.08);
  overflow:hidden;
  background:#fff;
}

html body #nxac-page .nxac-table-head,
html body #nxac-page .nxac-row-inner{
  grid-template-columns:54px minmax(280px,1.85fr) 118px 138px 115px 105px minmax(150px,180px);
  gap:12px;
}

html body #nxac-page .nxac-table-head{
  background:#0E172A;
  padding:13px 20px;
}

html body #nxac-page .nxac-table-row{
  background:#fff;
}

html body #nxac-page .nxac-row-inner{
  padding:19px 20px;
  min-height:128px;
}

html body #nxac-page .nxac-tool-name{
  font-family:'Montserrat','Open Sans',system-ui,sans-serif;
  font-weight:800;
  color:#111827;
}

html body #nxac-page .nxac-tool-tagline{
  font-size:.82rem;
  line-height:1.5;
  max-width:430px;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

html body #nxac-page .nxac-score-pill{
  width:54px;
  height:54px;
  background:#fff;
}

html body #nxac-page .nxac-col--cta{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:8px;
  min-width:150px;
}

html body #nxac-page .nxac-btn{
  width:100%;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  text-align:center;
  white-space:normal;
  line-height:1.2;
}

html body #nxac-page .nxac-btn--try{
  background:linear-gradient(90deg,#6C63FF,#009FE7);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 22px rgba(108,99,255,.22);
}

html body #nxac-page .nxac-btn--try:hover{
  background:linear-gradient(90deg,#5B52EE,#008FD1);
  border-color:transparent;
  color:#fff;
}

html body #nxac-page .nxac-pillar-bar{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:8px;
  padding:12px 20px 16px;
}

html body #nxac-page .nxac-explainer{
  padding:56px 0 64px;
  background:#fff;
}

html body #nxac-page .nxac-explainer__block--who{
  box-shadow:0 14px 34px rgba(15,23,42,.04);
}

html body #nxac-page .nxac-methodology{
  padding:56px 0 64px;
}

html body #nxac-page .nxac-pillar-card{
  box-shadow:0 10px 22px rgba(15,23,42,.035);
}

@media(max-width:980px){
  html body #nxac-page .nxac-table-head{display:none;}
  html body #nxac-page .nxac-row-inner{
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:start;
    min-height:0;
  }
  html body #nxac-page .nxac-col--rank{grid-column:1;grid-row:1;}
  html body #nxac-page .nxac-col--tool{grid-column:2;grid-row:1;}
  html body #nxac-page .nxac-col--score{grid-column:3;grid-row:1;}
  html body #nxac-page .nxac-col--persona{grid-column:2;grid-row:2;margin-top:10px;}
  html body #nxac-page .nxac-col--pricing,
  html body #nxac-page .nxac-col--free{display:none;}
  html body #nxac-page .nxac-col--cta{
    grid-column:2 / 4;
    grid-row:3;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
    margin-top:12px;
  }
  html body #nxac-page .nxac-btn{width:auto;min-width:132px;}
  html body #nxac-page .nxac-pillar-bar{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media(max-width:640px){
  html body #nxac-page .nxac-container{width:min(100% - 28px,1180px);}
  html body #nxac-page .nxac-header{padding:52px 0 48px;}
  html body #nxac-page .nxac-header__meta{align-items:flex-start;flex-direction:column;gap:8px;}
  html body #nxac-page .nxac-row-inner{grid-template-columns:32px minmax(0,1fr);}
  html body #nxac-page .nxac-col--score{grid-column:2;grid-row:2;margin-top:10px;align-items:flex-start;}
  html body #nxac-page .nxac-col--persona{grid-column:2;grid-row:3;}
  html body #nxac-page .nxac-col--cta{grid-column:1 / -1;grid-row:4;flex-direction:column;align-items:stretch;}
  html body #nxac-page .nxac-btn{width:100%;}
  html body #nxac-page .nxac-pillar-bar{grid-template-columns:repeat(2,minmax(0,1fr));}
  html body #nxac-page .nxac-pillar-grid{grid-template-columns:1fr;}
}