/* ==========================================================================
   PAXION — DEV KIT
   Componentes específicos da página /devkit/. Reutiliza tokens, tipografia,
   grid e motion system existentes (tokens.css, base.css, layout.css,
   components.css, animations.css) — nada aqui redefine o que já existe.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Utilities                                                                */
/* ---------------------------------------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------------- */
/* Hero — auxiliary copy                                                   */
/* ---------------------------------------------------------------------- */
.dk-hero-sub{
  font-size:14px; line-height:1.65; color:var(--text-faint);
  max-width:440px; margin-top:-18px; margin-bottom:36px;
}
.dk-hero-meta{
  display:flex; align-items:center; gap:10px; margin-top:30px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.dk-hero-meta .sep{ color:var(--line-strong); }

/* ---------------------------------------------------------------------- */
/* Hero — orbit diagram (TOOLS / COURSES / BOOKS / FILMS -> DEV KIT)       */
/* ---------------------------------------------------------------------- */
/* every child is position:absolute, so the box needs an explicit width —
   otherwise it collapses to 0 once .hero-visual gets margin:auto at <=1024px */
.dk-orbit{ width:100%; }

.dk-orbit-ring{
  position:absolute; inset:14%; border:1px solid var(--line-strong); border-radius:50%;
}
.dk-orbit-ring::after{
  content:''; position:absolute; inset:-16px; border:1px dashed var(--line); border-radius:50%;
}
.dk-orbit-lines{ position:absolute; inset:0; width:100%; height:100%; }
.dk-orbit-lines line{ stroke:var(--line); stroke-width:1; }

.dk-orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(5,9,15,.85); border:1px solid var(--line-strong);
  box-shadow:0 0 40px rgba(76,224,179,.1), inset 0 0 20px rgba(76,224,179,.04);
}
.dk-orbit-core-label{
  display:flex; flex-direction:column; align-items:center; line-height:1.35;
  font-size:13px; letter-spacing:.06em; color:var(--text);
}
.dk-orbit-core-label span{ color:var(--accent); }

.dk-orbit-node{
  position:absolute; z-index:2; display:flex; align-items:center; gap:9px; transform:translate(-50%,-50%);
}
.dk-node-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 10px rgba(76,224,179,.55);
}
.dk-node-label{ font-size:11px; letter-spacing:.1em; color:var(--text-muted); white-space:nowrap; }

.dk-orbit-node.n1{ top:4%; left:50%; }
.dk-orbit-node.n2{ top:50%; left:95%; }
.dk-orbit-node.n3{ top:96%; left:50%; }
.dk-orbit-node.n4{ top:50%; left:5%; }

@media (prefers-reduced-motion:no-preference){
  .dk-orbit-ring{ animation:dk-spin 100s linear infinite; }
}
@keyframes dk-spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* WHY DEV KIT — intro + stats                                             */
/* ---------------------------------------------------------------------- */
.dk-intro-text{ color:var(--text-muted); font-size:16px; max-width:620px; margin-top:22px; }

.dk-stats{
  display:flex; gap:var(--space-6); flex-wrap:wrap;
  margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line);
}
.dk-stat{ display:flex; flex-direction:column; gap:6px; }
.dk-stat-num{ font-size:26px; color:var(--accent); }
.dk-stat-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

