/* ═══════════════════════════════════════════════════════════════
   LamaPixel — Service Pages CSS (v2.6+)

   Общие правила для 6 сервисных страниц с .np-page wrapper:
   tvorba-webu, tvorba-eshopu, mobilni-aplikace, automatizace,
   crm-erp, o-nas.

   Извлечено из inline <style> блоков, где раньше повторялось 4-6 раз.
   Уникальные стили каждой страницы остаются в её inline.

   Site convention (main.js):
   - DARK = absence of data-theme attribute (BASE)
   - LIGHT = html[data-theme="light"]
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Theme-aware page chrome ─────────────────────────────── */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{background:#0A0A0A;color:#F0F0F0;transition:background .3s,color .3s}
html[data-theme="light"] body{background:#FAFAFA;color:#1A1A1A}

html .np-page,
.np-page{
  min-height:calc(100vh - 120px);
  --c-paper:#0A0A0A;
  --c-card:#141414;
  --c-ink:#F0F0F0;
  --c-ink-light:#A0A0A0;
  --c-border:#222222;
  --c-orange:#E68900;
  --c-orange-hover:#FF9800;
  --c-terminal:#050505;
  --c-matrix:#4AE6C8;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--f-b);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
  overflow-x:clip;
  position:relative;
}
html[data-theme="light"] .np-page{
  --c-paper:#FAFAFA;
  --c-card:#FFFFFF;
  --c-ink:#1A1A1A;
  --c-ink-light:#666666;
  --c-border:#E5E5E5;
}

/* Reset specific to .np-page subtree (legacy from designer mockups) */
.np-page *{margin:0;padding:0;box-sizing:border-box}

/* Default container — pages may override locally to 1450px (tvorba-webu) */
.np-page .container{max-width:1320px;margin:0 auto;padding:0 40px}

/* ── 2. v2.4.1 — contrast-section inner-element fixes ──────────
   Sections that invert with theme (ai-sec / process-sec / case-4)
   need inner text to track --c-paper so it stays readable. */
.np-page .ai-sec .ai-list li,
.np-page .ai-sec .ai-list li.highlight,
.np-page .process-sec .p-step h3,
.np-page .process-sec .p-step p,
.np-page .process-sec .p-step *,
.np-page .ai-sec h2,
.np-page .ai-sec h3,
.np-page .ai-sec p,
.np-page .case-4,
.np-page .case-4 h3,
.np-page .case-4 p,
.np-page .case-4 .c-flow{color:var(--c-paper) !important}

/* Dark terminal inside light contrast block keeps its OWN colors */
.np-page .ai-sec .terminal,
.np-page .ai-sec .terminal *,
.np-page .ai-sec .terminal-wrap,
.np-page .ai-sec .terminal-wrap *,
.np-page .case-4 .terminal,
.np-page .case-4 .terminal *{color:#F0F0F0 !important}
.np-page .ai-sec .term-title,
.np-page .case-4 .term-title{color:#FFFFFF !important}
.np-page .ai-sec .terminal .type-line,
.np-page .case-4 .terminal .type-line{color:#4AE6C8 !important}
.np-page .ai-sec .terminal .l5{color:#FFFFFF !important}
.np-page .ai-sec .terminal .l6{color:var(--c-orange,#E68900) !important}
.np-page .ai-sec .term-desc,
.np-page .case-4 .term-desc{color:#A0A0A0 !important}

/* Dashboards keep hardcoded grays (work on fixed dark bg) */
.np-page .css-dash,.np-page .css-dash *,
.np-page .dash-table,.np-page .dash-table *,
.np-page .d-stat,.np-page .d-stat *{color:#F0F0F0 !important}
.np-page .d-url,.np-page .d-stat span,
.np-page .dt-row,.np-page .dt-row.header{color:#A0A0A0 !important}

/* ── 3. v2.4 — fixed-dark element text forcing ──────────────── */
.np-page .terminal-wrap,
.np-page .terminal-wrap *,
.np-page .terminal,
.np-page .terminal *,
.np-page .marquee-wrap,
.np-page .marquee-wrap *,
.np-page .p-step.active,
.np-page .p-step.active *,
.np-page .p-step:hover,
.np-page .p-step:hover *,
.np-page .eco-box:hover,
.np-page .eco-box:hover *,
.np-page .erp-card:hover,
.np-page .erp-card:hover *{color:#F0F0F0}
.np-page .term-title,
.np-page .terminal-wrap h3{color:#FFFFFF !important}
.np-page .term-desc{color:#A0A0A0 !important}
.np-page .terminal,
.np-page .terminal .type-line{color:#4AE6C8}
.np-page .terminal .l5{color:#FFFFFF !important}
.np-page .terminal .l6{color:var(--c-orange,#E68900) !important;font-weight:bold}

/* brutal-highlight with proper multi-line support */
.np-page .brutal-highlight{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ── 4. v2.5 — Mobile hardening (bulletproof) ──────────────── */
@media (max-width:640px){
  html .np-page,html .np-page *{max-width:100%}
  html .np-page h2,html .np-page h3,
  html .np-page .hero-title,html .np-page .sec-title,
  html .np-page .bento-card h3,html .np-page .b-card h3,
  html .np-page .term-title{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    hyphens:auto !important;
    -webkit-hyphens:auto !important;
    letter-spacing:0 !important;   /* Safari iOS clips glyphs on uppercase + negative LS */
    max-width:100% !important;
  }
  html .np-page .bento-card h3,
  html .np-page .b-card h3{
    font-size:1.05rem !important;
    line-height:1.2 !important;
  }
  html .np-page .bento-card,
  html .np-page .b-card,
  html .np-page .eco-box,
  html .np-page .erp-card{
    padding:22px 18px !important;
    clip-path:none !important;     /* clip-path + overflow = text clipping */
  }
  html .np-page .hero-title{
    font-size:clamp(1.6rem,7vw,2.2rem) !important;
    letter-spacing:-0.01em !important;
    line-height:1.08 !important;
  }
  html .np-page .sec-title{
    font-size:clamp(1.5rem,6.5vw,2rem) !important;
    line-height:1.12 !important;
  }
  html .np-page .hero{
    padding:calc(var(--header-h, 65px) + 24px) 0 40px !important;
    gap:28px !important;
  }
  html .np-page .brutal-highlight{
    white-space:normal !important;
    display:inline !important;
    background:linear-gradient(transparent 72%,var(--c-orange,#E68900) 72%,var(--c-orange,#E68900) 92%,transparent 92%) !important;
    padding:0 2px !important;
    -webkit-box-decoration-break:clone !important;
    box-decoration-break:clone !important;
  }
  html .np-page .brutal-highlight::after{display:none !important}
  html .np-page .brutal-label{
    transform:none !important;
    clip-path:none !important;
    padding:2px 10px !important;
    box-shadow:3px 3px 0 var(--c-orange,#E68900) !important;
    white-space:normal !important;
  }
  /* Terminal/dash — compact, no scale transforms */
  html .np-page .terminal-wrap{padding:20px 16px !important}
  html .np-page .terminal{padding:14px !important;font-size:.7rem !important}
  html .np-page .term-title{font-size:1.3rem !important}
  html .np-page .dash-table,
  html .np-page .css-dash{transform:none !important;padding:16px !important}
  /* Final safety: clip stray horizontal scroll from ::before/::after */
  html .np-page{overflow-x:clip}
}

/* Stack hero columns on mobile (common pattern across pages) */
@media (max-width:640px){
  html .np-page .hero-row,
  html .np-page .pipeline-wrap{
    display:block !important;
    grid-template-columns:1fr !important;
    grid-template-areas:none !important;
  }
  html .np-page .hero-row > *{width:100%;margin-bottom:28px}
  html .np-page .hero-row > *:last-child{margin-bottom:0}
}

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 — Eyebrow H1 SEO contract (Session 3, Stage 4.0 micro-patch)
   <h1 class="hero-eyebrow"> — мелкий оранжевый kicker (SEO).
   <div class="hero-title-display"> / <div class="hero-title"> — креативный hero.
   Защитный слой: повышенная специфичность (html .np-page .hero-eyebrow = 0,0,1,2)
   побеждает любые .np-page h1 правила без !important.
   ────────────────────────────────────────────────────────────────────────── */
html .np-page .hero-eyebrow{
  font-family:var(--f-m,'JetBrains Mono',monospace);
  font-size:clamp(0.7rem,2.4vw,0.75rem);
  font-weight:700;
  color:var(--c-brand,#FF9800);
  text-transform:uppercase;
  letter-spacing:0.15em;
  line-height:1.4;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  -webkit-hyphens:none;
  max-width:100%;
}
@media (max-width:640px){
  html .np-page .hero-eyebrow{
    font-size:0.65rem;
    margin-bottom:18px;
    letter-spacing:0.12em;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 — Reading rhythm (Stage 4: prevent stuck section transitions)
   .np-page * { margin:0 } reset убил default <p>/<ul>/<ol> margin.
   Восстанавливаем минимальный rhythm + обнуляем у :last-child чтобы
   секции не накапливали 24px дополнительного зазора на стыке.
   ────────────────────────────────────────────────────────────────────────── */
.np-page p,
.np-page ul,
.np-page ol,
.np-page blockquote{ margin-bottom: 1em; }

.np-page p:last-child,
.np-page ul:last-child,
.np-page ol:last-child,
.np-page blockquote:last-child,
.np-page > section > :last-child,
.np-page > header > :last-child{ margin-bottom: 0 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 — Section padding scale (Stage 4: unified vertical rhythm)
   Replaces 20+ inline overrides with single source of truth.
   Mobile / Tablet / Desktop = 60 / 80 / 120 px vertical.
   ────────────────────────────────────────────────────────────────────────── */
.np-page section{ padding: 120px 0; }
@media (max-width: 1024px){
  .np-page section{ padding: 80px 0; }
}
@media (max-width: 640px){
  .np-page section{ padding: 60px 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   v2.6 — Hero clearance (header-h unified)
   First section/header inside .np-page needs extra top padding for fixed nav.
   tokens.css defines --header-h: 65px (the actual header height).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .np-page > header.hero,
  .np-page > section:first-of-type{
    padding-top: calc(var(--header-h, 65px) + 32px);
  }
}