/* ---------------------------------------------------------------------- */
/* Toolbar — filtros + busca + contador                                    */
/* ---------------------------------------------------------------------- */
.dk-toolbar-section{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dk-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; padding:var(--space-4) 0;
}
.dk-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.dk-filter{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); border-radius:100px; color:var(--text-muted);
  transition:border-color var(--duration-ui) var(--ease-out), color var(--duration-ui) var(--ease-out), background var(--duration-ui) var(--ease-out);
}
.dk-filter:hover{ border-color:var(--line-strong); color:var(--text); }
.dk-filter.is-active{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.dk-filter:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

.dk-search{ flex:1; min-width:200px; max-width:280px; }
.dk-search-input{
  width:100%; font-family:var(--font-mono); font-size:12px; color:var(--text); background:transparent;
  border:1px solid var(--line); border-radius:100px; padding:10px 18px;
  transition:border-color var(--duration-ui) var(--ease-out);
}
.dk-search-input::placeholder{ color:var(--text-faint); }
.dk-search-input:focus{ outline:none; border-color:var(--accent); }
.dk-search-input::-webkit-search-cancel-button{ filter:invert(.7); }

.dk-count{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }

/* ---------------------------------------------------------------------- */
/* Kit sections                                                            */
/* ---------------------------------------------------------------------- */
/* the navbar is fixed, so anchor jumps (#tools, NEXT KIT, hash routing)
   need scroll-margin or the heading lands hidden underneath it */
.dk-kit, .dk-toolbar-section{ scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }

.dk-kit.is-hidden{ display:none; }

.dk-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--space-5); }

/* ---------------------------------------------------------------------- */
/* Subgroups — DEV KIT 01 separado por API / AI / DEPLOY / UI              */
/* ---------------------------------------------------------------------- */
.dk-subgroup{ margin-bottom:var(--space-6); }
.dk-subgroup:last-child{ margin-bottom:0; }
.dk-subgroup.is-hidden{ display:none; }

.dk-subgroup-head{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:12px; margin-bottom:var(--space-4); border-bottom:1px solid var(--line);
}
.dk-subgroup-label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.dk-subgroup-count{ font-size:11px; letter-spacing:.06em; color:var(--text-faint); }

/* three items per subgroup: keep them uniform (span 4 = 3-across) instead
   of letting the featured card widen to span 6 and break the row */
@media (min-width:761px){
  .dk-grid--sub .dk-card--featured{ grid-column:span 4; }
}

/* ---------------------------------------------------------------------- */
/* Resource card                                                           */
/* ---------------------------------------------------------------------- */
.dk-card{
  position:relative; grid-column:span 4; min-height:296px;
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(14,29,49,.55) 0%, rgba(2,5,10,.8) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  padding:var(--space-5); overflow:hidden;
  transition:border-color var(--duration-ui) var(--ease-out), transform var(--duration-ui) var(--ease-out);
}
.dk-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.dk-card:focus-within{ border-color:var(--line-strong); }
.dk-card.is-filtered-out{ display:none; }

.dk-card--featured{
  grid-column:span 6; min-height:332px;
  background:linear-gradient(180deg, rgba(22,38,61,.62) 0%, rgba(2,5,10,.82) 100%);
}

.dk-card-featured-tag{
  position:absolute; top:var(--space-5); right:var(--space-5); z-index:2;
  font-size:10px; letter-spacing:.14em; color:var(--accent);
  border:1px solid var(--line-strong); padding:5px 12px; border-radius:100px; background:rgba(5,9,15,.6);
}

.dk-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); padding-right:0; }
.dk-card--featured .dk-card-top{ padding-right:90px; }
.dk-card-num{ font-size:12px; color:var(--accent); letter-spacing:.06em; }
.dk-card-cat{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

.dk-card-title{ font-size:21px; margin-bottom:8px; transition:transform var(--duration-ui) var(--ease-out); }
.dk-card--featured .dk-card-title{ font-size:25px; }
.dk-card:hover .dk-card-title{ transform:translateX(5px); }

.dk-card-author{ font-size:11px; letter-spacing:.04em; color:var(--text-faint); margin-bottom:10px; }

.dk-card-desc{ color:var(--text-muted); font-size:14px; flex:1; margin-bottom:18px; }

.dk-card-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.dk-card-tags span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--line); padding:5px 10px; border-radius:100px;
}

.dk-card-action{ margin-top:auto; }

.dk-link{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.04em; color:var(--text);
}
.dk-link .arrow{ color:var(--accent); transition:transform var(--duration-ui) var(--ease-out); }
.dk-card:hover .dk-link .arrow{ transform:translateX(4px); }
.dk-link--toggle:focus-visible, .dk-link:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

.dk-link-panel{
  display:flex; flex-direction:column; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.dk-link-panel[hidden]{ display:none; }
.dk-link-item{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
  color:var(--text-muted); transition:color var(--duration-ui) var(--ease-out);
}
.dk-link-item:hover{ color:var(--accent); }
.dk-link-item:hover .arrow{ transform:translateX(3px); }
.dk-link-item .arrow{ color:var(--accent); transition:transform var(--duration-ui) var(--ease-out); }
.dk-link-item:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

/* ---------------------------------------------------------------------- */
/* Next kit link                                                           */
/* ---------------------------------------------------------------------- */
.dk-next{
  display:flex; align-items:baseline; gap:16px; margin-top:var(--space-6);
  padding-top:var(--space-5); border-top:1px solid var(--line);
}
.dk-next-label{ font-size:11px; letter-spacing:.14em; color:var(--text-faint); }
.dk-next-title{ font-size:18px; color:var(--text); transition:color var(--duration-ui) var(--ease-out); }
.dk-next-title .arrow{ display:inline-block; margin-left:2px; color:var(--accent); transition:transform var(--duration-ui) var(--ease-out); }
.dk-next:hover .dk-next-title{ color:var(--accent); }
.dk-next:hover .dk-next-title .arrow{ transform:translateX(4px); }
.dk-next:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

/* ---------------------------------------------------------------------- */
/* Editorial quote blocks                                                  */
/* ---------------------------------------------------------------------- */
.dk-quote{
  padding:var(--space-7) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center; transition:opacity var(--duration-ui) var(--ease-out);
}
.dk-quote.is-hidden{ display:none; }
.dk-quote-line{
  font-size:clamp(24px, 4.2vw, 48px); font-weight:500; letter-spacing:-0.01em; line-height:1.2;
  color:var(--text-muted);
}
.dk-quote-line--accent{ color:var(--text); }

/* ---------------------------------------------------------------------- */
/* Build (commercial CTA)                                                  */
/* ---------------------------------------------------------------------- */
.dk-build-headline{ font-size:clamp(32px, 5.5vw, 64px); max-width:760px; margin-bottom:20px; }
.dk-build-text{ color:var(--text-muted); font-size:16px; max-width:520px; margin-bottom:var(--space-5); }

/* ---------------------------------------------------------------------- */
/* Responsive — mesmos breakpoints do site (1024 / 900 / 760 / 430)        */
/* ---------------------------------------------------------------------- */
@media (max-width:1024px){
  .dk-orbit-node{ gap:7px; }
}

@media (max-width:900px){
  .dk-card{ grid-column:span 6; }
  .dk-card--featured{ grid-column:span 12; }
  .dk-card--featured .dk-card-top{ padding-right:90px; }
}

@media (max-width:760px){
  .dk-card, .dk-card--featured{ grid-column:span 12; min-height:auto; }
  .dk-grid{ gap:var(--space-4); }
  .dk-toolbar{ flex-direction:column; align-items:flex-start; }
  .dk-filters{ flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .dk-filter{ flex:none; }
  .dk-search{ max-width:none; width:100%; }
  .dk-count{ order:3; }
  .dk-stats{ gap:var(--space-5); }
  .dk-next{ flex-direction:column; gap:6px; }
  .dk-orbit-node.n2{ left:93%; }
  .dk-orbit-node.n4{ left:7%; }
}

@media (max-width:430px){
  .dk-orbit-core{ width:92px; height:92px; }
  .dk-orbit-core-label{ font-size:11px; }
  .dk-hero-sub{ margin-top:0; }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .dk-orbit-ring{ animation:none !important; }
  .dk-card, .dk-card-title, .dk-link .arrow, .dk-next-title, .dk-next-title .arrow{ transition:none !important; }
  .dk-card:hover{ transform:none !important; }
}